diff --git a/libs/blocks/tabs/tabs.css b/libs/blocks/tabs/tabs.css index 0e35a6efc1..ea1366ea7a 100644 --- a/libs/blocks/tabs/tabs.css +++ b/libs/blocks/tabs/tabs.css @@ -1,35 +1,50 @@ :root { /* Tab Colors */ --tabs-active-color: #1473e6; - --tabs-border-color: #d8d8d8; + --tabs-border-color: #909090; --tabs-border-hover-color: #acacac; - --tabs-text-color: #7e7e7e; - --tabs-active-text-color: #2C2C2C; + --tabs-text-color: #686868; + --tabs-active-text-color: #2c2c2c; --tabs-bg-color: #f1f1f1; --tabs-active-bg-color: #fff; - --tabs-list-bg-gradient: linear-gradient(rgb(255 255 255 / 0%) 60%, rgb(245 245 245 / 80%)); + --tabs-list-bg-gradient: linear-gradient( + to bottom, + rgba(136, 136, 136, 0) 0%, + rgba(136, 136, 136, 0) 60%, + rgba(136, 136, 136, 0.03) 80%, + rgba(136, 136, 136, 0.08) 100% + ); --tabs-pill-bg-color: #e1e1e1; --tabs-pill-bg-color-hover: #dadada; --tabs-pill-bg-color-active: #c6c6c6; + --tabs-mobile-stacked-bg-color: #242424; + --tabs-mobile-stacked-text-color: #ffffff; --tabs-pill-text-color: #131313; --tabs-paddle-bs-color: #0000001a; - --tabs-radio-gray: #6D6D6D; - --tabs-radio-blue: #0265DC; + --tabs-radio-gray: #6d6d6d; + --tabs-radio-blue: #0265dc; --tabs-radio-bg: #fff; --tabs-radio-button-bg: #fdfdfd; } :root .dark { - --tabs-border-color: rgb(56 56 56); - --tabs-text-color: #cdcdcd; + --tabs-border-color: #909090; + --tabs-text-color: #b6b6b6; --tabs-active-text-color: #fff; --tabs-bg-color: #1a1a1a; - --tabs-active-bg-color: #111; - --tabs-list-bg-gradient: linear-gradient(rgb(0 0 0 / 0%) 60%, rgb(0 0 0 / 80%)); + --tabs-active-bg-color: #1e1e1e; + --tabs-list-bg-gradient: linear-gradient( + rgba(0, 0, 0, 0%) 0%, + rgba(0, 0, 0, 0%) 60%, + rgba(0, 0, 0, 20%) 80%, + rgba(0, 0, 0, 40%) 100% + ); --tabs-pill-bg-color: #555; --tabs-pill-bg-color-hover: #666; --tabs-pill-bg-color-active: #444; --tabs-pill-text-color: #fff; + --tabs-mobile-stacked-bg-color: #ffffff; + --tabs-mobile-stacked-text-color: #131313; --tabs-paddle-bs-color: #ffffff1a; --tabs-radio-gray: #d4d4d4; --tabs-radio-blue: #5eaaf7; @@ -91,7 +106,6 @@ display: flex; z-index: 2; margin: 0 var(--spacing-m); - /* ScrollProps - If content exceeds height of container, overflow! */ overflow: auto; overflow-y: hidden; @@ -101,6 +115,9 @@ /* default bg */ background: var(--tabs-list-bg-gradient); + background-size: 100% 16px; + background-position: bottom; + background-repeat: no-repeat; } .tabs div[role="tablist"]::-webkit-scrollbar { @@ -199,6 +216,10 @@ align-items: center; } +.tabs.quiet .paddle { + margin-top: 1px; +} + .tabs.radio div[role="tablist"], .tabs.radio div[role="tablist"] button, .tabs.radio .paddle { @@ -236,6 +257,14 @@ margin-inline-start: 24px; } +.tabs.pill .tabList button { + border: none; +} + +.tabs.quiet .tabList { + padding-bottom: 1px; +} + .tabs[class*='pill'] .tab-content { border-bottom: none; } @@ -335,6 +364,9 @@ cursor: default; box-shadow: none; background: var(--tabs-list-bg-gradient); + background-size: 100% 16px; + background-position: bottom; + background-repeat: no-repeat; } .tabs .paddle-left { @@ -498,6 +530,10 @@ width: auto; } + .tabs .tabList { + min-height: 62px; + } + .tabs div[role="tablist"] button { padding: 24px 32px 18px; line-height: 18px; @@ -522,6 +558,10 @@ margin: 0; } + .tabs.stacked-mobile .paddle { + display: none; + } + .tabs.stacked-mobile div[role="tablist"] .tab-list-container { flex-direction: column; margin: 30px auto; @@ -543,11 +583,8 @@ } .tabs.stacked-mobile div[role="tablist"] button[aria-selected="true"] { - background-color: #dadada; - } - - .tabs.stacked-mobile.dark div[role="tablist"] button[aria-selected="true"] { - background-color: #393939; + background-color: var(--tabs-mobile-stacked-bg-color); + color: var(--tabs-mobile-stacked-text-color); } .tabs.stacked-mobile.center div[role="tablist"] .tab-list-container {