// Copyright (c) 2014, 2019, Oracle and/or its affiliates. The Universal Permissive License (UPL), Version 1.0 /** * @license * 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: #e8f3fa; //tint(var(--oj-brand-color), 91%)*/ /* --oj-brand-color-light-4: #e1eff8; //tint(var(--oj-brand-color), 88%)*/ /* --oj-brand-color-light-3: #d7eaf6; //tint(var(--oj-brand-color), 84%)*/ /* --oj-brand-color-light-2: #b3d7ee; //tint(var(--oj-brand-color), 70%)*/ /* --oj-brand-color-light-1: #76b8e1; //tint(var(--oj-brand-color), 46%)*/ /* --oj-brand-color: #027bc7;*/ /* --oj-brand-color-dark-1: #02629f; //shade(var(--oj-brand-color), 20%)*/ /* --oj-brand-color-dark-2: #014a77; //shade(var(--oj-brand-color), 40%)*/ /* neutral palette, see the 'PALETTE VARIABLES' doc above for more info */ /* --oj-neutral-hue: 203;*/ /* --oj-neutral-saturation: 2%;*/ /* --oj-neutral-color-1: unquote("hsl(var(--oj-neutral-hue), var(--oj-neutral-saturation), 100%)");*/ /* --oj-neutral-color-2: unquote("hsl(var(--oj-neutral-hue), var(--oj-neutral-saturation), 99%)");*/ /* --oj-neutral-color-3: unquote("hsl(var(--oj-neutral-hue), var(--oj-neutral-saturation), 98%)");*/ /* --oj-neutral-color-4: unquote("hsl(var(--oj-neutral-hue), var(--oj-neutral-saturation), 97%)");*/ /* --oj-neutral-color-5: unquote("hsl(var(--oj-neutral-hue), var(--oj-neutral-saturation), 95%)");*/ /* --oj-neutral-color-6: unquote("hsl(var(--oj-neutral-hue), var(--oj-neutral-saturation), 93%)");*/ /* --oj-neutral-color-7: unquote("hsl(var(--oj-neutral-hue), var(--oj-neutral-saturation), 90%)");*/ /* --oj-neutral-color-8: unquote("hsl(var(--oj-neutral-hue), var(--oj-neutral-saturation), 88%)");*/ /* --oj-neutral-color-9: unquote("hsl(var(--oj-neutral-hue), var(--oj-neutral-saturation), 80%)");*/ /* --oj-neutral-color-10: unquote("hsl(var(--oj-neutral-hue), var(--oj-neutral-saturation), 78%)");*/ /* --oj-neutral-color-11: unquote("hsl(var(--oj-neutral-hue), var(--oj-neutral-saturation), 70%)");*/ /* --oj-neutral-color-12: unquote("hsl(var(--oj-neutral-hue), var(--oj-neutral-saturation), 55%)");*/ /* --oj-neutral-color-13: unquote("hsl(var(--oj-neutral-hue), var(--oj-neutral-saturation), 45%)");*/ /* --oj-neutral-color-14: unquote("hsl(var(--oj-neutral-hue), var(--oj-neutral-saturation), 30%)");*/ /* --oj-neutral-color-15: unquote("hsl(var(--oj-neutral-hue), var(--oj-neutral-saturation), 20%)");*/ /* --oj-neutral-color-16: unquote("hsl(var(--oj-neutral-hue), var(--oj-neutral-saturation), 15%)");*/ /* --oj-neutral-color-17: unquote("hsl(var(--oj-neutral-hue), var(--oj-neutral-saturation), 0%)");;*/ /* text palette , see the 'PALETTE VARIABLES' doc above for more info*/ /* --oj-text-color-base-hsl: 0, 0%, 0%;*/ /* --oj-text-color-1: unquote("hsla(var(--oj-text-color-base-hsl), 1)");*/ /* --oj-text-color-2: unquote("hsla(var(--oj-text-color-base-hsl), .85)");*/ /* --oj-text-color-3: unquote("hsla(var(--oj-text-color-base-hsl), .8)");*/ /* --oj-text-color-4: unquote("hsla(var(--oj-text-color-base-hsl), .7)");*/ /* --oj-text-color-5: unquote("hsla(var(--oj-text-color-base-hsl), .6)");*/ /* --oj-text-color-6: unquote("hsla(var(--oj-text-color-base-hsl), .55)");*/ /* --oj-text-color-7: unquote("hsla(var(--oj-text-color-base-hsl), .38)");*/ /* accent palette, see the 'PALETTE VARIABLES' doc above for more info */ /* --oj-accent-color-highlight-1: #d9f4fa;*/ /* --oj-accent-color-highlight-2: #c2eaf3;*/ /* --oj-accent-color-danger-1: #FCF3F4;*/ /* --oj-accent-color-danger-2: #F8D3D6;*/ /* --oj-accent-color-danger-3: #E65A66;*/ /* --oj-accent-color-danger-4: #DE2333;*/ /* --oj-accent-color-danger-5: #BA0006;*/ /* --oj-accent-color-attention-1: #FEF5E4;*/ /* --oj-accent-color-attention-2: #FCE7C1;*/ /* --oj-accent-color-attention-3: #F8CA75;*/ /* --oj-accent-color-attention-4: #F6B846;*/ /* --oj-accent-color-attention-5: #BF552E;*/ /* --oj-accent-color-info-1: #E9F4F8;*/ /* --oj-accent-color-info-2: #CAE4EF;*/ /* --oj-accent-color-info-3: #80BFD9;*/ /* --oj-accent-color-info-4: #2B94BF;*/ /* --oj-accent-color-info-5: #0574A1;*/ /* --oj-accent-color-confirmation-1: #ECF5E7;*/ /* --oj-accent-color-confirmation-2: #D9EACF;*/ /* --oj-accent-color-confirmation-3: #B3D69F;*/ /* --oj-accent-color-confirmation-4: #81BA5F;*/ /* --oj-accent-color-confirmation-5: #008230;*/ /* --oj-accent-color-dvt-1: #237bb1;*/ /* --oj-accent-color-dvt-2: #68c182;*/ /* --oj-accent-color-dvt-3: #fad55c;*/ /* --oj-accent-color-dvt-4: #ed6647;*/ /* --oj-accent-color-dvt-5: #8561c8;*/ /* --oj-accent-color-dvt-6: #6ddbdb;*/ /* --oj-accent-color-dvt-7: #ffb54d;*/ /* --oj-accent-color-dvt-8: #e371b2;*/ /* --oj-accent-color-dvt-9: #47bdef;*/ /* --oj-accent-color-dvt-10: #a2bf39;*/ /* --oj-accent-color-dvt-11: #a75dba;*/ /* --oj-accent-color-dvt-12: #f7f37b;*/ /* 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: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; */ /* $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: 1em;*/ /* --oj-font-size: 1rem;*/ /* --oj-font-size-sm: 0.875rem;*/ /* --oj-font-size-xs: 0.75rem;*/ /* default text color */ /* --oj-text-color: var(--oj-text-color-1);*/ /* color used for primary information, /* this usually either darker or the same color as --oj-text-color */ /* --oj-primary-text-color: var(--oj-text-color-1);*/ /* --oj-secondary-text-color: var(--oj-text-color-5);*/ /* --oj-tertiary-text-color: var(--oj-text-color-5);*/ /* --oj-text-color-disabled: var(--oj-text-color-7);*/ /* --oj-contrast-text-color: var(--oj-neutral-color-1);*/ /* headers */ /* -------------------------- */ /* --oj-header-1-font-size: 1.75rem;*/ /* --oj-header-2-font-size: 1.5rem;*/ /* --oj-header-3-font-size: 1.25rem;*/ /* --oj-header-4-font-size: 1rem;*/ /* --oj-header-5-font-size: 0.875rem;*/ /* --oj-header-1-font-weight: normal;*/ /* --oj-header-2-font-weight: normal;*/ /* --oj-header-3-font-weight: normal;*/ /* --oj-header-4-font-weight: normal;*/ /* --oj-header-5-font-weight: normal;*/ /* --oj-header-text-color: var(--oj-text-color-2);*/ /* --oj-header-border-color: var(--oj-neutral-color-7);*/ /* link */ /* -------------------------- */ /* --oj-link-text-decoration: none;*/ /* --oj-link-text-decoration-hover: none;*/ /* --oj-link-font-weight-active: normal;*/ /* --oj-link-bg-color-active: var(--oj-neutral-color-8);*/ /* --oj-link-text-color: var(--oj-brand-color-dark-1);*/ /* --oj-link-text-color-active: var(--oj-link-text-color);*/ /* --oj-link-text-color-visited: var(--oj-text-color);*/ /* note that --oj-opacity-disabled is /* used for a disabled link in addition to color */ /* --oj-link-text-color-disabled: var(--oj-brand-color-light-1);*/ /* icon */ /* -------------------------- */ /* --oj-icon-color: var(--oj-text-color);*/ /* colors below used for clickable icons */ /* --oj-icon-color-default: var(--oj-neutral-color-12);*/ /* --oj-icon-color-hover: var(--oj-brand-color-light-1);*/ /* --oj-icon-color-active: var(--oj-brand-color);*/ /* --oj-icon-color-selected: var(--oj-icon-color-active);*/ /* --oj-icon-color-disabled: var(--oj-neutral-color-12);*/ /* drag and drop */ /* -------------------------- */ /* --oj-drop-target-color-1: var(--oj-accent-color-highlight-1);*/ /* --oj-drop-target-color-2: var(--oj-accent-color-highlight-2);*/ /* border-radius */ /* -------------------------- */ /* --oj-border-radius-sm: 2px;*/ /* --oj-border-radius-md: 3px;*/ /* --oj-border-radius-lg: 5px;*/ /* spacing */ /* -------------------------- */ /* --oj-spacing-1x: 5px;*/ /* --oj-spacing-2x: 10px;*/ /* --oj-spacing-3x: 15px;*/ /* --oj-spacing-4x: 20px;*/ /* box shadow */ /* -------------------------- */ /* --oj-box-shadow-hsl: 0, 0%, 0%;*/ /* --oj-box-shadow-sm: 0 0 5px 0 unquote('hsla(var(--oj-box-shadow-hsl),0.2)');*/ /* --oj-box-shadow-md: 1px 1px 5px 0 unquote('hsla(var(--oj-box-shadow-hsl),0.4)');*/ /* --oj-box-shadow-lg: 1px 1px 10px 0 unquote('hsla(var(--oj-box-shadow-hsl),0.45)');*/ /* 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: unquote('hsl(var(--oj-box-shadow-hsl))');*/ /* --oj-overlay-opacity: 0.5;*/ /* disabled opacity */ /* -------------------------- */ /* --oj-opacity-disabled: 0.5;*/ /* wrapping */ /* -------------------------- */ /* --oj-wrappable-margin-bottom: 4px;*/ /* animation */ /* -------------------------- */ /* --oj-animation-duration-short: 0.25s;*/ /* --oj-animation-duration-medium: 0.4s;*/ /* --oj-animation-duration-long: 0.5s;*/ /* --oj-animation-effect-ripple-bg-color: var(--oj-neutral-color-12);*/ /* z-index */ /* -------------------------- */ /* --oj-default-zindex: 1;*/ /* --oj-app-layout-fixed-zindex: 100;*/ /* --oj-offcanvas-zindex: 200;*/ /* --oj-resizable-zindex: 900;*/ /* --oj-popup-zindex: 1000;*/ /* --oj-popup-tail-zindex: 1030;*/ /* --oj-dialog-zindex: 1050;*/ /* --oj-messages-zindex: 2000;*/ /* body */ /* -------------------------- */ /* --oj-body-bg-image: none;*/ /* --oj-body-bg-color: var(--oj-neutral-color-1);*/ /* --oj-body-text-color: var(--oj-text-color);*/ /* --oj-body-touch-action: manipulation;*/ /* button */ /* -------------------------- */ /* --oj-button-border-radius: var(--oj-border-radius-lg); */ /* --oj-button-cursor: default; */ /* --oj-button-font-weight: normal; */ /* --oj-button-height: 2.25rem;*/ /* --oj-button-sm-height: 1.625rem; */ /* --oj-button-lg-height: 3.25rem; */ /* --oj-button-xl-height: 3.875rem; */ /* --oj-button-font-size: 1.125rem; */ /* --oj-button-sm-font-size: 0.875rem; */ /* --oj-button-lg-font-size: 1.25rem; */ /* --oj-button-xl-font-size: 1.375rem; */ /* --oj-button-text-to-edge-padding: 0.875rem; */ /* --oj-button-sm-text-to-edge-padding: 0.625rem; */ /* --oj-button-lg-text-to-edge-padding: 1.25rem; */ /* --oj-button-xl-text-to-edge-padding: 1.25rem; */ /* --oj-button-icon-to-text-padding: 0.5rem; */ /* --oj-button-sm-icon-to-text-padding: 0.375rem; */ /* --oj-button-lg-icon-to-text-padding: 0.5rem; */ /* --oj-button-xl-icon-to-text-padding: 0.75rem; */ /* --oj-button-icon-to-edge-padding: 0.625rem; */ /* --oj-button-sm-icon-to-edge-padding: 0.1875rem; */ /* --oj-button-lg-icon-to-edge-padding: 1.125rem; */ /* --oj-button-xl-icon-to-edge-padding: 1.875rem; */ /* --oj-button-icon-only-padding: 0.625rem; */ /* --oj-button-sm-icon-only-padding: 0.1875rem; */ /* --oj-button-lg-icon-only-padding: 1.125rem; */ /* --oj-button-xl-icon-only-padding: 1.875rem; */ /* enabled */ /* --oj-button-bg-color: var(--oj-brand-color); */ /* --oj-button-border-color: var(--oj-button-bg-color); */ /* --oj-button-text-color: var(--oj-neutral-color-1); */ /* --oj-button-icon-color: var(--oj-button-text-color); */ /* --oj-button-bg-image: none; */ /* --oj-button-box-shadow: none; */ /* --oj-button-text-shadow: none; */ /* hover */ /* --oj-button-bg-color-hover: var(--oj-brand-color-light-1); */ /* --oj-button-border-color-hover: var(--oj-button-bg-color-hover); */ /* --oj-button-text-color-hover: var(--oj-neutral-color-1); */ /* --oj-button-icon-color-hover: var(--oj-button-text-color-hover); */ /* --oj-button-bg-image-hover: none; */ /* --oj-button-box-shadow-hover: var(--oj-button-box-shadow); */ /* --oj-button-text-shadow-hover: none; */ /* active */ /* --oj-button-bg-color-active: var(--oj-brand-color-dark-2); */ /* --oj-button-border-color-active: var(--oj-button-bg-color-active); */ /* --oj-button-text-color-active: var(--oj-neutral-color-1); */ /* --oj-button-icon-color-active: var(--oj-button-text-color-active); */ /* --oj-button-bg-image-active: none; */ /* --oj-button-box-shadow-active: var(--oj-button-box-shadow); */ /* --oj-button-text-shadow-active: none; */ /* --oj-button-opacity-active: 1; */ /* selected */ /* --oj-button-bg-color-selected: var(--oj-button-bg-color-active); */ /* --oj-button-border-color-selected: var(--oj-button-border-color-active); */ /* --oj-button-text-color-selected: var(--oj-button-text-color-active); */ /* --oj-button-icon-color-selected: var(--oj-button-icon-color-active); */ /* --oj-button-bg-image-selected: var(--oj-button-bg-image-active); */ /* --oj-button-box-shadow-selected: var(--oj-button-box-shadow-active); */ /* --oj-button-text-shadow-selected: var(--oj-button-text-shadow-active); */ /* selected hover */ /* --oj-button-text-color-selected-hover: var(--oj-neutral-color-1); */ /* --oj-button-icon-color-selected-hover: var(--oj-button-text-color-selected-hover); */ /* --oj-button-bg-color-selected-hover: var(--oj-brand-color-light-2); */ /* --oj-button-border-color-selected-hover: var(--oj-button-bg-color-selected-hover); */ /* disabled */ /* --oj-button-bg-color-disabled: var(--oj-neutral-color-9); */ /* --oj-button-border-color-disabled: var(--oj-button-bg-color-disabled); */ /* --oj-button-text-color-disabled: var(--oj-text-color-disabled); */ /* --oj-button-icon-color-disabled: var(--oj-icon-color-disabled); */ /* --oj-button-box-shadow-disabled: none; */ /* --oj-button-opacity-disabled: var(--oj-opacity-disabled); */ /* selected disabled */ /* --oj-button-bg-color-selected-disabled: var(--oj-neutral-color-11); */ /* --oj-button-border-color-selected-disabled: var(--oj-button-bg-color-selected-disabled); */ /* --oj-button-text-color-selected-disabled: var(--oj-neutral-color-5); */ /* --oj-button-icon-color-selected-disabled: var(--oj-button-text-color-selected-disabled); */ /* half-chrome enabled */ /* --oj-button-half-chrome-font-weight: normal; */ /* --oj-button-half-chrome-text-color: var(--oj-link-text-color); */ /* --oj-button-half-chrome-icon-color: var(--oj-button-half-chrome-text-color); */ /* half chrome hover */ /* --oj-button-half-chrome-bg-color-hover: transparent; */ /* --oj-button-half-chrome-border-color-hover: var(--oj-button-half-chrome-bg-color-hover); */ /* --oj-button-half-chrome-text-color-hover: var(--oj-brand-color-light-1); */ /* --oj-button-half-chrome-icon-color-hover: var(--oj-button-half-chrome-text-color-hover); */ /* half chrome-active */ /* --oj-button-half-chrome-bg-color-active: transparent; */ /* --oj-button-half-chrome-border-color-active: var(--oj-button-half-chrome-bg-color-active); */ /* --oj-button-half-chrome-text-color-active: var(--oj-button-half-chrome-text-color); */ /* --oj-button-half-chrome-icon-color-active: var(--oj-button-half-chrome-text-color-active); */ /* --oj-button-half-chrome-opacity-active: 0.2; */ /* half-chrome-selected */ /* --oj-button-half-chrome-bg-color-selected: var(--oj-brand-color-dark-1); */ /* --oj-button-half-chrome-border-color-selected: var(--oj-button-half-chrome-bg-color-selected); */ /* --oj-button-half-chrome-text-color-selected: var(--oj-button-text-color-selected); */ /* --oj-button-half-chrome-icon-color-selected: var(--oj-button-icon-color-selected); */ /* half chrome selected hover */ /* --oj-button-half-chrome-bg-color-selected-hover: var(--oj-button-bg-color-hover); */ /* --oj-button-half-chrome-border-color-selected-hover: var(--oj-button-half-chrome-bg-color-selected-hover); */ /* --oj-button-half-chrome-text-color-selected-hover: var(--oj-button-text-color-selected-hover); */ /* --oj-button-half-chrome-icon-color-selected-hover: var(--oj-button-icon-color-selected-hover); */ /* half chrome disabled */ /* --oj-button-half-chrome-text-color-disabled: var(--oj-neutral-color-17); */ /* --oj-button-half-chrome-icon-color-disabled: var(--oj-icon-color-disabled); */ /* --oj-button-half-chrome-opacity-disabled: 0.3; */ /* half chrome selected disabled */ /* --oj-button-half-chrome-bg-color-selected-disabled: var(--oj-neutral-color-9); */ /* --oj-button-half-chrome-border-color-selected-disabled: var(--oj-button-half-chrome-bg-color-selected-disabled); */ /* --oj-button-half-chrome-text-color-selected-disabled: var(--oj-neutral-color-5); */ /* --oj-button-half-chrome-icon-color-selected-disabled: var(--oj-button-half-chrome-text-color-selected-disabled); */ /* outlined */ /* --oj-button-outlined-chrome-font-weight: normal; */ /* outlined enabled */ /* --oj-button-outlined-chrome-border-color: var(--oj-brand-color-dark-1);; */ /* --oj-button-outlined-chrome-text-color: var(--oj-button-half-chrome-text-color); */ /* --oj-button-outlined-chrome-icon-color: var(--oj-button-half-chrome-icon-color); */ /* outlined hover */ /* --oj-button-outlined-chrome-bg-color-hover: var(--oj-button-half-chrome-bg-color-hover); */ /* --oj-button-outlined-chrome-border-color-hover: var(--oj-button-border-color-hover); */ /* --oj-button-outlined-chrome-text-color-hover: var(--oj-brand-color-light-1); */ /* --oj-button-outlined-chrome-icon-color-hover: var(--oj-brand-color-light-1); */ /* outlined active */ /* --oj-button-outlined-chrome-bg-color-active: var(--oj-button-bg-color-active); */ /* --oj-button-outlined-chrome-border-color-active: var(--oj-button-border-color-active); */ /* --oj-button-outlined-chrome-text-color-active: var(--oj-button-text-color-active); */ /* --oj-button-outlined-chrome-icon-color-active: var(--oj-button-icon-color-active); */ /* --oj-button-outlined-chrome-opacity-active: var(--oj-button-opacity-active); */ /* outlined selected */ /* --oj-button-outlined-chrome-bg-color-selected: var(--oj-button-half-chrome-bg-color-selected); */ /* --oj-button-outlined-chrome-border-color-selected: var(--oj-button-outlined-chrome-bg-color-selected); */ /* --oj-button-outlined-chrome-text-color-selected: var(--oj-button-text-color-selected); */ /* --oj-button-outlined-chrome-icon-color-selected: var(--oj-button-icon-color-selected); */ /* outlined selected hover */ /* --oj-button-outlined-chrome-bg-color-selected-hover: var(--oj-button-bg-color-hover); */ /* --oj-button-outlined-chrome-border-color-selected-hover: var(--oj-button-outlined-chrome-bg-color-selected-hover); */ /* --oj-button-outlined-chrome-text-color-selected-hover: var(--oj-button-text-color-selected-hover); */ /* --oj-button-outlined-chrome-icon-color-selected-hover: var(--oj-button-icon-color-selected-hover); */ /* outlined disabled */ /* --oj-button-outlined-chrome-border-color-disabled: var(--oj-neutral-color-9); */ /* --oj-button-outlined-chrome-text-color-disabled: var(--oj-neutral-color-9); */ /* --oj-button-outlined-chrome-icon-color-disabled: var(--oj-neutral-color-9); */ /* --oj-button-outlined-chrome-opacity-disabled: var(--oj-button-opacity-disabled); */ /* outlined selected disabled */ /* --oj-button-outlined-chrome-bg-color-selected-disabled: var(--oj-button-half-chrome-bg-color-selected-disabled); */ /* --oj-button-outlined-chrome-border-color-selected-disabled: var(--oj-button-outlined-chrome-bg-color-selected-disabled); */ /* --oj-button-outlined-chrome-text-color-selected-disabled: var(--oj-button-text-color-selected-disabled); */ /* --oj-button-outlined-chrome-icon-color-selected-disabled: var(--oj-button-icon-color-selected-disabled); */ /* --oj-button-primary-color: var(--oj-brand-color); */ /* --oj-button-confirm-color: var(--oj-accent-color-confirmation-5); */ /* buttonset */ /* ----------------------------- */ /* --oj-buttonset-border-radius: var(--oj-button-border-radius); */ /* --oj-buttonset-equal-width-overall-width: 100%; */ /* --oj-buttonset-internal-border-color: var(--oj-neutral-color-1); */ /* --oj-buttonset-internal-border-color-active: var(--oj-neutral-color-1); */ /* --oj-buttonset-internal-border-color-selected: var(--oj-neutral-color-1); */ /* --oj-buttonset-internal-border-color-selected-disabled: var(--oj-neutral-color-1); */ /* --oj-buttonset-outlined-chrome-internal-border-color: var(--oj-brand-color-dark-1); */ /* --oj-buttonset-outlined-chrome-internal-border-color-active: var(--oj-brand-color-dark-2); */ /* --oj-buttonset-outlined-chrome-internal-border-color-selected: var(--oj-buttonset-internal-border-color-selected); */ /* --oj-buttonset-outlined-chrome-internal-border-color-selected-disabled: var(--oj-button-border-color-disabled); */ /* --oj-buttonset-full-chrome-overall-width: var(--oj-buttonset-equal-width-overall-width);; */ /* --oj-buttonset-full-chrome-flex: 1; */ /* --oj-buttonset-half-chrome-overall-width: initial; */ /* --oj-buttonset-half-chrome-flex: auto; */ /* --oj-buttonset-outlined-chrome-overall-width: var(--oj-buttonset-equal-width-overall-width);; */ /* --oj-buttonset-outlined-chrome-flex: 1; */ /* Inputdatetime */ /*-----------------*/ /* --oj-date-time-picker-width: 275px; */ /* --oj-date-time-picker-padding: 15px; */ /* --oj-date-time-picker-switcher-bg-color: var(--oj-neutral-color-7); */ /* --oj-date-time-picker-switcher-padding: 5px var(--oj-date-time-picker-padding); */ /* --oj-date-time-picker-dropdown-threshold-padding: TBD; */ /* --oj-datepicker-bg-color-selected: var(--oj-link-text-color); */ /* --oj-datepicker-text-color-selected: var(--oj-neutral-color-1); */ /* --oj-datepicker-border-color-today: var(--oj-neutral-color-9); */ /* --oj-datepicker-bg-color-today: var(--oj-neutral-color-5); */ /* --oj-datepicker-bg-color-hover: var(--oj-brand-color-light-1); */ /* --oj-datepicker-text-color-hover: var(--oj-neutral-color-1); */ /* --oj-datepicker-border-color-focus: var(--oj-brand-color-light-1); */ /* --oj-datepicker-header-text-color: var(--oj-text-color-6); */ /* --oj-datepicker-button-text-color: var(--oj-link-text-color); */ /* --oj-datepicker-button-text-color-hover: var(--oj-brand-color-light-1); */ /* --oj-datepicker-button-text-color-active: var(--oj-link-text-color); */ /* --oj-datepicker-week-of-year-header-bg-color: var(--oj-neutral-color-3); */ /* --oj-datepicker-week-of-year-cell-bg-color: var(--oj-neutral-color-6); */ /* --oj-timepicker-item-bg-color-focus: var(--oj-brand-color-light-5); */ /* --oj-timepicker-text-color: var(--oj-brand-color); */ /* --oj-timepicker-text-color-hover: var(--oj-brand-color-light-1); */ /* --oj-timepicker-text-color-active: var(--oj-brand-color); */ /* Label */ /* -------------------------- */ /* --oj-form-control-label-color: var(--oj-text-color-3); */ /* --oj-form-control-label-font-size: var(--oj-font-size-sm); */ /* --oj-form-control-label-font-weight: normal; */ /* --oj-form-control-label-required-char: ""; */ /* --oj-form-control-label-required-char-font-size: 1.5rem; */ /* --oj-form-control-label-required-icon-color: var(--oj-accent-color-danger-4); */ /* --oj-form-control-label-required-icon-background-color: var(--oj-accent-color-danger-4); */ /* --oj-form-control-label-required-icon-border-radius: 50%; */ /* --oj-form-control-label-required-icon-height: 4px; */ /* --oj-form-control-label-required-icon-width: 4px; */ /* --oj-form-control-label-margin-bottom: 0.25em; */ /* --oj-form-control-inline-gutter: 0.625rem; */ /* --oj-form-control-inline-margin-top: 0.55em; */ /* Form Controls */ /* -------------------------- */ /* --oj-form-control-lg-max-width: 100%; */ /* --oj-form-control-md-max-width: 100%; */ /* --oj-form-control-min-width: 8em; */ /* --oj-form-control-border-radius: 0; */ /* --oj-form-control-border-top-width: 0; */ /* --oj-form-control-border-right-width: 0; */ /* --oj-form-control-border-bottom-width: 0; */ /* --oj-form-control-border-left-width: 0; */ /* --oj-form-control-padding-horizontal: 0; */ /* --oj-form-control-text-align: right; */ /* --oj-form-control-text-align-rtl: left; */ /* --oj-form-control-input-font-size: 1.0625rem; */ /* --oj-form-control-input-font-size-adjust: 100%; */ /* --oj-form-control-trigger-height: var(--oj-form-control-input-height); */ /* --oj-form-control-trigger-font-size: 1rem; */ /* --oj-form-control-trigger-font-size-adjust: var(--oj-form-control-input-font-size-adjust); */ /* messaging */ /* --oj-form-control-messaging-border-top-width: 0; */ /* --oj-form-control-messaging-border-right-width: 0; */ /* --oj-form-control-messaging-border-bottom-width: 2px; */ /* --oj-form-control-messaging-border-left-width: 0; */ /* --oj-form-control-border-color-invalid: var(--oj-accent-color-danger-3); */ /* --oj-form-control-border-color-warning: var(--oj-accent-color-attention-3); */ /* enabled */ /* --oj-form-control-bg-color: transparent; */ /* --oj-form-control-border-color: var(--oj-brand-color); */ /* --oj-form-control-placeholder-color: var(--oj-text-color-4); */ /* --oj-form-control-placeholder-font-style: normal; */ /* --oj-form-control-input-value-color: var(--oj-text-color); */ /* --oj-form-control-trigger-value-color: var(--oj-link-text-color); */ /* active */ /* --oj-form-control-trigger-bg-color-active: var(--oj-brand-color-light-5); */ /* disabled */ /* --oj-form-control-bg-color-disabled: var(--oj-form-control-bg-color); */ /* --oj-form-control-border-color-disabled: var(--oj-form-control-border-color); */ /* --oj-form-control-value-color-disabled: var(--oj-form-control-input-value-color); */ /* --oj-form-control-opacity-disabled: var(--oj-opacity-disabled); */ /* --oj-form-control-input-border-style-disabled: solid; */ /* readonly */ /* --oj-form-control-value-color-read-only: var(--oj-text-color); */ /* --oj-form-control-font-size-read-only: var(--oj-form-control-input-font-size); */ /* --oj-form-control-font-weight-read-only: bold; */ /* focus */ /* --oj-form-control-input-border-color-focus: var(--oj-form-control-border-color); */ /* --oj-form-control-input-border-top-width-focus: var(--oj-form-control-border-top-width); */ /* --oj-form-control-input-border-right-width-focus: var(--oj-form-control-border-right-width); */ /* --oj-form-control-input-border-bottom-width-focus: var(--oj-form-control-border-bottom-width); */ /* --oj-form-control-input-border-left-width-focus: var(--oj-form-control-border-left-width); */ /* Form Layout */ /* -------------------------- */ /* --oj-form-layout-border-color: var(--oj-neutral-color-8); */ /* --oj-form-layout-border-width: 1px; */ /* --oj-form-layout-divider-color: var(--oj-neutral-color-7); */ /* --oj-form-layout-divider-width: 1px; */ /* --oj-form-layout-divider-margin: var(--oj-form-layout-margin-bottom); */ /* --oj-form-layout-labels-inline-column-width: 22rem; */ /* --oj-form-layout-labels-inline-column-gap: normal; */ /* --oj-form-layout-column-width: 18.45rem; */ /* --oj-form-layout-column-gap: normal; */ /* --oj-form-layout-margin-bottom: 10px; */ /* --oj-form-layout-field-inline-justify-content: flex-end; */ /* --oj-form-layout-label-inline-margin-top: 0.5em; */ /* --oj-form-layout-label-inline-radio-checkbox-margin-top: 0.26rem; */ /* --oj-form-layout-label-inline-text-align: left; */ /* --oj-form-layout-label-inline-text-align-rtl: right; */ /* --oj-form-layout-field-inline-text-align: right; */ /* --oj-form-layout-field-inline-text-align-rtl: left; */ /* --oj-form-layout-label-inline-gutter-padding: 0.625rem; */ /* 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: 10px; */ /* --oj-input-number-input-to-button-border-width: var(--oj-form-control-border-right-width); */ /* --oj-input-number-input-to-button-border-width-focus: var(--oj-form-control-input-border-right-width-focus); */ /* --oj-input-number-input-to-button-messaging-border-width: var(--oj-form-control-messaging-border-right-width); */ /* --oj-input-number-input-to-button-border-radius: 0; */ /* --oj-input-number-button-width: 50px; */ /* --oj-input-number-button-border-radius: var(--oj-button-border-radius); */ /* --oj-input-number-button-border-width: 1px; */ /* --oj-input-number-buttonset-border-width: var(--oj-form-control-border-top-width); */ /* --oj-input-number-buttonset-border-width-focus: var(--oj-form-control-input-border-top-width-focus); */ /* --oj-input-number-buttonset-messaging-border-width: var(--oj-form-control-messaging-border-top-width); */ /* Listbox */ /* -------------------------- */ /* --oj-listbox-item-padding: 5px; */ /* --oj-listbox-indent-width: 15px; */ /* --oj-listbox-bg-color-focus: var(--oj-neutral-color-6); */ /* --oj-listbox-message-text-color: var(--oj-secondary-text-color); */ /* Menu */ /* -------------------------- */ /* --oj-menu-bg-color: var(--oj-popup-bg-color); */ /* --oj-menu-border-color: var(--oj-neutral-color-8); */ /* --oj-menu-padding: 0; */ /* --oj-menu-border-width: 1px; */ /* --oj-menu-border-radius: 5px; */ /* --oj-menu-font-size: var(--oj-font-size); */ /* --oj-menu-box-shadow: 0 2px 5px unquote('hsla(var(--oj-box-shadow-hsl),0.25)'); */ /* --oj-menu-submenu-box-shadow: 0 3px 7px unquote('hsla(var(--oj-box-shadow-hsl),0.25)'); */ /* --oj-menu-icon-size: 24px;*/ /* --oj-menu-icon-to-edge-padding: 0.625rem; */ /* --oj-menu-text-to-icon-padding: 0.5rem; */ /* --oj-menu-text-to-edge-padding: calc(16px + (2 * var(--oj-menu-submenu-icon-padding))); */ /* --oj-menu-submenu-icon-padding: 0.375rem; */ /* --oj-menu-text-only-text-align: center; // if center add 16px to above property value; */ /* --oj-menu-divider-margin: 0; */ /* --oj-menu-divider-border-color: var(--oj-menu-border-color); */ /* --oj-menu-divider-border-width: 2px; */ /* menu item */ /* --oj-menu-item-line-height: 2.6875rem; */ /* --oj-menu-item-text-color: var(--oj-brand-color-dark-1); */ /* --oj-menu-item-border-color: var(--oj-neutral-color-8); */ /* --oj-menu-item-border-width: 1px; */ /* --oj-menu-item-bg-color-focus: var(--oj-neutral-color-5); */ /* --oj-menu-item-border-color-focus: var(--oj-menu-item-border-color); */ /* --oj-menu-item-text-color-disabled: var(--oj-brand-color-light-1); */ /* --oj-menu-item-last-border-width: 0; */ /* --oj-menu-icon-color: var(--oj-menu-item-text-color); */ /* --oj-menu-icon-color-disabled: var(--oj-menu-item-text-color-disabled); */ /* --oj-menu-icon-opacity-disabled: var(--oj-opacity-disabled); */ /* --oj-menu-submenu-icon-color: var(--oj-neutral-color-11); */ /* 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: transparent; */ /* --oj-menu-sheet-border-radius: 12px; */ /* --oj-menu-sheet-font-size: 1.5rem; */ /* --oj-menu-sheet-margin-horizontal: 0.75rem; */ /* --oj-menu-sheet-divider-border-color: transparent; */ /* --oj-menu-sheet-divider-border-width: 8px; */ /* menu sheet item */ /* --oj-menu-sheet-item-line-height: 2.3333333333rem; */ /* --oj-menu-sheet-item-group-border-radius: 12px; */ /* --oj-menu-sheet-item-cancel-font-weight: bold; */ /* --oj-menu-sheet-item-text-color: var(--oj-brand-color-dark-1); */ /* --oj-menu-sheet-item-bg-color: var(--oj-neutral-color-1); */ /* --oj-menu-sheet-item-border-color: var(--oj-neutral-color-5); */ /* --oj-menu-sheet-item-border-width: var(--oj-menu-item-border-width); */ /* --oj-menu-sheet-item-bg-color-focus: var(--oj-menu-item-bg-color-focus); */ /* --oj-menu-sheet-item-border-color-focus: var(--oj-menu-item-bg-color-focus); */ /* --oj-menu-sheet-item-text-color-disabled: var(--oj-menu-item-text-color-disabled); */ /* Popup */ /* -------------------------- */ /* --oj-popup-border-width: 1px; */ /* --oj-popup-border-color: var(--oj-neutral-color-8); */ /* --oj-popup-bg-color: var(--oj-neutral-color-1); */ /* --oj-popup-border-radius: 12px; */ /* --oj-popup-box-shadow: var(--oj-box-shadow-sm); */ /* --oj-popup-content-padding: 0.5rem; */ /* --oj-popup-tail-border-color: var(--oj-popup-border-color); */ /* --oj-popup-tail-border-width: 1px; */ /* --oj-popup-tail-bg-color: var(--oj-popup-bg-color); */ /* --oj-popup-tail-box-shadow: var(--oj-box-shadow-sm); */ /* --oj-popup-tail-simple-height: 14px; */ /* --oj-popup-tail-simple-width: 14px; */ /* 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: 60vw; */ /* --oj-messages-general-overlay-max-width: 1639px; */ /* --oj-messages-general-overlay-min-width: 614px; */ /* --oj-messages-general-overlay-border-width: 0; */ /* --oj-messages-general-overlay-border-color: initial; */ /* --oj-messages-general-overlay-border-radius: initial; */ /* --oj-messages-general-overlay-box-shadow: initial; */ /* The following variables apply to the oj-messages parent that has display type set to 'notification' with position specified. */ /* --oj-messages-notification-overlay-width: 30vw; */ /* --oj-messages-notification-overlay-min-width: 307px; */ /* --oj-messages-notification-overlay-max-width: 820px; */ /* --oj-messages-notification-overlay-border-width: 0; */ /* --oj-messages-notification-overlay-border-color: initial; */ /* --oj-messages-notification-overlay-border-radius: initial; */ /* --oj-messages-notification-overlay-box-shadow: initial; */ /* 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: auto; */ /* --oj-message-category-text-color: var(--oj-text-color-5); */ /* --oj-message-category-font-size: 1.0625rem; */ /* --oj-message-summary-font-weight: 500; */ /* --oj-message-summary-text-color: var(--oj-primary-text-color); */ /* --oj-message-summary-font-size: 1.1875rem; */ /* --oj-message-summary-line-height: 1.2; */ /* --oj-message-detail-text-color: var(--oj-secondary-text-color); */ /* --oj-message-detail-font-size: 1.1875rem; */ /* --oj-message-detail-line-height: 1.2; */ /* --oj-message-time-text-color: var(--oj-secondary-text-color); */ /* --oj-message-time-font-size: 1.0625rem; */ /* '--oj-message-close-icon-display' specifies if close icon should be displayed. Valid values are 'none' and 'block'. */ /* --oj-message-close-icon-display: block; */ /* '--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: 0 0 1px 0; */ /* --oj-message-general-inline-border-color: var(--oj-neutral-color-9); */ /* The following variables apply to the messages displayed inline to form components. */ /* --oj-message-component-inline-bg-color-error: var(--oj-accent-color-danger-1); */ /* --oj-message-component-inline-border-color-error: var(--oj-accent-color-danger-2); */ /* --oj-message-component-inline-bg-color-warning: var(--oj-accent-color-attention-1); */ /* --oj-message-component-inline-border-color-warning: var(--oj-accent-color-attention-2); */ /* --oj-message-component-inline-bg-color-info: var(--oj-accent-color-info-1); */ /* --oj-message-component-inline-border-color-info: var(--oj-accent-color-info-2); */ /* --oj-message-component-inline-bg-color-confirmation: var(--oj-accent-color-confirmation-1); */ /* --oj-message-component-inline-border-color-confirmation: var(--oj-accent-color-confirmation-2); */ /* --oj-message-component-inline-margin-top: 5px; */ /* --oj-message-component-inline-border-top-width: 1px; */ /* --oj-message-component-inline-border-radius: 5px; */ /* --oj-message-radiocheckbox-inline-margin-top: 0; */ /* --oj-message-radiocheckbox-inline-border-top-width: 0; */ /* 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: 0; */ /* --oj-message-general-overlay-border-color: initial; */ /* --oj-message-general-overlay-border-radius: 12px; */ /* --oj-message-general-overlay-box-shadow: var(--oj-box-shadow-sm); */ /* --oj-message-general-overlay-header-bg-color: var(--oj-neutral-color-4); */ /* --oj-message-general-overlay-body-bg-color: var(--oj-neutral-color-6); */ /* '--oj-message-general-overlay-separator-margin' specifies margin used for separating / spacing between two successive message boxes. */ /* --oj-message-general-overlay-separator-margin: 8px; */ /* 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: var(--oj-neutral-color-4); */ /* --oj-message-notification-overlay-body-bg-color: var(--oj-neutral-color-6); */ /* --oj-message-notification-overlay-border-width: 0; */ /* --oj-message-notification-overlay-border-color: initial; */ /* --oj-message-notification-overlay-border-radius: 12px; */ /* --oj-message-notification-overlay-box-shadow: var(--oj-box-shadow-sm); */ /* '--oj-message-notification-overlay-separator-margin' specifies margin used for separating / spacing between two successive message boxes. */ /* --oj-message-notification-overlay-separator-margin: 8px; */ /* Navigation List */ /* -------------------------- */ /* --oj-navigation-list-category-divider-color: var(--oj-neutral-color-8); */ /* --oj-navigation-list-icon-only-icon-start-end-padding: 10px; */ /* --oj-navigation-list-horizontal-icon-margin: 5px 4px 4px; */ /* --oj-navigation-list-horizontal-font-size: 0.625rem;; */ /* --oj-navigation-list-icon-to-text-padding: 0.625rem; */ /* --oj-navigation-list-horizontal-icon-to-text-padding: 2px; */ /* Navigation List Item level variables */ /* --oj-navigation-list-item-min-height: 2.6875rem; */ /* --oj-navigation-list-horizontal-item-min-height: 2.75rem; */ /* --oj-navigation-list-item-label-text-wrap: nowrap; */ /* --oj-navigation-list-item-border-width-top: 0; */ /* --oj-navigation-list-item-border-width-right: 0; */ /* --oj-navigation-list-item-border-width-bottom: 0; */ /* --oj-navigation-list-item-border-width-left: 3px; */ /* --oj-navigation-list-item-start-end-padding: 0.625rem; */ /* --oj-navigation-list-item-icon-only-border-width-top: 0; */ /* --oj-navigation-list-item-icon-only-border-width-right: 0; */ /* --oj-navigation-list-item-icon-only-border-width-bottom: 0; */ /* --oj-navigation-list-item-icon-only-border-width-left: 3px; */ /* --oj-navigation-list-item-icon-only-margin: 0; */ /* --oj-navigation-list-horizontal-item-icon-only-margin: 0; */ /* --oj-navigation-list-horizontal-item-border-width: 0; */ /* --oj-navigation-list-horizontal-item-padding: 0 0.625rem 0; */ /* --oj-navigation-list-horizontal-item-stacked-min-height: 3.0625rem; */ /* --oj-navigation-list-horizontal-item-stacked-padding: var(--oj-navigation-list-horizontal-item-padding); */ /* default */ /* --oj-navigation-list-item-label-color-default: var(--oj-secondary-text-color); */ /* --oj-navigation-list-horizontal-item-label-color-default: var(--oj-navigation-list-item-label-color-default); */ /* --oj-navigation-list-item-icon-color-default: var(--oj-navigation-list-item-label-color-default); */ /* --oj-navigation-list-horizontal-item-icon-color-default: var(--oj-navigation-list-item-icon-color-default); */ /* --oj-navigation-list-horizontal-item-divider-color: var(--oj-neutral-color-7); */ /* --oj-navigation-list-collapsible-icon-color-default: var(--oj-navigation-list-item-label-color-default); */ /* hover */ /* --oj-navigation-list-item-bg-color-hover: var(--oj-neutral-color-7); */ /* --oj-navigation-list-item-border-color-hover: var(--oj-brand-color-light-1); */ /* --oj-navigation-list-item-icon-color-hover: var(--oj-icon-color-hover); */ /* --oj-navigation-list-item-icon-only-bg-color-hover: var(--oj-navigation-list-item-bg-color-hover); */ /* selected */ /* --oj-navigation-list-item-bg-color-selected: var(--oj-neutral-color-4); */ /* --oj-navigation-list-horizontal-item-bg-color-selected: transparent; */ /* --oj-navigation-list-item-border-color-selected: var(--oj-brand-color); */ /* --oj-navigation-list-item-label-color-selected: var(--oj-link-text-color); */ /* --oj-navigation-list-horizontal-item-label-color-selected: var(--oj-brand-color-dark-1); */ /* --oj-navigation-list-item-icon-color-selected: var(--oj-icon-color-selected); */ /* --oj-navigation-list-horizontal-item-icon-color-selected: var(--oj-brand-color); */ /* --oj-navigation-list-item-icon-only-bg-color-selected: var(--oj-brand-color); */ /* --oj-navigation-list-icon-only-icon-color-selected: var(--oj-brand-color); */ /* focus */ /* --oj-navigation-list-item-outline-color-focus: var(--oj-neutral-color-14); */ /* disabled */ /* --oj-navigation-list-item-label-color-disabled: var(--oj-navigation-list-item-label-color-default); */ /* --oj-navigation-list-icon-color-disabled: var(--oj-navigation-list-item-label-color-default); */ /* contrast default */ /* --oj-navigation-list-item-contrast-label-color-default: var(--oj-neutral-color-9); */ /* contrast hover */ /* --oj-navigation-list-item-contrast-bg-color-hover: var(--oj-neutral-color-16); */ /* --oj-navigation-list-item-contrast-label-color-hover: var(--oj-neutral-color-3); */ /* contrast selected */ /* --oj-navigation-list-item-contrast-bg-color-selected: var(--oj-neutral-color-16); */ /* --oj-navigation-list-horizontal-item-contrast-bg-color-selected: var(--oj-neutral-color-1); */ /* --oj-navigation-list-item-contrast-label-color-selected: var(--oj-neutral-color-3); */ /* --oj-navigation-list-horizontal-item-contrast-label-color-selected: var(--oj-text-color-3); */ /* contrast disabled */ /* --oj-navigation-list-item-contrast-label-color-disabled: var(--oj-navigation-list-item-contrast-label-color-default); */ /* Select */ /* -------------------------- */ /* --oj-select-arrow-padding-start: 5px; */ /* --oj-select-arrow-padding-end: 5px; */ /* --oj-select-arrow-color: var(--oj-icon-color-default); */ /* Tab Bar */ /* -------------------------- */ /* --oj-tab-bar-category-divider-color: var(--oj-neutral-color-8); */ /* --oj-tab-bar-border-radius-top-left: 4px; */ /* --oj-tab-bar-border-radius-top-right: 4px; */ /* --oj-tab-bar-border-radius-bottom-left: 4px; */ /* --oj-tab-bar-border-radius-bottom-right: 4px; */ /* --oj-tab-bar-icon-only-icon-start-end-padding: 10px; */ /* --oj-tab-bar-icon-to-text-padding: 0.625rem; */ /* --oj-tab-bar-horizontal-icon-to-text-padding: 2px; */ /* --oj-tab-bar-horizontal-icon-margin: 5px 4px 4px; */ /* Tab Bar Item level variables */ /* --oj-tab-bar-item-start-end-padding: 0.625rem; */ /* --oj-tab-bar-item-label-text-wrap: nowrap; */ /* --oj-tab-bar-item-truncated-label-min-width: 3rem; */ /* --oj-tab-bar-item-icon-only-border-width-top: 1px; */ /* --oj-tab-bar-horizontal-item-icon-only-border-width-top: 1px; */ /* --oj-tab-bar-item-icon-only-border-width-right: 1px; */ /* --oj-tab-bar-horizontal-item-icon-only-border-width-right: 1px; */ /* --oj-tab-bar-item-icon-only-border-width-bottom: 1px; */ /* --oj-tab-bar-horizontal-item-icon-only-border-width-bottom: 1px; */ /* --oj-tab-bar-item-icon-only-border-width-left: 1px; */ /* --oj-tab-bar-horizontal-item-icon-only-border-width-left: 1px; */ /* --oj-tab-bar-item-icon-only-margin: 0; */ /* --oj-tab-bar-horizontal-item-icon-only-margin: 0; */ /* --oj-tab-bar-item-border-width-top: 1px; */ /* --oj-tab-bar-horizontal-item-border-width-top: 1px; */ /* --oj-tab-bar-item-border-width-right: 1px; */ /* --oj-tab-bar-horizontal-item-border-width-right: 1px; */ /* --oj-tab-bar-item-border-width-bottom: 1px; */ /* --oj-tab-bar-horizontal-item-border-width-bottom: 1px; */ /* --oj-tab-bar-item-border-width-left: 1px; */ /* --oj-tab-bar-horizontal-item-border-width-left: 1px; */ /* --oj-tab-bar-item-min-height: 1.75rem; */ /* --oj-tab-bar-horizontal-item-min-height: 1.8125rem; */ /* --oj-tab-bar-horizontal-item-stacked-min-height: 3.9375rem; */ /* --oj-tab-bar-item-font-size: 0.8125rem; */ /* --oj-tab-bar-horizontal-item-font-size: 0.8125rem; */ /* --oj-tab-bar-horizontal-item-padding: 0 0.625rem 0; */ /* --oj-tab-bar-horizontal-item-stacked-padding: 0 0.625rem 0; */ /* default */ /* --oj-tab-bar-item-border-color: var(--oj-brand-color); */ /* --oj-tab-bar-horizontal-item-border-color: var(--oj-brand-color); */ /* --oj-tab-bar-item-icon-color-default: var(--oj-tab-bar-item-label-color-default); */ /* --oj-tab-bar-item-label-color-default: var(--oj-link-text-color); */ /* --oj-tab-bar-item-divider-color: var(--oj-brand-color); */ /* --oj-tab-bar-horizontal-item-divider-color: var(--oj-neutral-color-7); */ /* hover */ /* --oj-tab-bar-item-label-color-hover: var(--oj-tab-bar-item-label-color-default); */ /* --oj-tab-bar-horizontal-item-label-color-hover: var(--oj-tab-bar-item-icon-color-hover); */ /* --oj-tab-bar-item-bg-color-hover: var(--oj-neutral-color-7); */ /* --oj-tab-bar-item-border-color-hover: var(--oj-brand-color-light-1); */ /* --oj-tab-bar-horizontal-item-border-color-hover: var(--oj-tab-bar-item-border-color-hover); */ /* --oj-tab-bar-item-icon-only-bg-color-hover: var(--oj-tab-bar-item-bg-color-hover); */ /* --oj-tab-bar-item-icon-color-hover: var(--oj-icon-color-hover); */ /* active */ /* --oj-tab-bar-item-bg-color-active: var(--oj-brand-color-light-3); */ /* --oj-tab-bar-item-border-color-active: var(--oj-tab-bar-item-border-color-hover); */ /* selected */ /* --oj-tab-bar-item-font-weight-selected: normal; */ /* --oj-tab-bar-item-label-color-selected: var(--oj-contrast-text-color); */ /* --oj-tab-bar-horizontal-item-label-color-selected: var(--oj-tab-bar-item-label-color-selected); */ /* --oj-tab-bar-item-icon-color-selected: var(--oj-neutral-color-1); */ /* --oj-tab-bar-horizontal-item-icon-color-selected: var(--oj-tab-bar-item-icon-color-selected); */ /* --oj-tab-bar-item-bg-color-selected: var(--oj-brand-color); */ /* --oj-tab-bar-horizontal-item-bg-color-selected: var(--oj-tab-bar-item-bg-color-selected); */ /* --oj-tab-bar-item-border-color-selected: var(--oj-brand-color); */ /* --oj-tab-bar-horizontal-item-border-color-selected: var(--oj-tab-bar-item-border-color-selected); */ /* --oj-tab-bar-item-icon-only-bg-color-selected: var(--oj-brand-color); */ /* --oj-tab-bar-icon-only-icon-color-selected: var(--oj-neutral-color-1); */ /* focus */ /* --oj-tab-bar-item-outline-color-focus: var(--oj-neutral-color-14); */ /* disabled*/ /* --oj-tab-bar-item-label-color-disabled: var(--oj-tab-bar-item-label-color-default); */ /* --oj-tab-bar-icon-color-disabled: var(--oj-tab-bar-item-label-color-disabled); */ /* contrast default */ /* --oj-tab-bar-item-contrast-label-color-default: var(--oj-neutral-color-9); */ /* contrast hover */ /* --oj-tab-bar-item-contrast-label-color-hover: var(--oj-neutral-color-3); */ /* --oj-tab-bar-item-contrast-bg-color-hover: var(--oj-neutral-color-16); */ /* contrast selected */ /* --oj-tab-bar-item-contrast-label-color-selected: var(--oj-neutral-color-3); */ /* --oj-tab-bar-item-contrast-bg-color-selected: var(--oj-brand-color); */ /* --oj-tab-bar-horizontal-item-contrast-label-color-selected: var(--oj-neutral-color-3); */ /* --oj-tab-bar-horizontal-item-contrast-bg-color-selected: var(--oj-tab-bar-item-contrast-bg-color-selected); */ /* contrast disabled */ /* --oj-tab-bar-item-contrast-label-color-disabled: var(--oj-tab-bar-item-contrast-label-color-default); */ /* contrast active */ /* --oj-tab-bar-item-contrast-bg-color-active: var(--oj-neutral-color-16); */ /* toolbar */ /* -------------------------- */ /* --oj-toolbar-bg-color: transparent; */ /* --oj-toolbar-border-color: var(--oj-neutral-color-8); */ /* --oj-toolbar-border-width: 0; */ /* swipeactions */ /* -------------------------- */ /*----radioset/checkboxset---*/ /* --oj-radio-checkbox-width: 100%; */ /* --oj-radio-checkbox-image-size: 16px; */ /* --oj-radio-checkbox-row-height: 2.6rem; */ /* --oj-radio-checkbox-label-to-edge-padding: 10px; */ /* --oj-radio-checkbox-input-to-label-padding: 10px; */ /* --oj-radio-checkbox-input-to-edge-padding: 10px; */ /* --oj-radio-checkbox-direction-row-inline-padding: 1.5rem; */ /* --oj-radio-checkbox-label-color: var(--oj-text-color); */ /* --oj-radio-checkbox-label-color-selected: var(--oj-brand-color); */ /* --oj-radio-checkbox-set-border-width: 1px; */ /* --oj-radio-checkbox-set-bg-color: var(--oj-neutral-color-1); */ /* --oj-radio-checkbox-set-border-color: var(--oj-neutral-color-8); */ /* --oj-radio-checkbox-item-divider-color: var(--oj-neutral-color-8); */ /* --oj-radio-checkbox-item-bg-color-active: var(--oj-neutral-color-8); */ /* --oj-radio-checkbox-item-divider-color-active: var(--oj-neutral-color-11); */ /*--specifies the padding between message border and radio/checkbox set--*/ /* --oj-radio-checkbox-set-message-padding: 0; */ /* switch */ /* -------------------------- */ /* --oj-switch-container-height: 1.9375rem; */ /* --oj-switch-container-width: 3.1251875rem; */ /* --oj-switch-track-height: 1.87491875rem; */ /* --oj-switch-track-width: 3.187575rem; */ /* --oj-switch-track-border-width: 2px; */ /* --oj-switch-track-border-width-readonly: 2px; */ /* --oj-switch-thumb-border-width: 1px; */ /* --oj-switch-thumb-border-width-readonly: 1px; */ /* --oj-switch-thumb-height: 1.62498125rem; */ /* --oj-switch-thumb-width: 1.62498125rem; */ /* --oj-switch-thumb-box-shadow: 0 3px 1px unquote('hsla(var(--oj-box-shadow-hsl),0.05)'), 0 0 8px unquote('hsla(var(--oj-box-shadow-hsl),0.05)'); */ /* --oj-switch-track-bg-color: var(--oj-neutral-color-2); */ /* --oj-switch-track-border-color: var(--oj-neutral-color-7); */ /* --oj-switch-thumb-bg-color: var(--oj-neutral-color-1); */ /* --oj-switch-thumb-border-color: var(--oj-neutral-color-9); */ /* --oj-switch-thumb-height-selected: 1.62498125rem; */ /* --oj-switch-thumb-width-selected: 1.62498125rem; */ /* --oj-switch-thumb-box-shadow-selected: 0 3px 1px unquote('hsla(var(--oj-box-shadow-hsl),0.05)'), 0 0 8px unquote('hsla(var(--oj-box-shadow-hsl),0.05)'); */ /* --oj-switch-track-bg-color-selected: var(--oj-brand-color); */ /* --oj-switch-track-border-color-selected: var(--oj-brand-color); */ /* --oj-switch-thumb-bg-color-selected: var(--oj-neutral-color-1); */ /* --oj-switch-thumb-border-color-selected: var(--oj-brand-color); */ /* --oj-switch-thumb-height-hover: 2.12505rem; */ /* --oj-switch-thumb-width-hover: 2.12505rem; */ /* --oj-switch-thumb-border-width-hover: 1px; */ /* --oj-switch-track-bg-color-hover: var(--oj-neutral-color-2); */ /* --oj-switch-track-border-color-hover: var(--oj-neutral-color-7); */ /* --oj-switch-thumb-bg-color-hover: var(--oj-brand-color-light-5); */ /* --oj-switch-thumb-border-color-hover: var(--oj-brand-color-light-2); */ /* --oj-switch-thumb-height-selected-hover: 2.12505rem; */ /* --oj-switch-thumb-width-selected-hover: 2.12505rem; */ /* --oj-switch-thumb-border-width-selected-hover: 1px; */ /* --oj-switch-track-bg-color-selected-hover: var(--oj-brand-color); */ /* --oj-switch-track-border-color-selected-hover: var(--oj-brand-color); */ /* --oj-switch-thumb-bg-color-selected-hover: var(--oj-brand-color-light-5); */ /* --oj-switch-thumb-border-color-selected-hover: var(--oj-brand-color-light-2); */ /* --oj-switch-thumb-height-active: 2.12505rem; */ /* --oj-switch-thumb-width-active: 2.12505rem; */ /* --oj-switch-thumb-border-width-active: 1px; */ /* --oj-switch-track-bg-color-active: var(--oj-neutral-color-2); */ /* --oj-switch-track-border-color-active: var(--oj-neutral-color-7); */ /* --oj-switch-thumb-bg-color-active: var(--oj-brand-color-light-5); */ /* --oj-switch-thumb-border-color-active: var(--oj-brand-color-light-2); */ /* --oj-switch-thumb-height-selected-active: 2.12505rem; */ /* --oj-switch-thumb-width-selected-active: 2.12505rem; */ /* --oj-switch-thumb-border-width-selected-active: 1px; */ /* --oj-switch-track-bg-color-selected-active: var(--oj-brand-color); */ /* --oj-switch-track-border-color-selected-active: var(--oj-brand-color); */ /* --oj-switch-thumb-bg-color-selected-active: var(--oj-brand-color-light-5); */ /* --oj-switch-thumb-border-color-selected-active: var(--oj-brand-color-light-2); */ /* --oj-switch-thumb-height-readonly: 1.62498125rem; */ /* --oj-switch-thumb-width-readonly: 1.62498125rem; */ /* --oj-switch-track-bg-color-readonly: var(--oj-neutral-color-2); */ /* --oj-switch-track-border-color-readonly: var(--oj-neutral-color-17); */ /* --oj-switch-thumb-bg-color-readonly: var(--oj-neutral-color-1); */ /* --oj-switch-thumb-border-color-readonly: var(--oj-neutral-color-17); */ /* --oj-switch-thumb-height-selected-readonly: 1.62498125rem; */ /* --oj-switch-thumb-width-selected-readonly: 1.62498125rem; */ /* --oj-switch-track-bg-color-selected-readonly: var(--oj-neutral-color-17); */ /* --oj-switch-track-border-color-selected-readonly: var(--oj-neutral-color-17); */ /* --oj-switch-thumb-bg-color-selected-readonly: var(--oj-neutral-color-1); */ /* --oj-switch-thumb-border-color-selected-readonly: var(--oj-neutral-color-1); */ /* --oj-switch-thumb-height-disabled: 1.62498125rem; */ /* --oj-switch-thumb-width-disabled: 1.62498125rem; */ /* --oj-switch-track-bg-color-disabled: var(--oj-neutral-color-2); */ /* --oj-switch-track-border-color-disabled: var(--oj-neutral-color-7); */ /* --oj-switch-thumb-bg-color-disabled: var(--oj-neutral-color-1); */ /* --oj-switch-thumb-border-color-disabled: var(--oj-neutral-color-9); */ /* --oj-switch-thumb-height-selected-disabled: 1.62498125rem; */ /* --oj-switch-thumb-width-selected-disabled: 1.62498125rem; */ /* --oj-switch-track-bg-color-selected-disabled: var(--oj-brand-color); */ /* --oj-switch-track-border-color-selected-disabled: var(--oj-brand-color); */ /* --oj-switch-thumb-bg-color-selected-disabled: var(--oj-neutral-color-1); */ /* --oj-switch-thumb-border-color-selected-disabled: var(--oj-neutral-color-1); */ /* animation during for swipe actions to open and close */ /* --oj-swipe-actions-animation-duration: var(--oj-animation-duration-medium); */ /* --oj-swipe-actions-text-color: var(--oj-neutral-color-1); */ /* --oj-swipe-actions-item-width: 75px; */ /* --oj-swipe-actions-icon-to-text-padding: 0.625rem; */ /* --oj-swipe-actions-default-bg-color: var(--oj-brand-color); */ /* --oj-swipe-actions-neutral-bg-color: var(--oj-neutral-color-13); */ /* --oj-swipe-actions-attention-bg-color: var(--oj-accent-color-attention-5); */ /* --oj-swipe-actions-danger-bg-color: var(--oj-accent-color-danger-5); */ /* dvt */ /* --oj-dvt-category-color-1: var(--oj-accent-color-dvt-1); */ /* --oj-dvt-category-color-2: var(--oj-accent-color-dvt-2); */ /* --oj-dvt-category-color-3: var(--oj-accent-color-dvt-3); */ /* --oj-dvt-category-color-4: var(--oj-accent-color-dvt-4); */ /* --oj-dvt-category-color-5: var(--oj-accent-color-dvt-5); */ /* --oj-dvt-category-color-6: var(--oj-accent-color-dvt-6); */ /* --oj-dvt-category-color-7: var(--oj-accent-color-dvt-7); */ /* --oj-dvt-category-color-8: var(--oj-accent-color-dvt-8); */ /* --oj-dvt-category-color-9: var(--oj-accent-color-dvt-9); */ /* --oj-dvt-category-color-10: var(--oj-accent-color-dvt-10); */ /* --oj-dvt-category-color-11: var(--oj-accent-color-dvt-11); */ /* --oj-dvt-category-color-12: var(--oj-accent-color-dvt-12); */ /* --oj-dvt-animation-duration: var(--oj-animation-duration-long); */ /* --oj-dvt-tooltip-bg-color: var(--oj-neutral-color-1); */ /* --oj-dvt-tooltip-border-color: var(--oj-neutral-color-17); */ /* --oj-dvt-item-outer-border-color-selected: var(--oj-neutral-color-17); */ /* --oj-dvt-item-inner-border-color-selected: var(--oj-neutral-color-1); */ /* --oj-dvt-icon-bg-color: var(--oj-neutral-color-1); */ /* --oj-dvt-icon-border-color: var(--oj-neutral-color-7); */ /* --oj-dvt-icon-bg-color-active: var(--oj-button-bg-color-active); */ /* --oj-dvt-icon-border-color-active: var(--oj-button-border-color-active); */ /* --oj-chart-axis-title-textcolor: var(--oj-tertiary-text-color); */ /* --oj-chart-stock-falling-bg-color: var(--oj-accent-color-dvt-4); */ /* --oj-chart-stock-range-bg-color: var(--oj-neutral-color-9); */ /* --oj-chart-stock-rising-bg-color: var(--oj-neutral-color-13); */ /* --oj-chart-tooltip-label-color: var(--oj-text-color-3); */ /* --oj-diagram-node-border-color-hover: var(--oj-neutral-color-11); */ /* --oj-diagram-link-color: var(--oj-neutral-color-11); */ /* --oj-diagram-link-border-color-hover: var(--oj-diagram-link-color); */ /* --oj-diagram-overview-bg-color: var(--oj-neutral-color-7); */ /* --oj-diagram-overview-window-bg-color: var(--oj-neutral-color-1); */ /* --oj-diagram-overview-window-border-color: var(--oj-neutral-color-14); */ /* --oj-diagram-overview-node-bg-color: var(--oj-neutral-color-14); */ /* --oj-gauge-threshold-color-1: var(--oj-accent-color-dvt-4); */ /* --oj-gauge-threshold-color-2: var(--oj-accent-color-dvt-3); */ /* --oj-gauge-threshold-color-3: var(--oj-accent-color-dvt-2); */ /* --oj-n-box-cell-bg-color: var(--oj-neutral-color-5); */ /* --oj-n-box-cell-bg-color-maximized: var(--oj-neutral-color-8); */ /* --oj-n-box-cell-bg-color-minimized: var(--oj-n-box-cell-bg-color); */ /* --oj-n-box-dialog-border-color: var(--oj-neutral-color-9); */ /* --oj-n-box-node-bg-color: var(--oj-neutral-color-1); */ /* --oj-picto-chart-item-bg-color: var(--oj-neutral-color-11); */ /* --oj-sunburst-drill-text-color: var(--oj-link-text-color); */ /* --oj-sunburst-node-border-color-hover: var(--oj-neutral-color-6); */ /* --oj-sunburst-legend-label-color: var(--oj-text-color-3); */ /* --oj-thematic-map-bg-color: var(--oj-neutral-color-7); */ /* --oj-thematic-map-border-color: var(--oj-neutral-color-1); */ /* --oj-thematic-map-marker-bg-color: var(--oj-neutral-color-15); */ /* --oj-thematic-map-marker-border-color: var(--oj-neutral-color-1); */ /* --oj-thematic-map-link-color: var(--oj-neutral-color-11); */ /* --oj-treemap-node-border-color-hover: var(--oj-neutral-color-6); */ /* --oj-treemap-node-header-bg-color: var(--oj-neutral-color-1); */ /* --oj-treemap-node-header-bg-color-selected: var(--oj-brand-color-light-3); */ /* --oj-treemap-node-header-border-color: var(--oj-neutral-color-7); */ /* --oj-treemap-node-header-border-color-hover: var(--oj-neutral-color-8); */ /* --oj-treemap-drill-text-color: var(--oj-link-text-color); */ /* --oj-treemap-legend-label-color: var(--oj-text-color-3); */ /* gantt */ /* -------------------------- */ /* --oj-gantt-bg-color: var(--oj-collection-bg-color); */ /* --oj-gantt-border-color: var(--oj-collection-border-color); */ /* --oj-gantt-empty-text-color: var(--oj-text-color); */ /* --oj-gantt-horizontal-gridline-color: var(--oj-collection-cell-border-color); */ /* --oj-gantt-vertical-gridline-color: var(--oj-neutral-color-10); */ /* --oj-gantt-dependency-line-color: var(--oj-neutral-color-14); */ /* --oj-gantt-summary-bg-color: var(--oj-neutral-color-12); */ /* --oj-gantt-milestone-bg-color: var(--oj-neutral-color-13); */ /* --oj-gantt-row-bg-color: var(--oj-collection-cell-bg-color); */ /* --oj-gantt-reference-object-color: var(--oj-accent-color-dvt-4); */ /* --oj-gantt-task-bg-color: var(--oj-accent-color-dvt-1); */ /* --oj-gantt-task-border-color-selected: var(--oj-dvt-item-outer-border-color-selected); */ /* --oj-gantt-task-drag-image-border-color: var(--oj-neutral-color-15); */ /* --oj-gantt-major-axis-bg-color: var(--oj-collection-header-bg-color); */ /* --oj-gantt-major-axis-border-color: var(--oj-collection-header-border-color); */ /* --oj-gantt-major-axis-label-color: var(--oj-collection-header-text-color); */ /* --oj-gantt-major-axis-separator-color: var(--oj-collection-header-border-color); */ /* --oj-gantt-minor-axis-bg-color: var(--oj-gantt-major-axis-bg-color); */ /* --oj-gantt-minor-axis-border-color: var(--oj-gantt-major-axis-border-color); */ /* --oj-gantt-minor-axis-label-color: var(--oj-collection-cell-text-color); */ /* --oj-gantt-minor-axis-separator-color: var(--oj-gantt-major-axis-separator-color); */ /* --oj-gantt-tooltip-label-color: var(--oj-text-color-3); */ /* timeaxis */ /* -------------------------- */ /* --oj-time-axis-bg-color: transparent; */ /* --oj-time-axis-border-color: var(--oj-neutral-color-7); */ /* --oj-time-axis-label-color: var(--oj-text-color); */ /* --oj-time-axis-separator-color: var(--oj-neutral-color-7); */ /* timeline */ /* -------------------------- */ /* --oj-timeline-reference-object-color: var(--oj-accent-color-dvt-4); */ /* --oj-timeline-border-color: var(--oj-neutral-color-7); */ /* --oj-timeline-item-bg-color: var(--oj-neutral-color-1); */ /* --oj-timeline-item-border-color: var(--oj-neutral-color-12); */ /* --oj-timeline-item-border-color-hover: var(--oj-brand-color-light-1); */ /* --oj-timeline-item-border-color-selected: var(--oj-dvt-item-outer-border-color-selected); */ /* --oj-timeline-item-description-color: var(--oj-text-color); */ /* --oj-timeline-item-title-color: var(--oj-secondary-text-color); */ /* --oj-timeline-major-axis-label-color: var(--oj-secondary-text-color); */ /* --oj-timeline-major-axis-separator-color: var(--oj-neutral-color-9); */ /* --oj-timeline-minor-axis-bg-color: var(--oj-neutral-color-5); */ /* --oj-timeline-minor-axis-border-color: var(--oj-neutral-color-7); */ /* --oj-timeline-minor-axis-label-color: var(--oj-text-color); */ /* --oj-timeline-minor-axis-separator-color: var(--oj-timeline-major-axis-separator-color); */ /* --oj-timeline-overview-bg-color: var(--oj-neutral-color-7); */ /* --oj-timeline-overview-label-color: var(--oj-secondary-text-color); */ /* --oj-timeline-overview-window-bg-color: var(--oj-neutral-color-1); */ /* --oj-timeline-overview-window-border-color: var(--oj-neutral-color-14); */ /* --oj-timeline-series-bg-color: var(--oj-neutral-color-3); */ /* --oj-timeline-series-label-color: var(--oj-header-text-color); */ /* --oj-timeline-series-empty-text-color: var(--oj-text-color); */ /* --oj-timeline-tooltip-label-color: var(--oj-text-color-3); */ /* paging control */ /* -------------------------- */ /* --oj-paging-padding: 5px; */ /* --oj-paging-dot-size: 7px; */ /* --oj-paging-dot-padding: 8px; */ /* --oj-paging-border-color: var(--oj-neutral-color-8); */ /* indexer */ /* -------------------------- */ /* --oj-indexer-item-width: 32px; */ /* --oj-indexer-item-height: 18px; */ /* height of each item when indexer is in abbreviated form */ /* --oj-indexer-abbr-item-height: 14px; */ /* --oj-indexer-font-weight: bold; */ /* --oj-indexer-text-color: var(--oj-link-text-color); */ /* --oj-indexer-text-color-disabled: var(--oj-link-text-color); */ /* --oj-indexer-text-decoration: none; */ /* --oj-indexer-text-decoration-hover: none; */ /* collections (used by components like table, data grid, list view) */ /* ---------------------------- */ /* --oj-collection-bg-color: var(--oj-neutral-color-1); */ /* --oj-collection-border-color: var(--oj-neutral-color-7); */ /* --oj-collection-status-bg-color: var(--oj-neutral-color-1); */ /* this is for the little grabbys in touch selection, we call them selection affordances */ /* --oj-collection-selection-affordance-border-color: var(--oj-brand-color); */ /* --oj-collection-column-width: 4.25rem; */ /* --oj-collection-row-height: 2.6875rem; */ /* --oj-collection-header-font-size: var(--oj-font-size-sm); */ /* --oj-collection-header-font-weight: normal; */ /* --oj-collection-header-bg-color: var(--oj-neutral-color-1); */ /* --oj-collection-header-border-color: var(--oj-collection-border-color); */ /* --oj-collection-header-text-color: var(--oj-header-text-color); */ /* --oj-collection-header-height: var(--oj-collection-row-height); */ /* --oj-collection-column-header-justify-content: center; */ /* --oj-collection-column-header-align-items: center; */ /* --oj-collection-row-header-justify-content: flex-start; */ /* --oj-collection-row-header-align-items: center; */ /* --oj-collection-header-bg-color-hover: var(--oj-neutral-color-4); */ /* --oj-collection-header-bg-color-selected: var(--oj-brand-color-light-2); */ /* --oj-collection-header-bg-color-selected-inactive: var(--oj-neutral-color-5); */ /* --oj-collection-header-bg-color-drag: var(--oj-brand-color-light-4); */ /* --oj-collection-header-drag-image-border-color: var(--oj-brand-color); */ /* --oj-collection-cell-align-items: center; */ /* --oj-collection-cell-justify-content: center; */ /* --oj-collection-cell-align-text: center; */ /* --oj-collection-cell-align-text-rtl: center; */ /* --oj-collection-cell-font-size: inherit; */ /* --oj-collection-cell-text-color: var(--oj-text-color); */ /* --oj-collection-cell-bg-color: var(--oj-neutral-color-1); */ /* --oj-collection-cell-border-color: var(--oj-neutral-color-8); */ /* --oj-collection-cell-banded-bg-color: var(--oj-neutral-color-3); */ /* --oj-collection-cell-padding: 0.625rem; */ /* --oj-collection-cell-border-color-focus: var(--oj-collection-cell-border-color); */ /* --oj-collection-editable-cell-border-color-focus: var(--oj-neutral-color-17); */ /* --oj-collection-cell-bg-color-hover: var(--oj-neutral-color-3); */ /* --oj-collection-cell-border-color-hover: var(--oj-collection-cell-border-color); */ /* --oj-collection-cell-bg-color-selected: var(--oj-neutral-color-8); */ /* --oj-collection-cell-border-color-selected: var(--oj-neutral-color-11); */ /* --oj-collection-cell-bg-color-selected-inactive: var(--oj-collection-cell-bg-color-selected); */ /* --oj-collection-cell-border-color-selected-inactive: var(--oj-collection-cell-border-color-selected); */ /* --oj-collection-editable-cell-bg-color-read-only: var(--oj-neutral-color-5); */ /* --oj-collection-cell-bg-color-drag: var(--oj-brand-color-light-5); */ /* --oj-collection-cell-drag-image-border-color: transparent; */ /* row expander */ /* ---------------------------- */ /* --oj-row-expander-indent-width: 16px; */ /* --oj-row-expander-spacer-width: 1.5rem; */ /* table */ /* ---------------------------- */ /* --oj-table-header-border-color: var(--oj-neutral-color-7); */ /* --oj-table-row-height: 2.75em; */ /* tree view */ /* ---------------------------- */ /* --oj-tree-view-spacer-width: 24px; */ /* --oj-tree-view-spacer-height: 30px; */ /* --oj-tree-view-text-color: var(--oj-link-text-color); */ /* --oj-tree-view-item-bg-color-hover: var(--oj-collection-cell-bg-color-hover); */ /* --oj-tree-view-item-bg-color-selected: var(--oj-collection-cell-bg-color-selected); */ /* --oj-tree-view-item-bg-color-selected-inactive: var(--oj-tree-view-item-bg-color-selected); */ /* --oj-tree-view-drop-line-color: var(--oj-brand-color); */ /* --oj-tree-view-drop-marker-color: var(--oj-brand-color); */ /* listview */ /* -------------------------- */ /* color for the drill to detail icon of an item */ /* --oj-list-view-drill-icon-color: var(--oj-neutral-color-11); */ /* --oj-list-view-header-bg-color: var(--oj-neutral-color-5); */ /* --oj-list-view-header-bg-color-disabled: var(--oj-neutral-color-3); */ /* --oj-list-view-header-bg-image: none; */ /* --oj-list-view-header-font-weight: bold; */ /* --oj-list-view-header-font-size: var(--oj-header-4-font-size); */ /* --oj-list-view-header-border-width-expanded: 0; */ /* --oj-list-view-header-border-width-collapsed: 0 0 1px; */ /* --oj-list-view-header-opacity: 1; */ /* position where the bottom border of an item starts */ /* --oj-list-view-item-border-position: 0.5rem; */ /* --oj-list-view-card-width: 240px; */ /* --oj-list-view-card-height: auto; */ /* --oj-list-view-card-margin-top: 10px; */ /* --oj-list-view-card-margin-end: 10px; */ /* --oj-list-view-card-margin-bottom: 0; */ /* --oj-list-view-card-margin-start: 0; */ /* refresher */ /* -------------------------- */ /* --oj-refresher-bg-color: var(--oj-neutral-color-5); */ /* --oj-refresher-animation-duration: var(--oj-animation-duration-medium); */ /* Applayout */ /* -------------------------- */ /* --oj-app-layout-offcanvas-width: 90%;*/ /* --oj-app-layout-offcanvas-max-width: 320px;*/ /* --oj-app-layout-max-width: 1440px;*/ /* Applayout (Web) */ /* -------------------------- */ /* --oj-app-layout-web-padding: 20px;*/ /* --oj-app-layout-web-header-bg-color: var(--oj-neutral-color-5);*/ /* --oj-app-layout-web-header-border-color: var(--oj-header-border-color); */ /* --oj-app-layout-web-header-title-font-size: 1.25rem;*/ /* --oj-app-layout-web-header-title-font-weight: normal;*/ /* --oj-app-layout-web-header-title-text-color: var(--oj-secondary-text-color);*/ /* --oj-app-layout-web-header-box-shadow: 0 3px 3px unquote('hsla(var(--oj-box-shadow-hsl),0.1)');*/ /* --oj-app-layout-web-header-min-height: 3.143rem;*/ /* --oj-app-layout-web-footer-bg-color: var(--oj-app-layout-web-header-bg-color);*/ /* --oj-app-layout-web-footer-border-color: var(--oj-app-layout-web-header-border-color);*/ /* --oj-app-layout-web-footer-min-height: 3.571rem;*/ /* --oj-app-layout-web-offcanvas-bg-color: var(--oj-contrast-background-1-color);*/ /* Applayout (Hybrid) */ /* -------------------------- */ /* --oj-app-layout-hybrid-padding: 0.625rem;*/ /* --oj-app-layout-hybrid-header-title-text-color: var(--oj-text-color);*/ /* --oj-app-layout-hybrid-header-border-color: var(--oj-neutral-color-7); */ /* --oj-app-layout-hybrid-header-border-bottom-width: 1px;*/ /* --oj-app-layout-hybrid-header-bg-color: var(--oj-neutral-color-5);*/ /* --oj-app-layout-hybrid-header-min-height: 44px;*/ /* --oj-app-layout-hybrid-header-box-shadow: none;*/ /* --oj-app-layout-hybrid-header-title-font-size: 1.125rem;*/ /* --oj-app-layout-hybrid-header-title-font-weight: normal;*/ /* --oj-app-layout-hybrid-footer-border-color: var(--oj-app-layout-hybrid-header-border-color); */ /* --oj-app-layout-hybrid-footer-border-top-width: 1px;*/ /* --oj-app-layout-hybrid-footer-bg-color: var(--oj-app-layout-hybrid-header-bg-color);*/ /* --oj-app-layout-hybrid-footer-min-height: 48px;*/ /* --oj-app-layout-hybrid-nav-bar-box-shadow: none;*/ /* --oj-app-layout-hybrid-offcanvas-bg-color: var(--oj-contrast-background-1-color);*/ /* FilmStrip */ /* -------------------------- */ /* --oj-film-strip-arrow-opacity: 1; */ /* --oj-film-strip-arrow-border-radius: var(--oj-button-border-radius); */ /* --oj-film-strip-overflow-indicator-height: 1.8125rem; // 29px when root is 16px */ /* ConveyorBelt */ /* -------------------------- */ /* --oj-conveyor-belt-overflow-indicator-height: 1.8125rem; // 29px when root is 16px */ /* MasonryLayout */ /* -------------------------- */ /* --oj-masonry-layout-tile-margin: var(--oj-spacing-1x); // margin around a masonryLayout tile */ /* --oj-masonry-layout-tile-width: 150px; // width of a 1x1 masonryLayout tile, not including margin */ /* --oj-masonry-layout-tile-height: 150px; // height of a 1x1 masonryLayout tile, not including margin */ /* slider */ /* -------------------------- */ /* --oj-slider-thumb-width: 26px; */ /* --oj-slider-thumb-height: var(--oj-slider-thumb-width); */ /* --oj-slider-thumb-width-active: 34px; */ /* --oj-slider-thumb-height-active: var(--oj-slider-thumb-width-active); */ /* --oj-slider-thumb-border-radius: 50%; */ /* --oj-slider-thumb-border-width: 1px; */ /* --oj-slider-thumb-box-shadow: 0 3px 1px unquote('hsla(var(--oj-box-shadow-hsl),0.05)'), 0 0 8px unquote('hsla(var(--oj-box-shadow-hsl),0.2)'); */ /* --oj-slider-thumb-bg-color: var(--oj-neutral-color-1); */ /* --oj-slider-thumb-border-color: var(--oj-neutral-color-9); */ /* --oj-slider-thumb-bg-color-hover: var(--oj-neutral-color-7); */ /* --oj-slider-thumb-bg-color-active: var(--oj-neutral-color-7); */ /* --oj-slider-thumb-border-color-active: var(--oj-neutral-color-9); */ /* --oj-slider-thumb-bg-color-disabled: var(--oj-neutral-color-1); */ /* --oj-slider-thumb-border-color-disabled: var(--oj-neutral-color-7); */ /* --oj-slider-bar-thickness: 2px; */ /* --oj-slider-bar-bg-color: var(--oj-neutral-color-11); */ /* --oj-slider-bar-value-bg-color: var(--oj-brand-color); */ /* --oj-slider-bar-value-bg-color-active: var(--oj-slider-bar-value-bg-color); */ /* --oj-slider-bar-bg-color-disabled: var(--oj-neutral-color-8); */ /* --oj-slider-bar-value-bg-color-disabled: var(--oj-neutral-color-12); */ /* --oj-slider-color-picker-thumb-width: 24px; */ /* --oj-slider-color-picker-thumb-height: var(--oj-slider-color-picker-thumb-width); */ /* --oj-slider-color-picker-thumb-width-active: 34px; */ /* --oj-slider-color-picker-thumb-height-active: var(--oj-slider-color-picker-thumb-width-active); */ /* --oj-slider-color-picker-thumb-border-radius: 17px; */ /* --oj-slider-color-picker-thumb-border-width: 3px; */ /* --oj-slider-color-picker-thumb-border-color: var(--oj-neutral-color-1); */ /* --oj-slider-color-picker-thumb-box-shadow: var(--oj-box-shadow-md); */ /* --oj-slider-color-picker-bar-thickness: 10px; */ /* color palette */ /* ---------------------------- */ /* --oj-color-palette-text-color: var(--oj-text-color); */ /* --oj-color-palette-grid-font-size: var(--oj-font-size-sm); */ /* --oj-color-palette-swatch-inner-border-color: var(--oj-neutral-color-14); */ /* --oj-color-palette-swatch-outer-border-color-selected: var(--oj-brand-color-dark-1); */ /* --oj-color-palette-grid-swatch-xl-size: 64px; */ /* --oj-color-palette-grid-swatch-lg-size: 64px; */ /* --oj-color-palette-grid-swatch-sm-size: 29px; */ /* --oj-color-palette-grid-swatch-xs-size: 22px; */ /* --oj-color-palette-list-swatch-sm-width: 84px; */ /* --oj-color-palette-list-swatch-sm-height: 22px; */ /* --oj-color-palette-list-swatch-lg-width: 274px; */ /* --oj-color-palette-list-swatch-lg-height: 22px; */ /* color spectrum */ /* ---------------------------- */ /* --oj-color-spectrum-border-color: var(--oj-neutral-color-8); */ /* --oj-color-spectrum-size: 230px; */ /* --oj-color-spectrum-thumb-border-color: var(--oj-slider-color-picker-thumb-border-color); */ /* --oj-color-spectrum-thumb-border-color-disabled: var(--oj-slider-thumb-border-color-disabled); */ /* --oj-color-spectrum-thumb-size: var(--oj-slider-color-picker-thumb-width); */ /* --oj-color-spectrum-thumb-border-width: var(--oj-slider-color-picker-thumb-border-width); */ /* --oj-color-spectrum-thumb-box-shadow: var(--oj-slider-color-picker-thumb-box-shadow); */ /* IconCircle */ /* -------------------------- */ /* --oj-icon-circle-inner-bg-color: var(--oj-neutral-color-14); */ /* --oj-icon-cirle-border-offset-bg-color: var(--oj-neutral-color-1); */ /* --oj-icon-circle-border-color: var(--oj-icon-circle-inner-bg-color); */ /* --oj-icon-circle-font-color: var(--oj-neutral-color-1); */ /* --oj-icon-circle-xxs-inner-size: 32px; */ /* --oj-icon-circle-xs-inner-size: 48px; */ /* --oj-icon-circle-sm-inner-size: 64px; */ /* --oj-icon-circle-md-inner-size: 96px; */ /* --oj-icon-circle-lg-inner-size: 144px; */ /* --oj-icon-circle-xl-inner-size: 192px; */ /* --oj-icon-circle-xxl-inner-size: 256px; */ /* --oj-icon-circle-xxs-border-offset: 2px; */ /* --oj-icon-circle-xs-border-offset: 3px; */ /* --oj-icon-circle-sm-border-offset: 4px; */ /* --oj-icon-circle-md-border-offset: 4px; */ /* --oj-icon-circle-lg-border-offset: 5px; */ /* --oj-icon-circle-xl-border-offset: 6px; */ /* --oj-icon-circle-xxl-border-offset: 8px; */ /* --oj-icon-circle-xxs-border-width: 1px; */ /* --oj-icon-circle-xl-border-width: 2px; */ /* --oj-icon-circle-xxs-font-size: calc(var(--oj-icon-circle-xxs-inner-size) / 2); */ /* --oj-icon-circle-xs-font-size: calc(var(--oj-icon-circle-xs-inner-size) / 2); */ /* --oj-icon-circle-sm-font-size: calc(var(--oj-icon-circle-sm-inner-size) / 2); */ /* --oj-icon-circle-md-font-size: calc(var(--oj-icon-circle-md-inner-size) / 2); */ /* --oj-icon-circle-lg-font-size: calc(var(--oj-icon-circle-lg-inner-size) / 2); */ /* --oj-icon-circle-xl-font-size: calc(var(--oj-icon-circle-xl-inner-size) / 2); */ /* --oj-icon-circle-xxl-font-size: calc(var(--oj-icon-circle-xxl-inner-size) / 2); */ /* Avatar */ /* -------------------------- */ /* --oj-avatar-inner-bg-color: var(--oj-neutral-color-14); */ /* --oj-avatar-border-offset-bg-color: var(--oj-avatar-inner-bg-color); */ /* --oj-avatar-border-color: var(--oj-avatar-inner-bg-color); */ /* --oj-avatar-text-color: var(--oj-neutral-color-1); */ /* --oj-avatar-xxs-inner-size: 32px; */ /* --oj-avatar-xs-inner-size: 36px; */ /* --oj-avatar-sm-inner-size: 54px; */ /* --oj-avatar-md-inner-size: 72px; */ /* --oj-avatar-lg-inner-size: 104px; */ /* --oj-avatar-xl-inner-size: 192px; */ /* --oj-avatar-xxl-inner-size: 256px; */ /* --oj-avatar-xxs-border-offset: 0; */ /* --oj-avatar-xs-border-offset: 0; */ /* --oj-avatar-sm-border-offset: 0; */ /* --oj-avatar-md-border-offset: 0; */ /* --oj-avatar-lg-border-offset: 0; */ /* --oj-avatar-xl-border-offset: 0; */ /* --oj-avatar-xxl-border-offset: 0; */ /* --oj-avatar-xxs-initials-font-size: 12px; */ /* --oj-avatar-xs-initials-font-size: 14px; */ /* --oj-avatar-sm-initials-font-size: 18px; */ /* --oj-avatar-md-initials-font-size: 24px; */ /* --oj-avatar-lg-initials-font-size: 36px; */ /* --oj-avatar-xl-initials-font-size: 72px; */ /* --oj-avatar-xxl-initials-font-size: 96px; */ /* --oj-avatar-xxs-border-width: 1px; */ /* --oj-avatar-xl-border-width: 2px; */ /* --oj-avatar-xxs-placeholder-scale: 1; */ /* --oj-avatar-xs-placeholder-scale: 1.125; */ /* --oj-avatar-sm-placeholder-scale: 1.6875; */ /* --oj-avatar-md-placeholder-scale: 2.25; */ /* --oj-avatar-lg-placeholder-scale: 3.25; */ /* --oj-avatar-xl-placeholder-scale: 6; */ /* --oj-avatar-xxl-placeholder-scale: 8; */ /*Color of filter applied to darken bg color to satisfy asscessibility contrast ratio requirements*/ /* --oj-avatar-initials-shade-color: transparent; */ /*Progress */ /* -------------------------- */ /* --oj-progress-value-bg-color: var(--oj-brand-color); */ /* --oj-progress-bar-height: 2px; */ /* --oj-progress-bar-bg-color: var(--oj-neutral-color-8); */ /* --oj-progress-bar-bg-opacity: 1; */ /* --oj-progress-bar-border-style: none; */ /* --oj-progress-bar-border-color: var(--oj-neutral-color-7); */ /* --oj-progress-bar-border-radius: 1px; */ /* --oj-progress-bar-indeterminate-overlay-opacity: 1; */ /* --oj-progress-bar-indeterminate-animation-duration: 1s; */ /* --oj-progress-circle-size: 32px; */ /* --oj-progress-circle-bg-color: var(--oj-progress-bar-bg-color); */ /* --oj-progress-circle-bg-opacity: var(--oj-progress-bar-bg-opacity); */ /* --oj-progress-circle-indeterminate-overlay-size: auto; */ /* --oj-progress-circle-indeterminate-animation-duration: 1s; */ /* train */ /* -------------------------- */ /* --oj-train-step-width: 112px; */ /* --oj-train-label-padding-top: 13px; */ /* --oj-train-label-text-wrap: normal; */ /* --oj-train-button-diameter: 24px; */ /* --oj-train-button-border-width: 1px; */ /* --oj-train-button-font-size: 12px; */ /* --oj-train-icon-diameter: var(--oj-train-button-diameter); */ /* --oj-train-button-text-is-numeric: 1; */ /* --oj-train-button-connector-diameter: var(--oj-train-button-diameter); */ /* --oj-train-connector-height: 1px; */ /* --oj-train-button-text-display: inherit; */ /* --oj-train-bg-color: var(--oj-neutral-color-13); */ /* --oj-train-border-color: var(--oj-train-bg-color); */ /* --oj-train-button-text-color: var(--oj-neutral-color-1); */ /* --oj-train-label-color: var(--oj-text-color-5); */ /* --oj-train-connector-bg-color: var(--oj-neutral-color-11); */ /* --oj-train-connector-has-fill: 0; */ /* --oj-train-bg-color-visited: var(--oj-brand-color); */ /* --oj-train-border-color-visited: var(--oj-train-bg-color-visited); */ /* --oj-train-button-text-color-visited: var(--oj-neutral-color-1); */ /* --oj-train-label-color-visited: var(--oj-text-color-5); */ /* --oj-train-icon-display-visited: inherit; */ /* --oj-train-button-text-display-visited: inherit; */ /* --oj-train-bg-color-hover: var(--oj-brand-color-light-1); */ /* --oj-train-border-color-hover: var(--oj-brand-color-light-1); */ /* --oj-train-button-text-color-hover: var(--oj-neutral-color-1); */ /* --oj-train-bg-color-active: var(--oj-brand-color-light-3); */ /* --oj-train-border-color-active: var(--oj-brand-color); */ /* --oj-train-button-text-color-active: var(--oj-train-bg-color-visited); */ /* --oj-train-label-text-decoration-active: none; */ /* --oj-train-label-font-weight-active: bold; */ /* --oj-train-bg-color-selected: var(--oj-brand-color); */ /* --oj-train-border-color-selected: var(--oj-train-bg-color-selected); */ /* --oj-train-button-text-color-selected: var(--oj-neutral-color-1); */ /* --oj-train-label-font-weight-selected: bold; */ /* --oj-train-continuous-connector-bg-color-selected: var(--oj-neutral-color-11); */ /* --oj-train-individual-connector-bg-color-selected: var(--oj-train-connector-bg-color); */ /* --oj-train-individual-connector-padding: 10px; */ /* --oj-train-individual-connector-padding-selected: var(--oj-train-individual-connector-padding); */ /* --oj-train-bg-color-disabled: var(--oj-neutral-color-9); */ /* --oj-train-border-color-disabled: var(--oj-train-bg-color-disabled); */ /* --oj-train-button-text-color-disabled: var(--oj-neutral-color-1); */ /* --oj-train-label-color-disabled: var(--oj-text-color); */ /* --oj-train-opacity-disabled: var(--oj-opacity-disabled); */ /* --oj-train-button-messaging-icon-color: var(--oj-neutral-color-1); */ /* --oj-train-error-bg-color: var(--oj-accent-color-danger-4); */ /* --oj-train-warning-bg-color: var(--oj-accent-color-attention-4); */ /* --oj-train-info-bg-color: var(--oj-accent-color-info-4); */ /* --oj-train-confirmation-bg-color: var(--oj-accent-color-confirmation-4); */ /* --oj-train-icon-font-size: unset; */ /* filePicker */ /* -------------------------- */ /* --oj-file-picker-bg-color: var(--oj-form-control-bg-color); */ /* --oj-file-picker-bg-color-active: var(--oj-brand-color-light-2); */ /* --oj-file-picker-border-color: var(--oj-form-control-border-color); */ /* --oj-file-picker-border-width: 2px; */ /* --oj-file-picker-border-radius: var(--oj-form-control-border-radius); */ /* --oj-file-picker-border-style: dashed; */ /* --oj-file-picker-border-width-active: 1px; */ /* --oj-file-picker-text-color: var(--oj-link-text-color); */ /* --oj-file-picker-text-font-size: 1.28571rem; */ }