// Copyright (c) 2014, 2019, Oracle and/or its affiliates. The Universal Permissive License (UPL), Version 1.0 /*----------------------------------------------------------------------------- /* Variable Naming Conventions /* /* JET variable names are kebab case and use the structure /* --[component-name]-[element]-[property]-[State]. /* /* - widget: /* usually this is the component or pattern name, /* for example 'oj-data-grid'. /* - element (optional): /* usually this is a subsection of the component, /* for example 'cell' or 'header'. /* - property: /* for example 'bg-color', 'border-color', 'text-color', etc. /* - state (optional): /* for example 'hover', 'active', 'selected', 'disabled', etc. /* /* /* This gives you variable names like --oj-slider-thumb-width, /* --oj-button-bg-color-hover, --oj-tree-node-border-color-selected, etc. /*-----------------------------------------------------------------------------*/ :root { /*----------------------------------------------------------------------------- /* PALETTE VARIABLES: /* the color palette for the application. These variables /* are not used directly in the widget files, rather they are referred to by /* other variables. /* BRANDING RAMP: /* a progressive set of colors generated by tinting /* (mixture of a color with white) and shading /* (mixture of a color with black) a primary brand color (--oj-brand-color). /* In the Oracle look and feel the branding colors are blue. /* NEUTRAL RAMP: /* A progressive set of neutral colors based on the same /* hue (--oj-neutral-hue) and saturation (--oj-neutral-saturation), /* but varied levels of lightness. In the Oracle look and /* feel the neutral colors are gray. /* TEXT RAMP: /* A progressive set of text colors based on the same /* hsl value (--oj-text-color-base-hsl), /* but varied levels of opacity. In the Oracle look and /* feel the text colors are gray. /* ACCENT COLORS: /* A set of accent or special colors for things like /* data visializations, errors, warnings, etc /*-----------------------------------------------------------------------------*/ /* brand palette, see the 'PALETTE VARIABLES' doc above for more info */ --oj-brand-color-light-5: TBD; --oj-brand-color-light-4: TBD; --oj-brand-color-light-3: TBD; --oj-brand-color-light-2: TBD; --oj-brand-color-light-1: TBD; --oj-brand-color: TBD; --oj-brand-color-dark-1: TBD; --oj-brand-color-dark-2: TBD; /* neutral palette, see the 'PALETTE VARIABLES' doc above for more info */ --oj-neutral-hue: TBD; --oj-neutral-saturation: TBD; --oj-neutral-color-1: TBD; --oj-neutral-color-2: TBD; --oj-neutral-color-3: TBD; --oj-neutral-color-4: TBD; --oj-neutral-color-5: TBD; --oj-neutral-color-6: TBD; --oj-neutral-color-7: TBD; --oj-neutral-color-8: TBD; --oj-neutral-color-9: TBD; --oj-neutral-color-10: TBD; --oj-neutral-color-11: TBD; --oj-neutral-color-12: TBD; --oj-neutral-color-13: TBD; --oj-neutral-color-14: TBD; --oj-neutral-color-15: TBD; --oj-neutral-color-16: TBD; --oj-neutral-color-17: TBD; /* text palette , see the 'PALETTE VARIABLES' doc above for more info*/ --oj-text-color-base-hsl: TBD; --oj-text-color-1: TBD; --oj-text-color-2: TBD; --oj-text-color-3: TBD; --oj-text-color-4: TBD; --oj-text-color-5: TBD; --oj-text-color-6: TBD; --oj-text-color-7: TBD; /* accent palette, see the 'PALETTE VARIABLES' doc above for more info */ --oj-accent-color-highlight-1: TBD; --oj-accent-color-highlight-2: TBD; --oj-accent-color-danger-1: TBD; --oj-accent-color-danger-2: TBD; --oj-accent-color-danger-3: TBD; --oj-accent-color-danger-4: TBD; --oj-accent-color-danger-5: TBD; --oj-accent-color-attention-1: TBD; --oj-accent-color-attention-2: TBD; --oj-accent-color-attention-3: TBD; --oj-accent-color-attention-4: TBD; --oj-accent-color-attention-5: TBD; --oj-accent-color-info-1: TBD; --oj-accent-color-info-2: TBD; --oj-accent-color-info-3: TBD; --oj-accent-color-info-4: TBD; --oj-accent-color-info-5: TBD; --oj-accent-color-confirmation-1: TBD; --oj-accent-color-confirmation-2: TBD; --oj-accent-color-confirmation-3: TBD; --oj-accent-color-confirmation-4: TBD; --oj-accent-color-confirmation-5: TBD; --oj-accent-color-dvt-1: TBD; --oj-accent-color-dvt-2: TBD; --oj-accent-color-dvt-3: TBD; --oj-accent-color-dvt-4: TBD; --oj-accent-color-dvt-5: TBD; --oj-accent-color-dvt-6: TBD; --oj-accent-color-dvt-7: TBD; --oj-accent-color-dvt-8: TBD; --oj-accent-color-dvt-9: TBD; --oj-accent-color-dvt-10: TBD; --oj-accent-color-dvt-11: TBD; --oj-accent-color-dvt-12: TBD; /* font and text */ /* -------------------------- */ /*-----------------------------------------------------------------------------*/ /* To target popular system fonts consider using the following for $fontFamily /* system, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif /* /* An informative article (with even more system fonts) /* https:/*www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/ /* Discussion of more abstract way of declaring the system font /* https:/*lists.w3.org/Archives/Public/www-style/2015Jul/0169.html /* /* Details: /* * -apple-system /* targets San Francisco on Mac and ios systems that support it. /* https:/*webkit.org/blog/3709/using-the-system-font-in-web-content/ /* http:/*furbo.org/2015/07/09/i-left-my-system-fonts-in-san-francisco/ /* * BlinkMacSystemFont /* targets San Francisco for Chrome on Mac OS X. /* * Segoe UI /* targets Windows and Windows Phone. /* * Helvetica Neue /* targets iOS pre-iOS9 and Mac OS X pre-El Capitan. /* * Arial /* targets Roboto on Android /* https:/*android.googlesource.com/platform/frameworks/base/+/master/data/fonts/fonts.xml /* https:/*developer.android.com/about/versions/android-4.1.html (look for 'font') /* * sans-serif /* is the default sans-serif fallback font. /*-----------------------------------------------------------------------------*/ --oj-font-family: TBD; /* $rootFontSize is only used on the html element /* in order to support using rem units. /* /* If you have $allowTagSelectors set to false you can /* use the class oj-html to get the JET html tag styling. /* If you are not generating classes for the html element in JET /* you can still use rem's if you can set the font size on /* the html element with your own class or inline style. /* /* The browser default font size is 16px */ --oj-root-font-size: TBD; --oj-font-size: TBD; --oj-font-size-sm: TBD; --oj-font-size-xs: TBD; /* default text color */ --oj-text-color: TBD; /* color used for primary information, /* this usually either darker or the same color as --oj-text-color */ --oj-primary-text-color: TBD; --oj-secondary-text-color: TBD; --oj-tertiary-text-color: TBD; --oj-text-color-disabled: TBD; --oj-contrast-text-color: TBD; /* headers */ /* -------------------------- */ --oj-header-1-font-size: TBD; --oj-header-2-font-size: TBD; --oj-header-3-font-size: TBD; --oj-header-4-font-size: TBD; --oj-header-5-font-size: TBD; --oj-header-1-font-weight: TBD; --oj-header-2-font-weight: TBD; --oj-header-3-font-weight: TBD; --oj-header-4-font-weight: TBD; --oj-header-5-font-weight: TBD; --oj-header-text-color: TBD; --oj-header-border-color: TBD; /* link */ /* -------------------------- */ --oj-link-text-decoration: TBD; --oj-link-text-decoration-hover: TBD; --oj-link-font-weight-active: TBD; --oj-link-bg-color-active: TBD; --oj-link-text-color: TBD; --oj-link-text-color-active: TBD; --oj-link-text-color-visited: TBD; /* note that --oj-opacity-disabled is /* used for a disabled link in addition to color */ --oj-link-text-color-disabled: TBD; /* icon */ /* -------------------------- */ --oj-icon-color: TBD; /* colors below used for clickable icons */ --oj-icon-color-default: TBD; --oj-icon-color-hover: TBD; --oj-icon-color-active: TBD; --oj-icon-color-selected: TBD; --oj-icon-color-disabled: TBD; /* drag and drop */ /* -------------------------- */ --oj-drop-target-color-1: TBD; --oj-drop-target-color-2: TBD; /* border-radius */ /* -------------------------- */ --oj-border-radius-sm: TBD; --oj-border-radius-md: TBD; --oj-border-radius-lg: TBD; /* spacing */ /* -------------------------- */ --oj-spacing-1x: TBD; --oj-spacing-2x: TBD; --oj-spacing-3x: TBD; --oj-spacing-4x: TBD; /* box shadow */ /* -------------------------- */ --oj-box-shadow-hsl: TBD; --oj-box-shadow-sm: TBD; --oj-box-shadow-md: TBD; --oj-box-shadow-lg: TBD; /* overlay */ /* -------------------------- */ /* this is used for something like a modal dialog to overlay the /* rest of the screen, indicating it's not reachable */ --oj-overlay-bg-color: TBD; --oj-overlay-opacity: TBD; /* disabled opacity */ /* -------------------------- */ --oj-opacity-disabled: TBD; /* wrapping */ /* -------------------------- */ --oj-wrappable-margin-bottom: TBD; /* animation */ /* -------------------------- */ --oj-animation-duration-short: TBD; --oj-animation-duration-medium: TBD; --oj-animation-duration-long: TBD; --oj-animation-effect-ripple-bg-color: TBD; /* z-index */ /* -------------------------- */ --oj-default-zindex: TBD; --oj-app-layout-fixed-zindex: TBD; --oj-offcanvas-zindex: TBD; --oj-resizable-zindex: TBD; --oj-popup-zindex: TBD; --oj-popup-tail-zindex: TBD; --oj-dialog-zindex: TBD; --oj-messages-zindex: TBD; /* body */ /* -------------------------- */ --oj-body-bg-image: TBD; --oj-body-bg-color: TBD; --oj-body-text-color: TBD; --oj-body-touch-action: TBD; /* button */ /* -------------------------- */ --oj-button-border-radius: TBD; --oj-button-cursor: TBD; --oj-button-font-weight: TBD; --oj-button-height: TBD; --oj-button-sm-height: TBD; --oj-button-lg-height: TBD; --oj-button-xl-height: TBD; --oj-button-font-size: TBD; --oj-button-sm-font-size: TBD; --oj-button-lg-font-size: TBD; --oj-button-xl-font-size: TBD; --oj-button-text-to-edge-padding: TBD; --oj-button-sm-text-to-edge-padding: TBD; --oj-button-lg-text-to-edge-padding: TBD; --oj-button-xl-text-to-edge-padding: TBD; --oj-button-icon-to-text-padding: TBD; --oj-button-sm-icon-to-text-padding: TBD; --oj-button-lg-icon-to-text-padding: TBD; --oj-button-xl-icon-to-text-padding: TBD; --oj-button-icon-to-edge-padding: TBD; --oj-button-sm-icon-to-edge-padding: TBD; --oj-button-lg-icon-to-edge-padding: TBD; --oj-button-xl-icon-to-edge-padding: TBD; --oj-button-icon-only-padding: TBD; --oj-button-sm-icon-only-padding: TBD; --oj-button-lg-icon-only-padding: TBD; --oj-button-xl-icon-only-padding: TBD; /* enabled */ --oj-button-bg-color: TBD; --oj-button-border-color: TBD; --oj-button-text-color: TBD; --oj-button-icon-color: TBD; --oj-button-bg-image: TBD; --oj-button-box-shadow: TBD; --oj-button-text-shadow: TBD; /* hover */ --oj-button-bg-color-hover: TBD; --oj-button-border-color-hover: TBD; --oj-button-text-color-hover: TBD; --oj-button-icon-color-hover: TBD; --oj-button-bg-image-hover: TBD; --oj-button-box-shadow-hover: TBD; --oj-button-text-shadow-hover: TBD; /* active */ --oj-button-bg-color-active: TBD; --oj-button-border-color-active: TBD; --oj-button-text-color-active: TBD; --oj-button-icon-color-active: TBD; --oj-button-bg-image-active: TBD; --oj-button-box-shadow-active: TBD; --oj-button-text-shadow-active: TBD; --oj-button-opacity-active: TBD; /* selected */ --oj-button-bg-color-selected: TBD; --oj-button-border-color-selected: TBD; --oj-button-text-color-selected: TBD; --oj-button-icon-color-selected: TBD; --oj-button-bg-image-selected: TBD; --oj-button-box-shadow-selected: TBD; --oj-button-text-shadow-selected: TBD; /* selected hover */ --oj-button-text-color-selected-hover: TBD; --oj-button-icon-color-selected-hover: TBD; --oj-button-bg-color-selected-hover: TBD; --oj-button-border-color-selected-hover: TBD; /* disabled */ --oj-button-bg-color-disabled: TBD; --oj-button-border-color-disabled: TBD; --oj-button-text-color-disabled: TBD; --oj-button-icon-color-disabled: TBD; --oj-button-box-shadow-disabled: TBD; --oj-button-opacity-disabled: TBD; /* selected disabled */ --oj-button-bg-color-selected-disabled: TBD; --oj-button-border-color-selected-disabled: TBD; --oj-button-text-color-selected-disabled: TBD; --oj-button-icon-color-selected-disabled: TBD; /* half-chrome enabled */ --oj-button-half-chrome-font-weight: TBD; --oj-button-half-chrome-text-color: TBD; --oj-button-half-chrome-icon-color: TBD; /* half chrome hover */ --oj-button-half-chrome-bg-color-hover: TBD; --oj-button-half-chrome-border-color-hover: TBD; --oj-button-half-chrome-text-color-hover: TBD; --oj-button-half-chrome-icon-color-hover: TBD; /* half chrome-active */ --oj-button-half-chrome-bg-color-active: TBD; --oj-button-half-chrome-border-color-active: TBD; --oj-button-half-chrome-text-color-active: TBD; --oj-button-half-chrome-icon-color-active: TBD; --oj-button-half-chrome-opacity-active: TBD; /* half-chrome-selected */ --oj-button-half-chrome-bg-color-selected: TBD; --oj-button-half-chrome-border-color-selected: TBD; --oj-button-half-chrome-text-color-selected: TBD; --oj-button-half-chrome-icon-color-selected: TBD; /* half chrome selected hover */ --oj-button-half-chrome-bg-color-selected-hover: TBD; --oj-button-half-chrome-border-color-selected-hover: TBD; --oj-button-half-chrome-text-color-selected-hover: TBD; --oj-button-half-chrome-icon-color-selected-hover: TBD; /* half chrome disabled */ --oj-button-half-chrome-text-color-disabled: TBD; --oj-button-half-chrome-icon-color-disabled: TBD; --oj-button-half-chrome-opacity-disabled: TBD; /* half chrome selected disabled */ --oj-button-half-chrome-bg-color-selected-disabled: TBD; --oj-button-half-chrome-border-color-selected-disabled: TBD; --oj-button-half-chrome-text-color-selected-disabled: TBD; --oj-button-half-chrome-icon-color-selected-disabled: TBD; /* outlined */ --oj-button-outlined-chrome-font-weight: TBD; /* outlined enabled */ --oj-button-outlined-chrome-border-color: TBD; --oj-button-outlined-chrome-text-color: TBD; --oj-button-outlined-chrome-icon-color: TBD; /* outlined hover */ --oj-button-outlined-chrome-bg-color-hover: TBD; --oj-button-outlined-chrome-border-color-hover: TBD; --oj-button-outlined-chrome-text-color-hover: TBD; --oj-button-outlined-chrome-icon-color-hover: TBD; /* outlined active */ --oj-button-outlined-chrome-bg-color-active: TBD; --oj-button-outlined-chrome-border-color-active: TBD; --oj-button-outlined-chrome-text-color-active: TBD; --oj-button-outlined-chrome-icon-color-active: TBD; --oj-button-outlined-chrome-opacity-active: TBD; /* outlined selected */ --oj-button-outlined-chrome-bg-color-selected: TBD; --oj-button-outlined-chrome-border-color-selected: TBD; --oj-button-outlined-chrome-text-color-selected: TBD; --oj-button-outlined-chrome-icon-color-selected: TBD; /* outlined selected hover */ --oj-button-outlined-chrome-bg-color-selected-hover: TBD; --oj-button-outlined-chrome-border-color-selected-hover: TBD; --oj-button-outlined-chrome-text-color-selected-hover: TBD; --oj-button-outlined-chrome-icon-color-selected-hover: TBD; /* outlined disabled */ --oj-button-outlined-chrome-border-color-disabled: TBD; --oj-button-outlined-chrome-text-color-disabled: TBD; --oj-button-outlined-chrome-icon-color-disabled: TBD; --oj-button-outlined-chrome-opacity-disabled: TBD; /* outlined selected disabled */ --oj-button-outlined-chrome-bg-color-selected-disabled: TBD; --oj-button-outlined-chrome-border-color-selected-disabled: TBD; --oj-button-outlined-chrome-text-color-selected-disabled: TBD; --oj-button-outlined-chrome-icon-color-selected-disabled: TBD; --oj-button-primary-color: TBD; --oj-button-confirm-color: TBD; /* buttonset */ /* ----------------------------- */ --oj-buttonset-border-radius: TBD; --oj-buttonset-equal-width-overall-width: TBD; --oj-buttonset-internal-border-color: TBD; --oj-buttonset-internal-border-color-active: TBD; --oj-buttonset-internal-border-color-selected: TBD; --oj-buttonset-internal-border-color-selected-disabled: TBD; --oj-buttonset-outlined-chrome-internal-border-color: TBD; --oj-buttonset-outlined-chrome-internal-border-color-active: TBD; --oj-buttonset-outlined-chrome-internal-border-color-selected: TBD; --oj-buttonset-outlined-chrome-internal-border-color-selected-disabled: TBD; --oj-buttonset-full-chrome-overall-width: TBD; --oj-buttonset-full-chrome-flex: TBD; --oj-buttonset-half-chrome-overall-width: TBD; --oj-buttonset-half-chrome-flex: TBD; --oj-buttonset-outlined-chrome-overall-width: TBD; --oj-buttonset-outlined-chrome-flex: TBD; /* Inputdatetime */ /*-----------------*/ --oj-date-time-picker-width: TBD; --oj-date-time-picker-padding: TBD; --oj-date-time-picker-switcher-bg-color: TBD; --oj-date-time-picker-switcher-padding: TBD; /* --oj-date-time-picker-dropdown-threshold-padding: TBD; */ --oj-datepicker-bg-color-selected: TBD; --oj-datepicker-text-color-selected: TBD; --oj-datepicker-border-color-today: TBD; --oj-datepicker-bg-color-today: TBD; --oj-datepicker-bg-color-hover: TBD; --oj-datepicker-text-color-hover: TBD; --oj-datepicker-border-color-focus: TBD; --oj-datepicker-header-text-color: TBD; --oj-datepicker-button-text-color: TBD; --oj-datepicker-button-text-color-hover: TBD; --oj-datepicker-button-text-color-active: TBD; --oj-datepicker-week-of-year-header-bg-color: TBD; --oj-datepicker-week-of-year-cell-bg-color: TBD; --oj-timepicker-item-bg-color-focus: TBD; --oj-timepicker-text-color: TBD; --oj-timepicker-text-color-hover: TBD; --oj-timepicker-text-color-active: TBD; /* Label */ /* -------------------------- */ --oj-form-control-label-color: TBD; --oj-form-control-label-font-size: TBD; --oj-form-control-label-font-weight: TBD; --oj-form-control-label-required-char: TBD; --oj-form-control-label-required-char-font-size: TBD; --oj-form-control-label-required-icon-color: TBD; --oj-form-control-label-required-icon-background-color: TBD; --oj-form-control-label-required-icon-border-radius: TBD; --oj-form-control-label-required-icon-height: TBD; --oj-form-control-label-required-icon-width: TBD; --oj-form-control-label-margin-bottom: TBD; --oj-form-control-inline-gutter: TBD; --oj-form-control-inline-margin-top: TBD; /* Form Controls */ /* -------------------------- */ --oj-form-control-lg-max-width: TBD; --oj-form-control-md-max-width: TBD; --oj-form-control-min-width: TBD; --oj-form-control-border-radius: TBD; --oj-form-control-border-top-width: TBD; --oj-form-control-border-right-width: TBD; --oj-form-control-border-bottom-width: TBD; --oj-form-control-border-left-width: TBD; --oj-form-control-padding-horizontal: TBD; --oj-form-control-text-align: TBD; --oj-form-control-text-align-rtl: TBD; --oj-form-control-input-font-size: TBD; --oj-form-control-input-font-size-adjust: TBD; --oj-form-control-trigger-height: TBD; --oj-form-control-trigger-font-size: TBD; --oj-form-control-trigger-font-size-adjust: TBD; /* messaging */ --oj-form-control-messaging-border-top-width: TBD; --oj-form-control-messaging-border-right-width: TBD; --oj-form-control-messaging-border-bottom-width: TBD; --oj-form-control-messaging-border-left-width: TBD; --oj-form-control-border-color-invalid: TBD; --oj-form-control-border-color-warning: TBD; /* enabled */ --oj-form-control-bg-color: TBD; --oj-form-control-border-color: TBD; --oj-form-control-placeholder-color: TBD; --oj-form-control-placeholder-font-style: TBD; --oj-form-control-input-value-color: TBD; --oj-form-control-trigger-value-color: TBD; /* active */ --oj-form-control-trigger-bg-color-active: TBD; /* disabled */ --oj-form-control-bg-color-disabled: TBD; --oj-form-control-border-color-disabled: TBD; --oj-form-control-value-color-disabled: TBD; --oj-form-control-opacity-disabled: TBD; --oj-form-control-input-border-style-disabled: TBD; /* readonly */ --oj-form-control-value-color-read-only: TBD; --oj-form-control-font-size-read-only: TBD; --oj-form-control-font-weight-read-only: TBD; /* focus */ --oj-form-control-input-border-color-focus: TBD; --oj-form-control-input-border-top-width-focus: TBD; --oj-form-control-input-border-right-width-focus: TBD; --oj-form-control-input-border-bottom-width-focus: TBD; --oj-form-control-input-border-left-width-focus: TBD; /* Form Layout */ /* -------------------------- */ --oj-form-layout-border-color: TBD; --oj-form-layout-border-width: TBD; --oj-form-layout-divider-color: TBD; --oj-form-layout-divider-width: TBD; --oj-form-layout-divider-margin: TBD; --oj-form-layout-labels-inline-column-width: TBD; --oj-form-layout-labels-inline-column-gap: TBD; --oj-form-layout-column-width: TBD; --oj-form-layout-column-gap: TBD; --oj-form-layout-margin-bottom: TBD; --oj-form-layout-field-inline-justify-content: TBD; --oj-form-layout-label-inline-margin-top: TBD; --oj-form-layout-label-inline-radio-checkbox-margin-top: TBD; --oj-form-layout-label-inline-text-align: TBD; --oj-form-layout-label-inline-text-align-rtl: TBD; --oj-form-layout-field-inline-text-align: TBD; --oj-form-layout-field-inline-text-align-rtl: TBD; --oj-form-layout-label-inline-gutter-padding: TBD; /* Input Number */ /* -------------------------- */ /* when a button-margin is given, then the border is on the input, so we need to specify the */ /* border and radius that goes between the input and the buttons (input-to-button-border-*) */ /* We also need to specify the width and radius for the increment and decrement buttons: */ /* button-border-width (+focus+messaging) and the button-border-radius. These would typically */ /* refer to the associated button variables so we have a consistent UI. */ --oj-input-number-input-to-button-margin: TBD; --oj-input-number-input-to-button-border-width: TBD; --oj-input-number-input-to-button-border-width-focus: TBD; --oj-input-number-input-to-button-messaging-border-width: TBD; --oj-input-number-input-to-button-border-radius: TBD; --oj-input-number-button-width: TBD; --oj-input-number-button-border-radius: TBD; --oj-input-number-button-border-width: TBD; --oj-input-number-buttonset-border-width: TBD; --oj-input-number-buttonset-border-width-focus: TBD; --oj-input-number-buttonset-messaging-border-width: TBD; /* Listbox */ /* -------------------------- */ --oj-listbox-item-padding: TBD; --oj-listbox-indent-width: TBD; --oj-listbox-bg-color-focus: TBD; --oj-listbox-message-text-color: TBD; /* Menu */ /* -------------------------- */ --oj-menu-bg-color: TBD; --oj-menu-border-color: TBD; --oj-menu-padding: TBD; --oj-menu-border-width: TBD; --oj-menu-border-radius: TBD; --oj-menu-font-size: TBD; --oj-menu-box-shadow: TBD; --oj-menu-submenu-box-shadow: TBD; --oj-menu-icon-size: TBD; --oj-menu-icon-to-edge-padding: TBD; --oj-menu-text-to-icon-padding: TBD; --oj-menu-text-to-edge-padding: TBD; --oj-menu-submenu-icon-padding: TBD; --oj-menu-text-only-text-align: TBD; --oj-menu-divider-margin: TBD; --oj-menu-divider-border-color: TBD; --oj-menu-divider-border-width: TBD; /* menu item */ --oj-menu-item-line-height: TBD; --oj-menu-item-text-color: TBD; --oj-menu-item-border-color: TBD; --oj-menu-item-border-width: TBD; --oj-menu-item-bg-color-focus: TBD; --oj-menu-item-border-color-focus: TBD; --oj-menu-item-text-color-disabled: TBD; --oj-menu-item-last-border-width: TBD; --oj-menu-icon-color: TBD; --oj-menu-icon-color-disabled: TBD; --oj-menu-icon-opacity-disabled: TBD; --oj-menu-submenu-icon-color: TBD; /* menu sheet */ /* on smaller screens the menu displays as a sheet, aka 'action sheet', /* see the doc for open-options.display in the menu doc */ --oj-menu-sheet-bg-color: TBD; --oj-menu-sheet-border-radius: TBD; --oj-menu-sheet-font-size: TBD; --oj-menu-sheet-margin-horizontal: TBD; --oj-menu-sheet-divider-border-color: TBD; --oj-menu-sheet-divider-border-width: TBD; /* menu sheet item */ --oj-menu-sheet-item-line-height: TBD; --oj-menu-sheet-item-group-border-radius: TBD; --oj-menu-sheet-item-cancel-font-weight: TBD; --oj-menu-sheet-item-text-color: TBD; --oj-menu-sheet-item-bg-color: TBD; --oj-menu-sheet-item-border-color: TBD; --oj-menu-sheet-item-border-width: TBD; --oj-menu-sheet-item-bg-color-focus: TBD; --oj-menu-sheet-item-border-color-focus: TBD; --oj-menu-sheet-item-text-color-disabled: TBD; /* Popup */ /* -------------------------- */ --oj-popup-border-width: TBD; --oj-popup-border-color: TBD; --oj-popup-bg-color: TBD; --oj-popup-border-radius: TBD; --oj-popup-box-shadow: TBD; --oj-popup-content-padding: TBD; --oj-popup-tail-border-color: TBD; --oj-popup-tail-border-width: TBD; --oj-popup-tail-bg-color: TBD; --oj-popup-tail-box-shadow: TBD; --oj-popup-tail-simple-height: TBD; --oj-popup-tail-simple-width: TBD; /* Messages------------------ */ /* -------------------------- */ /* The following variables apply to the oj-messages parent that has display type set to 'general' with position specified. */ /* Note that in case of smaller screen width (< 768px wide) the messages container stretches full width, and in this case the following *-width/*-max-width/*-min-width variables do not take effect. */ --oj-messages-general-overlay-width: TBD; --oj-messages-general-overlay-max-width: TBD; --oj-messages-general-overlay-min-width: TBD; --oj-messages-general-overlay-border-width: TBD; --oj-messages-general-overlay-border-color: TBD; --oj-messages-general-overlay-border-radius: TBD; --oj-messages-general-overlay-box-shadow: TBD; /* The following variables apply to the oj-messages parent that has display type set to 'notification' with position specified. */ --oj-messages-notification-overlay-width: TBD; --oj-messages-notification-overlay-min-width: TBD; --oj-messages-notification-overlay-max-width: TBD; --oj-messages-notification-overlay-border-width: TBD; --oj-messages-notification-overlay-border-color: TBD; --oj-messages-notification-overlay-border-radius: TBD; --oj-messages-notification-overlay-box-shadow: TBD; /* Message------------------- */ /* -------------------------- */ /* The following variables apply to individual oj-message regardless of the display type and position of its oj-message parent. */ --oj-message-header-height: TBD; --oj-message-category-text-color: TBD; --oj-message-category-font-size: TBD; --oj-message-summary-font-weight: TBD; --oj-message-summary-text-color: TBD; --oj-message-summary-font-size: TBD; --oj-message-summary-line-height: TBD; --oj-message-detail-text-color: TBD; --oj-message-detail-font-size: TBD; --oj-message-detail-line-height: TBD; --oj-message-time-text-color: TBD; --oj-message-time-font-size: TBD; /* '--oj-message-close-icon-display' specifies if close icon should be displayed. Valid values are 'none' and 'block'. */ --oj-message-close-icon-display: TBD; /* '--oj-message-auto-timeout-close-icon-display' specifies if close icon should be displayed when the message is set to auto-timeout. This variable takes precedence over '--oj-message-close-icon-display'. Valid values are 'none' and 'block'. */ --oj-message-auto-timeout-close-icon-display: none; /* The following variables apply to individual oj-message when its oj-messages parent does not have position specified (general inline layout). */ --oj-message-general-inline-border-width: TBD; --oj-message-general-inline-border-color: TBD; /* The following variables apply to the messages displayed inline to form components. */ --oj-message-component-inline-bg-color-error: TBD; --oj-message-component-inline-border-color-error: TBD; --oj-message-component-inline-bg-color-warning: TBD; --oj-message-component-inline-border-color-warning: TBD; --oj-message-component-inline-bg-color-info: TBD; --oj-message-component-inline-border-color-info: TBD; --oj-message-component-inline-bg-color-confirmation: TBD; --oj-message-component-inline-border-color-confirmation: TBD; --oj-message-component-inline-margin-top: TBD; --oj-message-component-inline-border-top-width: TBD; --oj-message-component-inline-border-radius: TBD; --oj-message-radiocheckbox-inline-margin-top: TBD; --oj-message-radiocheckbox-inline-border-top-width: TBD; /* The following variables apply to individual oj-message when its oj-messages parent has display type set to 'general' with position specified. */ --oj-message-general-overlay-border-width: TBD; --oj-message-general-overlay-border-color: TBD; --oj-message-general-overlay-border-radius: TBD; --oj-message-general-overlay-box-shadow: TBD; --oj-message-general-overlay-header-bg-color: TBD; --oj-message-general-overlay-body-bg-color: TBD; /* '--oj-message-general-overlay-separator-margin' specifies margin used for separating / spacing between two successive message boxes. */ --oj-message-general-overlay-separator-margin: TBD; /* The following variables apply on individual oj-message when its oj-messages parent has display type set to 'notification' with position specified. */ --oj-message-notification-overlay-header-bg-color: TBD; --oj-message-notification-overlay-body-bg-color: TBD; --oj-message-notification-overlay-border-width: TBD; --oj-message-notification-overlay-border-color: TBD; --oj-message-notification-overlay-border-radius: TBD; --oj-message-notification-overlay-box-shadow: TBD; /* '--oj-message-notification-overlay-separator-margin' specifies margin used for separating / spacing between two successive message boxes. */ --oj-message-notification-overlay-separator-margin: TBD; /* Navigation List */ /* -------------------------- */ --oj-navigation-list-category-divider-color: TBD; --oj-navigation-list-icon-only-icon-start-end-padding: TBD; --oj-navigation-list-horizontal-icon-margin: TBD; --oj-navigation-list-horizontal-font-size: TBD; --oj-navigation-list-icon-to-text-padding: TBD; --oj-navigation-list-horizontal-icon-to-text-padding: TBD; /* Navigation List Item level variables */ --oj-navigation-list-item-min-height: TBD; --oj-navigation-list-horizontal-item-min-height: TBD; --oj-navigation-list-item-label-text-wrap: TBD; --oj-navigation-list-item-border-width-top: TBD; --oj-navigation-list-item-border-width-right: TBD; --oj-navigation-list-item-border-width-bottom: TBD; --oj-navigation-list-item-border-width-left: TBD; --oj-navigation-list-item-start-end-padding: TBD; --oj-navigation-list-item-icon-only-border-width-top: TBD; --oj-navigation-list-item-icon-only-border-width-right: TBD; --oj-navigation-list-item-icon-only-border-width-bottom: TBD; --oj-navigation-list-item-icon-only-border-width-left: TBD; --oj-navigation-list-item-icon-only-margin: TBD; --oj-navigation-list-horizontal-item-icon-only-margin: TBD; --oj-navigation-list-horizontal-item-border-width: TBD; --oj-navigation-list-horizontal-item-padding: TBD; --oj-navigation-list-horizontal-item-stacked-min-height: TBD; --oj-navigation-list-horizontal-item-stacked-padding: TBD; /* default */ --oj-navigation-list-item-label-color-default: TBD; --oj-navigation-list-horizontal-item-label-color-default: TBD; --oj-navigation-list-item-icon-color-default: TBD; --oj-navigation-list-horizontal-item-icon-color-default: TBD; --oj-navigation-list-horizontal-item-divider-color: TBD; --oj-navigation-list-collapsible-icon-color-default: TBD; /* hover */ --oj-navigation-list-item-bg-color-hover: TBD; --oj-navigation-list-item-border-color-hover: TBD; --oj-navigation-list-item-icon-color-hover: TBD; --oj-navigation-list-item-icon-only-bg-color-hover: TBD; /* selected */ --oj-navigation-list-item-bg-color-selected: TBD; --oj-navigation-list-horizontal-item-bg-color-selected: TBD; --oj-navigation-list-item-border-color-selected: TBD; --oj-navigation-list-item-label-color-selected: TBD; --oj-navigation-list-horizontal-item-label-color-selected: TBD; --oj-navigation-list-item-icon-color-selected: TBD; --oj-navigation-list-horizontal-item-icon-color-selected: TBD; --oj-navigation-list-item-icon-only-bg-color-selected: TBD; --oj-navigation-list-icon-only-icon-color-selected: TBD; /* focus */ --oj-navigation-list-item-outline-color-focus: TBD; /* disabled */ --oj-navigation-list-item-label-color-disabled: TBD; --oj-navigation-list-icon-color-disabled: TBD; /* contrast default */ --oj-navigation-list-item-contrast-label-color-default: TBD; /* contrast hover */ --oj-navigation-list-item-contrast-bg-color-hover: TBD; --oj-navigation-list-item-contrast-label-color-hover: TBD; /* contrast selected */ --oj-navigation-list-item-contrast-bg-color-selected: TBD; --oj-navigation-list-horizontal-item-contrast-bg-color-selected: TBD; --oj-navigation-list-item-contrast-label-color-selected: TBD; --oj-navigation-list-horizontal-item-contrast-label-color-selected: TBD; /* contrast disabled */ --oj-navigation-list-item-contrast-label-color-disabled: TBD; /* Select */ /* -------------------------- */ --oj-select-arrow-padding-start: TBD; --oj-select-arrow-padding-end: TBD; --oj-select-arrow-color: TBD; /* Tab Bar */ /* -------------------------- */ --oj-tab-bar-category-divider-color: TBD; --oj-tab-bar-border-radius-top-left: TBD; --oj-tab-bar-border-radius-top-right: TBD; --oj-tab-bar-border-radius-bottom-left: TBD; --oj-tab-bar-border-radius-bottom-right: TBD; --oj-tab-bar-icon-only-icon-start-end-padding: TBD; --oj-tab-bar-icon-to-text-padding: TBD; --oj-tab-bar-horizontal-icon-to-text-padding: TBD; --oj-tab-bar-horizontal-icon-margin: TBD; /* Tab Bar Item level variables */ --oj-tab-bar-item-start-end-padding: TBD; --oj-tab-bar-item-label-text-wrap: TBD; --oj-tab-bar-item-truncated-label-min-width: TBD; --oj-tab-bar-item-icon-only-border-width-top: TBD; --oj-tab-bar-horizontal-item-icon-only-border-width-top: TBD; --oj-tab-bar-item-icon-only-border-width-right: TBD; --oj-tab-bar-horizontal-item-icon-only-border-width-right: TBD; --oj-tab-bar-item-icon-only-border-width-bottom: TBD; --oj-tab-bar-horizontal-item-icon-only-border-width-bottom: TBD; --oj-tab-bar-item-icon-only-border-width-left: TBD; --oj-tab-bar-horizontal-item-icon-only-border-width-left: TBD; --oj-tab-bar-item-icon-only-margin: TBD; --oj-tab-bar-horizontal-item-icon-only-margin: TBD; --oj-tab-bar-item-border-width-top: TBD; --oj-tab-bar-horizontal-item-border-width-top: TBD; --oj-tab-bar-item-border-width-right: TBD; --oj-tab-bar-horizontal-item-border-width-right: TBD; --oj-tab-bar-item-border-width-bottom: TBD; --oj-tab-bar-horizontal-item-border-width-bottom: TBD; --oj-tab-bar-item-border-width-left: TBD; --oj-tab-bar-horizontal-item-border-width-left: TBD; --oj-tab-bar-item-min-height: TBD; --oj-tab-bar-horizontal-item-min-height: TBD; --oj-tab-bar-horizontal-item-stacked-min-height: TBD; --oj-tab-bar-item-font-size: TBD; --oj-tab-bar-horizontal-item-font-size: TBD; --oj-tab-bar-horizontal-item-padding: TBD; --oj-tab-bar-horizontal-item-stacked-padding: TBD; /* default */ --oj-tab-bar-item-border-color: TBD; --oj-tab-bar-horizontal-item-border-color: TBD; --oj-tab-bar-item-icon-color-default: TBD; --oj-tab-bar-item-label-color-default: TBD; --oj-tab-bar-item-divider-color: TBD; --oj-tab-bar-horizontal-item-divider-color: TBD; /* hover */ --oj-tab-bar-item-label-color-hover: TBD; --oj-tab-bar-horizontal-item-label-color-hover: TBD; --oj-tab-bar-item-bg-color-hover: TBD; --oj-tab-bar-item-border-color-hover: TBD; --oj-tab-bar-horizontal-item-border-color-hover: TBD; --oj-tab-bar-item-icon-only-bg-color-hover: TBD; --oj-tab-bar-item-icon-color-hover: TBD; /* active */ --oj-tab-bar-item-bg-color-active: TBD; --oj-tab-bar-item-border-color-active: TBD; /* selected */ --oj-tab-bar-item-font-weight-selected: TBD; --oj-tab-bar-item-label-color-selected: TBD; --oj-tab-bar-horizontal-item-label-color-selected: TBD; --oj-tab-bar-item-icon-color-selected: TBD; --oj-tab-bar-horizontal-item-icon-color-selected: TBD; --oj-tab-bar-item-bg-color-selected: TBD; --oj-tab-bar-horizontal-item-bg-color-selected: TBD; --oj-tab-bar-item-border-color-selected: TBD; --oj-tab-bar-horizontal-item-border-color-selected: TBD; --oj-tab-bar-item-icon-only-bg-color-selected: TBD; --oj-tab-bar-icon-only-icon-color-selected: TBD; /* focus */ --oj-tab-bar-item-outline-color-focus: TBD; /* disabled*/ --oj-tab-bar-item-label-color-disabled: TBD; --oj-tab-bar-icon-color-disabled: TBD; /* contrast default */ --oj-tab-bar-item-contrast-label-color-default: TBD; /* contrast hover */ --oj-tab-bar-item-contrast-label-color-hover: TBD; --oj-tab-bar-item-contrast-bg-color-hover: TBD; /* contrast selected */ --oj-tab-bar-item-contrast-label-color-selected: TBD; --oj-tab-bar-item-contrast-bg-color-selected: TBD; --oj-tab-bar-horizontal-item-contrast-label-color-selected: TBD; --oj-tab-bar-horizontal-item-contrast-bg-color-selected: TBD; /* contrast disabled */ --oj-tab-bar-item-contrast-label-color-disabled: TBD; /* contrast active */ --oj-tab-bar-item-contrast-bg-color-active: TBD; /* toolbar */ /* -------------------------- */ --oj-toolbar-bg-color: TBD; --oj-toolbar-border-color: TBD; --oj-toolbar-border-width: TBD; /* swipeactions */ /* -------------------------- */ /*----radioset/checkboxset---*/ --oj-radio-checkbox-width: TBD; --oj-radio-checkbox-image-size: TBD; --oj-radio-checkbox-row-height: TBD; --oj-radio-checkbox-label-to-edge-padding: TBD; --oj-radio-checkbox-input-to-label-padding: TBD; --oj-radio-checkbox-input-to-edge-padding: TBD; --oj-radio-checkbox-direction-row-inline-padding: TBD; --oj-radio-checkbox-label-color: TBD; --oj-radio-checkbox-label-color-selected: TBD; --oj-radio-checkbox-set-border-width: TBD; --oj-radio-checkbox-set-bg-color: TBD; --oj-radio-checkbox-set-border-color: TBD; --oj-radio-checkbox-item-divider-color: TBD; --oj-radio-checkbox-item-bg-color-active: TBD; --oj-radio-checkbox-item-divider-color-active: TBD; /*--specifies the padding between message border and radio/checkbox set--*/ --oj-radio-checkbox-set-message-padding: TBD; /* switch */ /* -------------------------- */ --oj-switch-container-height: TBD; --oj-switch-container-width: TBD; --oj-switch-track-height: TBD; --oj-switch-track-width: TBD; --oj-switch-track-border-width: TBD; --oj-switch-track-border-width-readonly: TBD; --oj-switch-thumb-border-width: TBD; --oj-switch-thumb-border-width-readonly: TBD; --oj-switch-thumb-height: TBD; --oj-switch-thumb-width: TBD; --oj-switch-thumb-box-shadow: TBD; --oj-switch-track-bg-color: TBD; --oj-switch-track-border-color: TBD; --oj-switch-thumb-bg-color: TBD; --oj-switch-thumb-border-color: TBD; --oj-switch-thumb-height-selected: TBD; --oj-switch-thumb-width-selected: TBD; --oj-switch-thumb-box-shadow-selected: TBD; --oj-switch-track-bg-color-selected: TBD; --oj-switch-track-border-color-selected: TBD; --oj-switch-thumb-bg-color-selected: TBD; --oj-switch-thumb-border-color-selected: TBD; --oj-switch-thumb-height-hover: TBD; --oj-switch-thumb-width-hover: TBD; --oj-switch-thumb-border-width-hover: TBD; --oj-switch-track-bg-color-hover: TBD; --oj-switch-track-border-color-hover: TBD; --oj-switch-thumb-bg-color-hover: TBD; --oj-switch-thumb-border-color-hover: TBD; --oj-switch-thumb-height-selected-hover: TBD; --oj-switch-thumb-width-selected-hover: TBD; --oj-switch-thumb-border-width-selected-hover: TBD; --oj-switch-track-bg-color-selected-hover: TBD; --oj-switch-track-border-color-selected-hover: TBD; --oj-switch-thumb-bg-color-selected-hover: TBD; --oj-switch-thumb-border-color-selected-hover: TBD; --oj-switch-thumb-height-active: TBD; --oj-switch-thumb-width-active: TBD; --oj-switch-thumb-border-width-active: TBD; --oj-switch-track-bg-color-active: TBD; --oj-switch-track-border-color-active: TBD; --oj-switch-thumb-bg-color-active: TBD; --oj-switch-thumb-border-color-active: TBD; --oj-switch-thumb-height-selected-active: TBD; --oj-switch-thumb-width-selected-active: TBD; --oj-switch-thumb-border-width-selected-active: TBD; --oj-switch-track-bg-color-selected-active: TBD; --oj-switch-track-border-color-selected-active: TBD; --oj-switch-thumb-bg-color-selected-active: TBD; --oj-switch-thumb-border-color-selected-active: TBD; --oj-switch-thumb-height-readonly: TBD; --oj-switch-thumb-width-readonly: TBD; --oj-switch-track-bg-color-readonly: TBD; --oj-switch-track-border-color-readonly: TBD; --oj-switch-thumb-bg-color-readonly: TBD; --oj-switch-thumb-border-color-readonly: TBD; --oj-switch-thumb-height-selected-readonly: TBD; --oj-switch-thumb-width-selected-readonly: TBD; --oj-switch-track-bg-color-selected-readonly: TBD; --oj-switch-track-border-color-selected-readonly: TBD; --oj-switch-thumb-bg-color-selected-readonly: TBD; --oj-switch-thumb-border-color-selected-readonly: TBD; --oj-switch-thumb-height-disabled: TBD; --oj-switch-thumb-width-disabled: TBD; --oj-switch-track-bg-color-disabled: TBD; --oj-switch-track-border-color-disabled: TBD; --oj-switch-thumb-bg-color-disabled: TBD; --oj-switch-thumb-border-color-disabled: TBD; --oj-switch-thumb-height-selected-disabled: TBD; --oj-switch-thumb-width-selected-disabled: TBD; --oj-switch-track-bg-color-selected-disabled: TBD; --oj-switch-track-border-color-selected-disabled: TBD; --oj-switch-thumb-bg-color-selected-disabled: TBD; --oj-switch-thumb-border-color-selected-disabled: TBD; /* animation during for swipe actions to open and close */ --oj-swipe-actions-animation-duration: TBD; --oj-swipe-actions-text-color: TBD; --oj-swipe-actions-item-width: TBD; --oj-swipe-actions-icon-to-text-padding: TBD; --oj-swipe-actions-default-bg-color: TBD; --oj-swipe-actions-neutral-bg-color: TBD; --oj-swipe-actions-attention-bg-color: TBD; --oj-swipe-actions-danger-bg-color: TBD; /* dvt */ --oj-dvt-category-color-1: TBD; --oj-dvt-category-color-2: TBD; --oj-dvt-category-color-3: TBD; --oj-dvt-category-color-4: TBD; --oj-dvt-category-color-5: TBD; --oj-dvt-category-color-6: TBD; --oj-dvt-category-color-7: TBD; --oj-dvt-category-color-8: TBD; --oj-dvt-category-color-9: TBD; --oj-dvt-category-color-10: TBD; --oj-dvt-category-color-11: TBD; --oj-dvt-category-color-12: TBD; --oj-dvt-animation-duration: TBD; --oj-dvt-tooltip-bg-color: TBD; --oj-dvt-tooltip-border-color: TBD; --oj-dvt-item-outer-border-color-selected: TBD; --oj-dvt-item-inner-border-color-selected: TBD; --oj-dvt-icon-bg-color: TBD; --oj-dvt-icon-border-color: TBD; --oj-dvt-icon-bg-color-active: TBD; --oj-dvt-icon-border-color-active: TBD; --oj-chart-axis-title-textcolor: TBD; --oj-chart-stock-falling-bg-color: TBD; --oj-chart-stock-range-bg-color: TBD; --oj-chart-stock-rising-bg-color: TBD; --oj-chart-tooltip-label-color: TBD; --oj-diagram-node-border-color-hover: TBD; --oj-diagram-link-color: TBD; --oj-diagram-link-border-color-hover: TBD; --oj-diagram-overview-bg-color: TBD; --oj-diagram-overview-window-bg-color: TBD; --oj-diagram-overview-window-border-color: TBD; --oj-diagram-overview-node-bg-color: TBD; --oj-gauge-threshold-color-1: TBD; --oj-gauge-threshold-color-2: TBD; --oj-gauge-threshold-color-3: TBD; --oj-n-box-cell-bg-color: TBD; --oj-n-box-cell-bg-color-maximized: TBD; --oj-n-box-cell-bg-color-minimized: TBD; --oj-n-box-dialog-border-color: TBD; --oj-n-box-node-bg-color: TBD; --oj-picto-chart-item-bg-color: TBD; --oj-sunburst-drill-text-color: TBD; --oj-sunburst-node-border-color-hover: TBD; --oj-sunburst-legend-label-color: TBD; --oj-thematic-map-bg-color: TBD; --oj-thematic-map-border-color: TBD; --oj-thematic-map-marker-bg-color: TBD; --oj-thematic-map-marker-border-color: TBD; --oj-thematic-map-link-color: TBD; --oj-treemap-node-border-color-hover: TBD; --oj-treemap-node-header-bg-color: TBD; --oj-treemap-node-header-bg-color-selected: TBD; --oj-treemap-node-header-border-color: TBD; --oj-treemap-node-header-border-color-hover: TBD; --oj-treemap-drill-text-color: TBD; --oj-treemap-legend-label-color: TBD; /* gantt */ /* -------------------------- */ --oj-gantt-bg-color: TBD; --oj-gantt-border-color: TBD; --oj-gantt-empty-text-color: TBD; --oj-gantt-horizontal-gridline-color: TBD; --oj-gantt-vertical-gridline-color: TBD; --oj-gantt-dependency-line-color: TBD; --oj-gantt-summary-bg-color: TBD; --oj-gantt-milestone-bg-color: TBD; --oj-gantt-row-bg-color: TBD; --oj-gantt-reference-object-color: TBD; --oj-gantt-task-bg-color: TBD; --oj-gantt-task-border-color-selected: TBD; --oj-gantt-task-drag-image-border-color: TBD; --oj-gantt-major-axis-bg-color: TBD; --oj-gantt-major-axis-border-color: TBD; --oj-gantt-major-axis-label-color: TBD; --oj-gantt-major-axis-separator-color: TBD; --oj-gantt-minor-axis-bg-color: TBD; --oj-gantt-minor-axis-border-color: TBD; --oj-gantt-minor-axis-label-color: TBD; --oj-gantt-minor-axis-separator-color: TBD; --oj-gantt-tooltip-label-color: TBD; /* timeaxis */ /* -------------------------- */ --oj-time-axis-bg-color: TBD; --oj-time-axis-border-color: TBD; --oj-time-axis-label-color: TBD; --oj-time-axis-separator-color: TBD; /* timeline */ /* -------------------------- */ --oj-timeline-reference-object-color: TBD; --oj-timeline-border-color: TBD; --oj-timeline-item-bg-color: TBD; --oj-timeline-item-border-color: TBD; --oj-timeline-item-border-color-hover: TBD; --oj-timeline-item-border-color-selected: TBD; --oj-timeline-item-description-color: TBD; --oj-timeline-item-title-color: TBD; --oj-timeline-major-axis-label-color: TBD; --oj-timeline-major-axis-separator-color: TBD; --oj-timeline-minor-axis-bg-color: TBD; --oj-timeline-minor-axis-border-color: TBD; --oj-timeline-minor-axis-label-color: TBD; --oj-timeline-minor-axis-separator-color: TBD; --oj-timeline-overview-bg-color: TBD; --oj-timeline-overview-label-color: TBD; --oj-timeline-overview-window-bg-color: TBD; --oj-timeline-overview-window-border-color: TBD; --oj-timeline-series-bg-color: TBD; --oj-timeline-series-label-color: TBD; --oj-timeline-series-empty-text-color: TBD; --oj-timeline-tooltip-label-color: TBD; /* paging control */ /* -------------------------- */ --oj-paging-padding: TBD; --oj-paging-dot-size: TBD; --oj-paging-dot-padding: TBD; --oj-paging-border-color: TBD; /* indexer */ /* -------------------------- */ --oj-indexer-item-width: TBD; --oj-indexer-item-height: TBD; /* height of each item when indexer is in abbreviated form */ --oj-indexer-abbr-item-height: TBD; --oj-indexer-font-weight: TBD; --oj-indexer-text-color: TBD; --oj-indexer-text-color-disabled: TBD; --oj-indexer-text-decoration: TBD; --oj-indexer-text-decoration-hover: TBD; /* collections (used by components like table, data grid, list view) */ /* ---------------------------- */ --oj-collection-bg-color: TBD; --oj-collection-border-color: TBD; --oj-collection-status-bg-color: TBD; /* this is for the little grabbys in touch selection, we call them selection affordances */ --oj-collection-selection-affordance-border-color: TBD; --oj-collection-column-width: TBD; --oj-collection-row-height: TBD; --oj-collection-header-font-size: TBD; --oj-collection-header-font-weight: TBD; --oj-collection-header-bg-color: TBD; --oj-collection-header-border-color: TBD; --oj-collection-header-text-color: TBD; --oj-collection-header-height: TBD; --oj-collection-column-header-justify-content: TBD; --oj-collection-column-header-align-items: TBD; --oj-collection-row-header-justify-content: TBD; --oj-collection-row-header-align-items: TBD; --oj-collection-header-bg-color-hover: TBD; --oj-collection-header-bg-color-selected: TBD; --oj-collection-header-bg-color-selected-inactive: TBD; --oj-collection-header-bg-color-drag: TBD; --oj-collection-header-drag-image-border-color: TBD; --oj-collection-cell-align-items: TBD; --oj-collection-cell-justify-content: TBD; --oj-collection-cell-align-text: TBD; --oj-collection-cell-align-text-rtl: TBD; --oj-collection-cell-font-size: TBD; --oj-collection-cell-text-color: TBD; --oj-collection-cell-bg-color: TBD; --oj-collection-cell-border-color: TBD; --oj-collection-cell-banded-bg-color: TBD; --oj-collection-cell-padding: TBD; --oj-collection-cell-border-color-focus: TBD; --oj-collection-editable-cell-border-color-focus: TBD; --oj-collection-cell-bg-color-hover: TBD; --oj-collection-cell-border-color-hover: TBD; --oj-collection-cell-bg-color-selected: TBD; --oj-collection-cell-border-color-selected: TBD; --oj-collection-cell-bg-color-selected-inactive: TBD; --oj-collection-cell-border-color-selected-inactive: TBD; --oj-collection-editable-cell-bg-color-read-only: TBD; --oj-collection-cell-bg-color-drag: TBD; --oj-collection-cell-drag-image-border-color: TBD; /* row expander */ /* ---------------------------- */ --oj-row-expander-indent-width: TBD; --oj-row-expander-spacer-width: TBD; /* table */ /* ---------------------------- */ --oj-table-header-border-color: TBD; --oj-table-row-height: TBD; /* tree view */ /* ---------------------------- */ --oj-tree-view-spacer-width: TBD; --oj-tree-view-spacer-height: TBD; --oj-tree-view-text-color: TBD; --oj-tree-view-item-bg-color-hover: TBD; --oj-tree-view-item-bg-color-selected: TBD; --oj-tree-view-item-bg-color-selected-inactive: TBD; --oj-tree-view-drop-line-color: TBD; --oj-tree-view-drop-marker-color: TBD; /* listview */ /* -------------------------- */ /* color for the drill to detail icon of an item */ --oj-list-view-drill-icon-color: TBD; --oj-list-view-header-bg-color: TBD; --oj-list-view-header-bg-color-disabled: TBD; --oj-list-view-header-bg-image: TBD; --oj-list-view-header-font-weight: TBD; --oj-list-view-header-font-size: TBD; --oj-list-view-header-border-width-expanded: TBD; --oj-list-view-header-border-width-collapsed: TBD; --oj-list-view-header-opacity: TBD; /* position where the bottom border of an item starts */ --oj-list-view-item-border-position: TBD; --oj-list-view-card-width: TBD; --oj-list-view-card-height: TBD; --oj-list-view-card-margin-top: TBD; --oj-list-view-card-margin-end: TBD; --oj-list-view-card-margin-bottom: TBD; --oj-list-view-card-margin-start: TBD; /* refresher */ /* -------------------------- */ --oj-refresher-bg-color: TBD; --oj-refresher-animation-duration: TBD; /* Applayout */ /* -------------------------- */ --oj-app-layout-offcanvas-width: TBD; --oj-app-layout-offcanvas-max-width: TBD; --oj-app-layout-max-width: TBD; /* Applayout (Web) */ /* -------------------------- */ --oj-app-layout-web-padding: TBD; --oj-app-layout-web-header-bg-color: TBD; --oj-app-layout-web-header-border-color: TBD; --oj-app-layout-web-header-title-font-size: TBD; --oj-app-layout-web-header-title-font-weight: TBD; --oj-app-layout-web-header-title-text-color: TBD; --oj-app-layout-web-header-box-shadow: TBD; --oj-app-layout-web-header-min-height: TBD; --oj-app-layout-web-footer-bg-color: TBD; --oj-app-layout-web-footer-border-color: TBD; --oj-app-layout-web-footer-min-height: TBD; --oj-app-layout-web-offcanvas-bg-color: TBD; /* Applayout (Hybrid) */ /* -------------------------- */ --oj-app-layout-hybrid-padding: TBD; --oj-app-layout-hybrid-header-title-text-color: TBD; --oj-app-layout-hybrid-header-border-color: TBD; --oj-app-layout-hybrid-header-border-bottom-width: TBD; --oj-app-layout-hybrid-header-bg-color: TBD; --oj-app-layout-hybrid-header-min-height: TBD; --oj-app-layout-hybrid-header-box-shadow: TBD; --oj-app-layout-hybrid-header-title-font-size: TBD; --oj-app-layout-hybrid-header-title-font-weight: TBD; --oj-app-layout-hybrid-footer-border-color: TBD; --oj-app-layout-hybrid-footer-border-top-width: TBD; --oj-app-layout-hybrid-footer-bg-color: TBD; --oj-app-layout-hybrid-footer-min-height: TBD; --oj-app-layout-hybrid-nav-bar-box-shadow: TBD; --oj-app-layout-hybrid-offcanvas-bg-color: TBD; /* FilmStrip */ /* -------------------------- */ --oj-film-strip-arrow-opacity: TBD; --oj-film-strip-arrow-border-radius: TBD; --oj-film-strip-overflow-indicator-height: TBD; /* ConveyorBelt */ /* -------------------------- */ --oj-conveyor-belt-overflow-indicator-height: TBD; /* MasonryLayout */ /* -------------------------- */ --oj-masonry-layout-tile-margin: TBD; --oj-masonry-layout-tile-width: TBD; --oj-masonry-layout-tile-height: TBD; /* slider */ /* -------------------------- */ --oj-slider-thumb-width: TBD; --oj-slider-thumb-height: TBD; --oj-slider-thumb-width-active: TBD; --oj-slider-thumb-height-active: TBD; --oj-slider-thumb-border-radius: TBD; --oj-slider-thumb-border-width: TBD; --oj-slider-thumb-box-shadow: TBD; --oj-slider-thumb-bg-color: TBD; --oj-slider-thumb-border-color: TBD; --oj-slider-thumb-bg-color-hover: TBD; --oj-slider-thumb-bg-color-active: TBD; --oj-slider-thumb-border-color-active: TBD; --oj-slider-thumb-bg-color-disabled: TBD; --oj-slider-thumb-border-color-disabled: TBD; --oj-slider-bar-thickness: TBD; --oj-slider-bar-bg-color: TBD; --oj-slider-bar-value-bg-color: TBD; --oj-slider-bar-value-bg-color-active: TBD; --oj-slider-bar-bg-color-disabled: TBD; --oj-slider-bar-value-bg-color-disabled: TBD; --oj-slider-color-picker-thumb-width: TBD; --oj-slider-color-picker-thumb-height: TBD; --oj-slider-color-picker-thumb-width-active: TBD; --oj-slider-color-picker-thumb-height-active: TBD; --oj-slider-color-picker-thumb-border-radius: TBD; --oj-slider-color-picker-thumb-border-width: TBD; --oj-slider-color-picker-thumb-border-color: TBD; --oj-slider-color-picker-thumb-box-shadow: TBD; --oj-slider-color-picker-bar-thickness: TBD; /* color palette */ /* ---------------------------- */ --oj-color-palette-text-color: TBD; --oj-color-palette-grid-font-size: TBD; --oj-color-palette-swatch-inner-border-color: TBD; --oj-color-palette-swatch-outer-border-color-selected: TBD; --oj-color-palette-grid-swatch-xl-size: TBD; --oj-color-palette-grid-swatch-lg-size: TBD; --oj-color-palette-grid-swatch-sm-size: TBD; --oj-color-palette-grid-swatch-xs-size: TBD; --oj-color-palette-list-swatch-sm-width: TBD; --oj-color-palette-list-swatch-sm-height: TBD; --oj-color-palette-list-swatch-lg-width: TBD; --oj-color-palette-list-swatch-lg-height: TBD; /* color spectrum */ /* ---------------------------- */ --oj-color-spectrum-border-color: TBD; --oj-color-spectrum-size: TBD; --oj-color-spectrum-thumb-border-color: TBD; --oj-color-spectrum-thumb-border-color-disabled: TBD; --oj-color-spectrum-thumb-size: TBD; --oj-color-spectrum-thumb-border-width: TBD; --oj-color-spectrum-thumb-box-shadow: TBD; /* IconCircle */ /* -------------------------- */ --oj-icon-circle-inner-bg-color: TBD; --oj-icon-cirle-border-offset-bg-color: TBD; --oj-icon-circle-border-color: TBD; --oj-icon-circle-font-color: TBD; --oj-icon-circle-xxs-inner-size: TBD; --oj-icon-circle-xs-inner-size: TBD; --oj-icon-circle-sm-inner-size: TBD; --oj-icon-circle-md-inner-size: TBD; --oj-icon-circle-lg-inner-size: TBD; --oj-icon-circle-xl-inner-size: TBD; --oj-icon-circle-xxl-inner-size: TBD; --oj-icon-circle-xxs-border-offset: TBD; --oj-icon-circle-xs-border-offset: TBD; --oj-icon-circle-sm-border-offset: TBD; --oj-icon-circle-md-border-offset: TBD; --oj-icon-circle-lg-border-offset: TBD; --oj-icon-circle-xl-border-offset: TBD; --oj-icon-circle-xxl-border-offset: TBD; --oj-icon-circle-xxs-border-width: TBD; --oj-icon-circle-xl-border-width: TBD; --oj-icon-circle-xxs-font-size: TBD; --oj-icon-circle-xs-font-size: TBD; --oj-icon-circle-sm-font-size: TBD; --oj-icon-circle-md-font-size: TBD; --oj-icon-circle-lg-font-size: TBD; --oj-icon-circle-xl-font-size: TBD; --oj-icon-circle-xxl-font-size: TBD; /* Avatar */ /* -------------------------- */ --oj-avatar-inner-bg-color: TBD; --oj-avatar-border-offset-bg-color: TBD; --oj-avatar-border-color: TBD; --oj-avatar-text-color: TBD; --oj-avatar-xxs-inner-size: TBD; --oj-avatar-xs-inner-size: TBD; --oj-avatar-sm-inner-size: TBD; --oj-avatar-md-inner-size: TBD; --oj-avatar-lg-inner-size: TBD; --oj-avatar-xl-inner-size: TBD; --oj-avatar-xxl-inner-size: TBD; --oj-avatar-xxs-border-offset: TBD; --oj-avatar-xs-border-offset: TBD; --oj-avatar-sm-border-offset: TBD; --oj-avatar-md-border-offset: TBD; --oj-avatar-lg-border-offset: TBD; --oj-avatar-xl-border-offset: TBD; --oj-avatar-xxl-border-offset: TBD; --oj-avatar-xxs-initials-font-size: TBD; --oj-avatar-xs-initials-font-size: TBD; --oj-avatar-sm-initials-font-size: TBD; --oj-avatar-md-initials-font-size: TBD; --oj-avatar-lg-initials-font-size: TBD; --oj-avatar-xl-initials-font-size: TBD; --oj-avatar-xxl-initials-font-size: TBD; --oj-avatar-xxs-border-width: TBD; --oj-avatar-xl-border-width: TBD; --oj-avatar-xxs-placeholder-scale: TBD; --oj-avatar-xs-placeholder-scale: TBD; --oj-avatar-sm-placeholder-scale: TBD; --oj-avatar-md-placeholder-scale: TBD; --oj-avatar-lg-placeholder-scale: TBD; --oj-avatar-xl-placeholder-scale: TBD; --oj-avatar-xxl-placeholder-scale: TBD; /*Color of filter applied to darken bg color to satisfy asscessibility contrast ratio requirements*/ --oj-avatar-initials-shade-color: TBD; /*Progress */ /* -------------------------- */ --oj-progress-value-bg-color: TBD; --oj-progress-bar-height: TBD; --oj-progress-bar-bg-color: TBD; --oj-progress-bar-bg-opacity: TBD; --oj-progress-bar-border-style: TBD; --oj-progress-bar-border-color: TBD; --oj-progress-bar-border-radius: TBD; --oj-progress-bar-indeterminate-overlay-opacity: TBD; --oj-progress-bar-indeterminate-animation-duration: TBD; --oj-progress-circle-size: TBD; --oj-progress-circle-bg-color: TBD; --oj-progress-circle-bg-opacity: TBD; --oj-progress-circle-indeterminate-overlay-size: TBD; --oj-progress-circle-indeterminate-animation-duration: TBD; /* train */ /* -------------------------- */ --oj-train-step-width: TBD; --oj-train-label-padding-top: TBD; --oj-train-label-text-wrap: TBD; --oj-train-button-diameter: TBD; --oj-train-button-border-width: TBD; --oj-train-button-font-size: TBD; --oj-train-icon-diameter: TBD; --oj-train-button-text-is-numeric: TBD; --oj-train-button-connector-diameter: TBD; --oj-train-connector-height: TBD; --oj-train-button-text-display: TBD; --oj-train-bg-color: TBD; --oj-train-border-color: TBD; --oj-train-button-text-color: TBD; --oj-train-label-color: TBD; --oj-train-connector-bg-color: TBD; --oj-train-connector-has-fill: TBD; --oj-train-bg-color-visited: TBD; --oj-train-border-color-visited: TBD; --oj-train-button-text-color-visited: TBD; --oj-train-label-color-visited: TBD; --oj-train-icon-display-visited: TBD; --oj-train-button-text-display-visited: TBD; --oj-train-bg-color-hover: TBD; --oj-train-border-color-hover: TBD; --oj-train-button-text-color-hover: TBD; --oj-train-bg-color-active: TBD; --oj-train-border-color-active: TBD; --oj-train-button-text-color-active: TBD; --oj-train-label-text-decoration-active: TBD; --oj-train-label-font-weight-active: TBD; --oj-train-bg-color-selected: TBD; --oj-train-border-color-selected: TBD; --oj-train-button-text-color-selected: TBD; --oj-train-label-font-weight-selected: TBD; --oj-train-continuous-connector-bg-color-selected: TBD; --oj-train-individual-connector-bg-color-selected: TBD; --oj-train-individual-connector-padding: TBD; --oj-train-individual-connector-padding-selected: TBD; --oj-train-bg-color-disabled: TBD; --oj-train-border-color-disabled: TBD; --oj-train-button-text-color-disabled: TBD; --oj-train-label-color-disabled: TBD; --oj-train-opacity-disabled: TBD; --oj-train-button-messaging-icon-color: TBD; --oj-train-error-bg-color: TBD; --oj-train-warning-bg-color: TBD; --oj-train-info-bg-color: TBD; --oj-train-confirmation-bg-color: TBD; --oj-train-icon-font-size: TBD; /* filePicker */ /* -------------------------- */ --oj-file-picker-bg-color: TBD; --oj-file-picker-bg-color-active: TBD; --oj-file-picker-border-color: TBD; --oj-file-picker-border-width: TBD; --oj-file-picker-border-radius: TBD; --oj-file-picker-border-style: TBD; --oj-file-picker-border-width-active: TBD; --oj-file-picker-text-color: TBD; --oj-file-picker-text-font-size: TBD; }