/* ========================================================================== Universal Theme: Redwood Theme Style ========================================================================== */ // Mixins /* ========================================================================== Mixin: Respond To ========================================================================== */ @display-xs: 480px; @display-sm: 640px; @display-md: 768px; @display-lg: 992px; @display-xl: 1200px; @display-xxl: 1400px; .respond-to(@media) { // High DPI @if @media==high-dpi { @media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 13/10), only screen and (min-resolution: 120dpi) { @content; } } // Max-Widths @if @media==xs-screens-in { @media (max-width: (@display-xs - 1)) { @content; } } @if @media==sm-screens-in { @media (max-width: (@display-sm - 1)) { @content; } } @if @media==md-screens-in { @media (max-width: (@display-md - 1)) { @content; } } @if @media==lg-screens-in { @media (max-width: (@display-lg - 1)) { @content; } } @if @media==xl-screens-in { @media (max-width: (@display-xl - 1)) { @content; } } @if @media==xxl-screens-in { @media (max-width: (@display-xxl - 1)) { @content; } } // Min Widths @if @media==xs-screens-out { @media (min-width: @display-xs) { @content; } } @if @media==sm-screens-out { @media (min-width: @display-sm) { @content; } } @if @media==md-screens-out { @media (min-width: @display-md) { @content; } } @if @media==lg-screens-out { @media (min-width: @display-lg) { @content; } } @if @media==xl-screens-out { @media (min-width: @display-xl) { @content; } } @if @media==xxl-screens-out { @media (min-width: @display-xxl) { @content; } } // Within Min Width & Max Width @if @media==xs-screens { @media (min-width: @display-xs) and (max-width: (@display-sm - 1)) { @content; } } @if @media==sm-screens { @media (min-width: @display-sm) and (max-width: (@display-md - 1)) { @content; } } @if @media==md-screens { @media (min-width: @display-md) and (max-width: (@display-lg - 1)) { @content; } } @if @media==lg-screens { @media (min-width: @display-lg) and (max-width: (@display-xl - 1)) { @content; } } @if @media==xl-screens { @media (min-width: @display-xl) and (max-width: (@display-xxl - 1)) { @content; } } @if @media==xxl-screens { @media (min-width: @display-xxl) { @content; } } } // Colors & Variables /* ========================================================================= Redwood Design System Color Palette ========================================================================= */ // SCSS Variables // Neutral @rw-palette-neutral-0: #fff; @rw-palette-neutral-10: #FBF9F8; @rw-palette-neutral-20: #F5F4F2; @rw-palette-neutral-30: #F1EFED; @rw-palette-neutral-40: #e4e1dd; @rw-palette-neutral-50: #d4cfca; @rw-palette-neutral-60: #bcb6b1; @rw-palette-neutral-70: #aea8a2; @rw-palette-neutral-80: #9e9892; @rw-palette-neutral-90: #8b8580; @rw-palette-neutral-100: #7a736e; @rw-palette-neutral-110: #6f6964; @rw-palette-neutral-120: #665f5b; @rw-palette-neutral-130: #5c5651; @rw-palette-neutral-140: #514c47; @rw-palette-neutral-150: #47423e; @rw-palette-neutral-160: #3a3632; @rw-palette-neutral-170: #312D2A; @rw-palette-neutral-180: #201E1C; @rw-palette-neutral-190: #161513; @rw-palette-neutral-200: #000; // Oracle Red @rw-palette-oraclered-0: #fff; @rw-palette-oraclered-10: #fff8f7; @rw-palette-oraclered-20: #ffebe8; @rw-palette-oraclered-30: #ffdfdb; @rw-palette-oraclered-40: #fcd0ca; @rw-palette-oraclered-50: #f7bfb8; @rw-palette-oraclered-60: #eea59c; @rw-palette-oraclered-70: #e58c81; @rw-palette-oraclered-80: #de7a6d; @rw-palette-oraclered-90: #d66959; @rw-palette-oraclered-100: #ca4d3c; @rw-palette-oraclered-110: #bd4332; @rw-palette-oraclered-120: #ac3e2e; @rw-palette-oraclered-130: #9b382a; @rw-palette-oraclered-140: #863125; @rw-palette-oraclered-150: #742a20; @rw-palette-oraclered-160: #60231a; @rw-palette-oraclered-170: #491b14; @rw-palette-oraclered-180: #38140f; @rw-palette-oraclered-190: #270e0b; @rw-palette-oraclered-200: #000; // Brand Light @rw-palette-brandlight-0: #fff; @rw-palette-brandlight-10: #F7FCF3; @rw-palette-brandlight-20: #EDF8E6; @rw-palette-brandlight-30: #E5F4DC; @rw-palette-brandlight-40: #D0EAC1; @rw-palette-brandlight-50: #BDD9AE; @rw-palette-brandlight-60: #A3C194; @rw-palette-brandlight-70: #94B382; @rw-palette-brandlight-80: #82A372; @rw-palette-brandlight-90: #6F915D; @rw-palette-brandlight-100: #5F7D4F; @rw-palette-brandlight-110: #577346; @rw-palette-brandlight-120: #4F693F; @rw-palette-brandlight-130: #465F38; @rw-palette-brandlight-140: #3D5431; @rw-palette-brandlight-150: #35482A; @rw-palette-brandlight-160: #2B3A21; @rw-palette-brandlight-170: #25331D; @rw-palette-brandlight-180: #192315; @rw-palette-brandlight-190: #12170D; @rw-palette-brandlight-200: #000; // Brand Dark @rw-palette-branddark-0: #fff; @rw-palette-branddark-10: #FEF9E9; @rw-palette-branddark-20: #FDF4DF; @rw-palette-branddark-30: #FCEFCB; @rw-palette-branddark-40: #F7E0A1; @rw-palette-branddark-50: #F0CC71; @rw-palette-branddark-60: #D5B364; @rw-palette-branddark-70: #C7A55D; @rw-palette-branddark-80: #B39554; @rw-palette-branddark-90: #9D8249; @rw-palette-branddark-100: #89723F; @rw-palette-branddark-110: #7C6738; @rw-palette-branddark-120: #715E34; @rw-palette-branddark-130: #66552F; @rw-palette-branddark-140: #5B4A29; @rw-palette-branddark-150: #4F4224; @rw-palette-branddark-160: #40361D; @rw-palette-branddark-170: #372C18; @rw-palette-branddark-180: #241E10; @rw-palette-branddark-190: #18160A; @rw-palette-branddark-200: #000; // Sienna @rw-palette-sienna-0: #fff; @rw-palette-sienna-10: #FEF9F2; @rw-palette-sienna-20: #FDF3E4; @rw-palette-sienna-30: #FCEDD9; @rw-palette-sienna-40: #F5DEBD; @rw-palette-sienna-50: #ECCB98; @rw-palette-sienna-60: #DEB068; @rw-palette-sienna-70: #D39F5D; @rw-palette-sienna-80: #C58C52; @rw-palette-sienna-90: #B67745; @rw-palette-sienna-100: #AA643B; @rw-palette-sienna-110: #9B5734; @rw-palette-sienna-120: #8D4F2E; @rw-palette-sienna-130: #7F482C; @rw-palette-sienna-140: #713F25; @rw-palette-sienna-150: #62371F; @rw-palette-sienna-160: #512C1B; @rw-palette-sienna-170: #442616; @rw-palette-sienna-180: #2F1A0F; @rw-palette-sienna-190: #20130A; @rw-palette-sienna-200: #000; // Pine @rw-palette-pine-0: #fff; @rw-palette-pine-10: #f3FCF7; @rw-palette-pine-20: #E9F9EE; @rw-palette-pine-30: #E0F5E7; @rw-palette-pine-40: #cBE9D6; @rw-palette-pine-50: #b7D9C2; @rw-palette-pine-60: #99C2A6; @rw-palette-pine-70: #86B596; @rw-palette-pine-80: #74A683; @rw-palette-pine-90: #5C926D; @rw-palette-pine-100: #4C825C; @rw-palette-pine-110: #467553; @rw-palette-pine-120: #3F6B4B; @rw-palette-pine-130: #3A6145; @rw-palette-pine-140: #33553c; @rw-palette-pine-150: #2C4A35; @rw-palette-pine-160: #253D2C; @rw-palette-pine-170: #1e3224; @rw-palette-pine-180: #132318; @rw-palette-pine-190: #0D170F; @rw-palette-pine-200: #000; // Teal @rw-palette-teal-0: #fff; @rw-palette-teal-10: #F8FAFA; @rw-palette-teal-20: #F0F6F5; @rw-palette-teal-30: #E8F1F0; @rw-palette-teal-40: #D6E5E5; @rw-palette-teal-50: #BCD5D5; @rw-palette-teal-60: #9ABFBF; @rw-palette-teal-70: #89B2B0; @rw-palette-teal-80: #76A2A0; @rw-palette-teal-90: #628F8D; @rw-palette-teal-100: #4F7D7B; @rw-palette-teal-110: #467173; @rw-palette-teal-120: #3E686C; @rw-palette-teal-130: #375D61; @rw-palette-teal-140: #315357; @rw-palette-teal-150: #2B484B; @rw-palette-teal-160: #233B3F; @rw-palette-teal-170: #1E3133; @rw-palette-teal-180: #132123; @rw-palette-teal-190: #0D1718; @rw-palette-teal-200: #000; // Ocean @rw-palette-ocean-0: #fff; @rw-palette-ocean-10: #F5FAFC; @rw-palette-ocean-20: #EDF6F9; @rw-palette-ocean-30: #E7F2F5; @rw-palette-ocean-40: #D0E5ED; @rw-palette-ocean-50: #B5D5E0; @rw-palette-ocean-60: #94BFCE; @rw-palette-ocean-70: #81B2C3; @rw-palette-ocean-80: #6BA1B6; @rw-palette-ocean-90: #558EA4; @rw-palette-ocean-100: #437C94; @rw-palette-ocean-110: #3B7087; @rw-palette-ocean-120: #36677D; @rw-palette-ocean-130: #325C72; @rw-palette-ocean-140: #2C5266; @rw-palette-ocean-150: #264759; @rw-palette-ocean-160: #1F3A4B; @rw-palette-ocean-170: #1A2F3F; @rw-palette-ocean-180: #13212C; @rw-palette-ocean-190: #0B171F; @rw-palette-ocean-200: #000; // Fog @rw-palette-fog-0: #fff; @rw-palette-fog-10: #F5FBFB; @rw-palette-fog-20: #E9F7F7; @rw-palette-fog-30: #E2F3F3; @rw-palette-fog-40: #D4E5EB; @rw-palette-fog-50: #BFD3DC; @rw-palette-fog-60: #A2BCC6; @rw-palette-fog-70: #92AEB9; @rw-palette-fog-80: #7D9FAA; @rw-palette-fog-90: #698C99; @rw-palette-fog-100: #587B86; @rw-palette-fog-110: #4C707B; @rw-palette-fog-120: #446672; @rw-palette-fog-130: #3B5C69; @rw-palette-fog-140: #32515E; @rw-palette-fog-150: #2C4752; @rw-palette-fog-160: #243A43; @rw-palette-fog-170: #1E3138; @rw-palette-fog-180: #142126; @rw-palette-fog-190: #0D171A; @rw-palette-fog-200: #000; // Lilac @rw-palette-lilac-0: #fff; @rw-palette-lilac-10: #F8F9FF; @rw-palette-lilac-20: #F2F4FE; @rw-palette-lilac-30: #EBEFFE; @rw-palette-lilac-40: #DBE1F5; @rw-palette-lilac-50: #C6CFEB; @rw-palette-lilac-60: #ADB6D2; @rw-palette-lilac-70: #A0A9C5; @rw-palette-lilac-80: #8F98B7; @rw-palette-lilac-90: #7C85A4; @rw-palette-lilac-100: #6B7494; @rw-palette-lilac-110: #606988; @rw-palette-lilac-120: #585F80; @rw-palette-lilac-130: #4F5573; @rw-palette-lilac-140: #464C68; @rw-palette-lilac-150: #3C425B; @rw-palette-lilac-160: #30364C; @rw-palette-lilac-170: #2A2D3F; @rw-palette-lilac-180: #1B1F2B; @rw-palette-lilac-190: #13151D; @rw-palette-lilac-200: #000; // Plum @rw-palette-plum-0: #fff; @rw-palette-plum-10: #FCF8FF; @rw-palette-plum-20: #F8F1FC; @rw-palette-plum-30: #F5ECFB; @rw-palette-plum-40: #EADDF4; @rw-palette-plum-50: #DBC9E5; @rw-palette-plum-60: #C4B0D1; @rw-palette-plum-70: #B7A1C4; @rw-palette-plum-80: #A890B6; @rw-palette-plum-90: #957CA4; @rw-palette-plum-100: #846A92; @rw-palette-plum-110: #796087; @rw-palette-plum-120: #6F577B; @rw-palette-plum-130: #634E71; @rw-palette-plum-140: #594564; @rw-palette-plum-150: #4D3C57; @rw-palette-plum-160: #3F3048; @rw-palette-plum-170: #36293C; @rw-palette-plum-180: #241B29; @rw-palette-plum-190: #19131C; @rw-palette-plum-200: #000; // Rose @rw-palette-rose-0: #fff; @rw-palette-rose-10: #FDF8FA; @rw-palette-rose-20: #FAF2F4; @rw-palette-rose-30: #FBECEF; @rw-palette-rose-40: #F6DAE1; @rw-palette-rose-50: #EAC6CF; @rw-palette-rose-60: #D9ABB6; @rw-palette-rose-70: #CE9BA7; @rw-palette-rose-80: #C28897; @rw-palette-rose-90: #B47282; @rw-palette-rose-100: #A36472; @rw-palette-rose-110: #925865; @rw-palette-rose-120: #86505C; @rw-palette-rose-130: #7A4753; @rw-palette-rose-140: #6C3F49; @rw-palette-rose-150: #5F363F; @rw-palette-rose-160: #4F2B33; @rw-palette-rose-170: #41242B; @rw-palette-rose-180: #2D191D; @rw-palette-rose-190: #201214; @rw-palette-rose-200: #000; // Slate @rw-palette-slate-0: #fff; @rw-palette-slate-10: #F6FAFA; @rw-palette-slate-20: #EDF6F6; @rw-palette-slate-30: #E7F2F2; @rw-palette-slate-40: #D7E5E5; @rw-palette-slate-50: #C2D4D4; @rw-palette-slate-60: #A9BBBC; @rw-palette-slate-70: #99ADAE; @rw-palette-slate-80: #8B9D9E; @rw-palette-slate-90: #798B8A; @rw-palette-slate-100: #697778; @rw-palette-slate-110: #606C6D; @rw-palette-slate-120: #586363; @rw-palette-slate-130: #4F5A5A; @rw-palette-slate-140: #464F4F; @rw-palette-slate-150: #3C4545; @rw-palette-slate-160: #323939; @rw-palette-slate-170: #2A2F2F; @rw-palette-slate-180: #1C2020; @rw-palette-slate-190: #131515; @rw-palette-slate-200: #000; // Pebble @rw-palette-pebble-0: #fff; @rw-palette-pebble-10: #f6faff; @rw-palette-pebble-20: #eef5ff; @rw-palette-pebble-30: #e7f0fd; @rw-palette-pebble-40: #dae2ef; @rw-palette-pebble-50: #c8d0dd; @rw-palette-pebble-60: #b0b8c4; @rw-palette-pebble-70: #a2aab6; @rw-palette-pebble-80: #9299a6; @rw-palette-pebble-90: #808792; @rw-palette-pebble-100: #6f757e; @rw-palette-pebble-110: #646a73; @rw-palette-pebble-120: #5c6169; @rw-palette-pebble-130: #53575f; @rw-palette-pebble-140: #494d53; @rw-palette-pebble-150: #3f4248; @rw-palette-pebble-160: #34363b; @rw-palette-pebble-170: #2b2e32; @rw-palette-pebble-180: #1e1f22; @rw-palette-pebble-190: #151617; @rw-palette-pebble-200: #000; // Beige @rw-palette-beige-0: #fff; @rw-palette-beige-10: #FBF9F3; @rw-palette-beige-20: #F8F4EA; @rw-palette-beige-30: #F4EFE1; @rw-palette-beige-40: #E9E1CA; @rw-palette-beige-50: #D8D0B5; @rw-palette-beige-60: #C0B89D; @rw-palette-beige-70: #B2AA91; @rw-palette-beige-80: #A09984; @rw-palette-beige-90: #8B8673; @rw-palette-beige-100: #7A7464; @rw-palette-beige-110: #6E6A5A; @rw-palette-beige-120: #656151; @rw-palette-beige-130: #5B5748; @rw-palette-beige-140: #514D40; @rw-palette-beige-150: #464237; @rw-palette-beige-160: #3A372D; @rw-palette-beige-170: #302E26; @rw-palette-beige-180: #211F1B; @rw-palette-beige-190: #171512; @rw-palette-beige-200: #000; // Coral @rw-palette-coral-0: #fff; @rw-palette-coral-10: #fff8f8; @rw-palette-coral-20: #fff1f1; @rw-palette-coral-30: #ffebeb; @rw-palette-coral-40: #ffd9d9; @rw-palette-coral-50: #fcc1c1; @rw-palette-coral-60: #f7a0a0; @rw-palette-coral-70: #f38c8c; @rw-palette-coral-80: #ee7373; @rw-palette-coral-90: #de5b5b; @rw-palette-coral-100: #c04f4f; @rw-palette-coral-110: #b04848; @rw-palette-coral-120: #a14242; @rw-palette-coral-130: #903c3c; @rw-palette-coral-140: #7f3535; @rw-palette-coral-150: #6e2e2e; @rw-palette-coral-160: #5b2626; @rw-palette-coral-170: #4d2020; @rw-palette-coral-180: #341616; @rw-palette-coral-190: #240f0f; @rw-palette-coral-200: #000; /* Alert Colors ======================================================================= */ // Blue (Info) @rw-palette-blue-0: #fff; @rw-palette-blue-10: #f6fafc; @rw-palette-blue-20: #edf6f9; @rw-palette-blue-30: #e4f1f7; @rw-palette-blue-40: #d0e5ee; @rw-palette-blue-50: #b4d5e1; @rw-palette-blue-60: #8fbfd0; @rw-palette-blue-70: #79b1c6; @rw-palette-blue-80: #5fa2ba; @rw-palette-blue-90: #4190AC; @rw-palette-blue-100: #227e9e; @rw-palette-blue-110: #0e7295; @rw-palette-blue-120: #00688c; @rw-palette-blue-130: #025e7e; @rw-palette-blue-140: #04536f; @rw-palette-blue-150: #06485f; @rw-palette-blue-160: #063c4e; @rw-palette-blue-170: #053242; @rw-palette-blue-180: #04232d; @rw-palette-blue-190: #02181f; @rw-palette-blue-200: #000; // Red (Danger) @rw-palette-red-0: #fff; @rw-palette-red-10: #fff8f7; @rw-palette-red-20: #fff1ef; @rw-palette-red-30: #ffebe8; @rw-palette-red-40: #ffd9d3; @rw-palette-red-50: #FFC1B8; @rw-palette-red-60: #ff9d90; @rw-palette-red-70: #ff8675; @rw-palette-red-80: #fe6954; @rw-palette-red-90: #ec4f3a; @rw-palette-red-100: #d63b25; @rw-palette-red-110: #c33522; @rw-palette-red-120: #b3311f; @rw-palette-red-130: #a22c1c; @rw-palette-red-140: #8f2719; @rw-palette-red-150: #7c2216; @rw-palette-red-160: #661c12; @rw-palette-red-170: #56180f; @rw-palette-red-180: #3c110b; @rw-palette-red-190: #2a0c07; @rw-palette-red-200: #000; // Orange (Warning) @rw-palette-orange-0: #fff; @rw-palette-orange-10: #fef9f2; @rw-palette-orange-20: #fdf2e5; @rw-palette-orange-30: #fceddc; @rw-palette-orange-40: #f9ddbc; @rw-palette-orange-50: #f6c792; @rw-palette-orange-60: #f0a957; @rw-palette-orange-70: #eb9632; @rw-palette-orange-80: #E18212; @rw-palette-orange-90: #c6710e; @rw-palette-orange-100: #ac630c; @rw-palette-orange-110: #9c590b; @rw-palette-orange-120: #8f520a; @rw-palette-orange-130: #814909; @rw-palette-orange-140: #724108; @rw-palette-orange-150: #633807; @rw-palette-orange-160: #512f06; @rw-palette-orange-170: #452705; @rw-palette-orange-180: #2e1a03; @rw-palette-orange-190: #201202; @rw-palette-orange-200: #000; // Green (Success) @rw-palette-green-0: #fff; @rw-palette-green-10: #f4fceb; @rw-palette-green-20: #ebf8de; @rw-palette-green-30: #e4f5d3; @rw-palette-green-40: #cfebb3; @rw-palette-green-50: #b1dd88; @rw-palette-green-60: #8ac94f; @rw-palette-green-70: #7dba45; @rw-palette-green-80: #6fa939; @rw-palette-green-90: #5e942b; @rw-palette-green-100: #508223; @rw-palette-green-110: #497620; @rw-palette-green-120: #436b1d; @rw-palette-green-130: #3c601a; @rw-palette-green-140: #355617; @rw-palette-green-150: #2e4914; @rw-palette-green-160: #263d10; @rw-palette-green-170: #1f330e; @rw-palette-green-180: #152309; @rw-palette-green-190: #0f1706; @rw-palette-green-200: #000; // Set to CSS Variables :root { // Neutral --rw-palette-neutral-0: @rw-palette-neutral-0; --rw-palette-neutral-10: @rw-palette-neutral-10; --rw-palette-neutral-20: @rw-palette-neutral-20; --rw-palette-neutral-30: @rw-palette-neutral-30; --rw-palette-neutral-40: @rw-palette-neutral-40; --rw-palette-neutral-50: @rw-palette-neutral-50; --rw-palette-neutral-60: @rw-palette-neutral-60; --rw-palette-neutral-70: @rw-palette-neutral-70; --rw-palette-neutral-80: @rw-palette-neutral-80; --rw-palette-neutral-90: @rw-palette-neutral-90; --rw-palette-neutral-100: @rw-palette-neutral-100; --rw-palette-neutral-110: @rw-palette-neutral-110; --rw-palette-neutral-120: @rw-palette-neutral-120; --rw-palette-neutral-130: @rw-palette-neutral-130; --rw-palette-neutral-140: @rw-palette-neutral-140; --rw-palette-neutral-150: @rw-palette-neutral-150; --rw-palette-neutral-160: @rw-palette-neutral-160; --rw-palette-neutral-170: @rw-palette-neutral-170; --rw-palette-neutral-180: @rw-palette-neutral-180; --rw-palette-neutral-190: @rw-palette-neutral-190; --rw-palette-neutral-200: @rw-palette-neutral-200; // Oracle Red --rw-palette-oraclered-0: @rw-palette-oraclered-0; --rw-palette-oraclered-10: @rw-palette-oraclered-10; --rw-palette-oraclered-20: @rw-palette-oraclered-20; --rw-palette-oraclered-30: @rw-palette-oraclered-30; --rw-palette-oraclered-40: @rw-palette-oraclered-40; --rw-palette-oraclered-50: @rw-palette-oraclered-50; --rw-palette-oraclered-60: @rw-palette-oraclered-60; --rw-palette-oraclered-70: @rw-palette-oraclered-70; --rw-palette-oraclered-80: @rw-palette-oraclered-80; --rw-palette-oraclered-90: @rw-palette-oraclered-90; --rw-palette-oraclered-100: @rw-palette-oraclered-100; --rw-palette-oraclered-110: @rw-palette-oraclered-110; --rw-palette-oraclered-120: @rw-palette-oraclered-120; --rw-palette-oraclered-130: @rw-palette-oraclered-130; --rw-palette-oraclered-140: @rw-palette-oraclered-140; --rw-palette-oraclered-150: @rw-palette-oraclered-150; --rw-palette-oraclered-160: @rw-palette-oraclered-160; --rw-palette-oraclered-170: @rw-palette-oraclered-170; --rw-palette-oraclered-180: @rw-palette-oraclered-180; --rw-palette-oraclered-190: @rw-palette-oraclered-190; --rw-palette-oraclered-200: @rw-palette-oraclered-200; // Brand Light --rw-palette-brandlight-0: @rw-palette-brandlight-0; --rw-palette-brandlight-10: @rw-palette-brandlight-10; --rw-palette-brandlight-20: @rw-palette-brandlight-20; --rw-palette-brandlight-30: @rw-palette-brandlight-30; --rw-palette-brandlight-40: @rw-palette-brandlight-40; --rw-palette-brandlight-50: @rw-palette-brandlight-50; --rw-palette-brandlight-60: @rw-palette-brandlight-60; --rw-palette-brandlight-70: @rw-palette-brandlight-70; --rw-palette-brandlight-80: @rw-palette-brandlight-80; --rw-palette-brandlight-90: @rw-palette-brandlight-90; --rw-palette-brandlight-100: @rw-palette-brandlight-100; --rw-palette-brandlight-110: @rw-palette-brandlight-110; --rw-palette-brandlight-120: @rw-palette-brandlight-120; --rw-palette-brandlight-130: @rw-palette-brandlight-130; --rw-palette-brandlight-140: @rw-palette-brandlight-140; --rw-palette-brandlight-150: @rw-palette-brandlight-150; --rw-palette-brandlight-160: @rw-palette-brandlight-160; --rw-palette-brandlight-170: @rw-palette-brandlight-170; --rw-palette-brandlight-180: @rw-palette-brandlight-180; --rw-palette-brandlight-190: @rw-palette-brandlight-190; --rw-palette-brandlight-200: @rw-palette-brandlight-200; // Brand Dark --rw-palette-branddark-0: @rw-palette-branddark-0; --rw-palette-branddark-10: @rw-palette-branddark-10; --rw-palette-branddark-20: @rw-palette-branddark-20; --rw-palette-branddark-30: @rw-palette-branddark-30; --rw-palette-branddark-40: @rw-palette-branddark-40; --rw-palette-branddark-50: @rw-palette-branddark-50; --rw-palette-branddark-60: @rw-palette-branddark-60; --rw-palette-branddark-70: @rw-palette-branddark-70; --rw-palette-branddark-80: @rw-palette-branddark-80; --rw-palette-branddark-90: @rw-palette-branddark-90; --rw-palette-branddark-100: @rw-palette-branddark-100; --rw-palette-branddark-110: @rw-palette-branddark-110; --rw-palette-branddark-120: @rw-palette-branddark-120; --rw-palette-branddark-130: @rw-palette-branddark-130; --rw-palette-branddark-140: @rw-palette-branddark-140; --rw-palette-branddark-150: @rw-palette-branddark-150; --rw-palette-branddark-160: @rw-palette-branddark-160; --rw-palette-branddark-170: @rw-palette-branddark-170; --rw-palette-branddark-180: @rw-palette-branddark-180; --rw-palette-branddark-190: @rw-palette-branddark-190; --rw-palette-branddark-200: @rw-palette-branddark-200; // Sienna --rw-palette-sienna-0: @rw-palette-sienna-0; --rw-palette-sienna-10: @rw-palette-sienna-10; --rw-palette-sienna-20: @rw-palette-sienna-20; --rw-palette-sienna-30: @rw-palette-sienna-30; --rw-palette-sienna-40: @rw-palette-sienna-40; --rw-palette-sienna-50: @rw-palette-sienna-50; --rw-palette-sienna-60: @rw-palette-sienna-60; --rw-palette-sienna-70: @rw-palette-sienna-70; --rw-palette-sienna-80: @rw-palette-sienna-80; --rw-palette-sienna-90: @rw-palette-sienna-90; --rw-palette-sienna-100: @rw-palette-sienna-100; --rw-palette-sienna-110: @rw-palette-sienna-110; --rw-palette-sienna-120: @rw-palette-sienna-120; --rw-palette-sienna-130: @rw-palette-sienna-130; --rw-palette-sienna-140: @rw-palette-sienna-140; --rw-palette-sienna-150: @rw-palette-sienna-150; --rw-palette-sienna-160: @rw-palette-sienna-160; --rw-palette-sienna-170: @rw-palette-sienna-170; --rw-palette-sienna-180: @rw-palette-sienna-180; --rw-palette-sienna-190: @rw-palette-sienna-190; --rw-palette-sienna-200: @rw-palette-sienna-200; // Pine --rw-palette-pine-0: @rw-palette-pine-0; --rw-palette-pine-10: @rw-palette-pine-10; --rw-palette-pine-20: @rw-palette-pine-20; --rw-palette-pine-30: @rw-palette-pine-30; --rw-palette-pine-40: @rw-palette-pine-40; --rw-palette-pine-50: @rw-palette-pine-50; --rw-palette-pine-60: @rw-palette-pine-60; --rw-palette-pine-70: @rw-palette-pine-70; --rw-palette-pine-80: @rw-palette-pine-80; --rw-palette-pine-90: @rw-palette-pine-90; --rw-palette-pine-100: @rw-palette-pine-100; --rw-palette-pine-110: @rw-palette-pine-110; --rw-palette-pine-120: @rw-palette-pine-120; --rw-palette-pine-130: @rw-palette-pine-130; --rw-palette-pine-140: @rw-palette-pine-140; --rw-palette-pine-150: @rw-palette-pine-150; --rw-palette-pine-160: @rw-palette-pine-160; --rw-palette-pine-170: @rw-palette-pine-170; --rw-palette-pine-180: @rw-palette-pine-180; --rw-palette-pine-190: @rw-palette-pine-190; --rw-palette-pine-200: @rw-palette-pine-200; // Teal --rw-palette-teal-0: @rw-palette-teal-0; --rw-palette-teal-10: @rw-palette-teal-10; --rw-palette-teal-20: @rw-palette-teal-20; --rw-palette-teal-30: @rw-palette-teal-30; --rw-palette-teal-40: @rw-palette-teal-40; --rw-palette-teal-50: @rw-palette-teal-50; --rw-palette-teal-60: @rw-palette-teal-60; --rw-palette-teal-70: @rw-palette-teal-70; --rw-palette-teal-80: @rw-palette-teal-80; --rw-palette-teal-90: @rw-palette-teal-90; --rw-palette-teal-100: @rw-palette-teal-100; --rw-palette-teal-110: @rw-palette-teal-110; --rw-palette-teal-120: @rw-palette-teal-120; --rw-palette-teal-130: @rw-palette-teal-130; --rw-palette-teal-140: @rw-palette-teal-140; --rw-palette-teal-150: @rw-palette-teal-150; --rw-palette-teal-160: @rw-palette-teal-160; --rw-palette-teal-170: @rw-palette-teal-170; --rw-palette-teal-180: @rw-palette-teal-180; --rw-palette-teal-190: @rw-palette-teal-190; --rw-palette-teal-200: @rw-palette-teal-200; // Ocean --rw-palette-ocean-0: @rw-palette-ocean-0; --rw-palette-ocean-10: @rw-palette-ocean-10; --rw-palette-ocean-20: @rw-palette-ocean-20; --rw-palette-ocean-30: @rw-palette-ocean-30; --rw-palette-ocean-40: @rw-palette-ocean-40; --rw-palette-ocean-50: @rw-palette-ocean-50; --rw-palette-ocean-60: @rw-palette-ocean-60; --rw-palette-ocean-70: @rw-palette-ocean-70; --rw-palette-ocean-80: @rw-palette-ocean-80; --rw-palette-ocean-90: @rw-palette-ocean-90; --rw-palette-ocean-100: @rw-palette-ocean-100; --rw-palette-ocean-110: @rw-palette-ocean-110; --rw-palette-ocean-120: @rw-palette-ocean-120; --rw-palette-ocean-130: @rw-palette-ocean-130; --rw-palette-ocean-140: @rw-palette-ocean-140; --rw-palette-ocean-150: @rw-palette-ocean-150; --rw-palette-ocean-160: @rw-palette-ocean-160; --rw-palette-ocean-170: @rw-palette-ocean-170; --rw-palette-ocean-180: @rw-palette-ocean-180; --rw-palette-ocean-190: @rw-palette-ocean-190; --rw-palette-ocean-200: @rw-palette-ocean-200; // Fog --rw-palette-fog-0: @rw-palette-fog-0; --rw-palette-fog-10: @rw-palette-fog-10; --rw-palette-fog-20: @rw-palette-fog-20; --rw-palette-fog-30: @rw-palette-fog-30; --rw-palette-fog-40: @rw-palette-fog-40; --rw-palette-fog-50: @rw-palette-fog-50; --rw-palette-fog-60: @rw-palette-fog-60; --rw-palette-fog-70: @rw-palette-fog-70; --rw-palette-fog-80: @rw-palette-fog-80; --rw-palette-fog-90: @rw-palette-fog-90; --rw-palette-fog-100: @rw-palette-fog-100; --rw-palette-fog-110: @rw-palette-fog-110; --rw-palette-fog-120: @rw-palette-fog-120; --rw-palette-fog-130: @rw-palette-fog-130; --rw-palette-fog-140: @rw-palette-fog-140; --rw-palette-fog-150: @rw-palette-fog-150; --rw-palette-fog-160: @rw-palette-fog-160; --rw-palette-fog-170: @rw-palette-fog-170; --rw-palette-fog-180: @rw-palette-fog-180; --rw-palette-fog-190: @rw-palette-fog-190; --rw-palette-fog-200: @rw-palette-fog-200; // Lilac --rw-palette-lilac-0: @rw-palette-lilac-0; --rw-palette-lilac-10: @rw-palette-lilac-10; --rw-palette-lilac-20: @rw-palette-lilac-20; --rw-palette-lilac-30: @rw-palette-lilac-30; --rw-palette-lilac-40: @rw-palette-lilac-40; --rw-palette-lilac-50: @rw-palette-lilac-50; --rw-palette-lilac-60: @rw-palette-lilac-60; --rw-palette-lilac-70: @rw-palette-lilac-70; --rw-palette-lilac-80: @rw-palette-lilac-80; --rw-palette-lilac-90: @rw-palette-lilac-90; --rw-palette-lilac-100: @rw-palette-lilac-100; --rw-palette-lilac-110: @rw-palette-lilac-110; --rw-palette-lilac-120: @rw-palette-lilac-120; --rw-palette-lilac-130: @rw-palette-lilac-130; --rw-palette-lilac-140: @rw-palette-lilac-140; --rw-palette-lilac-150: @rw-palette-lilac-150; --rw-palette-lilac-160: @rw-palette-lilac-160; --rw-palette-lilac-170: @rw-palette-lilac-170; --rw-palette-lilac-180: @rw-palette-lilac-180; --rw-palette-lilac-190: @rw-palette-lilac-190; --rw-palette-lilac-200: @rw-palette-lilac-200; // Plum --rw-palette-plum-0: @rw-palette-plum-0; --rw-palette-plum-10: @rw-palette-plum-10; --rw-palette-plum-20: @rw-palette-plum-20; --rw-palette-plum-30: @rw-palette-plum-30; --rw-palette-plum-40: @rw-palette-plum-40; --rw-palette-plum-50: @rw-palette-plum-50; --rw-palette-plum-60: @rw-palette-plum-60; --rw-palette-plum-70: @rw-palette-plum-70; --rw-palette-plum-80: @rw-palette-plum-80; --rw-palette-plum-90: @rw-palette-plum-90; --rw-palette-plum-100: @rw-palette-plum-100; --rw-palette-plum-110: @rw-palette-plum-110; --rw-palette-plum-120: @rw-palette-plum-120; --rw-palette-plum-130: @rw-palette-plum-130; --rw-palette-plum-140: @rw-palette-plum-140; --rw-palette-plum-150: @rw-palette-plum-150; --rw-palette-plum-160: @rw-palette-plum-160; --rw-palette-plum-170: @rw-palette-plum-170; --rw-palette-plum-180: @rw-palette-plum-180; --rw-palette-plum-190: @rw-palette-plum-190; --rw-palette-plum-200: @rw-palette-plum-200; // Rose --rw-palette-rose-0: @rw-palette-rose-0; --rw-palette-rose-10: @rw-palette-rose-10; --rw-palette-rose-20: @rw-palette-rose-20; --rw-palette-rose-30: @rw-palette-rose-30; --rw-palette-rose-40: @rw-palette-rose-40; --rw-palette-rose-50: @rw-palette-rose-50; --rw-palette-rose-60: @rw-palette-rose-60; --rw-palette-rose-70: @rw-palette-rose-70; --rw-palette-rose-80: @rw-palette-rose-80; --rw-palette-rose-90: @rw-palette-rose-90; --rw-palette-rose-100: @rw-palette-rose-100; --rw-palette-rose-110: @rw-palette-rose-110; --rw-palette-rose-120: @rw-palette-rose-120; --rw-palette-rose-130: @rw-palette-rose-130; --rw-palette-rose-140: @rw-palette-rose-140; --rw-palette-rose-150: @rw-palette-rose-150; --rw-palette-rose-160: @rw-palette-rose-160; --rw-palette-rose-170: @rw-palette-rose-170; --rw-palette-rose-180: @rw-palette-rose-180; --rw-palette-rose-190: @rw-palette-rose-190; --rw-palette-rose-200: @rw-palette-rose-200; // Slate --rw-palette-slate-0: @rw-palette-slate-0; --rw-palette-slate-10: @rw-palette-slate-10; --rw-palette-slate-20: @rw-palette-slate-20; --rw-palette-slate-30: @rw-palette-slate-30; --rw-palette-slate-40: @rw-palette-slate-40; --rw-palette-slate-50: @rw-palette-slate-50; --rw-palette-slate-60: @rw-palette-slate-60; --rw-palette-slate-70: @rw-palette-slate-70; --rw-palette-slate-80: @rw-palette-slate-80; --rw-palette-slate-90: @rw-palette-slate-90; --rw-palette-slate-100: @rw-palette-slate-100; --rw-palette-slate-110: @rw-palette-slate-110; --rw-palette-slate-120: @rw-palette-slate-120; --rw-palette-slate-130: @rw-palette-slate-130; --rw-palette-slate-140: @rw-palette-slate-140; --rw-palette-slate-150: @rw-palette-slate-150; --rw-palette-slate-160: @rw-palette-slate-160; --rw-palette-slate-170: @rw-palette-slate-170; --rw-palette-slate-180: @rw-palette-slate-180; --rw-palette-slate-190: @rw-palette-slate-190; --rw-palette-slate-200: @rw-palette-slate-200; // Pebble --rw-palette-pebble-0: @rw-palette-pebble-0; --rw-palette-pebble-10: @rw-palette-pebble-10; --rw-palette-pebble-20: @rw-palette-pebble-20; --rw-palette-pebble-30: @rw-palette-pebble-30; --rw-palette-pebble-40: @rw-palette-pebble-40; --rw-palette-pebble-50: @rw-palette-pebble-50; --rw-palette-pebble-60: @rw-palette-pebble-60; --rw-palette-pebble-70: @rw-palette-pebble-70; --rw-palette-pebble-80: @rw-palette-pebble-80; --rw-palette-pebble-90: @rw-palette-pebble-90; --rw-palette-pebble-100: @rw-palette-pebble-100; --rw-palette-pebble-110: @rw-palette-pebble-110; --rw-palette-pebble-120: @rw-palette-pebble-120; --rw-palette-pebble-130: @rw-palette-pebble-130; --rw-palette-pebble-140: @rw-palette-pebble-140; --rw-palette-pebble-150: @rw-palette-pebble-150; --rw-palette-pebble-160: @rw-palette-pebble-160; --rw-palette-pebble-170: @rw-palette-pebble-170; --rw-palette-pebble-180: @rw-palette-pebble-180; --rw-palette-pebble-190: @rw-palette-pebble-190; --rw-palette-pebble-200: @rw-palette-pebble-200; // Beige --rw-palette-beige-0: @rw-palette-beige-0; --rw-palette-beige-10: @rw-palette-beige-10; --rw-palette-beige-20: @rw-palette-beige-20; --rw-palette-beige-30: @rw-palette-beige-30; --rw-palette-beige-40: @rw-palette-beige-40; --rw-palette-beige-50: @rw-palette-beige-50; --rw-palette-beige-60: @rw-palette-beige-60; --rw-palette-beige-70: @rw-palette-beige-70; --rw-palette-beige-80: @rw-palette-beige-80; --rw-palette-beige-90: @rw-palette-beige-90; --rw-palette-beige-100: @rw-palette-beige-100; --rw-palette-beige-110: @rw-palette-beige-110; --rw-palette-beige-120: @rw-palette-beige-120; --rw-palette-beige-130: @rw-palette-beige-130; --rw-palette-beige-140: @rw-palette-beige-140; --rw-palette-beige-150: @rw-palette-beige-150; --rw-palette-beige-160: @rw-palette-beige-160; --rw-palette-beige-170: @rw-palette-beige-170; --rw-palette-beige-180: @rw-palette-beige-180; --rw-palette-beige-190: @rw-palette-beige-190; --rw-palette-beige-200: @rw-palette-beige-200; // Coral --rw-palette-coral-0: @rw-palette-coral-0; --rw-palette-coral-10: @rw-palette-coral-10; --rw-palette-coral-20: @rw-palette-coral-20; --rw-palette-coral-30: @rw-palette-coral-30; --rw-palette-coral-40: @rw-palette-coral-40; --rw-palette-coral-50: @rw-palette-coral-50; --rw-palette-coral-60: @rw-palette-coral-60; --rw-palette-coral-70: @rw-palette-coral-70; --rw-palette-coral-80: @rw-palette-coral-80; --rw-palette-coral-90: @rw-palette-coral-90; --rw-palette-coral-100: @rw-palette-coral-100; --rw-palette-coral-110: @rw-palette-coral-110; --rw-palette-coral-120: @rw-palette-coral-120; --rw-palette-coral-130: @rw-palette-coral-130; --rw-palette-coral-140: @rw-palette-coral-140; --rw-palette-coral-150: @rw-palette-coral-150; --rw-palette-coral-160: @rw-palette-coral-160; --rw-palette-coral-170: @rw-palette-coral-170; --rw-palette-coral-180: @rw-palette-coral-180; --rw-palette-coral-190: @rw-palette-coral-190; --rw-palette-coral-200: @rw-palette-coral-200; /* Alert Colors ======================================================================= */ // Blue (Info) --rw-palette-blue-0: @rw-palette-blue-0; --rw-palette-blue-10: @rw-palette-blue-10; --rw-palette-blue-20: @rw-palette-blue-20; --rw-palette-blue-30: @rw-palette-blue-30; --rw-palette-blue-40: @rw-palette-blue-40; --rw-palette-blue-50: @rw-palette-blue-50; --rw-palette-blue-60: @rw-palette-blue-60; --rw-palette-blue-70: @rw-palette-blue-70; --rw-palette-blue-80: @rw-palette-blue-80; --rw-palette-blue-90: @rw-palette-blue-90; --rw-palette-blue-100: @rw-palette-blue-100; --rw-palette-blue-110: @rw-palette-blue-110; --rw-palette-blue-120: @rw-palette-blue-120; --rw-palette-blue-130: @rw-palette-blue-130; --rw-palette-blue-140: @rw-palette-blue-140; --rw-palette-blue-150: @rw-palette-blue-150; --rw-palette-blue-160: @rw-palette-blue-160; --rw-palette-blue-170: @rw-palette-blue-170; --rw-palette-blue-180: @rw-palette-blue-180; --rw-palette-blue-190: @rw-palette-blue-190; --rw-palette-blue-200: @rw-palette-blue-200; // Red (Danger) --rw-palette-red-0: @rw-palette-red-0; --rw-palette-red-10: @rw-palette-red-10; --rw-palette-red-20: @rw-palette-red-20; --rw-palette-red-30: @rw-palette-red-30; --rw-palette-red-40: @rw-palette-red-40; --rw-palette-red-50: @rw-palette-red-50; --rw-palette-red-60: @rw-palette-red-60; --rw-palette-red-70: @rw-palette-red-70; --rw-palette-red-80: @rw-palette-red-80; --rw-palette-red-90: @rw-palette-red-90; --rw-palette-red-100: @rw-palette-red-100; --rw-palette-red-110: @rw-palette-red-110; --rw-palette-red-120: @rw-palette-red-120; --rw-palette-red-130: @rw-palette-red-130; --rw-palette-red-140: @rw-palette-red-140; --rw-palette-red-150: @rw-palette-red-150; --rw-palette-red-160: @rw-palette-red-160; --rw-palette-red-170: @rw-palette-red-170; --rw-palette-red-180: @rw-palette-red-180; --rw-palette-red-190: @rw-palette-red-190; --rw-palette-red-200: @rw-palette-red-200; // Orange (Warning) --rw-palette-orange-0: @rw-palette-orange-0; --rw-palette-orange-10: @rw-palette-orange-10; --rw-palette-orange-20: @rw-palette-orange-20; --rw-palette-orange-30: @rw-palette-orange-30; --rw-palette-orange-40: @rw-palette-orange-40; --rw-palette-orange-50: @rw-palette-orange-50; --rw-palette-orange-60: @rw-palette-orange-60; --rw-palette-orange-70: @rw-palette-orange-70; --rw-palette-orange-80: @rw-palette-orange-80; --rw-palette-orange-90: @rw-palette-orange-90; --rw-palette-orange-100: @rw-palette-orange-100; --rw-palette-orange-110: @rw-palette-orange-110; --rw-palette-orange-120: @rw-palette-orange-120; --rw-palette-orange-130: @rw-palette-orange-130; --rw-palette-orange-140: @rw-palette-orange-140; --rw-palette-orange-150: @rw-palette-orange-150; --rw-palette-orange-160: @rw-palette-orange-160; --rw-palette-orange-170: @rw-palette-orange-170; --rw-palette-orange-180: @rw-palette-orange-180; --rw-palette-orange-190: @rw-palette-orange-190; --rw-palette-orange-200: @rw-palette-orange-200; // Green (Success) --rw-palette-green-0: @rw-palette-green-0; --rw-palette-green-10: @rw-palette-green-10; --rw-palette-green-20: @rw-palette-green-20; --rw-palette-green-30: @rw-palette-green-30; --rw-palette-green-40: @rw-palette-green-40; --rw-palette-green-50: @rw-palette-green-50; --rw-palette-green-60: @rw-palette-green-60; --rw-palette-green-70: @rw-palette-green-70; --rw-palette-green-80: @rw-palette-green-80; --rw-palette-green-90: @rw-palette-green-90; --rw-palette-green-100: @rw-palette-green-100; --rw-palette-green-110: @rw-palette-green-110; --rw-palette-green-120: @rw-palette-green-120; --rw-palette-green-130: @rw-palette-green-130; --rw-palette-green-140: @rw-palette-green-140; --rw-palette-green-150: @rw-palette-green-150; --rw-palette-green-160: @rw-palette-green-160; --rw-palette-green-170: @rw-palette-green-170; --rw-palette-green-180: @rw-palette-green-180; --rw-palette-green-190: @rw-palette-green-190; --rw-palette-green-200: @rw-palette-green-200; } /* ========================================================================= Theme Configuration File ========================================================================= */ /* APP_UI Variables ========================================================================= */ :root { --a-base-font-family: 'Oracle Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; --a-base-font-family-serif: Georgia, Times, 'Times New Roman', serif; --a-base-font-family-mono: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; --a-base-font-weight-semibold: 600; --a-dev-toolbar-background-color: var(--rw-palette-neutral-150); /* Buttons ======================================================================= */ --a-button-background-color: rgba(@rw-palette-neutral-190, .08); --a-button-text-color: var(--rw-palette-neutral-190); --a-button-border-color: rgba(@rw-palette-neutral-190, .5); --a-button-border-width: 0px; --a-button-border-radius: .25rem; // --a-button-shadow: none; // --a-button-text-shadow: none; --a-button-padding-y: .625rem; --a-button-padding-x: 1rem; --a-button-font-size: .875rem; --a-button-font-weight: var(--a-base-font-weight-semibold, 500); --a-button-line-height: 1.5rem; --a-button-gap-x: .25rem; --a-button-icon-spacing: .5rem; --a-button-icon-size: 1.25rem; --a-button-hover-background-color: rgba(@rw-palette-neutral-190, .12); // --a-button-hover-background-color: var(--a-button-background-color); // --a-button-hover-text-color: var(--a-button-text-color); // --a-button-hover-border-color: var(--a-button-border-color); --a-button-active-background-color: rgba(@rw-palette-neutral-190, .16); // --a-button-active-text-color: var(--a-button-text-color); // --a-button-active-border-color: var(--a-button-border-color); --a-button-focus-background-color: var(--a-button-hover-background-color); // --a-button-focus-text-color: var(--a-button-text-color); // --a-button-focus-border-color: var(--a-button-border-color); // --a-button-disabled-cursor: default; --a-button-disabled-opacity: .3; /* Form ======================================================================= */ --a-field-input-padding-x: 1rem; --a-field-input-padding-y: .75rem; --a-field-input-font-size: 1rem; --a-field-input-line-height: 1.25rem; --a-field-input-text-color: var(--rw-palette-neutral-190); --a-field-input-background-color: var(--rw-palette-neutral-0); --a-field-input-border-radius: .25rem; --a-field-input-border-color: rgba(@rw-palette-neutral-190, .5); --a-field-input-border-width: 1px; --a-field-input-shadow: none; --a-field-input-focus-border-color: var(--ut-palette-primary); --a-field-disabled-opacity: .3; --a-field-placeholder-text-color: inherit; --a-field-placeholder-opacity: .6; --a-field-select-background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MiA1MiI+PHBhdGggZD0iTTIwIDIzbDYgNiA2LTZIMjB6IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iIzE2MTUxMyIvPjwvc3ZnPg=="); --a-field-select-background-size: 52px 52px; --a-field-select-arrow-padding: 40px; --a-field-icon-size: 1.25rem; /* Checkboxes & Radios ======================================================================= */ // --a-checkbox-label-spacing-y: .125rem; // --a-checkbox-label-spacing-x: .375rem; --a-checkbox-label-font-size: 1rem; --a-checkbox-icon-font-weight: var(--a-base-font-weight-bold, 700); --a-checkbox-border-color: var(--rw-palette-neutral-190); --a-checkbox-background-color: transparent; // var(--rw-palette-neutral-0); --a-checkbox-text-color: var(--rw-palette-neutral-190); --a-checkbox-checked-background-color: var(--rw-palette-neutral-190); --a-checkbox-checked-text-color: var(--rw-palette-neutral-0); /* Star Rating ======================================================================= */ --a-starrating-stars-fg-color: var(--ut-palette-primary); --a-starrating-stars-bg-color: rgba(@rw-palette-neutral-190, .1); /* Percent Chart ======================================================================= */ --a-percent-chart-bar-border-radius: .375rem; --a-percent-chart-border-radius: .375rem; --a-percent-chart-border-width: 0px; --a-percent-chart-height: .375rem; --a-percent-chart-background-color: rgba(@rw-palette-neutral-190, .15); --a-percent-chart-bar-background-color: var(--rw-palette-neutral-190); --a-percent-chart-bar-text-color: var(--rw-palette-neutral-0); /* Switch ======================================================================= */ --a-switch-width: 2.25rem; --a-switch-border-width: 0px; --a-switch-border-radius: .375rem; --a-switch-toggle-border-radius: .25rem; --a-switch-shadow: none; --a-switch-background-color: var(--rw-palette-neutral-90); --a-switch-hover-background-color: var(--a-switch-background-color); --a-switch-active-background-color: var(--a-switch-hover-background-color); --a-switch-checked-background-color: var(--rw-palette-brandlight-100); --a-switch-checked-hover-background-color: var(--a-switch-checked-background-color); --a-switch-checked-active-background-color: var(--a-switch-checked-hover-background-color); --a-switch-focused-shadow: none; --a-switch-toggle-width: 1rem; --a-switch-toggle-height: 1rem; --a-switch-toggle-border-width: 0px; --a-switch-toggle-shadow: none; --a-switch-toggle-background-color: var(--rw-palette-neutral-0); /* File Drop ======================================================================= */ // --a-filedrop-cursor: pointer; --a-filedrop-padding-y: 1.5rem; --a-filedrop-padding-x: 1.5rem; --a-filedrop-border-radius: .5rem; // --a-filedrop-border-width: 1px; --a-filedrop-border-color: var(--a-field-input-border-color); --a-filedrop-border-style: dashed; --a-filedrop-heading-text-color: var(--rw-palette-neutral-190); --a-filedrop-icon-color: var(--rw-palette-neutral-190); --a-filedrop-background-color: transparent; --a-filedrop-text-color: var(--ut-component-text-muted-color); --a-filedrop-hover-background-color: rgba(@rw-palette-neutral-190, .04); --a-filedrop-active-background-color: rgba(@rw-palette-neutral-190, .08); --a-filedrop-focus-border-color: var(--a-field-input-focus-border-color); --a-filedrop-progress-background-color: rgba(@rw-palette-neutral-170, .15); --a-filedrop-progress-bar-background-color: var(--rw-palette-neutral-190); --a-filedrop-progress-backdrop-filter: none; --a-filedrop-progress-content-opacity: .04; /* Splitter ======================================================================= */ // --a-splitter-bar-width: .5rem; --a-splitter-bar-background-color: rgba(@rw-palette-neutral-190, .04); --a-splitter-bar-border-width: 0px; --a-splitter-bar-border-color: var(--ut-component-border-color); --a-splitter-bar-hover-background-color: rgba(@rw-palette-neutral-190, .08); --a-splitter-bar-active-background-color: rgba(@rw-palette-neutral-190, .12); --a-splitter-bar-focus-background-color: var(--ut-palette-primary); --a-splitter-bar-focus-border-color: var(--a-splitter-bar-focus-background-color); // --a-splitter-thumb-width: .5rem; --a-splitter-thumb-height: 2.75rem; --a-splitter-thumb-border-radius: .125rem; --a-splitter-thumb-border-width: 0px; --a-splitter-thumb-border-color: var(--a-splitter-bar-border-color); --a-splitter-thumb-background-color: transparent; --a-splitter-thumb-arrow-color: var(--ut-component-text-muted-color); --a-splitter-thumb-hover-border-color: var(--a-splitter-bar-focus-background-color); --a-splitter-thumb-hover-background-color: var(--a-splitter-bar-hover-background-color); --a-splitter-thumb-focus-border-color: var(--a-splitter-bar-focus-background-color); --a-splitter-thumb-focus-background-color: var(--a-splitter-bar-focus-background-color); --a-splitter-thumb-focus-arrow-color: var(--ut-palette-primary-contrast); --a-splitter-thumb-focus-hover-background-color: var(--a-splitter-thumb-focus-background-color); /* Menu ======================================================================= */ // Menu Bar // --a-menubar-background-color: #f0f0f0; // --a-menubar-cursor: pointer; // --a-menubar-disabled-cursor: default; // --a-menubar-disabled-opacity: .5; // --a-menubar-item-background-color: transparent; // --a-menubar-item-text-color: inherit; // --a-menubar-item-current-background-color: #fff; // --a-menubar-item-current-text-color: #000; // --a-menubar-item-border-radius: 0px; // --a-menubar-item-border-color: rgba(0, 0, 0, .1); // --a-menubar-item-border-width: 1px; // --a-menubar-item-shadow: none; // --a-menubar-item-padding-y: .5rem; // --a-menubar-item-padding-x: .5rem; // --a-menubar-item-font-size: inherit; // --a-menubar-item-font-weight: 400; // --a-menubar-item-line-height: inherit; // --a-menubar-item-split-icon-size: 1rem; // --a-menubar-item-split-icon-spacing: .5rem; // --a-menubar-item-split-icon-color: rgba(0, 0, 0, .25); // --a-menubar-item-split-border-color: rgba(0, 0, 0, .025); // --a-menubar-item-split-border-width: var(--a-menubar-item-border-width); // Dropdowns --a-menu-padding-y: .5rem; --a-menu-padding-x: 0rem; --a-menu-font-size: 1rem; --a-menu-font-weight: 400; --a-menu-line-height: 1.25rem; --a-menu-text-color: var(--rw-palette-neutral-190); --a-menu-accel-font-size: var(--a-menu-font-size); --a-menu-accel-text-color: rgba(@rw-palette-neutral-190, .7); --a-menu-background-color: var(--rw-palette-neutral-0); --a-menu-border-radius: .375rem; --a-menu-border-color: rgba(@rw-palette-neutral-190, .1); --a-menu-border-width: 1px; --a-menu-shadow: var(--ut-shadow-md); --a-menu-item-height: 3rem; // --a-menu-default-background-color: transparent; // --a-menu-default-text-color: var(--a-menu-text-color); // --a-menu-default-accel-text-color: var(--a-menu-accel-text-color); --a-menu-focused-background-color: rgba(@rw-palette-neutral-190, .04); --a-menu-focused-text-color: var(--rw-palette-neutral-190); --a-menu-focused-accel-text-color: rgba(@rw-palette-neutral-190, .8); // --a-menu-expanded-background-color: var(--a-menu-focused-background-color); // --a-menu-expanded-text-color: var(--a-menu-focused-text-color); // --a-menu-expanded-accel-text-color: var(--a-menu-focused-accel-text-color); // --a-menu-cursor: pointer; // --a-menu-disabled-cursor: default; // --a-menu-disabled-opacity: .5; --a-menu-disabled-focused-background-color: transparent; // --a-menu-disabled-focused-text-color: inherit; // --a-menu-disabled-focused-shadow: 0 -1px 0 0 rgba(0, 0, 0, .05) inset, 0 1px 0 0 rgba(0, 0, 0, .05) inset; --a-menu-sep-border-color: rgba(@rw-palette-neutral-190, .1); --a-menu-scroll-button-background-color: transparent; // --a-menu-scroll-button-text-color: inherit; // --a-menu-scroll-button-active-background-color: var(--a-menu-focused-background-color); // --a-menu-scroll-button-active-text-color: var(--a-menu-focused-text-color); --a-menu-scroll-up-shadow: 0 2px 4px -2px rgba(0, 0, 0, .1); --a-menu-scroll-down-shadow: 0 -2px 4px -2px rgba(0, 0, 0, .1); --a-menu-icon-size: 1.25rem; --a-menu-icon-spacing-x: 1rem; /* Date Picker ======================================================================= */ --a-datepicker-background-color: var(--a-field-input-background-color); // --a-datepicker-border-width --a-datepicker-border-color: var(--a-field-input-border-color); --a-datepicker-border-radius: var(--a-field-input-border-radius); // --a-datepicker-header-padding-x // --a-datepicker-header-padding-y --a-datepicker-header-background-color: var(--ut-component-background-color); // --a-datepicker-header-text-color // --a-datepicker-header-border-width --a-datepicker-header-border-color: transparent; // --a-datepicker-header-item-spacing // --a-datepicker-header-item-spacing --a-datepicker-monthpicker-order: 2; // --a-datepicker-monthpicker-select-padding-x // --a-datepicker-monthpicker-select-padding-y --a-datepicker-monthpicker-select-background-color: transparent; --a-datepicker-monthpicker-select-text-color: inherit; // --a-datepicker-monthpicker-select-border-width --a-datepicker-monthpicker-select-border-color: transparent; // --a-datepicker-monthpicker-select-border-radius --a-datepicker-monthpicker-select-font-size: 1rem; --a-datepicker-monthpicker-select-font-weight: 700; --a-datepicker-monthpicker-justify-content: center; // --a-datepicker-calendars-spacing: 0px; --a-datepicker-calendars-gap: 0px; --a-datepicker-calendar-background-color: var(--ut-component-background-color); // --a-datepicker-calendar-title-padding-x // --a-datepicker-calendar-title-padding-y: .75rem; --a-datepicker-calendar-title-background-color: transparent; // --a-datepicker-calendar-title-text-color // --a-datepicker-calendar-title-text-align // --a-datepicker-calendar-title-font-size // --a-datepicker-calendar-title-font-weight // --a-datepicker-calendar-title-line-height --a-datepicker-calendar-header-padding-x: var(--a-datepicker-calendar-day-spacing); // --a-datepicker-calendar-header-padding-y --a-datepicker-calendar-header-background-color: transparent; --a-datepicker-calendar-header-text-color: var(--ut-component-text-muted-color); // --a-datepicker-calendar-header-text-align // --a-datepicker-calendar-header-font-size // --a-datepicker-calendar-header-font-weight // --a-datepicker-calendar-header-line-height --a-datepicker-calendar-header-border-width: 0; // --a-datepicker-calendar-header-border-color --a-datepicker-calendar-day-spacing: .5rem; // --a-datepicker-calendar-day-padding-x: 0 // --a-datepicker-calendar-day-padding-y: 100%; // --a-datepicker-calendar-day-background-color: @rw-palette-neutral-0; --a-datepicker-calendar-day-text-color: var(--rw-palette-neutral-190); // --a-datepicker-calendar-day-text-align --a-datepicker-calendar-day-font-size: .875rem; --a-datepicker-calendar-day-font-weight: 400; // --a-datepicker-calendar-day-line-height --a-datepicker-calendar-day-border-width: 1px; // --a-datepicker-calendar-day-border-color: @rw-palette-neutral-190; --a-datepicker-calendar-day-border-radius: .25rem; // --a-datepicker-calendar-day-pointer // --a-datepicker-calendar-day-opacity --a-datepicker-calendar-day-current-background-color: var(--rw-palette-neutral-0); --a-datepicker-calendar-day-current-text-color: var(--rw-palette-neutral-190); --a-datepicker-calendar-day-current-border-color: var(--rw-palette-neutral-190); // --a-datepicker-calendar-day-hover-background-color // --a-datepicker-calendar-day-hover-text-color --a-datepicker-calendar-day-hover-border-color: transparent; --a-datepicker-calendar-day-selected-background-color: var(--rw-palette-neutral-190); --a-datepicker-calendar-day-selected-text-color: var(--rw-palette-neutral-0); --a-datepicker-calendar-day-selected-border-color: var(--rw-palette-neutral-190); // --a-datepicker-calendar-day-disabled-pointer // --a-datepicker-calendar-day-disabled-opacity // --a-datepicker-calendar-day-disabled-font-weight // --a-datepicker-calendar-week-font-size // --a-datepicker-calendar-week-font-weight // --a-datepicker-calendar-week-line-height // --a-datepicker-calendar-week-background-color: var(--ut-component-toolbar-background-color); --a-datepicker-calendar-week-text-color: var(--rw-palette-neutral-100); --a-datepicker-calendar-week-border-width: 0; // --a-datepicker-calendar-week-border-color // --a-datepicker-calendar-week-column-heading-opacity // --a-datepicker-footer-padding-x // --a-datepicker-footer-padding-y --a-datepicker-footer-background-color: var(--ut-component-background-color); // --a-datepicker-footer-text-color --a-datepicker-footer-border-width: 0; // --a-datepicker-footer-border-color // --a-datepicker-footer-item-spacing --a-datepicker-timepicker-select-padding-x: 0; // --a-datepicker-timepicker-select-padding-y --a-datepicker-timepicker-select-background-color: transparent; // --a-datepicker-timepicker-select-text-color // --a-datepicker-timepicker-select-border-width --a-datepicker-timepicker-select-border-color: transparent; // --a-datepicker-timepicker-select-border-radius --a-datepicker-timepicker-select-font-size: .875rem; // Call Outs --a-menu-callout-size: .75rem; // --a-menu-callout-background-color: var(--a-menu-background-color); --a-menu-callout-border-radius: calc(var(--a-menu-border-radius) / 2); // --a-menu-callout-border-color: var(--a-menu-border-color); // --a-menu-callout-border-width: var(--a-menu-border-width); --a-menu-callout-shadow: 0 0 1.5rem -10px rgba(0, 0, 0, 0.3); /* Faceted Search ======================================================================= */ --a-fs-control-item-badge-opacity: .6; --a-fs-toggle-background-color: transparent; --a-fs-search-container-border-color: rgba(@rw-palette-neutral-190, .1); --a-fs-search-container-border-width: 0px; --a-fs-control-seperator-border-color: rgba(@rw-palette-neutral-190, .1); --a-fs-control-seperator-border-width: 0px; --a-fs-search-container-padding-y: 1rem; --a-fs-search-container-padding-x: 1rem; --a-fs-item-sub-group-spacing: 1rem; --a-fs-control-header-padding-y: .5rem; --a-fs-control-header-padding-x: 1rem; --a-fs-control-header-font-size: 1rem; // --a-fs-control-header-font-weight: var(--a-base-font-weight-semibold, 500); --a-fs-control-header-line-height: 1.25rem; --a-fs-control-body-padding-y: .75rem; --a-fs-control-body-padding-x: 1rem; --a-fs-control-actions-padding-y: .5rem; --a-fs-control-actions-padding-x: 0rem; --a-fs-control-item-spacing: .75rem; /* Tree ======================================================================= */ // --a-treeview-disabled-opacity: .5; // --a-treeview-disabled-background-color: rgba(0, 0, 0, .1); // --a-treeview-toggle-size: 1rem; // --a-treeview-toggle-cursor: pointer; // --a-treeview-toggle-opacity: .5; // --a-treeview-toggle-text-color: inherit; // --a-treeview-node-indent: calc(var(--a-treeview-toggle-size) + var(--a-treeview-node-padding-x)); // --a-treeview-node-cursor: default; // --a-treeview-node-icon-size: 1.5rem; --a-treeview-node-font-size: .875rem; --a-treeview-node-line-height: 1.5rem; // --a-treeview-node-padding-y: .25rem; // --a-treeview-node-padding-x: .25rem; --a-treeview-node-text-color: currentColor; --a-treeview-node-hover-background-color: rgba(@rw-palette-neutral-190, .12); // --a-treeview-node-hover-text-color: inherit; --a-treeview-node-selected-background-color: var(--rw-palette-neutral-140); --a-treeview-node-selected-text-color: var(--rw-palette-neutral-0); --a-treeview-node-focused-background-color: var(--rw-palette-neutral-130); --a-treeview-node-focused-text-color: var(--rw-palette-neutral-0); --a-treeview-node-focused-shadow: 0 0 0 2px var(--ut-palette-primary); // --a-treeview-node-active-background-color: var(--rw-palette-brand-40); // --a-treeview-node-active-text-color: var(--rw-palette-brand-190); // --a-treeview-node-placeholder-background-color: var(--rw-palette-brand-40); // --a-treeview-node-placeholder-border-radius: .125rem; // --a-treeview-node-placeholder-fill-background-color: rgba(0, 0, 0, .15); // --a-treeview-drag-helper-background-color: rgba(229, 238, 251, .6); // --a-treeview-drag-helper-border-radius: .125rem; // --a-treeview-drag-helper-border-color: #9EA9B7; // --a-treeview-drag-helper-border-width: 1px; // --a-treeview-drag-helper-opacity: 1; // --a-treeview-drag-helper-shadow: none; // --a-treeview-drag-helper-padding-y: var(--a-treeview-node-padding-y); // --a-treeview-drag-helper-padding-x: var(--a-treeview-node-padding-x); // --a-treeview-drag-helper-backdrop-filter: blur(2px); /* Toolbar ========================================================================== */ --a-toolbar-background-color: var(--rw-palette-neutral-20); --a-toolbar-border-color: var(--ut-component-border-color); --a-toolbar-sep-border-width: 0px; /* Report Controls ======================================================================= */ // --a-report-controls-padding-y: .5rem; --a-report-controls-padding-x: .75rem; --a-report-controls-border-color: var(--ut-component-border-color); // --a-report-controls-border-width: 1px; // --a-report-controls-item-spacing: .25rem; --a-report-controls-cell-spacing: .5rem; --a-report-controls-cell-border-radius: .375rem; --a-report-controls-cell-label-width: 18.75rem; --a-report-controls-cell-label-font-size: .875rem; --a-report-controls-cell-label-line-height: 1.25rem; --a-report-controls-cell-label-background-color: var(--rw-palette-neutral-0); --a-report-controls-cell-label-text-color: var(--rw-palette-neutral-200); --a-report-controls-cell-label-border-color: var(--ut-component-border-color); // --a-report-controls-cell-label-border-width: 1px; --a-report-controls-cell-label-icon-background-color: var(--rw-palette-neutral-20); --a-report-controls-cell-label-icon-text-color: #fff; --a-report-controls-search-width: 13.125rem; --a-report-controls-input-border-width: var(--a-field-input-border-width); --a-report-controls-input-border-color: var(--a-field-input-border-color); --a-report-controls-input-border-radius: var(--a-field-input-border-radius); --a-report-controls-input-focus-border-color: var(--a-field-input-focus-border-color); --a-report-controls-input-padding-y: .5rem; // var(--a-field-input-padding-y); --a-report-controls-input-padding-x: var(--a-field-input-padding-x); --a-report-controls-input-font-size: var(--a-field-input-font-size); --a-report-controls-input-line-height: var(--a-field-input-line-height); /* Grid View ========================================================================== */ --a-gv-header-background-color: var(--rw-palette-neutral-0); --a-gv-header-text-color: var(--ut-component-text-muted-color); --a-gv-border-radius: var(--ut-region-border-radius, var(--ut-component-border-radius)); --a-gv-font-size: .875rem; --a-gv-line-height: 1.25rem; --a-gv-header-cell-padding-x: .5rem; --a-gv-header-cell-padding-y: .625rem; --a-gv-header-cell-font-weight: var(--a-base-font-weight-semibold, 500); --a-gv-header-cell-font-size: .75rem; --a-gv-header-cell-line-height: 1rem; --a-gv-cell-padding-x: .5rem; --a-gv-cell-padding-y: .625rem; --a-gv-cell-font-size: var(--a-gv-font-size); --a-gv-cell-line-height: var(--a-gv-line-height); --a-gv-border-color: var(--ut-component-border-color); --a-gv-selected-background-color: var(--rw-palette-brandlight-30); --a-gv-updated-background-color: var(--rw-palette-blue-30); --a-gv-deleted-background-color: var(--rw-palette-neutral-20); --a-gv-row-hover-background-color: var(--rw-palette-neutral-20); --a-gv-pagination-button-background-color: transparent; --a-gv-pagination-button-text-color: var(--a-button-text-color); --a-gv-pagination-button-hover-background-color: var(--a-button-hover-background-color); --a-gv-pagination-button-hover-text-color: var(--a-button-hover-text-color); /* Map Region ========================================================================== */ --mg-ctrl-group-button-text-color: #000; --mg-popup-content-box-shadow: var(--ut-shadow-lg); --a-map-legend-title-text-color: var(--ut-component-text-muted-color); /* Smart Filters & Chips ========================================================================== */ --a-chip-padding-y: .25rem; --a-chip-padding-x: .25rem; --a-chip-spacing: .25rem; --a-chip-font-size: .875rem; --a-chip-line-height: 1rem; --a-chip-label-spacing: .25rem; --a-chip-border-radius: .375rem; --a-chip-border-color: rgba(@rw-palette-neutral-100, .25); --a-chip-hover-background-color: rgba(@rw-palette-neutral-100, .15); --a-chip-active-background-color: rgba(@rw-palette-neutral-100, .15); --a-chip-applied-background-color: rgba(@rw-palette-blue-100, .08); --a-chip-applied-border-color: transparent; --a-chip-applied-hover-background-color: rgba(@rw-palette-blue-100, .16); --a-chip-applied-active-background-color: rgba(@rw-palette-blue-100, .24); --a-chip-applied-is-active-background-color: var(--rw-palette-blue-100); --a-chip-applied-is-active-text-color: var(--rw-palette-blue-0); // --a-chip-applied-is-active-divider-color: var(--rw-palette-neutral-0); --a-chip-remove-text-color: rgba(@rw-palette-neutral-190, .5); --a-chip-remove-hover-background-color: rgba(@rw-palette-blue-100, .15); --a-chip-remove-hover-text-color: var(--rw-palette-neutral-190); --a-chip-remove-active-background-color: rgba(@rw-palette-blue-100, .20); --a-chip-remove-active-text-color: var(--rw-palette-neutral-190); // --a-chip-applied-is-active-remove-background-color: transparent; --a-chip-applied-is-active-remove-text-color: rgba(@rw-palette-neutral-0, .5); --a-chip-applied-is-active-remove-hover-background-color: rgba(@rw-palette-neutral-10, .1); --a-chip-applied-is-active-remove-hover-text-color: var(--rw-palette-neutral-0); --a-chip-applied-is-active-remove-active-background-color: rgba(@rw-palette-neutral-10, .2); --a-chip-applied-is-active-remove-active-text-color: var(--rw-palette-neutral-0); --a-chip-input-font-size: 1rem; --a-chip-input-line-height: 1.25rem; --a-chip-remove-icon-size: 1.25rem; --a-combo-select-icon-size: 1.25rem; /* Utilities ======================================================================= */ --a-tooltip-font-size: .75rem; --a-tooltip-line-height: 1rem; --a-tooltip-backdrop-filter: none; --a-tooltip-background-color: rgba(@rw-palette-neutral-190, .9); --a-tooltip-text-color: var(--rw-palette-neutral-0); --a-overlay-background-color: rgba(@rw-palette-neutral-170, .15); --a-spinner-size: 3rem; --a-spinner-border-width: .25rem; --a-spinner-border-color: rgba(@rw-palette-neutral-170, .15); --a-spinner-color: var(--rw-palette-neutral-190); // --a-spinner-speed: .5s; --a-spinner-container-background-color: transparent; --a-spinner-container-backdrop-filter: none; --a-spinner-container-shadow: none; --a-spinner-container-padding: 0rem; --a-spinner-cell-refresh-background-color: rgba(0, 0, 0, .2); --a-love-apex-hover-text-color: var(--rw-palette-red-100); /* Third Party Library: jQuery ======================================================================= */ --jui-widget-shadow: var(--ut-shadow-sm); // --jui-overlay-background-color: rgba(0, 0, 0, .25); // --jui-overlay-opacity: 1; --jui-dialog-background-color: var(--ut-region-background-color, var(--ut-component-background-color)); --jui-dialog-text-color: var(--ut-region-text-color, var(--ut-component-text-default-color)); --jui-dialog-border-color: var(--ut-region-border-color, var(--ut-component-border-color)); --jui-dialog-border-width: 0; --jui-dialog-border-radius: var(--ut-region-border-radius, var(--ut-component-border-radius)); --jui-dialog-shadow: var(--ut-shadow-lg), 0 0 0 1px var(--ut-region-border-color, var(--ut-component-border-color)); // --jui-dialog-overflow: unset; --jui-dialog-font-size: .75rem; //--jui-dialog-line-height: ; // --jui-dialog-titlebar-padding-y: .75rem; // --jui-dialog-titlebar-padding-x: 1rem; --jui-dialog-titlebar-background-color: transparent; --jui-dialog-titlebar-text-color: var(--ut-component-text-title-color); --jui-dialog-titlebar-border-width: var(--ut-region-border-width, var(--ut-component-border-width, 1px)); --jui-dialog-titlebar-border-color: var(--ut-region-border-color, var(--ut-component-border-color)); // --jui-dialog-title-font-weight: var(--a-base-font-weight-semibold, 500); // --jui-dialog-title-font-size: 1rem; // --jui-dialog-title-line-height: 1.5rem; --jui-dialog-title-close-width: 2.25rem; --jui-dialog-title-close-height: 2.25rem; --jui-dialog-title-close-padding-y: .5rem; --jui-dialog-title-close-padding-x: .5rem; // --jui-dialog-title-close-border-width: 1px; --jui-dialog-title-close-border-radius: var(--a-button-border-radius, .125rem); --jui-dialog-title-close-border-color: var(--a-button-border-color); // --jui-dialog-title-close-icon: "\00D7"; --jui-dialog-title-close-icon-size: 1.25rem; --jui-dialog-content-padding-y: 0rem; --jui-dialog-content-padding-x: 0rem; // --jui-dialog-buttonpane-content-padding-y: .75rem; // --jui-dialog-buttonpane-content-padding-x: 1rem; --jui-dialog-buttonpane-background-color: transparent; // --jui-dialog-buttonpane-border-width: 1px; --jui-dialog-buttonpane-border-color: var(--ut-component-border-color); // --jui-datepicker-width: 17.5rem; --jui-datepicker-background-color: var(--rw-palette-neutral-0); --jui-datepicker-border-color: var(--ut-component-border-color); // --jui-datepicker-border-width: 1px; // --jui-datepicker-border-radius: .5rem; // --jui-datepicker-padding: .5rem; --jui-datepicker-shadow: var(--ut-shadow-md); // --jui-datepicker-overflow: hidden; --jui-tooltip-background-color: rgba(@rw-palette-neutral-190, .9); --jui-tooltip-text-color: var(--rw-palette-neutral-0); --jui-tooltip-border-color: transparent; --jui-tooltip-border-width: 0px; --jui-tooltip-border-radius: .375rem; --jui-tooltip-padding: .75rem; --jui-tooltip-shadow: var(--ut-shadow-md); /* Third Party Library: Oracle Jet ======================================================================= */ // --ojet-font-size: .875rem; // --ojet-small-font-size: .75rem; // --ojet-medium-font-size: 1rem; // --ojet-large-font-size: 1.125rem; // --ojet-larger-font-size: 1.25rem; } /* Universal Theme Variables ========================================================================= */ :root { /* Base ======================================================================= */ --ut-color-scheme: light; --ut-base-font-size: 1rem; // --ut-base-line-height: 1.5; --ut-body-background-color: var(--rw-palette-neutral-20); --ut-body-text-color: var(--rw-palette-neutral-190); --ut-link-text-color: var(--rw-palette-blue-120); --ut-focus-outline: var(--ut-focus-outline-color) dotted 1px; --ut-focus-outline-color: var(--ut-palette-primary); --ut-focus-outline-offset: .125rem; /* Header ======================================================================= */ // --ut-header-background-color: var(--rw-palette-neutral-150); // --ut-header-text-color: var(--rw-palette-neutral-0); --ut-header-background-color: var(--rw-palette-neutral-20); --ut-header-text-color: var(--rw-palette-neutral-190); --ut-header-border-color: rgba(@rw-palette-neutral-190, .1); --ut-header-box-shadow: none; // --ut-header-item-spacing: .75rem; // --ut-header-padding: .75rem; --ut-header-height: 3.5rem; // --ut-header-logo-height: 2.5rem; // --ut-logo-text-color: inherit; // --ut-logo-font-size: 1rem; // --ut-logo-line-height: 1.25rem; // --ut-logo-font-weight: var(--a-base-font-weight-bold, 700); --ut-logo-img-spacing: .5rem; /* Footer ========================================================================== */ --ut-footer-background-color: var(--rw-palette-neutral-10); //#f0f0f0; // --ut-footer-text-color: ; // --ut-footer-border-width: 0px; --ut-footer-border-color: rgba(@rw-palette-neutral-190, .1); --ut-footer-item-spacing: .75rem; // --ut-footer-top-border-width: 0px; --ut-footer-top-border-radius: .375rem; /* Body Main Content ========================================================================== */ --ut-xs-body-content-padding-x: 1rem; --ut-xs-body-content-padding-y: 1rem; --ut-body-content-max-width: 100%; --ut-body-main-background-color: var(--rw-palette-neutral-10); --ut-body-main-content-background-color: var(--rw-palette-neutral-10); /* Menu Bar ========================================================================== */ --ut-header-menubar-background-color: var(--rw-palette-neutral-30); --ut-header-menubar-item-text-color: var(--rw-palette-neutral-190); --ut-header-menubar-item-current-background-color: var(--rw-palette-neutral-140); --ut-header-menubar-item-current-text-color: var(--rw-palette-neutral-0); --ut-header-menubar-item-hover-background-color: rgba(@rw-palette-neutral-190, .12); --ut-header-menubar-item-hover-text-color: var(--rw-palette-neutral-190); --ut-header-menubar-item-border-color: rgba(@rw-palette-neutral-190, .1); --ut-header-menubar-item-border-width: 0px; --ut-header-menubar-item-split-icon-color: rgba(@rw-palette-neutral-190, .7); --ut-header-menubar-item-split-border-color: rgba(@rw-palette-neutral-190, .04); --a-menubar-disabled-opacity: .4; /* Navigation Tabs ========================================================================== */ --ut-navtabs-background-color: var(--rw-palette-neutral-30); --ut-navtabs-box-shadow: 0 1px 0 0 rgba(@rw-palette-neutral-190, .1); --ut-navtabs-icon-size: 1.5rem; --ut-navtabs-icon-padding: .25rem; --ut-xs-navtabs-icon-padding: .125rem; --ut-xs-navtabs-icon-spacing: .125rem; --ut-navtabs-icon-spacing: .5rem; --ut-navtabs-item-font-size: .875rem; --ut-navtabs-item-line-height: 1.25rem; --ut-navtabs-item-font-weight: 600; --ut-navtabs-item-padding-y: .75rem; --ut-xs-navtabs-item-padding-y: .5rem; --ut-navtabs-item-background-color: transparent; --ut-navtabs-item-text-color: rgba(@rw-palette-neutral-190, .7); --ut-navtabs-item-border-width: 0px; --ut-navtabs-item-border-color: rgba(@rw-palette-neutral-190, .1); --ut-navtabs-item-highlight-color: transparent; --ut-navtabs-item-highlight-width: .1875rem; --ut-navtabs-item-hover-background-color: transparent; --ut-navtabs-item-hover-text-color: var(--rw-palette-neutral-190); --ut-navtabs-item-hover-highlight-color: rgba(@rw-palette-neutral-190, .1); --ut-navtabs-item-active-background-color: transparent; --ut-navtabs-item-active-text-color: var(--rw-palette-neutral-190); --ut-navtabs-item-active-highlight-color: var(--ut-palette-primary); /* Navigation Bar ========================================================================== */ --ut-navbar-button-badge-background-color: rgba(@rw-palette-neutral-190, .1); --ut-navbar-button-badge-border-radius: 6px; /* Body Nav ========================================================================== */ --ut-body-nav-background-color: var(--rw-palette-neutral-30); --ut-body-nav-border-color: rgba(@rw-palette-neutral-190, .1); --ut-body-nav-text-color: var(--rw-palette-neutral-190); --ut-body-nav-scrollbar-thumb-background-color: var(--rw-palette-neutral-60); --ut-body-nav-scrollbar-track-background-color: transparent; --ut-body-nav-scrollbar-size: 6px; /* Body Title ========================================================================== */ --ut-body-title-background-color: var(--rw-palette-neutral-0); // --ut-body-title-text-color: inherit; --ut-body-title-border-color: rgba(@rw-palette-neutral-190, .1); --ut-body-title-border-width: .75rem; // --ut-body-title-box-shadow: 0 1px 0 0 var(--ut-body-title-border-color); --ut-body-title-box-shadow: none; /* Breadcrumbs ========================================================================== */ --ut-breadcrumb-title-font-family: var(--a-base-font-family-serif); --ut-breadcrumb-title-font-weight: 400; --ut-breadcrumb-title-font-size: 1.75rem; --ut-breadcrumb-title-line-height: 2.25rem; --ut-xs-breadcrumb-padding-y: 1rem; --ut-xs-breadcrumb-padding-x: 1rem; /* Hero Region ========================================================================== */ --ut-hero-region-padding-y: 2rem; // --ut-hero-region-padding-x: 3rem; --ut-xs-hero-region-padding-x: 1rem; --ut-xs-hero-region-padding-y: 1rem; --ut-xs-hero-region-title-font-size: 1.125rem; --ut-xs-hero-region-title-line-height: 1.5rem; --ut-hero-region-icon-background-color: var(--rw-palette-neutral-100); --ut-hero-region-icon-text-color: var(--rw-palette-neutral-0); --ut-hero-region-icon-container-size: 3.5rem; --ut-hero-region-icon-size: 1.75rem; --ut-hero-region-icon-border-radius: .375rem; --ut-hero-region-title-font-weight: 400; --ut-hero-region-title-font-family: var(--a-base-font-family-serif); --ut-hero-region-title-font-size: 1.75rem; --ut-hero-region-title-line-height: 2.25rem; --ut-hero-region-line-height: 1.25rem; /* Body Side ========================================================================== */ --ut-nav-width: 17.5rem; --ut-body-sidebar-width: 17.5rem; --ut-body-sidebar-background-color: var(--rw-palette-neutral-0); --ut-body-sidebar-border-color: rgba(@rw-palette-neutral-190, .1); --ut-treeview-icon-size: 1.25rem; --ut-treeview-icon-opacity: 1; --ut-treeview-node-icon-container-width: 1.5rem; --ut-treeview-toplevel-node-font-size: 1rem; --ut-treeview-toplevel-node-line-height: 1.5rem; --ut-treeview-toplevel-leaf-padding-y: 0rem; --ut-treeview-badge-padding-x: .375rem; --ut-treeview-badge-padding-y: .125rem; --ut-treeview-badge-font-size: .8125rem; --ut-treeview-badge-line-height: 1rem; --ut-treeview-badge-font-weight: var(--a-base-font-weight-bold, 700); --ut-treeview-badge-font-family: "Oracle Sans Cd"; --ut-treeview-badge-border-radius: .375rem; /* Actions ========================================================================== */ --ut-body-actions-width: 15rem; --ut-body-actions-background-color: var(--rw-palette-neutral-0); --ut-body-actions-border-color: rgba(@rw-palette-neutral-190, .1); /* Forms ========================================================================== */ --ut-field-label-text-color: rgba(@rw-palette-neutral-190, .7); --ut-field-fl-label-text-color: rgba(@rw-palette-neutral-190, .7); --ut-field-label-font-weight: var(--a-base-font-weight-semibold, 500); --ut-field-label-font-size: 1rem; --ut-field-label-line-height: 1.25rem; --ut-xs-field-input-font-size: var(--ut-field-label-font-size); --ut-xs-field-input-line-height: var(--ut-field-label-line-height); /* Standard Region ========================================================================== */ --ut-region-border-width: 1px; --ut-region-border-radius: .5rem; --ut-region-box-shadow: var(--ut-shadow-sm); // --ut-region-background-color: #fff; // --ut-region-margin: 1rem; // --ut-region-font-size: .875rem; // --ut-region-line-height: 1.25rem; // --ut-region-body-padding-y: 1rem; // --ut-region-body-padding-x: 1rem; // --ut-region-buttons-padding-y: .5rem; // --ut-region-buttons-padding-x: .75rem; /* Login Region ========================================================================== */ --ut-login-region-background-color: var(--rw-palette-neutral-20); --ut-login-region-box-shadow: var(--ut-shadow-lg); /* Card List ========================================================================== */ --ut-cardlist-box-shadow: var(--ut-shadow-sm); --ut-cardlist-border-radius: .375rem; /* Card View ========================================================================== */ // --a-cv-grid-gap: 1rem; // --a-cv-item-width: 19rem; // --a-cv-order-header: 1; // --a-cv-order-media: 2; // --a-cv-order-body: 3; // --a-cv-order-actions: 4; --a-cv-border-width: 1px; --a-cv-border-color: rgba(@rw-palette-neutral-190, .1); --a-cv-border-radius: .375rem; // --a-cv-background-color: @g_Region-BG; // --a-cv-text-color:; --a-cv-shadow: var(--ut-region-box-shadow); // --a-cv-hover-background-color: var(--a-cv-background-color); // --a-cv-hover-text-color: var(--a-cv-text-color); // --a-cv-hover-border-color: var(--a-cv-border-color); // --a-cv-hover-shadow: 0 4px .5rem 0 @_base-shadow-4; // --a-cv-active-background-color: var(--a-cv-background-color); // --a-cv-active-text-color: var(--a-cv-text-color); // --a-cv-active-border-color: var(--a-cv-border-color); // --a-cv-active-shadow: var(--a-cv-shadow); // --a-cv-focus-background-color: var(--a-cv-background-color); // --a-cv-focus-text-color: var(--a-cv-text-color); // --a-cv-focus-border-color: @g_Focus; // --a-cv-focus-shadow: var(--a-cv-shadow); --a-cv-media-overlay-color: rgba(0, 0, 0, .8); --a-cv-media-background-color: rgba(@rw-palette-neutral-190, .04); --a-cv-media-border-radius: .375rem; --a-cv-media-padding-x: 0rem; --a-cv-media-padding-y: 0rem; // --a-cv-header-background-color: ; // --a-cv-header-text-color: ; --a-cv-header-padding-y: 1rem; // --a-cv-header-padding-x: 1rem; // --a-cv-header-item-spacing-x: .75rem; --a-cv-header-border-width: 0px; --a-cv-header-border-color: unset; --a-cv-icon-background-color: var(--ut-palette-primary); // --a-cv-icon-background-image: ; --a-cv-icon-text-color: var(--ut-palette-primary-contrast); --a-cv-icon-border-radius: .25rem; --a-cv-icon-size: 1.5rem; --a-cv-icon-container-size: 2.5rem; // --a-cv-icon-padding: .5rem; // --a-cv-icon-image-size: ; // --a-cv-icon-image-border-radius: ; --a-cv-initials-border-radius: .25rem; --a-cv-initials-size: 2.75rem; // --a-cv-initials-padding: ; --a-cv-initials-font-size: 1rem; --a-cv-initials-font-weight: var(--a-base-font-weight-semibold, 500); --a-cv-initials-text-color: var(--rw-palette-neutral-0); --a-cv-initials-background-color: var(--rw-palette-neutral-130); // --a-cv-initials-background-image: ; --a-cv-title-font-size: 1.25rem; --a-cv-title-font-weight: 800; --a-cv-title-line-height: 1.75rem; // --a-cv-title-text-color: ; --a-cv-subtitle-font-size: .875rem; --a-cv-subtitle-font-weight: 400; --a-cv-subtitle-line-height: 1rem; --a-cv-subtitle-text-color: var(--ut-component-text-muted-color); --a-cv-badge-font-size: .875rem; --a-cv-badge-font-weight: 700; --a-cv-badge-line-height: 1rem; --a-cv-badge-text-color: var(--rw-palette-neutral-0); --a-cv-badge-background-color: var(--ut-component-text-muted-color); --a-cv-badge-border-radius: .375rem; --a-cv-badge-padding: .25rem .5rem; // --a-cv-body-padding-x: 1rem; // --a-cv-body-padding-y: 1rem; // --a-cv-body-background-color: ; --a-cv-maincontent-font-size: 1rem; --a-cv-maincontent-line-height: 1.5rem; // --a-cv-maincontent-text-color: ; --a-cv-subcontent-font-size: .875rem; --a-cv-subcontent-line-height: 1rem; --a-cv-subcontent-text-color: var(--ut-component-text-muted-color); --a-cv-actions-border-width: 0px; --a-cv-actions-border-color: unset; --a-cv-actions-padding-y: 1rem; --a-cv-actions-padding-x: 1rem; --a-cv-actions-background-color: var(--rw-palette-neutral-20); /* Comments ========================================================================== */ --ut-comment-chat-background-color: rgba(@rw-palette-neutral-190, .1); --ut-comment-icon-border-radius: .375rem; --ut-comment-icon-size: 2.75rem; --ut-comment-icon-font-size: 1rem; --ut-comment-icon-font-weight: var(--a-base-font-weight-semibold, 500); /* Content Block ========================================================================== */ --ut-content-block-font-size: 1rem; --ut-content-block-line-height: 1.5rem; /* Content Row ========================================================================== */ --ut-cr-item-border-color: rgba(@rw-palette-neutral-190, .1); /* Reports ========================================================================== */ --ut-report-header-cell-font-size: var(--a-gv-header-cell-font-size); --ut-report-header-cell-line-height: var(--a-gv-header-cell-line-height); --ut-report-header-cell-font-weight: var(--a-gv-header-cell-font-weight, var(--a-base-font-weight-bold, 700)); --ut-report-header-cell-border-width: var(--a-gv-header-cell-border-width, 1px); --ut-report-header-cell-border-color: var(--a-gv-header-cell-border-color); --ut-report-header-cell-padding-y: var(--a-gv-header-cell-padding-y, .25rem); --ut-report-header-cell-padding-x: var(--a-gv-header-cell-padding-x, .5rem); --ut-report-cell-border-width: var(--a-gv-cell-border-width); --ut-report-cell-border-color: var(--a-gv-cell-border-color); --ut-report-cell-font-size: var(--a-gv-font-size); --ut-report-cell-line-height: var(--a-gv-line-height); --ut-report-cell-padding-y: var(--a-gv-cell-padding-y); --ut-report-cell-padding-x: var(--a-gv-cell-padding-x); /* Tabs ========================================================================== */ --ut-tabs-item-font-weight: var(--a-base-font-weight-semibold, 500); --ut-tabs-item-text-color: var(--ut-component-text-muted-color); --ut-tabs-item-active-highlight-width: .1875rem; --ut-tabs-item-active-highlight-color: var(--ut-palette-primary); --ut-tabs-item-active-text-color: var(--ut-component-text-title-color); // --ut-navtabs-item-background-color: transparent; // --ut-navtabs-item-text-color: rgba(@rw-palette-neutral-190, .7); // --ut-navtabs-item-border-width: 0px; // --ut-navtabs-item-border-color: rgba(@rw-palette-neutral-190, .1); // --ut-navtabs-item-highlight-color: transparent; // --ut-navtabs-item-highlight-width: .1875rem; // --ut-navtabs-item-hover-background-color: transparent; // --ut-navtabs-item-hover-text-color: var(--rw-palette-neutral-190); // --ut-navtabs-item-hover-highlight-color: rgba(@rw-palette-neutral-190, .1); // --ut-navtabs-item-active-background-color: transparent; // --ut-navtabs-item-active-text-color: var(--rw-palette-neutral-190); // --ut-navtabs-item-active-highlight-color: var(--ut-palette-primary); /* Time Line ========================================================================== */ --ut-timeline-avatar-size: 2.75rem; --ut-timeline-avatar-font-size: 1rem; --ut-timeline-avatar-border-radius: .375rem; --ut-timeline-type-border-radius: .25rem; /* Badge List ========================================================================== */ --ut-badgelist-wrap-hover-background-color: rgba(@rw-palette-neutral-190, .04); /* Media List ========================================================================== */ --ut-medialist-title-font-size: 1rem; --ut-medialist-title-font-weight: var(--a-base-font-weight-bold, 700); --ut-medialist-desc-font-size: .875rem; /* Content Row ========================================================================== */ --ut-cr-title-font-size: 1rem; --ut-cr-desc-font-size: .875rem; --ut-cr-misc-font-size: .875rem; --ut-cr-actions-font-size: .875rem; /* Alerts ========================================================================== */ --ut-alert-title-font-weight: var(--a-base-font-weight-bold, 700); --ut-alert-horizontal-border-radius: .375rem; --ut-alert-wizard-border-radius: .375rem; /* Calendar ========================================================================== */ --fc3-header-title-font-weight: var(--a-base-font-weight-bold, 700); --fc5-header-title-font-weight: var(--a-base-font-weight-bold, 700); --ut-fc4-event-font-size: .875rem; --ut-fc4-event-line-height: 1rem; /* Wizards ========================================================================== */ --ut-wp-marker-color: rgba(@rw-palette-neutral-190, .4); --ut-wp-track-color:rgba(@rw-palette-neutral-190, .4); --ut-wp-active-background-color: var(--rw-palette-neutral-190); /* Pill Buttons ========================================================================== */ --ut-pillbutton-font-size: 1rem; --ut-pillbutton-line-height: 1.5rem; --ut-pillbutton-checkbox-line-height: 1.5rem; --ut-pillbutton-checkbox-offset: .5rem; /* Badge List ========================================================================== */ --ut-badgelist-wrap-background-color: var(--rw-palette-neutral-20); --ut-badgelist-item-border-width: 0px; /* Contextual Info ========================================================================== */ --ut-contextualinfo-margin-y: 1.75rem; --ut-contextualinfo-label-margin-x: .125rem; --ut-contextualinfo-item-label-stacked-margin-x: 2rem; --ut-contextualinfo-item-label-stacked-margin-y: 1rem; --ut-contextualinfo-item-label-stacked-font-size: .75rem; --ut-contextualinfo-item-label-stacked-line-height: 1rem; --ut-contextualinfo-item-value-stacked-font-size: .875rem; --ut-contextualinfo-item-value-stacked-line-height: 1rem; /* Misc ========================================================================== */ --ut-alternate-heading-font-family: var(--a-base-font-family); --ut-alternate-heading-font-weight: var(--a-base-font-weight-bold, 700); // Shadows --ut-shadow-sm: 0 2px 4px -2px rgba(0, 0, 0, .1); --ut-shadow-md: 0 .5rem 2rem -10px rgba(0, 0, 0, .3); --ut-shadow-lg: 0 1.5rem 3rem -24px rgba(0, 0, 0, .3); // Border Radius --ut-border-radius-sm: .125rem; --ut-border-radius-md: .375rem; --ut-border-radius-lg: .5rem; --ut-border-radius: var(--ut-border-radius-md); /* Generic Component ========================================================================== */ --ut-component-background-color: var(--rw-palette-neutral-0); --ut-component-border-color: rgba(@rw-palette-neutral-190, .1); --ut-component-border-width: 1px; --ut-component-border-radius: .375rem; --ut-component-box-shadow: var(--ut-shadow-lg); --ut-component-highlight-background-color: rgba(@rw-palette-neutral-190, .04); --ut-component-toolbar-background-color: rgba(@rw-palette-neutral-190, .04); --ut-component-inner-border-width: var(--ut-component-border-width); --ut-component-inner-border-color: rgba(@rw-palette-neutral-190, .04); --ut-component-text-default-color: var(--rw-palette-neutral-190); // Default --ut-component-text-title-color: var(--rw-palette-neutral-190); // Title & Headings --ut-component-text-subtitle-color: rgba(@rw-palette-neutral-190, .8); // Sub Title & Sub Headings --ut-component-text-muted-color: rgba(@rw-palette-neutral-190, .7); // Descriptions & Secondary Text --ut-component-icon-background-color: var(--rw-palette-brandlight-100); --ut-component-icon-color: var(--rw-palette-brandlight-0); --ut-component-badge-background-color: var(--rw-palette-neutral-100); --ut-component-badge-text-color: var(--rw-palette-neutral-0); --ut-component-badge-border-radius: .25rem; } /* u-Colors ========================================================================= */ :root { --u-color-1: var(--rw-palette-ocean-100); --u-color-1-contrast: var(--rw-palette-ocean-0); --u-color-2: var(--rw-palette-fog-100); --u-color-2-contrast: var(--rw-palette-fog-0); --u-color-3: var(--rw-palette-teal-100); --u-color-3-contrast: var(--rw-palette-teal-0); --u-color-4: var(--rw-palette-pine-100); --u-color-4-contrast: var(--rw-palette-pine-0); --u-color-5: var(--rw-palette-brandlight-100); --u-color-5-contrast: var(--rw-palette-brandlight-0); --u-color-6: var(--rw-palette-beige-100); --u-color-6-contrast: var(--rw-palette-beige-0); --u-color-7: var(--rw-palette-branddark-100); --u-color-7-contrast: var(--rw-palette-branddark-0); --u-color-8: var(--rw-palette-sienna-100); --u-color-8-contrast: var(--rw-palette-sienna-0); --u-color-9: var(--rw-palette-oraclered-100); --u-color-9-contrast: var(--rw-palette-oraclered-0); --u-color-10: var(--rw-palette-rose-100); --u-color-10-contrast: var(--rw-palette-rose-0); --u-color-11: var(--rw-palette-coral-100); --u-color-11-contrast: var(--rw-palette-coral-0); --u-color-12: var(--rw-palette-plum-100); --u-color-12-contrast: var(--rw-palette-plum-0); --u-color-13: var(--rw-palette-lilac-100); --u-color-13-contrast: var(--rw-palette-lilac-0); --u-color-14: var(--rw-palette-pebble-100); --u-color-14-contrast: var(--rw-palette-pebble-0); --u-color-15: var(--rw-palette-slate-100); --u-color-15-contrast: var(--rw-palette-slate-0); --u-color-16: var(--rw-palette-ocean-50); --u-color-16-contrast: var(--rw-palette-ocean-200); --u-color-17: var(--rw-palette-fog-50); --u-color-17-contrast: var(--rw-palette-fog-200); --u-color-18: var(--rw-palette-teal-50); --u-color-18-contrast: var(--rw-palette-teal-200); --u-color-19: var(--rw-palette-pine-50); --u-color-19-contrast: var(--rw-palette-pine-200); --u-color-20: var(--rw-palette-brandlight-50); --u-color-20-contrast: var(--rw-palette-brandlight-200); --u-color-21: var(--rw-palette-beige-50); --u-color-21-contrast: var(--rw-palette-beige-200); --u-color-22: var(--rw-palette-branddark-50); --u-color-22-contrast: var(--rw-palette-branddark-200); --u-color-23: var(--rw-palette-sienna-50); --u-color-23-contrast: var(--rw-palette-sienna-200); --u-color-24: var(--rw-palette-oraclered-50); --u-color-24-contrast: var(--rw-palette-oraclered-200); --u-color-25: var(--rw-palette-rose-50); --u-color-25-contrast: var(--rw-palette-rose-200); --u-color-26: var(--rw-palette-coral-50); --u-color-26-contrast: var(--rw-palette-coral-200); --u-color-27: var(--rw-palette-plum-50); --u-color-27-contrast: var(--rw-palette-plum-200); --u-color-28: var(--rw-palette-lilac-50); --u-color-28-contrast: var(--rw-palette-lilac-200); --u-color-29: var(--rw-palette-pebble-50); --u-color-29-contrast: var(--rw-palette-pebble-200); --u-color-30: var(--rw-palette-slate-50); --u-color-30-contrast: var(--rw-palette-slate-200); --u-color-31: var(--rw-palette-ocean-150); --u-color-31-contrast: var(--rw-palette-ocean-0); --u-color-32: var(--rw-palette-fog-150); --u-color-32-contrast: var(--rw-palette-fog-0); --u-color-33: var(--rw-palette-teal-150); --u-color-33-contrast: var(--rw-palette-teal-0); --u-color-34: var(--rw-palette-pine-150); --u-color-34-contrast: var(--rw-palette-pine-0); --u-color-35: var(--rw-palette-brandlight-150); --u-color-35-contrast: var(--rw-palette-brandlight-0); --u-color-36: var(--rw-palette-beige-150); --u-color-36-contrast: var(--rw-palette-beige-0); --u-color-37: var(--rw-palette-branddark-150); --u-color-37-contrast: var(--rw-palette-branddark-0); --u-color-38: var(--rw-palette-sienna-150); --u-color-38-contrast: var(--rw-palette-sienna-0); --u-color-39: var(--rw-palette-oraclered-150); --u-color-39-contrast: var(--rw-palette-oraclered-0); --u-color-40: var(--rw-palette-rose-150); --u-color-40-contrast: var(--rw-palette-rose-0); --u-color-41: var(--rw-palette-coral-150); --u-color-41-contrast: var(--rw-palette-coral-0); --u-color-42: var(--rw-palette-plum-150); --u-color-42-contrast: var(--rw-palette-plum-0); --u-color-43: var(--rw-palette-lilac-150); --u-color-43-contrast: var(--rw-palette-lilac-0); --u-color-44: var(--rw-palette-pebble-150); --u-color-44-contrast: var(--rw-palette-pebble-0); --u-color-45: var(--rw-palette-slate-150); --u-color-45-contrast: var(--rw-palette-slate-0); } :root { // Primary --ut-palette-primary: var(--rw-palette-brandlight-100); --ut-palette-primary-contrast: var(--rw-palette-brandlight-0); --ut-palette-primary-shade: var(--rw-palette-brandlight-10); // Primary Alt --ut-palette-primary-alt: var(--rw-palette-neutral-100); --ut-palette-primary-alt-contrast: var(--rw-palette-neutral-0); --ut-palette-primary-alt-shade: var(--rw-palette-neutral-30); --ut-palette-primary-alt-text: var(--rw-palette-neutral-170); /* States ======================================================================= */ --ut-palette-danger: var(--rw-palette-red-100); --ut-palette-danger-contrast: var(--rw-palette-red-0); --ut-palette-danger-shade: var(--rw-palette-red-10); --ut-palette-warning: var(--rw-palette-orange-100); --ut-palette-warning-contrast: var(--rw-palette-orange-0); --ut-palette-warning-shade: var(--rw-palette-orange-10); --ut-palette-success: var(--rw-palette-green-100); --ut-palette-success-contrast: var(--rw-palette-green-0); --ut-palette-success-shade: var(--rw-palette-green-10); --ut-palette-info: var(--rw-palette-blue-100); --ut-palette-info-contrast: var(--rw-palette-blue-0); --ut-palette-info-shade: var(--rw-palette-blue-10); --ut-palette-generic: var(--rw-palette-neutral-20); --ut-palette-generic-contrast: var(--rw-palette-neutral-190); --ut-palette-generic-shade: var(--rw-palette-neutral-10); } // Base Styling ::selection { color: var(--rw-palette-brandlight-190); background-color: var(--rw-palette-brandlight-30); } // Sizes :root { --rw-typography-heading-2xl-font-size: 2.5rem; --rw-typography-heading-2xl-font-weight: var(--a-base-font-weight-heavy, 900); --rw-typography-heading-2xl-line-height: 1.3; --rw-typography-heading-xl-font-size: 2.25rem; --rw-typography-heading-xl-font-weight: var(--a-base-font-weight-heavy, 900); --rw-typography-heading-xl-line-height: 1.222; --rw-typography-heading-lg-font-size: 2rem; --rw-typography-heading-lg-font-weight: var(--a-base-font-weight-heavy, 900); --rw-typography-heading-lg-line-height: 1.25; --rw-typography-heading-md-font-size: 1.75rem; --rw-typography-heading-md-font-weight: var(--a-base-font-weight-heavy, 900); --rw-typography-heading-md-line-height: 1.2857; --rw-typography-heading-sm-font-size: 1.5rem; --rw-typography-heading-sm-font-weight: var(--a-base-font-weight-heavy, 900); --rw-typography-heading-sm-line-height: 1.3333; --rw-typography-heading-xs-font-size: 1.25rem; --rw-typography-heading-xs-font-weight: var(--a-base-font-weight-heavy, 900); --rw-typography-heading-xs-line-height: 1.4; --rw-typography-subheading-2xl-font-size: 2.25rem; --rw-typography-subheading-2xl-font-weight: var(--a-base-font-weight-bold, 700); --rw-typography-subheading-2xl-line-height: 1.2222; --rw-typography-subheading-xl-font-size: 2rem; --rw-typography-subheading-xl-font-weight: var(--a-base-font-weight-bold, 700); --rw-typography-subheading-xl-line-height: 1.25; --rw-typography-subheading-lg-font-size: 1.75rem; --rw-typography-subheading-lg-font-weight: var(--a-base-font-weight-bold, 700); --rw-typography-subheading-lg-line-height: 1.2857; --rw-typography-subheading-md-font-size: 1.5rem; --rw-typography-subheading-md-font-weight: var(--a-base-font-weight-bold, 700); --rw-typography-subheading-md-line-height: 1.3333; --rw-typography-subheading-sm-font-size: 1.25rem; --rw-typography-subheading-sm-font-weight: var(--a-base-font-weight-bold, 700); --rw-typography-subheading-sm-line-height: 1.4; --rw-typography-subheading-xs-font-size: 1rem; --rw-typography-subheading-xs-font-weight: var(--a-base-font-weight-bold, 700); --rw-typography-subheading-xs-line-height: 1.5; --rw-typography-body-xl-font-size: 1.25rem; --rw-typography-body-xl-line-height: 1.4; --rw-typography-body-lg-font-size: 1.125rem; --rw-typography-body-lg-line-height: 1.3333; --rw-typography-body-md-font-size: 1rem; --rw-typography-body-md-line-height: 1.25; --rw-typography-body-sm-font-size: .875rem; --rw-typography-body-sm-line-height: 1.2; --rw-typography-body-xs-font-size: .75rem; --rw-typography-body-xs-line-height: 1.3333; --rw-typography-body-2xs-font-size: .625rem; --rw-typography-body-2xs-line-height: 1.2 } .respond-to(sm-screens-in) { :root { --rw-typography-heading-2xl-font-size: 2.25rem; --rw-typography-heading-2xl-line-height: 1.2222; --rw-typography-heading-xl-font-size: 2rem; --rw-typography-heading-xl-line-height: 1.25; --rw-typography-heading-lg-font-size: 1.75rem; --rw-typography-heading-lg-line-height: 1.2857; --rw-typography-heading-md-font-size: 1.5rem; --rw-typography-heading-md-line-height: 1.3333; --rw-typography-heading-sm-font-size: 1.25rem; --rw-typography-heading-sm-line-height: 1.4; --rw-typography-heading-xs-font-size: 1.125rem; --rw-typography-heading-xs-line-height: 1.3333; --rw-typography-subheading-2xl-font-size: 2rem; --rw-typography-subheading-2xl-line-height: 1.25; --rw-typography-subheading-xl-font-size: 1.75rem; --rw-typography-subheading-xl-line-height: 1.2857; --rw-typography-subheading-lg-font-size: 1.5rem; --rw-typography-subheading-lg-line-height: 1.3333; --rw-typography-subheading-md-font-size: 1.25rem; --rw-typography-subheading-md-line-height: 1.4; --rw-typography-subheading-sm-font-size: 1.125rem; --rw-typography-subheading-sm-line-height: 1.3333; --rw-typography-subheading-xs-font-size: .875rem; --rw-typography-subheading-xs-line-height: 1.4545 } } .rw-typography-heading-2xl, .rw-typography-title-1 { font-size: var(--rw-typography-heading-2xl-font-size) !important; font-weight: var(--rw-typography-heading-2xl-font-weight) !important; line-height: var(--rw-typography-heading-2xl-line-height) !important } .rw-typography-heading-xl, .rw-typography-title-2 { font-size: var(--rw-typography-heading-xl-font-size) !important; font-weight: var(--rw-typography-heading-xl-font-weight) !important; line-height: var(--rw-typography-heading-xl-line-height) !important } .rw-typography-heading-lg, .rw-typography-title-3 { font-size: var(--rw-typography-heading-lg-font-size) !important; font-weight: var(--rw-typography-heading-lg-font-weight) !important; line-height: var(--rw-typography-heading-lg-line-height) !important } .rw-typography-heading-md, .rw-typography-title-4 { font-size: var(--rw-typography-heading-md-font-size) !important; font-weight: var(--rw-typography-heading-md-font-weight) !important; line-height: var(--rw-typography-heading-md-line-height) !important } .rw-typography-heading-sm, .rw-typography-title-5 { font-size: var(--rw-typography-heading-sm-font-size) !important; font-weight: var(--rw-typography-heading-sm-font-weight) !important; line-height: var(--rw-typography-heading-sm-line-height) !important } .rw-typography-heading-xs, .rw-typography-title-6 { font-size: var(--rw-typography-heading-xs-font-size) !important; font-weight: var(--rw-typography-heading-xs-font-weight) !important; line-height: var(--rw-typography-heading-xs-line-height) !important } .rw-typography-subheading-2xl, .rw-typography-subtitle-1 { font-size: var(--rw-typography-subheading-2xl-font-size) !important; font-weight: var(--rw-typography-subheading-2xl-font-weight) !important; line-height: var(--rw-typography-subheading-2xl-line-height) !important } .rw-typography-subheading-xl, .rw-typography-subtitle-2 { font-size: var(--rw-typography-subheading-xl-font-size) !important; font-weight: var(--rw-typography-subheading-xl-font-weight) !important; line-height: var(--rw-typography-subheading-xl-line-height) !important } .rw-typography-subheading-lg, .rw-typography-subtitle-3 { font-size: var(--rw-typography-subheading-lg-font-size) !important; font-weight: var(--rw-typography-subheading-lg-font-weight) !important; line-height: var(--rw-typography-subheading-lg-line-height) !important } .rw-typography-subheading-md, .rw-typography-subtitle-4 { font-size: var(--rw-typography-subheading-md-font-size) !important; font-weight: var(--rw-typography-subheading-md-font-weight) !important; line-height: var(--rw-typography-subheading-md-line-height) !important } .rw-typography-subheading-sm { font-size: var(--rw-typography-subheading-sm-font-size) !important; font-weight: var(--rw-typography-subheading-sm-font-weight) !important; line-height: var(--rw-typography-subheading-sm-line-height) !important } .rw-typography-subheading-xs { font-size: var(--rw-typography-subheading-xs-font-size) !important; font-weight: var(--rw-typography-subheading-xs-font-weight) !important; line-height: var(--rw-typography-subheading-xs-line-height) !important } .rw-typography-body-xl { font-size: var(--rw-typography-body-xl-font-size) !important; font-weight: 400 !important; line-height: var(--rw-typography-body-xl-line-height) !important } .rw-typography-body-1, .rw-typography-body-lg { font-size: var(--rw-typography-body-lg-font-size) !important; font-weight: 400 !important; line-height: var(--rw-typography-body-lg-line-height) !important } .rw-typography-body-2, .rw-typography-body-md { font-size: var(--rw-typography-body-md-font-size) !important; font-weight: 400 !important; line-height: var(--rw-typography-body-md-line-height) !important } .rw-typography-body-3, .rw-typography-body-sm { font-size: var(--rw-typography-body-sm-font-size) !important; font-weight: 400 !important; line-height: var(--rw-typography-body-sm-line-height) !important } .rw-typography-body-xs, .rw-typography-caption-1 { font-size: var(--rw-typography-body-xs-font-size) !important; font-weight: 400 !important; line-height: var(--rw-typography-body-xs-line-height) !important } .rw-typography-body-2xs, .rw-typography-caption-2 { font-size: var(--rw-typography-body-2xs-font-size) !important; font-weight: 400 !important; line-height: var(--rw-typography-body-2xs-line-height) !important } // Font Family .rw-typography-serif { font-family: var(--a-base-font-family-serif) !important; } .rw-typography-sansserif, .rw-typography-sans-serif { font-family: var(--a-base-font-family) !important; } .rw-typography-mono { font-family: var(--a-base-font-family-mono) !important; } // Font Weights .rw-typography-normal { font-weight: var(--a-base-font-weight-normal, 400) !important; } .rw-typography-semibold, .rw-typography-semi-bold { font-weight: var(--a-base-font-weight-semibold, 500) !important; // font-weight: 600 !important } .rw-typography-bold { font-weight: var(--a-base-font-weight-bold, 700) !important; } .rw-typography-heavy { font-weight: var(--a-base-font-weight-heavy, 900) !important; } // Layout #wwvFlowForm { width: 100%; } .t-Body-info .apex-rds { padding-inline-start: calc(var(--ut-breadcrumb-padding-x) - var(--ut-tabs-item-padding-x, .5rem)); padding-inline-end: calc(var(--ut-breadcrumb-padding-x) - var(--ut-tabs-item-padding-x, .5rem)); } /* Login Backgrounds ========================================================================== */ .t-LoginPage--bg1, .t-LoginPage--bg2, .t-LoginPage--bg3 { --ut-body-background-color: var(--rw-palette-neutral-30); &:before { content: none; } .t-LoginPage-bg { display: none; } } // Components .t-Alert--page { --ut-alert-icon-size: 1rem; --ut-alert-icon-padding: .5rem; --ut-notification-title-font-size: 1rem; --ut-notification-title-line-height: 1.25rem; // --ut-notification-item-font-size: .75rem; --ut-notification-item-line-height: 1rem; --ut-alert-type-text-color: var(--rw-palette-neutral-190); --ut-alert-icon-background-color: transparent; padding: .5rem; a { color: var(--ut-alert-type-text-color); } .t-Alert-icon .t-Icon { margin-block-start: 0; line-height: var(--ut-notification-title-line-height); } .t-Alert-title { --ut-alert-title-font-size: var(--ut-notification-title-font-size); --ut-alert-title-line-height: var(--ut-notification-title-line-height); } .t-Alert-body { margin: 0; } .a-Notification-list { --ut-notification-item-font-size: .75rem; margin-block-start: .5rem; } .a-Notification-item:before { border-radius: 0; background-color: var(--rw-palette-neutral-190); opacity: 1; width: .375rem; height: .375rem; margin: .3125rem .5rem .3125rem .375rem; } .t-Alert-buttons { min-width: 1.5rem; } .t-Button.t-Button--closeAlert { --a-button-border-radius: .25rem; --a-button-icon-size: 1.25rem; --a-button-padding-y: .5rem; --a-button-padding-x: .5rem; background-color: transparent; color: var(--rw-palette-neutral-190); transform: none !important; opacity: .6; top: 0; right: 0; .u-RTL & { right: unset; left: 0; } &:hover, &:focus { opacity: 1; } } } .t-Alert--page.t-Alert--warning { --ut-alert-type-background-color: var(--rw-palette-orange-10); --ut-alert-icon-text-color: var(--rw-palette-orange-120); --ut-notification-title-text-color: var(--rw-palette-orange-120); --ut-alert-title-text-color: var(--rw-palette-orange-120); --ut-alert-type-text-color: var(--rw-palette-neutral-190); } .t-Alert--page.t-Alert--success { --ut-alert-type-background-color: var(--rw-palette-green-10); --ut-alert-icon-text-color: var(--rw-palette-green-120); --ut-notification-title-text-color: var(--rw-palette-green-120); --ut-alert-title-text-color: var(--rw-palette-green-120); --ut-alert-type-text-color: var(--rw-palette-neutral-190); .t-Alert-title { padding: 0; } } .t-Alert--page.t-Alert--danger { --ut-alert-type-background-color: var(--rw-palette-red-10); --ut-alert-icon-text-color: var(--rw-palette-red-120); --ut-notification-title-text-color: var(--rw-palette-red-120); --ut-alert-title-text-color: var(--rw-palette-red-120); --ut-alert-type-text-color: var(--rw-palette-neutral-190); } .t-Alert--page.t-Alert--info { --ut-alert-type-background-color: var(--rw-palette-blue-10); --ut-alert-icon-text-color: var(--rw-palette-blue-120); --ut-notification-title-text-color: var(--rw-palette-blue-120); --ut-alert-title-text-color: var(--rw-palette-blue-120); --ut-alert-type-text-color: var(--rw-palette-neutral-190); } // Change default danger icon .t-Alert--defaultIcons.t-Alert--red .t-Alert-icon .t-Icon:before, .t-Alert--defaultIcons.t-Alert--danger .t-Alert-icon .t-Icon:before { content: "\e242"; } /* ========================================================================== Header ========================================================================== */ // Hide Header when No Nav .t-PageTemplate--minimal .t-Header { display: none; max-height: 0; } // Header Buttons .t-Button--header { --a-button-font-size: .875rem; --a-button-line-height: 1.25rem; --a-button-padding-y: .5rem; --a-button-padding-x: .5rem; --a-button-icon-spacing: .5rem; --a-button-icon-size: 1.25rem; --a-button-background-color: transparent; --a-button-text-color: initial; --a-button-border-color: transparent; --a-button-shadow: none; --a-button-hover-background-color: rgba(@rw-palette-neutral-190, .04); --a-button-active-background-color: rgba(@rw-palette-neutral-190, .08); --a-button-focus-background-color: var(--a-button-background-color); // Active &.is-active { --a-button-background-color: rgba(@rw-palette-neutral-190, .16); } } .t-Button--headerTree { --ut-header-controls-icon-border-radius: 0; // --ut-header-controls-icon-height: .09375rem; --ut-header-controls-icon-top-width: var(--a-button-icon-size); --ut-header-controls-icon-middle-width: var(--a-button-icon-size); --ut-header-controls-icon-bottom-width: var(--a-button-icon-size); &.is-active { --a-button-background-color: transparent; } } .t-Badge { font-stretch: var(--rw-badge-font-stretch, condensed); } // Redwood Badge .rw-badge, .rw-Badge { // background-color: var(--rw-badge-bg-color, var(--ut-component-badge-background-color)); // color: var(--rw-badge-text-color, var(--ut-component-badge-text-color)); padding: 0 .5rem; display: inline-flex; border-radius: var(--rw-badge-border-radius, .375rem); height: var(--rw-badge-height, 1.5rem); line-height: var(--rw-badge-height, 1.5rem); min-width: var(--rw-badge-height, 1.5rem); font-size: var(--rw-badge-font-size, .6875rem); font-weight: var(--rw-badge-font-weight, var(--a-base-font-weight-bold, 700)); font-stretch: var(--rw-badge-font-stretch, condensed); text-align: center; &-sm { padding: 0 .25rem; } // When within Contextual Info .t-ContextualInfo-value & { margin-block-start: .25rem; margin-block-end: .25rem; } } // Badge List .t-BadgeList--dash { --ut-badgelist-item-padding-x: 0; --ut-badgelist-item-padding-y: 0; gap: .75rem; } .t-BadgeList--dash .t-BadgeList-wrap:before { content: none; } .t-BreadcrumbRegion { align-items: flex-start; } .respond-to(sm-screens-in) { .t-BreadcrumbRegion { --ut-breadcrumb-padding-y: 1rem; } } /* Simple Style Button ========================================================================== */ .ui-button:not(.ui-button--hot):not(.ui-button--danger), .t-Button--simple, .t-Button--noUI, .t-Button--hideShow, .a-Button--noUI { --a-button-background-color: transparent; // --a-button-border-color: rgba(@rw-palette-neutral-190, .5); --a-button-hover-background-color: rgba(@rw-palette-neutral-190, .04); --a-button-active-background-color: rgba(@rw-palette-neutral-190, .08); } .t-Button--simple { --a-button-border-width: 1px; } /* NoUI Button ========================================================================== */ .t-Button--noUI, .t-Button--noUI:hover, .t-Button--noUI:active, .a-Button--noUI, .a-Button--noUI:hover, .a-Button--noUI:active { --a-button-border-width: 0px; --a-button-type-shadow: none; --a-button-type-background-color: transparent; --a-button-type-border-color: transparent; --a-button-text-color: inherit; color: inherit; background-color: transparent; text-shadow: none; } /* Link Style Button ========================================================================== */ .t-Button--link { border-color: transparent; background-color: transparent; box-shadow: none; // --a-button-type-border-color: transparent; // --a-button-type-background-color: transparent; // --a-button-type-shadow: none; // --a-button-state-text-color: var(--ut-link-text-color); } /* Hot State ========================================================================== */ .t-Button--hot, .a-Button--hot, .ui-button--hot, .a-CardView-button--hot, .apex-button-group input:checked + label, .t-Form-fieldContainer--radioButtonGroup .apex-item-group--rc input:checked + label { --a-button-background-color: var(--rw-palette-neutral-170); --a-button-text-color: var(--rw-palette-neutral-0); // --a-button-border-color: ; // --a-button-shadow: ; // Hover --a-button-hover-background-color: var(--rw-palette-neutral-160); --a-button-hover-text-color: var(--a-button-text-color); --a-button-hover-border-color: var(--a-button-hover-background-color); // --a-button-hover-shadow: var(--a-button-hover-shadow); // Active --a-button-active-background-color: var(--rw-palette-neutral-150); --a-button-active-text-color: var(--a-button-hover-text-color); --a-button-active-border-color: var(--a-button-active-background-color); // --a-button-active-shadow: var(--a-button-hover-shadow); // Focus --a-button-focus-background-color: var(--a-button-hover-background-color); --a-button-focus-text-color: var(--a-button-hover-text-color); --a-button-focus-border-color: var(--a-button-focus-background-color); // --a-button-focus-shadow: var(--a-button-hover-shadow); // Simple &.t-Button--simple { --a-button-border-color: var(--rw-palette-neutral-170); --a-button-background-color: transparent; --a-button-text-color: var(--rw-palette-neutral-170); --a-button-hover-text-color: var(--rw-palette-neutral-0); } // Link &.t-Button--link { --a-button-text-color: var(--rw-palette-neutral-170); } // No UI &.t-Button--noUI, &.a-Button--noUI { --a-button-text-color: var(--rw-palette-neutral-170); color: var(--rw-palette-neutral-170); } } /* Warning State ========================================================================== */ .t-Button--warning { --a-button-background-color: var(--rw-palette-orange-100); --a-button-text-color: var(--rw-palette-orange-0); // --a-button-border-color: ; // --a-button-shadow: ; // Hover --a-button-hover-background-color: var(--rw-palette-orange-110); --a-button-hover-text-color: var(--a-button-text-color); --a-button-hover-border-color: var(--a-button-hover-background-color); // --a-button-hover-shadow: var(--a-button-hover-shadow); // Active --a-button-active-background-color: var(--rw-palette-orange-120); --a-button-active-text-color: var(--a-button-hover-text-color); --a-button-active-border-color: var(--a-button-active-background-color); // --a-button-active-shadow: var(--a-button-hover-shadow); // Focus --a-button-focus-background-color: var(--a-button-hover-background-color); --a-button-focus-text-color: var(--a-button-hover-text-color); --a-button-focus-border-color: var(--a-button-focus-background-color); // --a-button-focus-shadow: var(--a-button-hover-shadow); // Simple &.t-Button--simple { --a-button-border-color: var(--rw-palette-orange-100); --a-button-background-color: transparent; --a-button-text-color: var(--rw-palette-orange-100); --a-button-hover-text-color: var(--rw-palette-orange-0); } // Link &.t-Button--link { --a-button-border-color: transparent; --a-button-background-color: transparent; --a-button-box-shadow: none; --a-button-text-color: var(--rw-palette-orange-100); } // No UI &.t-Button--noUI, &.a-Button--noUI { --a-button-text-color: var(--rw-palette-orange-100); color: var(--rw-palette-orange-100); } } /* Success State ========================================================================== */ .t-Button--success { --a-button-background-color: var(--rw-palette-green-100); --a-button-text-color: var(--rw-palette-green-0); // --a-button-border-color: ; // --a-button-shadow: ; // Hover --a-button-hover-background-color: var(--rw-palette-green-110); --a-button-hover-text-color: var(--a-button-text-color); --a-button-hover-border-color: var(--a-button-hover-background-color); // --a-button-hover-shadow: var(--a-button-hover-shadow); // Active --a-button-active-background-color: var(--rw-palette-green-120); --a-button-active-text-color: var(--a-button-hover-text-color); --a-button-active-border-color: var(--a-button-active-background-color); // --a-button-active-shadow: var(--a-button-hover-shadow); // Focus --a-button-focus-background-color: var(--a-button-hover-background-color); --a-button-focus-text-color: var(--a-button-hover-text-color); --a-button-focus-border-color: var(--a-button-focus-background-color); // --a-button-focus-shadow: var(--a-button-hover-shadow); // Simple &.t-Button--simple { --a-button-border-color: var(--rw-palette-green-100); --a-button-background-color: transparent; --a-button-text-color: var(--rw-palette-green-100); --a-button-hover-text-color: var(--rw-palette-green-0); } // Link &.t-Button--link { --a-button-border-color: transparent; --a-button-background-color: transparent; --a-button-box-shadow: none; --a-button-text-color: var(--rw-palette-green-100); } // No UI &.t-Button--noUI, &.a-Button--noUI { --a-button-text-color: var(--rw-palette-green-100); color: var(--rw-palette-green-100); } } /* Danger State ========================================================================== */ .ui-button--danger, .t-Button--danger { --a-button-background-color: var(--rw-palette-red-100); --a-button-text-color: var(--rw-palette-red-0); // --a-button-border-color: ; // --a-button-shadow: ; // Hover --a-button-hover-background-color: var(--rw-palette-red-110); --a-button-hover-text-color: var(--a-button-text-color); --a-button-hover-border-color: var(--a-button-hover-background-color); // --a-button-hover-shadow: var(--a-button-hover-shadow); // Active --a-button-active-background-color: var(--rw-palette-red-120); --a-button-active-text-color: var(--a-button-hover-text-color); --a-button-active-border-color: var(--a-button-active-background-color); // --a-button-active-shadow: var(--a-button-hover-shadow); // Focus --a-button-focus-background-color: var(--a-button-hover-background-color); --a-button-focus-text-color: var(--a-button-hover-text-color); --a-button-focus-border-color: var(--a-button-focus-background-color); // --a-button-focus-shadow: var(--a-button-hover-shadow); // Simple &.t-Button--simple { --a-button-border-color: var(--rw-palette-red-100); --a-button-background-color: transparent; --a-button-text-color: var(--rw-palette-red-100); --a-button-hover-text-color: var(--rw-palette-red-0); } // Link &.t-Button--link { --a-button-border-color: transparent; --a-button-background-color: transparent; --a-button-box-shadow: none; --a-button-text-color: var(--rw-palette-red-100); } // No UI &.t-Button--noUI, &.a-Button--noUI { --a-button-text-color: var(--rw-palette-red-100); color: var(--rw-palette-red-100); } } /* Primary (Alt) State ========================================================================== */ .t-Button--primary { --a-button-background-color: var(--rw-palette-neutral-100); --a-button-text-color: var(--rw-palette-neutral-0); // --a-button-border-color: ; // --a-button-shadow: ; // Hover --a-button-hover-background-color: var(--rw-palette-neutral-110); --a-button-hover-text-color: var(--a-button-text-color); --a-button-hover-border-color: var(--a-button-hover-background-color); // --a-button-hover-shadow: var(--a-button-hover-shadow); // Active --a-button-active-background-color: var(--rw-palette-neutral-120); --a-button-active-text-color: var(--a-button-hover-text-color); --a-button-active-border-color: var(--a-button-active-background-color); // --a-button-active-shadow: var(--a-button-hover-shadow); // Focus --a-button-focus-background-color: var(--a-button-hover-background-color); --a-button-focus-text-color: var(--a-button-hover-text-color); --a-button-focus-border-color: var(--a-button-focus-background-color); // --a-button-focus-shadow: var(--a-button-hover-shadow); // Simple &.t-Button--simple { --a-button-border-color: var(--rw-palette-neutral-100); --a-button-background-color: transparent; --a-button-text-color: var(--rw-palette-neutral-100); --a-button-hover-text-color: var(--rw-palette-neutral-0); } // Link &.t-Button--link { --a-button-border-color: transparent; --a-button-background-color: transparent; --a-button-box-shadow: none; --a-button-text-color: var(--rw-palette-neutral-100); } // No UI &.t-Button--noUI, &.a-Button--noUI { --a-button-text-color: var(--rw-palette-neutral-100); color: var(--rw-palette-neutral-100); } } /* Help Button ========================================================================== */ .t-Form-helpButton { --a-button-padding-y: .25rem; --a-button-padding-x: .5rem; --a-icon-size: 1.25rem; --a-button-type-background-color: transparent; --a-button-type-border-color: transparent; --a-button-type-shadow: none; --a-button-text-color: var(--ut-component-text-muted-color); --a-button-hover-text-color: var(--ut-component-text-default-color); --a-button-hover-background-color: transparent; } /* ========================================================================== Modifiers in Buttons ========================================================================== */ /* Set white for when ========================================================================== */ .t-Button.t-Button--noUI, .a-Button.a-Button--noUI, .t-Button.t-Button--link, .t-Button.t-Button--simple { .fa:after { background-color: var(--rw-palette-neutral-0); } } /* Danger Button ========================================================================== */ .t-Button--danger, .t-Button--simple.t-Button--danger:hover { .fa:after { background-color: var(--rw-palette-red-100); } } /* Success Button ========================================================================== */ .t-Button--success, .t-Button--simple.t-Button--success:hover { .fa:after { background-color: var(--rw-palette-green-100); } } /* Primary Button ========================================================================== */ .t-Button--primary, .t-Button--simple.t-Button--primary:hover { .fa:after { background-color: var(--rw-palette-neutral-100); } } /* Warning Button ========================================================================== */ .t-Button--warning, .t-Button--simple.t-Button--warning:hover { .fa:after { background-color: var(--rw-palette-orange-100); } } /* Hot Button ========================================================================== */ .t-Button--hot, .t-Button--simple.t-Button--hot:hover { .fa:after { background-color: var(--rw-palette-neutral-170); } } /* Button Sizes ========================================================================== */ // Default (Medium) .t-Button, .t-Button--medium { // Icon Only &.t-Button--noLabel { --a-button-padding-x: var(--a-button-padding-y); } } // Tiny .t-Button--tiny, .t-Button--xsmall { --a-button-font-size: .8125rem; --a-button-line-height: 1rem; --a-button-padding-y: .375rem; --a-button-padding-x: .5rem; --a-button-icon-spacing: .25rem; --a-button-icon-size: 1rem; } // Small .t-Button--small { --a-button-font-size: .875rem; --a-button-line-height: 1.25rem; --a-button-padding-y: .5rem; --a-button-padding-x: 1rem; --a-button-icon-spacing: .5rem; --a-button-icon-size: 1.25rem; } // Large .t-Button--large { --a-button-font-size: .875rem; --a-button-line-height: 1.5rem; --a-button-padding-y: .875rem; --a-button-padding-x: 1rem; --a-button-icon-spacing: .5rem; --a-button-icon-size: 1.5rem; } // Large .t-Button--xlarge { --a-button-font-size: .875rem; --a-button-line-height: 1rem; --a-button-padding-y: .875rem; --a-button-padding-x: 1rem; --a-button-icon-spacing: .5rem; --a-button-icon-size: 1.5rem; } /* Base Button Overrides ========================================================================== */ .a-Button { --a-button-icon-size: 1.25rem; .a-Icon { display: inline-flex; align-items: center; } } // Actions .a-Button.a-Button--actions { --a-button-border-radius: .125rem; --a-icon-size: 1.25rem; display: flex; align-items: center; } // Remove margin if button is hidden .t-Button[style="display:none"], .t-Button[style="display:none;"], .t-Button[style="display: none"], .t-Button[style="display: none;"] { & + .t-Button { margin-inline-start: 0; } } :root { --ut-cardlist-colorfill-size: .75rem; --ut-cardlist-colorfill-offset: 0rem; } .t-Card-wrap { padding-block-start: var(--ut-cardlist-colorfill-size); } .t-Cards--displayIcons.u-colors, .t-Cards--displayInitials.u-colors, .t-Cards:not(.u-colors) { .t-Card-wrap { padding-block-start: 0; } } .a-CardView-badge { font-stretch: condensed; } .a-CardView-media--first { margin: 1rem 1rem 0; } .a-CardView-media--body { margin: 0 1rem; } .a-CardView-actions { border-bottom-left-radius: var(--a-cv-border-radius); border-bottom-right-radius: var(--a-cv-border-radius); } .a-CardView.has-media--background { --a-cv-text-color: var(--rw-palette-neutral-0); --a-cv-subtitle-text-color: rgba(@rw-palette-neutral-0, .7); --a-cv-subcontent-text-color: rgba(@rw-palette-neutral-0, .7); --a-cv-badge-background-color: rgba(@rw-palette-neutral-0, .1); .a-CardView-header, .a-CardView-body, .a-CardView-footer { background-color: transparent; border: 0; } .a-CardView-button { --a-button-border-color: rgba(255, 255, 255, .3); --a-button-text-color: var(--rw-palette-neutral-0); --a-button-hover-background-color: rgba(255, 255, 255, .08); --a-button-active-background-color: rgba(255, 255, 255, .16); } .a-CardView-button--hot { --a-button-background-color: var(--rw-palette-neutral-0); --a-button-text-color: var(--rw-palette-neutral-190); --a-button-hover-background-color: rgba(255, 255, 255, .96); --a-button-active-background-color: rgba(255, 255, 255, .92); } } // Card Variations // Style A .t-CardsRegion--styleA { --a-cv-title-font-size: 1rem; --a-cv-title-font-weight: 700; --a-cv-title-line-height: 1.25rem; --a-cv-subtitle-font-size: .75rem; --a-cv-subtitle-line-height: 1.25rem; --ut-cv-subtitle-margin: 0rem; --a-cv-badge-font-size: .6875rem; --a-cv-maincontent-font-size: .875rem; --a-cv-maincontent-line-height: 1.25rem; --a-cv-subcontent-font-size: .75rem; --a-cv-subcontent-line-height: 1rem; .a-CardView-header + .a-CardView-body { padding-block-start: 0; } } // Style B (centered header) .t-CardsRegion--styleB { --a-cv-overflow: hidden; --a-cv-media-background-color: var(--rw-palette-neutral-0); --a-cv-icon-container-size: 4rem; --a-cv-icon-size: 2rem; --a-cv-icon-border-radius: .25rem; --a-cv-icon-image-size: var(--a-cv-icon-container-size); --a-cv-icon-image-border-radius: var(--a-cv-icon-border-radius); --a-cv-initials-border-radius: var(--a-cv-icon-border-radius); --a-cv-initials-size: var(--a-cv-icon-container-size); --a-cv-initials-font-size: 2rem; --a-cv-initials-font-weight: 400; --a-cv-media-padding-y: 0rem; --a-cv-media-padding-x: 0rem; --a-cv-header-border-width: 0px; --a-cv-header-background-color: unset; --a-cv-actions-border-width: 0px; --a-cv-actions-background-color: unset; --a-cv-title-font-size: 1.25rem; --a-cv-title-line-height: 1.75rem; --a-cv-badge-padding: .25rem .75rem; --a-cv-badge-border-radius: 1.25rem; // Icon Top .has-icon--top { --a-cv-icon-container-size: 7rem; --a-cv-icon-size: 2rem; --a-cv-icon-border-radius: .25rem; --a-cv-icon-image-size: var(--a-cv-icon-container-size); --a-cv-icon-image-border-radius: var(--a-cv-icon-border-radius); --a-cv-initials-border-radius: var(--a-cv-icon-border-radius); --a-cv-initials-size: var(--a-cv-icon-container-size); --a-cv-initials-font-size: 2rem; .a-CardView-iconWrap { margin-inline-start: calc(var(--a-cv-header-padding-x) * -1); margin-inline-end: calc(var(--a-cv-header-padding-x) * -1); margin-block-start: calc(var(--a-cv-header-padding-y) * -1); .a-CardView-initials, .a-CardView-icon, .a-CardView-iconImg { width: 100%; border-radius: 0; } } .a-CardView-icon:before { border-radius: 100%; // background-color: @_base-shadow-4; // text-shadow: 0 1px 1px @_base-shadow-4; margin: auto; padding: calc(var(--a-cv-icon-size) / 2); } } // Icon Start .has-icon--start { .a-CardView-iconWrap { margin-block-end: var(--a-cv-header-item-spacing-x, .75rem); } } // Icon End .has-icon--end { .a-CardView-iconWrap { margin-block-start: var(--a-cv-header-item-spacing-x, .75rem); grid-area: badge-bottom; } .a-CardView-headerBody { grid-area: icon-top; } .a-CardView-badge { grid-area: body; } } .a-CardView-iconWrap { grid-area: icon-top; margin-inline-end: unset; margin-inline-start: unset; display: flex; justify-content: center; } .a-CardView-headerBody { text-align: center; } .a-CardView-badge { margin-inline-start: auto; margin-inline-end: auto; grid-area: badge-bottom; &:not(:first-child) { margin-block-start: var(--a-cv-header-item-spacing-x, .75rem); } } // Display Label .a-CardView-badgeLabel { border: unset; clip: unset; clip-path: unset; height: unset; margin: unset; overflow: unset; padding: unset; position: unset; width: unset; } .a-CardView-actions { flex-direction: column; } // Full Width .a-CardView-actionsPrimary { .a-CardView-button { width: 100%; } .a-CardView-button + .a-CardView-button { margin-block-start: .25rem; } } // Inline .a-CardView-actionsSecondary { text-align: center; &:not(:only-child) { margin-block-start: .5rem; } } } .t-CardsRegion--styleC { --a-cv-actions-background-color: transparent; .has-icon--top { --a-cv-icon-container-size: 9rem; --a-cv-icon-size: 3.5rem; --a-cv-icon-border-radius: .5rem; --a-cv-icon-image-size: var(--a-cv-icon-container-size); --a-cv-icon-image-border-radius: var(--a-cv-icon-border-radius); --a-cv-initials-border-radius: var(--a-cv-icon-border-radius); --a-cv-initials-size: var(--a-cv-icon-container-size); --a-cv-initials-font-size: 3.5rem; .a-CardView-icon:before { background-color: transparent; text-shadow: none; } } } .a-Chip-count { &:before, &:after { content: none; } } .t-Dialog-page { background-image: none !important; // Override pillar patterns background-color: var(--jui-dialog-background-color); } .ui-dialog { .ui-dialog-titlebar { padding-block-start: calc(var(--rw-dialog-strip-size, 1.25rem) + var(--jui-dialog-titlebar-padding-y, .75rem)); &:before { content: '' !important; display: block; border-top-left-radius: var(--jui-dialog-border-radius, .25rem); border-top-right-radius: var(--jui-dialog-border-radius, .25rem); height: var(--rw-dialog-strip-size, 1.25rem); position: absolute; top: 0; left: 0; right: 0; background-image: url('../images/rw/dialog-strip/generic.png'); background-size: var(--rw-dialog-strip-background-size, 600px 1.25rem); } } } // Hide dialog strip in dev tools .a-DevTools { --rw-dialog-strip-size: 0rem; } .t-ContentBlock--h1, .t-ContentBlock--h2 { > .t-ContentBlock-header { --ut-content-block-header-font-weight: 400; --ut-content-block-header-font-family: var(--a-base-font-family-serif); .t-ContentBlock-title { &:after { content: ''; display: block; margin-block-start: 1rem; width: 2.25rem; height: .25rem; background-color: var(--rw-palette-branddark-50); } } .t-ContentBlock-headerIcon, .t-ContentBlock-headerItems--buttons { padding-block-end: 1.5rem; } } } .t-ContentBlock--h1 > .t-ContentBlock-header { --ut-content-block-header-margin: 1rem; --ut-content-block-header-font-size: 2.5rem; --ut-content-block-header-line-height: 3rem; } .t-ContentBlock--h2 > .t-ContentBlock-header { --ut-content-block-header-margin: 1rem; --ut-content-block-header-font-size: 2rem; --ut-content-block-header-line-height: 2.5rem; } .t-ContentBlock--h3 { --ut-content-block-header-font-weight: 900; } .t-ContentBlock { .t-ContentBlock-headerIcon { .fa { font-size: 1.5rem; } } } // Hero Region .t-HeroRegion-col--left, .t-HeroRegion-col--right { .respond-to(sm-screens-out) { align-self: flex-start; } } .t-HeroRegion-icon { background-size: cover; } .t-HeroRegion-buttons { min-height: var(--ut-hero-region-icon-container-size); display: flex; flex-wrap: wrap; align-items: center; } // Body Title .t-Body-title { --ut-contextualinfo-margin-y: 1rem; --a-button-gap-x: .75rem; --a-fs-filter-group-border-width: 0px; .respond-to(sm-screens-in) { --ut-body-title-border-width: .375rem; } &:after { position: absolute; top: 100%; left: 0; right: 0; content: ''; height: var(--ut-body-title-border-width); display: block; background-color: var(--ut-body-title-border-color); background-size: auto 100%; background-repeat: repeat-x; } } .a-FS-addChart, .a-FS-changeChartType, .a-FS-removeChart { display: inline-flex; align-items: center; --a-button-background-color: transparent; --a-button-padding-y: calc(.5rem - var(--a-button-border-width, 1px)); --a-button-padding-x: var(--a-button-padding-y); } .apex-item-subgroup { .apex-group-label { font-weight: var(--a-base-font-weight-semibold, 600); } } .a-FS-label { outline: none; } .a-FS-control { --a-checkbox-label-font-size: .8125rem; } .a-FS-toggle, .a-FS-addChart, .a-FS-changeChartType, .a-FS-removeChart { --a-icon-size: 1.25rem; } .a-FS-clearAll, .a-FS-clearButton, .a-FS-toggleOverflow { --a-button-text-color: var(--ut-link-text-color); --a-button-background-color: transparent; // Hover --a-button-hover-background-color: var(--a-button-background-color); --a-button-hover-text-color: var(--a-button-text-color); --a-button-hover-border-color: var(--a-button-border-color); // --a-button-hover-shadow: var(--a-button-hover-shadow); // Active --a-button-active-background-color: var(--a-button-hover-border-color); --a-button-active-text-color: var(--a-button-hover-text-color); --a-button-active-border-color: var(--a-button-active-border-color); // --a-button-active-shadow: var(--a-button-hover-shadow); // Focus --a-button-focus-background-color: var(--a-button-hover-background-color); --a-button-focus-text-color: var(--a-button-hover-text-color); --a-button-focus-border-color: var(--a-button-focus-border-color); // --a-button-focus-shadow: var(--a-button-hover-shadow); } .a-FS-clear, .a-FS-moreOptions { --a-button-padding-y: .5rem; --a-button-padding-x: .5rem; --a-button-border-radius: .375rem; --a-button-font-size: .875rem; --a-button-line-height: 1rem; --a-button-border-width: 1px; --a-button-border-color: rgba(0, 0, 0, .3); --a-button-background-color: transparent; --a-button-text-color: inherit; // --a-button-shadow: ; // Hover --a-button-hover-background-color: rgba(0, 0, 0, 0.04); --a-button-hover-text-color: var(--a-button-text-color); --a-button-hover-border-color: var(--a-button-border-color); // --a-button-hover-shadow: var(--a-button-hover-shadow); // Active --a-button-active-background-color: rgba(0, 0, 0, 0.08); --a-button-active-text-color: var(--a-button-hover-text-color); --a-button-active-border-color: var(--a-button-active-border-color); // --a-button-active-shadow: var(--a-button-hover-shadow); // Focus --a-button-focus-background-color: var(--a-button-hover-background-color); --a-button-focus-text-color: var(--a-button-hover-text-color); --a-button-focus-border-color: var(--a-button-focus-border-color); // --a-button-focus-shadow: var(--a-button-hover-shadow); .a-Icon.icon-multi-remove { --a-fs-clear-remove-padding: .125rem; --a-fs-clear-remove-icon-size: 1.25rem; } } .a-FS-search { --a-field-input-padding-x: .5rem; --a-icon-size: 1.25rem; .apex-item-text { border-radius: var(--a-field-input-border-radius, .125rem) !important; } .js-search { display: none; } } .a-FS-facetsDashboard { --a-fs-chart-border-radius: var(--ut-component-border-radius); --a-fs-chart-border-color: var(--ut-component-border-color); --a-fs-chart-background-color: var(--ut-component-background-color); --a-fs-chart-shadow: var(--ut-region-box-shadow); } .a-FS-body { .apex-item-group--rc input + label { margin-block-start: .375rem; margin-block-end: .375rem; } } .a-FS-control.is-collapsed .a-Icon.a-Collapsible-icon:before { content: "\e126"; } .a-FS-control.is-expanded .a-Icon.a-Collapsible-icon:before { content: "\e123"; } // Smart Filters .a-FS-searchBar { min-block-size: 2.75rem; } // Client Side Filtering .a-FS-filter .apex-item-group--search, .a-FS-facetPopupContent .apex-item-group--search { --a-icon-size: 1.25rem; --ut-field-input-icon-padding-x: .75rem; } // Updated icon .a-Icon.icon-facet-actions:before { content: "\e261"; } /* Validation Errors ========================================================================== */ .t-Form-error { display: flex; flex-wrap: wrap; color: var(--ut-component-text-muted-color); &:before { font-family: var(--a-icon-font-family, "apex-5-icon-font"); font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; display: inline-block; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\e242"; margin-inline-end: .25rem; font-size: .875rem; line-height: 1rem; color: var(--ut-palette-danger); flex-grow: 0; flex-shrink: 0; flex-basis: auto; } } /* Required ========================================================================== */ .t-Form-itemRequired { display: block; .t-Form-fieldContainer--floatingLabel &, .t-Form--stretchInputs .t-Form-fieldContainer &, .t-Form-fieldContainer--stretchInputs & { text-align: end; } } // Display Label (Hide Asterisk) .t-Form-fieldContainer:not(.t-Form-fieldContainer--indicatorAsterisk) { &.t-Form-fieldContainer.is-required .t-Form-label:before, &.t-Form-fieldContainer.is-required .t-Form-label:after, &.t-Form-fieldContainer--floatingLabel.is-required .t-Form-inputContainer:before { content: none; } } /* Items with icons ========================================================================== */ .apex-item-wrapper--has-icon, .apex-item-wrapper--color-picker { --ut-field-input-icon-padding-x: 1rem; } .apex-item-wrapper--color-picker { --a-icon-padding: 1rem; } /* ========================================================================== Form Floating Fields ========================================================================== */ .t-Form-fieldContainer.t-Form-fieldContainer--floatingLabel { --ut-field-input-icon-border: none; --a-field-input-padding-y: .5rem; --a-field-input-font-size: 1rem; --ut-field-label-text-color: var(--ut-field-fl-label-text-color); // Active & Focus &.is-active, &:focus-within { --ut-field-label-text-color: var(--ut-palette-primary); } /* Item Icon ========================================================================== */ &.apex-item-wrapper--has-icon, &.apex-item-wrapper--color-picker { --ut-field-input-padding-x-offset: calc(var(--ut-field-input-icon-offset, 1.5rem) - var(--a-field-input-border-width, 1px)); --ut-field-label-padding-x-offset: var(--ut-field-input-icon-offset, 1.5rem); } } // Checbkox & Radio Group .t-Form-fieldContainer--floatingLabel.apex-item-wrapper--checkbox, .t-Form-fieldContainer--floatingLabel.apex-item-wrapper--radiogroup { --ut-field-label-text-color: var(--ut-component-text-muted-color); --ut-field-fl-label-font-size: .75rem; .t-Form-label { padding-block-start: var(--ut-field-label-padding-y, .25rem); } .apex-item-group--rc input + label { margin-block-start: .5rem; margin-block-end: .5rem; } } .t-Form-fieldContainer--floatingLabel.apex-item-wrapper--color-picker { --a-icon-padding: 1rem; } // Label alignment .t-Form-fieldContainer:not(.t-Form-fieldContainer--stacked):not(.t-Form-fieldContainer--floatingLabel) { .t-Form-label, .display_only { display: inline-flex; align-items: center; min-height: calc(var(--a-field-input-padding-y, .25rem) + var(--a-field-input-padding-y, .25rem) + var(--a-field-input-line-height, 1rem)); } .apex-item-grid.checkbox_group { min-height: calc(var(--a-field-input-padding-y, .25rem) + var(--a-field-input-padding-y, .25rem) + var(--a-field-input-line-height, 1rem)); padding-block-start: .375rem; } .apex-item-group--rc input + label { margin-block-start: .5rem; margin-block-end: .5rem; } } // Auto Fill .apex-item-text, .apex-item-select, .apex-item-textarea, .u-TF-item--text, .u-TF-item--select, select.listmanager, select.group_selectlist, .apex-item-multi, .datetimepicker_newMonth { &:-webkit-autofill, &:-webkit-autofill:hover, &:-webkit-autofill:focus { -webkit-text-fill-color: var(--a-field-input-text-color); -webkit-box-shadow: 0 0 0 1000px var(--rw-palette-brandlight-10) inset; transition: background-color 5000s ease-in-out 0s; } } // Switch .apex-item-wrapper--yes-no { .t-Form-inputContainer { display: flex; } .t-Form-itemWrapper { align-items: center; } } // Percent Graph .apex-item-wrapper--pct-graph { .t-Form-inputContainer { display: flex; } .t-Form-itemWrapper { align-items: center; } } // Star Rating .apex-item-wrapper--star-rating { .t-Form-inputContainer { display: flex; } .t-Form-itemWrapper { align-items: center; } .a-StarRating-star.fa { font-size: var(--a-field-icon-size); } } // Checkboxes .u-selector { --a-checkbox-background-color: transparent; --a-checkbox-hover-background-color: var(--ut-component-highlight-background-color); --a-checkbox-hover-opacity: .4; --a-checkbox-checked-text-color: var(--a-checkbox-checked-text-color); } .ro-checkbox, .u-checkbox:before, .u-radio:before { transform-origin: center center; transition: transform .125s ease, background-color .15s ease, box-shadow .15s ease, border-color .15s ease; } .ro-checkbox:before, .u-checkbox:after, .u-radio:after { transform-origin: center center; transform: scale(0); transition: opacity .15s ease, transform .2s ease; } .ro-checkbox:active, .ro-checkbox:active:before, .u-checkbox:active:before, .u-checkbox:active:after, input:checked + .u-checkbox:active:after, .u-radio:active:before, .u-radio:active:after, input:checked + .u-radio:active:after { transform: scale(.75); } .ro-checkbox.is-checked:before, .u-checkbox.is-checked:after, input:checked + .u-checkbox:after, input:checked + .u-radio:after { transform: scale(1); } .u-checkbox:focus:before, .apex-item-checkbox input:focus + .u-checkbox:before, .apex-item-checkbox input:focus + label:before, .apex-item-checkbox .apex-item-option input:focus + label:before, .apex-item-single-checkbox input:focus + .u-checkbox:before, .apex-item-single-checkbox input:focus + label:before, .u-radio:focus:before, .apex-item-radio input:focus + .u-radio:before, .apex-item-radio input:focus + label:before { outline: var(--ut-focus-outline, auto 1px var(--ut-focus-outline-color, -webkit-focus-ring-color)); outline-offset: 2px; } // Button Group .apex-button-group input:focus + label, .t-Form-fieldContainer--radioButtonGroup .apex-item-group--rc input:focus + label { outline: var(--ut-focus-outline, auto 1px var(--ut-focus-outline-color, -webkit-focus-ring-color)); outline-offset: var(--ut-focus-outline-offset); } // File Browse .apex-item-group--file-browse { --a-filedrop-border-style: solid; --a-filedrop-border-radius: var(--a-field-input-border-radius, .125rem); --a-filedrop-padding-y: 0rem; --a-filedrop-padding-x: 0rem; --a-filedrop-icon-size: 1.25rem; --a-filedrop-heading-font-size: 1rem; --a-filedrop-heading-line-height: 1.25rem; --a-filedrop-heading-font-weight: 400; .apex-item-filedrop-icon { align-self: stretch; } .apex-item-filedrop-body { padding-block-start: calc(var(--a-field-input-padding-y, .25rem) - var(--a-field-input-border-width, 1px)); padding-block-end: calc(var(--a-field-input-padding-y, .25rem) - var(--a-field-input-border-width, 1px)); padding-inline-start: calc(var(--a-field-input-padding-x, .25rem) - var(--a-field-input-border-width, 1px)); padding-inline-end: calc(var(--a-field-input-padding-x, .25rem) - var(--a-field-input-border-width, 1px)); } } // Date & Time Picker .oj-datetimepicker-switcher { font-size: .875rem; } // Date Picker .a-DatePicker {} .a-DatePicker-calendar thead th:not(.a-DatePicker-weekColumn) { visibility: hidden; font-size: 0; &::first-letter { // color: var(--rw-palette-neutral-200); visibility: visible; font-size: var(--a-datepicker-calendar-header-font-size, .75rem); } } thead .a-DatePicker-weekColumn { --a-datepicker-calendar-header-font-size: .75rem; vertical-align: top; } .a-DatePicker-monthPicker { justify-content: center; .a-DatePicker-month, .a-DatePicker-year { inline-size: 6.25rem; select { text-align: inherit; inline-size: 100%; } } .a-DatePicker-month { text-align: end; select { padding-inline-end: 0; } } .a-DatePicker-year { text-align: start; select { padding-inline-start: 0; } } } // Add border for multiple months .a-DatePicker--multiple .a-DatePicker-calendarTitle { border-block-start-width: var(--a-datepicker-calendar-header-border-width, 1px); border-block-start-style: solid; border-block-start-color: var(--a-datepicker-calendar-header-border-color, var(--a-gv-header-cell-border-color)); } .a-DatePicker--multiple .a-DatePicker-calendars { --a-datepicker-calendars-gap: 1px; } .a-DatePicker-calendar { td > span { display: flex; align-items: center; justify-content: center; block-size: calc(var(--a-datepicker-calendar-day-font-size, 1rem) * 2); inline-size: calc(var(--a-datepicker-calendar-day-font-size, 1rem) * 2); } td.is-current > span { border-radius: 50%; } td.is-current > span, td.is-selected > span { font-weight: 700; } td:focus { outline: none; > span { outline: var(--ut-focus-outline, auto 1px var(--ut-focus-outline-color, -webkit-focus-ring-color)); outline-offset: var(--ut-focus-outline-offset); } } } .a-DatePicker-month, .a-DatePicker-year, .a-DatePicker-timeHours, .a-DatePicker-timeMinutes, .a-DatePicker-timeAmPm { select { order: unset; appearance: none; } } .a-DatePicker-nav, .a-DatePicker--today, .a-DatePicker--close { --a-button-background-color: transparent; --a-button-text-color: var(--ut-component-text-default-color); --a-button-border-color: transparent; --a-button-shadow: none; --a-icon-size: 1.5rem; &:hover { --a-button-state-background-color: var(--a-button-hover-background-color); --a-button-state-text-color: var(--a-button-hover-text-color); --a-button-state-border-color: var(--a-button-hover-border-color); --a-button-state-shadow: var(--a-button-hover-shadow); } &:active { --a-button-state-background-color: var(--a-button-active-background-color, var(--a-button-hover-background-color)); --a-button-state-text-color: var(--a-button-active-text-color, var(--a-button-hover-text-color)); --a-button-state-border-color: var(--a-button-active-border-color, var(--a-button-hover-border-color)); --a-button-state-shadow: var(--a-button-active-shadow, var(--a-button-hover-shadow)); } } .a-DatePicker .a-DatePicker-nav--prev { order: 1; } .a-DatePicker .a-DatePicker-monthPicker { order: 2; } .a-DatePicker .a-DatePicker-nav--next { order: 3; } .a-DatePicker-timeHours { display: flex; justify-content: center; align-items: center; &:after { content: ":"; position: relative; line-height: var(--a-datepicker-timehour-lineheight, 1.25rem); font-size: .75rem; } } // Column controls .a-GV-columnControls .a-Button { --a-button-line-height: 1; --a-button-border-radius: .125rem; --a-button-background-color: transparent; background-color: var(--a-button-state-background-color, var(--a-button-type-background-color, var(--a-button-background-color, transparent))); color: var(--a-button-state-text-color, var(--a-button-type-text-color, var(--a-button-text-color, inherit))); } // Pagination .a-GV-pagination { --a-gv-pagination-button-padding-x: .5rem; --a-gv-pagination-button-padding-y: .5rem; --a-button-background-color: transparent; --a-button-font-size: 1rem; --a-button-line-height: 1rem; } // Remove Double Border .a-GV-hdr .a-GV-w-hdr .a-GV-table, .a-GV-hdr .a-GV-w-frozen .a-GV-table { border-bottom: 0; } // Reduce padding for column form items .a-GV-columnItem { --a-field-input-padding-y: .5rem; --a-field-input-border-radius: 0; } // Reset IRR to match GridView .a-IRR { --a-gv-border-radius: var(--ut-region-border-radius, var(--ut-component-border-radius)); --a-gv-cell-padding-y: .625rem; --a-gv-cell-padding-x: .5rem; .a-IRR-toolbar { border-top-left-radius: var(--a-gv-border-radius); border-top-right-radius: var(--a-gv-border-radius); } } .a-IRR-header--group { padding: var(--a-gv-cell-padding-y) var(--a-gv-cell-padding-x); background-color: var(--a-gv-header-background-color); color: var(--a-gv-header-text-color); border-width: var(--a-gv-header-cell-border-width, 1px); border-style: solid; border-color: var(--a-gv-header-cell-border-color); } // IRR Toolbars & Buttons .a-IRR-controlsContainer { .a-MediaBlock-content { display: flex; align-items: center; flex-wrap: wrap; } } .a-IRR-sortWidget { width: 14.375rem; // Larger sort widget due to rw button sizes } .a-Toolbar, .a-IRR-toolbar, .a-IRR-button.a-IRR-sortWidget-button { --a-button-font-size: .875rem; --a-button-line-height: 1.25rem; --a-button-padding-y: .5rem; --a-button-padding-x: 1rem; --a-button-icon-spacing: .5rem; --a-button-icon-size: 1.25rem; --a-button-background-color: transparent; } .a-Toolbar-group--search .a-Toolbar-inputText[data-enter-action="search"], .a-IRR-search-field { border-radius: var(--a-field-input-border-radius, .125rem); margin-inline-start: .25rem; margin-inline-end: .25rem; } .a-Toolbar-group--search .a-Toolbar-item:first-child, .a-Toolbar-group--search .a-Toolbar-item:last-child, .a-IRR-button--colSearch, .a-IRR-button--search { border-radius: var(--a-button-border-radius, .125rem); } .a-IRR-sortWidget-searchLabel { padding: .625rem .75rem; height: 2.25rem; display: flex; align-items: center; } .a-IG-button.a-IG-button--controls, .a-IRR-button.a-IRR-button--controls { --a-button-padding-y: .5rem; --a-button-padding-x: .5rem; --a-button-background-color: transparent; --a-icon-size: 1.25rem; } .a-IG-controlsIcon, .a-IRR-controlsIcon, .a-IRR-button.a-IRR-sortWidget-button { --a-icon-size: 1.25rem; } .a-IG-reportSummary-count { font-weight: var(--a-base-font-weight-semibold, 500); } .a-IG-reportSummary-icon, .a-IRR-reportSummary-icon { --a-icon-size: 1.25rem; } .a-IRR-sortWidget-search > .a-IRR-sortWidget-searchField { font-size: var(--a-field-input-font-size, .75rem); padding-block-start: 0; padding-block-end: 0; padding-inline-start: 2.25rem; padding-inline-end: .75rem; padding: 0 .75rem 0 2.25rem; height: 2.25rem; } .a-IRR-button.a-IRR-button--pagination, .a-IRR-button.a-IRR-button--pagination:hover { --a-button-background-color: transparent; --a-button-border-radius: var(--a-button-border-radius); background-color: var(--a-button-state-background-color, var(--a-button-type-background-color, var(--a-button-background-color, transparent))); color: var(--a-button-state-text-color, var(--a-button-type-text-color, var(--a-button-text-color, inherit))); } .a-IG-button.a-IG-button--remove, .a-IRR-button.a-IRR-button--remove { --a-icon-size: 1.25rem; &:hover { color: var(--a-palette-danger); } } .a-IRR-button.a-IRR-sortWidget-button { display: flex; align-items: center; } .a-IRR-lovItem .a-Button--menu, .a-IRR-lovItem .a-Button--colorPicker, .a-IRR-lovItem .a-Button--calendar { height: auto; } // Report Header .t-Report-colHead { vertical-align: middle; height: var(--a-gv-header-cell-height, 2.5rem); background-color: var(--a-gv-header-background-color); color: var(--a-gv-header-text-color); } .a-IRR-headerLink, .u-Report-sortHeading a { color: inherit; } .a-Table-columntogglePopup.ui-dialog-content { padding: var(--a-column-toggle-padding-y, .5rem) var(--a-column-toggle-padding-x, .5rem); } // Report Alternating Rows .a-Table.u-Report.table-stripe tr:nth-child(even) td, .a-Table.u-Report.table-stripe tr:nth-child(even) th[scope="row"] { background-color: var(--rw-palette-neutral-20); } // Control Type Colors .a-IG-reportSummary-item--savedReport, .a-IG-controls-item--savedReport, .a-IRR-reportSummary-item--savedReport, .a-IRR-controls-item--savedReport { --a-report-controls-cell-label-icon-background-color: var(--rw-palette-blue-100); --a-report-controls-cell-label-hover-background-color: var(--rw-palette-blue-10); } .a-IG-reportSummary-item--search, .a-IG-controls-item--search, .a-IRR-reportSummary-item--search, .a-IRR-controls-item--search { --a-report-controls-cell-label-icon-background-color: var(--rw-palette-blue-100); --a-report-controls-cell-label-hover-background-color: var(--rw-palette-blue-10); } .a-IG-reportSummary-item--filter, .a-IG-controls-item--filter, .a-IRR-reportSummary-item--filter, .a-IRR-controls-item--filter { --a-report-controls-cell-label-icon-background-color: var(--rw-palette-green-100); --a-report-controls-cell-label-hover-background-color: var(--rw-palette-green-10); } .a-IG-reportSummary-item--controlBreak, .a-IG-controls-item--controlBreak, .a-IRR-reportSummary-item--controlBreak, .a-IRR-controls-item--controlBreak { --a-report-controls-cell-label-icon-background-color: var(--rw-palette-blue-150); --a-report-controls-cell-label-hover-background-color: var(--rw-palette-blue-30); } .a-IG-reportSummary-item--groupBy, .a-IG-controls-item--groupBy, .a-IRR-reportSummary-item--groupBy, .a-IRR-controls-item--groupBy { --a-report-controls-cell-label-icon-background-color: var(--rw-palette-blue-150); --a-report-controls-cell-label-hover-background-color: var(--rw-palette-blue-30); } .a-IG-reportSummary-item--aggregate, .a-IG-controls-item--aggregate, .a-IRR-reportSummary-item--aggregate, .a-IRR-controls-item--aggregate { --a-report-controls-cell-label-icon-background-color: var(--rw-palette-blue-150); --a-report-controls-cell-label-hover-background-color: var(--rw-palette-blue-30); } .a-IG-reportSummary-item--highlight, .a-IG-controls-item--highlight, .a-IRR-reportSummary-item--highlight, .a-IRR-controls-item--highlight { --a-report-controls-cell-label-icon-background-color: var(--rw-palette-orange-100); --a-report-controls-cell-label-hover-background-color: var(--rw-palette-orange-10); } .a-IG-reportSummary-item--flashback, .a-IG-controls-item--flashback, .a-IRR-reportSummary-item--flashback, .a-IRR-controls-item--flashback { --a-report-controls-cell-label-icon-background-color: var(--rw-palette-pebble-150); --a-report-controls-cell-label-hover-background-color: var(--rw-palette-pebble-30); } .a-IG-reportSummary-item--chart, .a-IG-controls-item--chart, .a-IRR-reportSummary-item--chart, .a-IRR-controls-item--chart { --a-report-controls-cell-label-icon-background-color: var(--rw-palette-blue-150); --a-report-controls-cell-label-hover-background-color: var(--rw-palette-blue-50); } .a-IG-reportSummary-item--pivot, .a-IG-controls-item--pivot, .a-IRR-reportSummary-item--pivot, .a-IRR-controls-item--pivot { --a-report-controls-cell-label-icon-background-color: var(--rw-palette-pebble-150); --a-report-controls-cell-label-hover-background-color: var(--rw-palette-pebble-30); } .a-IG-reportSummary-item--invalidSettings, .a-IG-controls-item--invalidSettings, .a-IRR-reportSummary-item--invalidSettings, .a-IRR-controls-item--invalidSettings { --a-report-controls-cell-label-icon-background-color: var(--rw-palette-pebble-100); --a-report-controls-cell-label-hover-background-color: var(--rw-palette-pebble-10); } .a-IG-reportSummary-item--inactiveSettings, .a-IG-controls-item--inactiveSettings, .a-IRR-reportSummary-item--inactiveSettings, .a-IRR-controls-item--inactiveSettings { --a-report-controls-cell-label-icon-background-color: var(--rw-palette-pebble-100); --a-report-controls-cell-label-hover-background-color: var(--rw-palette-pebble-10); } /* ========================================================================== Mega Menu ========================================================================== */ .t-MegaMenu { --ut-megamenu-label-font-size: 1rem; --ut-megamenu-item-top-padding-y: 0rem; --ut-megamenu-item-top-padding-x: 0rem; --ut-megamenu-item-padding-x: .5rem; --ut-link-text-decoration: none; --a-menu-icon-spacing-x: .5rem; --rw-badge-bg-color: var(--ut-component-toolbar-background-color); --rw-badge-text-color: var(--ut-component-text-default-color); } /* Top Level Menu Items ========================================================================== */ .t-MegaMenu-item--top { > .t-MegaMenu-itemBody { --ut-megamenu-item-padding-y: .5rem; --ut-megamenu-item-padding-x: .75rem; } } .t-MegaMenu-item--hasSub > .t-MegaMenu-list--sub { margin-block-start: 0; } /* Nested Navigation ========================================================================== */ .t-MegaMenu-list--sub { --ut-megamenu-label-font-size: .875rem; } /* Badges ========================================================================== */ .t-MegaMenu-badge { --ut-megamenu-badge-font-size: .6875rem; --ut-megamenu-badge-line-height: 1.5rem; --ut-megamenu-badge-border-radius: .375rem; --ut-megamenu-badge-padding: 0 .5rem; min-width: var(--ut-megamenu-badge-line-height, 1rem); font-weight: var(--rw-badge-font-weight, var(--a-base-font-weight-bold, 700)); font-stretch: var(--rw-badge-font-stretch, condensed); text-align: center; background-color: var(--rw-badge-bg-color, var(--ut-component-badge-background-color)); color: var(--rw-badge-text-color, var(--ut-component-badge-text-color)); } .t-Header-nav { .a-Icon.icon-menu-split-drop-down:before { content: "\e123"; } .a-MenuBar { box-shadow: inset 0 calc(var(--a-menubar-item-border-width, 1px) * -1) 0 var(--a-menubar-item-border-color); } .a-MenuBar-item { border-top-width: 0; border-bottom-width: 0; &:focus-within { outline: var(--ut-focus-outline, auto 1px var(--ut-focus-outline-color, -webkit-focus-ring-color)); outline-offset: -1px; } .a-MenuBar-label { outline: none; } } .a-Menu--split { .a-MenuBar-label { padding-inline-end: 0; .u-RTL & { padding-inline-start: 0; padding-inline-end: var(--a-menubar-item-padding-x, .5rem); } } } .a-MenuBar-item.is-focused { background-color: var(--a-menubar-item-focused-background-color); color: var(--a-menubar-item-focused-text-color); } .a-MenuBar-item.a-Menu--current { --a-menubar-item-font-weight: var(--a-base-font-weight-bold, 700); background-color: var(--a-menubar-item-current-background-color); color: var(--a-menubar-item-current-text-color); } } .t-Region-headerItems--buttons { padding-block-start: .5rem; padding-block-end: .5rem; } .apex-rds { --ut-tabs-item-padding-y: .875rem; --ut-tabs-item-padding-x: 1rem; } .t-Body-title .apex-rds-container { margin-inline-start: 0; margin-inline-end: 0; padding-inline-start: var(--ut-breadcrumb-padding-x, 1rem); padding-inline-end: var(--ut-breadcrumb-padding-x, 1rem); .apex-rds { margin-inline-start: calc(var(--ut-tabs-item-padding-x, .5rem) * -1); margin-inline-end: calc(var(--ut-tabs-item-padding-x, .5rem) * -1); } } .apex-rds-item { a { color: var(--ut-component-text-muted-color); font-weight: var(--a-base-font-weight-semibold, 500); transition: color .1s ease; &:hover { color: var(--ut-component-text-default-color); } } span { transition: box-shadow .1s ease; } } .apex-rds-selected span { box-shadow: 0 -3px 0 var(--ut-palette-primary) inset; color: var(--ut-component-text-default-color); } .apex-rds-item--hint span { box-shadow: 0 -3px 0 var(--rw-palette-neutral-40) inset; } .t-Tabs-link:hover { color: var(--ut-tabs-item-active-text-color); } .t-Timeline--compact .t-Timeline-typename { --ut-timeline-type-font-weight: var(--a-base-font-weight-semibold, 500); } .t-Timeline--compact .t-Timeline-type { --ut-timeline-type-padding-y: .25rem; } .t-Timeline-avatar { font-weight: var(--a-base-font-weight-semibold, 500); } .a-TreeView { padding: .125rem .25rem; // Hide padding so badge isn't visible .js-navCollapsed & { .respond-to(xs-screens-in) { padding-inline-start: 0; padding-inline-end: 0; } } .js-navCollapsed--hidden.js-navCollapsed & { padding-inline-start: 0; padding-inline-end: 0; } } .a-TreeView-node { padding-block-start: .125rem; padding-block-end: .125rem; } .a-TreeView-row { border-radius: .25rem; } .t-WizardSteps { --ut-wp-marker-size: 1.25rem; --ut-wp-completed-marker-font-size: .75rem; counter-reset: progress; } .t-WizardSteps-marker { display: grid; align-items: center; box-shadow: var(--ut-wp-marker-color) inset 0 0 0 2px; background-color: var(--rw-palette-neutral-10); color: var(--ut-wp-marker-color); &:before { counter-increment: progress; content: counter(progress); font-size: .75rem; line-height: 1rem; font-weight: var(--a-base-font-weight-bold, 700); display: block; } } .t-WizardSteps-step.is-active .t-WizardSteps-marker, .t-WizardSteps-step.is-complete .t-WizardSteps-marker { --ut-wp-marker-size: 1.25rem; transform: none; box-shadow: none; } .t-WizardSteps-step.is-active .t-WizardSteps-marker { background-color: var(--rw-palette-neutral-190); color: var(--rw-palette-neutral-0); } // Third Party .ui-dialog-titlebar-close { --a-button-background-color: transparent; --a-button-text-color: var(--rw-palette-neutral-190); --a-button-border-color: transparent; // --a-button-shadow: none; // Hover --a-button-hover-background-color: rgba(22, 21, 19, 0.04); // --a-button-hover-border-color: var(--a-button-border-color); // --a-button-hover-shadow: none; // Active --a-button-active-background-color: rgba(22, 21, 19, 0.08); // --a-button-active-shadow: var(--a-button-hover-border-color); // Focus --a-button-focus-background-color: var(--a-button-hover-background-color); // --a-button-focus-border-color: var(--a-button-hover-border-color); } // Redwood Options /* ========================================================================== Redwood Pillars ========================================================================== */ // Mixin for Pillar colors .pillar(@pillar, @pattern-size: auto) { --ut-hero-region-icon-background-color: var(--rw-palette-@pillar-100); --ut-body-title-border-color: var(--rw-palette-@pillar-100); --ut-body-title-background-color: var(--rw-palette-neutral-0); --ut-body-title-text-color: var(--rw-palette-neutral-190); --rw-palette-background-size: @pattern-size; --rw-dark-body-title-background-color: var(--rw-palette-@pillar-140); --rw-active-pillar-background-color: var(--rw-palette-@pillar-100); --rw-foldout-panel-pillar-background-color: var(--rw-palette-@pillar-140); .t-Body-title:after, &.rw-layout--fixed .t-Body-mainContent:before { background-image: url('../images/rw/color-strip/@pillar.png'); .respond-to(high-dpi) { background-image: url('../images/rw/color-strip/@pillar_2x.png'); } } .t-ContentBlock--textureBG { background-image: url('../images/rw/background-patterns/@pillar.png'); background-size: var(--rw-palette-background-size); .respond-to(high-dpi) { background-image: url('../images/rw/background-patterns/@pillar_2x.png'); } &.t-ContentBlock--shadowBG, &.t-ContentBlock--pillarBG { background-image: url('../images/rw/background-patterns/@pillar-dark.png'); .respond-to(high-dpi) { background-image: url('../images/rw/background-patterns/@pillar-dark_2x.png'); } } } @at-root body& { background-image: url('../images/rw/background-patterns/@pillar.png'); background-size: var(--rw-palette-background-size); .respond-to(high-dpi) { background-image: url('../images/rw/background-patterns/@pillar_2x.png'); } // Dark Mode Body &.rw-mode-body--dark { background-image: url('../images/rw/background-patterns/@pillar-dark.png'); .respond-to(high-dpi) { background-image: url('../images/rw/background-patterns/@pillar-dark_2x.png'); } } } &.rw-mode-nav--pillar { --ut-body-nav-background-color: var(--rw-palette-@pillar-170); --ut-body-nav-text-color: var(--rw-palette-@pillar-10); // --ut-body-nav-border-color: rgba(255, 255, 255, .1); --ut-body-nav-scrollbar-thumb-background-color: var(--rw-palette-@pillar-130); --a-treeview-node-selected-background-color: var(--rw-palette-@pillar-140); --a-treeview-node-selected-text-color: var(--a-treeview-node-text-color); --a-treeview-node-focused-background-color: var(--rw-palette-@pillar-130); --a-treeview-node-focused-text-color: var(--a-treeview-node-text-color); --a-treeview-node-hover-background-color: var(--rw-palette-@pillar-150); --a-treeview-node-hover-text-color: var(--a-treeview-node-text-color); --ut-navtabs-background-color: var(--rw-palette-@pillar-170); --ut-navtabs-box-shadow: 0 1px 0 0 rgba(@rw-palette-neutral-10, .1); --ut-navtabs-item-text-color: rgba(@rw-palette-neutral-0, .6); --ut-navtabs-item-border-color: rgba(@rw-palette-neutral-0, .1); --ut-navtabs-item-hover-text-color: var(--rw-palette-neutral-0); --ut-navtabs-item-hover-highlight-color: rgba(@rw-palette-neutral-0, .1); --ut-navtabs-item-active-text-color: var(--rw-palette-neutral-0); --ut-navtabs-item-active-highlight-color: var(--rw-palette-branddark-50); // Menu Bar --ut-header-menubar-background-color: var(--rw-palette-@pillar-170); --ut-header-menubar-item-text-color: var(--rw-palette-@pillar-10); --ut-header-menubar-item-current-background-color: var(--rw-palette-@pillar-140); --ut-header-menubar-item-current-text-color: var(--ut-header-menubar-item-text-color); --ut-header-menubar-item-hover-background-color: var(--rw-palette-@pillar-150); --ut-header-menubar-item-hover-text-color: var(--ut-header-menubar-item-current-text-color); --ut-header-menubar-item-border-color: rgba(@rw-palette-neutral-0, .1); --ut-header-menubar-item-split-icon-color: rgba(@rw-palette-neutral-0, .6); --ut-header-menubar-item-split-border-color: rgba(@rw-palette-neutral-0, .04); } &.rw-mode-header--pillar { --ut-header-background-color: var(--rw-palette-@pillar-170); --ut-header-text-color: var(--rw-palette-@pillar-0); --ut-header-box-shadow: var(--ut-shadow-md); .t-Button--header { --a-button-hover-background-color: rgba(@rw-palette-neutral-0, .04); --a-button-active-background-color: rgba(@rw-palette-neutral-0, .08); --a-button-focus-background-color: var(--a-button-background-color); // Active &.is-active { --a-button-background-color: rgba(@rw-palette-neutral-190, .5); } } } } .pillar-texture(@pillar, @pattern-size: auto) { background-image: url('../images/rw/background-patterns/@pillar.png'); background-size: var(--rw-palette-background-size); .respond-to(high-dpi) { background-image: url('../images/rw/background-patterns/@pillar_2x.png'); } &--dark { background-image: url('../images/rw/background-patterns/@pillar-dark.png'); background-size: var(--rw-palette-background-size); .respond-to(high-dpi) { background-image: url('../images/rw/background-patterns/@pillar-dark_2x.png'); } } } /* Neutral (Generic) ========================================================================== */ body:not([class*="rw-pillar--"]), .rw-pillar--neutral { .pillar(neutral, 350px 350px); } .rw-texture, .rw-texture--neutral { .pillar-texture(neutral, 350px 350px); } body:not([class*="rw-pillar--"]) { background-image: url('../images/rw/background-patterns/neutral.png'); background-size: var(--rw-palette-background-size); .respond-to(high-dpi) { background-image: url('../images/rw/background-patterns/neutral_2x.png'); } // Dark Mode Body &.rw-mode-body--dark { background-image: url('../images/rw/background-patterns/neutral-dark.png'); .respond-to(high-dpi) { background-image: url('../images/rw/background-patterns/neutral-dark_2x.png'); } } } /* Rose (HCM) ========================================================================== */ .rw-pillar--rose { .pillar(rose, 550px 550px); } .rw-texture--rose { .pillar-texture(rose, 550px 550px); } /* Plum (CX) ========================================================================== */ .rw-pillar--plum { .pillar(plum, 300px 300px); } .rw-texture--plum { .pillar-texture(plum, 300px 300px); } /* Sienna (SCM) ========================================================================== */ .rw-pillar--sienna { .pillar(sienna, 300px 300px); } .rw-texture--sienna { .pillar-texture(sienna, 300px 300px); } /* Teal (ERP) ========================================================================== */ .rw-pillar--teal { .pillar(teal, 300px 300px); } .rw-texture--teal { .pillar-texture(teal, 300px 300px); } /* Pebble (Dev Tools) ========================================================================== */ .rw-pillar--pebble { .pillar(pebble, 450px 450px); } .rw-texture--pebble { .pillar-texture(pebble, 450px 450px); } /* Slate (Database) ========================================================================== */ .rw-pillar--slate { .pillar(slate, 480px 480px); } .rw-texture--slate { .pillar-texture(slate, 480px 480px); } /* Pine (OCI) ========================================================================== */ .rw-pillar--pine { .pillar(pine, 350px 350px); } .rw-texture--pine { .pillar-texture(pine, 350px 350px); } /* Ocean (NetSuite) ========================================================================== */ .rw-pillar--ocean { .pillar(ocean, 475px 475px); } .rw-texture--ocean { .pillar-texture(ocean, 475px 475px); } /* Lilac (GBU) ========================================================================== */ .rw-pillar--lilac { .pillar(lilac, 650px 650px); } .rw-texture--lilac { .pillar-texture(lilac, 650px 650px); } /* Beige ========================================================================== */ .rw-pillar--beige { .pillar(beige); } .rw-texture--beige { .pillar-texture(beige); } // Layouts body:not([class*="rw-layout--"]), .rw-layout--edge-to-edge { --ut-body-main-content-background-color: transparent; } .rw-layout--contained:not(.rw-layout--edge-to-edge):not(.rw-layout--fixed):not(.rw-layout--foldout) { --ut-body-content-max-width: 87rem; // Start at small screens .respond-to(sm-screens-out) { --ut-body-content-padding-x: 1.5rem; --ut-breadcrumb-padding-x: 1.5rem; --ut-hero-region-padding-x: 1.5rem; --ut-footer-padding-x: 1.5rem; .t-Body-main { margin-inline-start: auto; margin-inline-end: auto; max-width: var(--ut-body-content-max-width); width: calc(100% - var(--rw-body-floating-margin, 1.5rem) - var(--rw-body-floating-margin, 1.5rem)); box-shadow: rgba(0, 0, 0, .3) 0 .75rem 1.5rem -12px, rgba(0, 0, 0, .05) 0 0 0 1px; } .t-Body-title { --ut-body-title-box-shadow: none; position: relative; top: 0; } .t-Body-side { height: auto; position: relative; top: 0; } } // Alert Offset .t-Alert--page { margin-block-start: var(--js-sticky-top); } // Start at medium screens .respond-to(md-screens-out) { --ut-body-content-padding-x: 3rem; --ut-breadcrumb-padding-x: 3rem; --ut-hero-region-padding-x: 3rem; --ut-footer-padding-x: 3rem; } } .rw-layout--fixed:not(.rw-layout--edge-to-edge):not(.rw-layout--contained):not(.rw-layout--foldout) { --ut-body-content-max-width: 87rem; // Start at small screens .respond-to(sm-screens-out) { --rw-body-overflow-offset: 4rem; --rw-body-floating-margin: 1.5rem; --ut-body-main-content-background-color: var(--ut-body-main-background-color); // --ut-body-background-color: var(--rw-palette-neutral-20); // --ut-body-main-content-background-color: var(--rw-palette-neutral-10); --ut-footer-background-color: transparent; --ut-body-content-padding-x: 1.5rem; --ut-breadcrumb-padding-x: 1.5rem; --ut-hero-region-padding-x: 1.5rem; --ut-footer-padding-x: 1.5rem; .t-Body-main { background-color: transparent; grid-template-rows: auto auto 1fr; grid-template-columns: minmax(var(--rw-body-floating-margin, 1.5rem), auto) minmax(auto, var(--ut-body-content-max-width, 120rem)) minmax(var(--rw-body-floating-margin, 1.5rem), auto); grid-template-areas: "title title title" "spacer-l side spacer-r" "spacer-l content spacer-r"; } // Body Title .t-Body-title { --ut-body-title-border-width: 0; --ut-body-title-box-shadow: none; display: grid; grid-template-columns: minmax(auto, var(--ut-body-content-max-width, 100%)); justify-content: center; padding-block-end: var(--rw-body-overflow-offset, 4rem); padding-inline-start: var(--rw-body-floating-margin, 1.5rem); padding-inline-end: var(--rw-body-floating-margin, 1.5rem); min-height: calc(var(--rw-body-overflow-offset, 4rem) + var(--rw-body-floating-margin, 1.5rem)); // Hide Control Strip &:after { content: none; } } // Body Side .t-Body-side { position: relative; z-index: 490; width: 100%; margin-block-start: calc(var(--rw-body-overflow-offset, 4rem) * -1); margin-block-end: calc(var(--rw-body-overflow-offset, 4rem) + var(--rw-body-floating-margin, 1.5rem)); top: 0; align-self: flex-start; height: auto; overflow: visible; border-radius: .375rem; box-shadow: var(--ut-shadow-md); background-color: var(--ut-body-main-content-background-color); } .t-Body-content { position: relative; z-index: 490; margin-block-start: calc(var(--rw-body-overflow-offset, 4rem) * -1); } // Body Main Content .t-Body-mainContent { position: relative; border-radius: .375rem; max-width: var(--ut-body-content-max-width, 100%); width: 100%; box-shadow: var(--ut-shadow-md); margin-inline-start: auto; margin-inline-end: auto; padding-block-start: var(--ut-body-title-border-width); // New Control strip &:before { position: absolute; top: 0; left: 0; right: 0; content: ''; height: var(--ut-body-title-border-width); display: block; background-color: var(--ut-body-title-border-color); background-size: auto 100%; background-repeat: repeat-x; overflow: hidden; border-top-left-radius: .3125rem; border-top-right-radius: .3125rem; } } .t-Footer { margin-block-start: calc(var(--rw-body-overflow-offset, 4rem) / 4); border-top: 0; margin-inline-start: auto; margin-inline-end: auto; max-width: var(--ut-body-content-max-width, 100%); width: 100%; } // Alert Offset .t-Alert--page { margin-block-start: var(--js-sticky-top); } // Dark Mode Body &.rw-mode-body--dark { --ut-footer-text-color: var(--rw-palette-neutral-0); --ut-footer-top-border-color: rgba(255, 255, 255, .3); --ut-footer-top-text-color: var(--rw-palette-neutral-0); } } .respond-to(md-screens-out) { --ut-body-content-padding-x: 3rem; --ut-breadcrumb-padding-x: 3rem; --ut-hero-region-padding-x: 3rem; --ut-footer-padding-x: 3rem; } // Sidebar Support &.t-PageTemplate--leftCol, &.t-PageTemplate--leftRightCol { --ut-body-sidebar-width: 20rem; // Start at large screens .respond-to(lg-screens-out) { .t-Body-main { grid-template-columns: minmax(var(--rw-body-floating-margin, 1.5rem), auto) var(--ut-body-sidebar-width, auto) var(--rw-body-floating-margin, 1.5rem) minmax(auto, calc(var(--ut-body-content-max-width, 120rem) - var(--ut-body-sidebar-width) - var(--rw-body-floating-margin, 1.5rem))) minmax(var(--rw-body-floating-margin, 1.5rem), auto); grid-template-areas: "title title title title title" "spacer-l side spacer-m content spacer-r"; } } } } .rw-layout--foldout { --ut-grid-gutter-width: 0rem; display: flex; flex-wrap: nowrap; // Hide Footer .t-Footer { // display: none; padding: 0; grid-gap: 0; border: 0; .t-Footer-body, .t-Footer-top { display: none; } } // Start at small screens .respond-to(sm-screens-out) { .t-Body-mainContent { display: grid; grid-template-rows: auto 1fr; grid-template-columns: 1fr; } .rw-foldoutContainer { display: flex; flex-wrap: nowrap; overflow-x: auto; } .t-Body-contentInner { display: flex; flex-wrap: nowrap; overflow-x: auto; // scroll-snap-type: x proximity; &::-webkit-scrollbar { width: .5rem; height: .5rem; } &::-webkit-scrollbar-track { background-color: transparent; } &::-webkit-scrollbar-thumb { background-color: transparent; border-radius: .375rem; } &:hover::-webkit-scrollbar-track { background-color: rgba(@rw-palette-neutral-170, .15); } &:hover::-webkit-scrollbar-thumb { background-color: rgba(@rw-palette-neutral-170, .15); } &::-webkit-scrollbar-button { display: none; } &::-webkit-scrollbar-corner { background-color: transparent; } &::-webkit-scrollbar-track { background-color: rgba(@rw-palette-neutral-170, .05); } &::-webkit-scrollbar-thumb { background-color: rgba(@rw-palette-neutral-170, .15); } &::-webkit-scrollbar-corner { background-color: rgba(@rw-palette-neutral-170, .05); } } .t-ContentBlock { --ut-field-padding-x: 0rem; scroll-snap-align: start; transform-style: preserve-3d; transform-origin: 0 50%; transition: transform 207ms cubic-bezier(.04, 0, 0, .91); transform: perspective(9.375rem) rotateY(0); &:nth-child(2) { transition-delay: 207ms; } &:nth-child(3) { transition-delay: 414ms; } &:nth-child(4) { transition-delay: 621ms; } &:nth-child(5) { transition-delay: 828ms; } &:nth-child(6) { transition-delay: 1035ms; } &:nth-child(7) { transition-delay: 1242ms; } &:nth-child(8) { transition-delay: 1449ms; } &:nth-child(9) { transition-delay: 1656ms; } &:nth-child(10) { transition-delay: 1863ms; } &:nth-child(11) { transition-delay: 2070ms; } &:nth-child(12) { transition-delay: 2277ms; } } .no-js & { .t-ContentBlock { transform: perspective(0) rotateY(90deg); } } .t-ContentBlock { max-width: 28.625rem; flex-basis: 28.625rem; flex-shrink: 0; display: flex; flex-direction: column; flex-grow: 1; &.rw-panel--sticky { position: sticky; // top: 0; left: 0; z-index: 2; .u-RTL & { left: unset; right: 0; } } } } .t-ContentBlock { margin: 0; padding-block-start: var(--rw-foldout-panel-padding-y, var(--ut-breadcrumb-padding-y, 1rem)); padding-block-end: var(--rw-foldout-panel-padding-y, var(--ut-breadcrumb-padding-y, 1rem)); padding-inline-start: var(--rw-foldout-panel-padding-x, var(--ut-breadcrumb-padding-x, 1rem)); padding-inline-end: var(--rw-foldout-panel-padding-x, var(--ut-breadcrumb-padding-x, 1rem)); flex-grow: 1; display: grid; grid-template-rows: auto 1fr auto; background-color: var(--rw-foldout-panel-background-color, var(--rw-palette-neutral-10)); color: var(--rw-foldout-panel-text-color); .respond-to(sm-screens-out) { --rw-foldout-panel-padding-y: 3rem; --rw-foldout-panel-padding-x: 1.5rem; } .respond-to(lg-screens-out) { --rw-foldout-panel-padding-x: 3rem; } .t-ContentBlock-header { margin-block-end: 2rem; } &.t-ContentBlock--shadowBG, &.t-ContentBlock--lightBG { --ut-content-block-background-color: transparent; --ut-content-block-border-width: 0px; } &.t-ContentBlock--lightBG { --rw-foldout-panel-background-color: var(--rw-palette-neutral-0); } &.t-ContentBlock--shadowBG, &.t-ContentBlock--pillarBG { --rw-foldout-panel-background-color: var(--rw-palette-neutral-150); --rw-foldout-panel-text-color: var(--rw-palette-neutral-0); --ut-link-text-color: var(--rw-palette-branddark-50); --ut-field-label-text-color: var(--rw-palette-neutral-0); --ut-component-text-default-color: var(--rw-palette-neutral-0); --ut-component-text-title-color: var(--rw-palette-neutral-0); --ut-component-text-subtitle-color: rgba(@rw-palette-neutral-0, .8); --ut-component-text-muted-color: rgba(@rw-palette-neutral-0, .7); // Buttons --a-button-border-color: rgba(255, 255, 255, .3); --a-button-text-color: var(--rw-palette-neutral-0); // Fields --a-field-input-border-color: rgba(255, 255, 255, .3); --a-field-input-text-color: var(--rw-palette-neutral-0); --a-field-input-background-color: transparent; --a-field-input-focus-border-color: var(--rw-palette-neutral-0); --ut-field-fl-label-text-color: rgba(@rw-palette-neutral-0, .7); --a-filedrop-border-color: var(--a-field-input-border-color); --a-filedrop-heading-text-color: var(--rw-palette-neutral-0); --a-filedrop-icon-color: var(--rw-palette-neutral-0); --a-filedrop-text-color: var(--ut-component-text-muted-color); // Checkboxes --a-checkbox-border-color: var(--rw-palette-neutral-0); --a-checkbox-text-color: var(--rw-palette-neutral-0); --a-checkbox-checked-background-color: var(--rw-palette-neutral-0); --a-checkbox-checked-text-color: var(--rw-palette-neutral-190); --a-field-select-background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MiA1MiI+PHBhdGggZD0iTTIwIDIzbDYgNiA2LTZIMjB6IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg=="); .a-FS-clear { --a-button-border-color: rgba(255, 255, 255, .3); } .t-Form-fieldContainer--floatingLabel.is-active, .t-Form-fieldContainer--floatingLabel:focus-within { --ut-field-label-text-color: var(--rw-palette-branddark-50); } .t-Form-error { color: rgba(255, 255, 255, .6); } .t-Button--hot { --a-button-background-color: var(--rw-palette-neutral-0); --a-button-text-color: var(--rw-palette-neutral-190); --a-button-hover-background-color: rgba(255, 255, 255, .96); --a-button-active-background-color: rgba(255, 255, 255, .92); } .t-Button--simple, .t-Button--noUI { --a-button-border-color: rgba(255, 255, 255, 0.5); --a-button-hover-background-color: rgba(255, 255, 255, 0.04); --a-button-active-background-color: rgba(255, 255, 255, 0.08); } } &.t-ContentBlock--pillarBG { --rw-foldout-panel-background-color: var(--rw-foldout-panel-pillar-background-color); } } } // Appearance .rw-mode-header--light { --ut-header-background-color: var(--rw-palette-neutral-20); --ut-header-text-color: var(--rw-palette-neutral-190); --ut-header-box-shadow: inset rgba(@rw-palette-neutral-190, .1) 0 -1px 0 0; } .rw-mode-header--dark { --ut-header-background-color: var(--rw-palette-neutral-170); --ut-header-text-color: var(--rw-palette-neutral-0); --ut-header-box-shadow: var(--ut-shadow-md); .t-Button--header { --a-button-hover-background-color: rgba(@rw-palette-neutral-0, .04); --a-button-active-background-color: rgba(@rw-palette-neutral-0, .08); --a-button-focus-background-color: var(--a-button-background-color); // Active &.is-active { --a-button-background-color: rgba(@rw-palette-neutral-190, .5); } } } .rw-mode-nav--light {} .rw-mode-nav--dark { // Side Tree Navigation --ut-body-nav-background-color: var(--rw-palette-neutral-170); --ut-body-nav-text-color: var(--rw-palette-neutral-10); // --ut-body-nav-border-color: rgba(255, 255, 255, .1); --ut-body-nav-scrollbar-thumb-background-color: var(--rw-palette-neutral-130); --a-treeview-node-selected-background-color: var(--rw-palette-neutral-140); --a-treeview-node-selected-text-color: var(--a-treeview-node-text-color); --a-treeview-node-focused-background-color: var(--rw-palette-neutral-130); --a-treeview-node-focused-text-color: var(--a-treeview-node-text-color); --a-treeview-node-hover-background-color: var(--rw-palette-neutral-150); --a-treeview-node-hover-text-color: var(--a-treeview-node-text-color); // Navigation Tabs --ut-navtabs-background-color: var(--rw-palette-neutral-170); --ut-navtabs-box-shadow: 0 1px 0 0 rgba(@rw-palette-neutral-10, .1); --ut-navtabs-item-text-color: rgba(@rw-palette-neutral-0, .6); --ut-navtabs-item-border-color: rgba(@rw-palette-neutral-0, .1); --ut-navtabs-item-hover-text-color: var(--rw-palette-neutral-0); --ut-navtabs-item-hover-highlight-color: rgba(@rw-palette-neutral-0, .1); --ut-navtabs-item-active-text-color: var(--rw-palette-neutral-0); --ut-navtabs-item-active-highlight-color: var(--rw-palette-branddark-50); // Menu Bar --ut-header-menubar-background-color: var(--rw-palette-neutral-170); --ut-header-menubar-item-text-color: var(--rw-palette-neutral-0); --ut-header-menubar-item-current-background-color: var(--rw-palette-neutral-140); --ut-header-menubar-item-current-text-color: var(--ut-header-menubar-item-text-color); --ut-header-menubar-item-hover-background-color: var(--rw-palette-neutral-150); --ut-header-menubar-item-hover-text-color: var(--ut-header-menubar-item-current-text-color); --ut-header-menubar-item-border-color: rgba(@rw-palette-neutral-0, .1); --ut-header-menubar-item-split-icon-color: rgba(@rw-palette-neutral-0, .6); --ut-header-menubar-item-split-border-color: rgba(@rw-palette-neutral-0, .04); } .rw-mode-body-header--light {} body:not([class*="rw-pillar--"]).rw-mode-body-header--dark, .rw-mode-body-header--dark { .t-Body-title { --ut-body-title-text-color: var(--rw-palette-neutral-0); --ut-hero-region-title-text-color: var(--ut-body-title-text-color); --ut-breadcrumb-item-active-text-color: var(--ut-body-title-text-color); --ut-breadcrumb-item-text-color: var(--ut-body-title-text-color); --ut-body-title-background-color: var(--rw-dark-body-title-background-color); --ut-link-text-color: var(--rw-palette-branddark-50); --ut-tabs-item-active-highlight-color: var(--rw-palette-branddark-50); --ut-field-label-text-color: var(--rw-palette-neutral-0); --ut-component-text-default-color: var(--rw-palette-neutral-0); --ut-component-text-title-color: var(--rw-palette-neutral-0); --ut-component-text-subtitle-color: rgba(@rw-palette-neutral-0, .8); --ut-component-text-muted-color: rgba(@rw-palette-neutral-0, .7); // Tabs --ut-tabs-item-text-color: var(--ut-component-text-muted-color); --ut-tabs-item-active-text-color: var(--ut-component-text-title-color); // Buttons --a-button-border-color: rgba(255, 255, 255, .3); --a-button-text-color: var(--rw-palette-neutral-0); // Fields --a-field-input-border-color: rgba(255, 255, 255, .3); --a-field-input-text-color: var(--rw-palette-neutral-0); --a-field-input-background-color: transparent; --a-field-input-focus-border-color: var(--rw-palette-neutral-0); --ut-field-fl-label-text-color: rgba(@rw-palette-neutral-0, .7); --a-filedrop-border-color: var(--a-field-input-border-color); --a-filedrop-heading-text-color: var(--rw-palette-neutral-0); --a-filedrop-icon-color: var(--rw-palette-neutral-0); --a-filedrop-text-color: var(--ut-component-text-muted-color); // Checkboxes --a-checkbox-border-color: var(--rw-palette-neutral-0); --a-checkbox-text-color: var(--rw-palette-neutral-0); --a-checkbox-checked-background-color: var(--rw-palette-neutral-0); --a-checkbox-checked-text-color: var(--rw-palette-neutral-190); --a-field-select-background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MiA1MiI+PHBhdGggZD0iTTIwIDIzbDYgNiA2LTZIMjB6IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg=="); // Chips --a-chip-border-color: rgba(@rw-palette-neutral-10, .25); --a-chip-hover-background-color: rgba(@rw-palette-neutral-10, .15); --a-chip-active-background-color: rgba(@rw-palette-neutral-10, .15); --a-chip-applied-background-color: rgba(@rw-palette-blue-10, .08); --a-chip-applied-border-color: transparent; --a-chip-applied-hover-background-color: rgba(@rw-palette-blue-10, .16); --a-chip-applied-active-background-color: rgba(@rw-palette-blue-10, .24); --a-chip-applied-is-active-background-color: var(--rw-palette-blue-100); --a-chip-applied-is-active-text-color: var(--rw-palette-blue-0); // --a-chip-applied-is-active-divider-color: var(--rw-palette-neutral-0); // --a-chip-remove-background-color: transparent; --a-chip-remove-text-color: rgba(@rw-palette-neutral-0, .5); --a-chip-remove-hover-background-color: rgba(@rw-palette-neutral-10, .1); --a-chip-remove-hover-text-color: var(--rw-palette-neutral-0); --a-chip-remove-active-background-color: rgba(@rw-palette-neutral-10, .2); --a-chip-remove-active-text-color: var(--rw-palette-neutral-0); .a-FS-clear { --a-button-border-color: rgba(255, 255, 255, .3); } .t-Form-fieldContainer--floatingLabel.is-active, .t-Form-fieldContainer--floatingLabel:focus-within { --ut-field-label-text-color: var(--rw-palette-branddark-50); } .t-Form-error { color: rgba(255, 255, 255, .6); } .t-Button--hot { --a-button-background-color: var(--rw-palette-neutral-0); --a-button-text-color: var(--rw-palette-neutral-190); --a-button-hover-background-color: rgba(255, 255, 255, .96); --a-button-active-background-color: rgba(255, 255, 255, .92); } .t-Button--simple, .t-Button--noUI { --a-button-border-color: rgba(255, 255, 255, 0.5); --a-button-hover-background-color: rgba(255, 255, 255, 0.04); --a-button-active-background-color: rgba(255, 255, 255, 0.08); } } .apex-rds-item--hint span { box-shadow: 0 -3px 0 rgba(@rw-palette-neutral-0, .3) inset; } .apex-rds-selected span { box-shadow: 0 -3px 0 var(--rw-palette-branddark-50) inset; } // @at-root body&.rw-mode-body--dark { // --ut-body-background-color: var(--ut-body-title-background-color); // } } .rw-mode-body--light {} .rw-mode-body--dark { --ut-body-background-color: var(--rw-dark-body-title-background-color, var(--ut-body-title-background-color)); &.rw-layout--fixed { // Start at small screens .respond-to(sm-screens-out) { --ut-footer-top-background-color: rgba(@rw-palette-neutral-0, .08); .t-Footer { --ut-link-text-color: var(--rw-palette-branddark-50); } } } } .rw-mode-display--standard {} .rw-mode-display--compact {}