updates synthesis tab styles

user-interviews · Nov 27, 2023 · 1b8a8b7 · 1b8a8b7
1 parent 71585da
commit 1b8a8b7
Showing 1 changed file with 45 additions and 8 deletions.
diff --git a/src/Tabs/tabs.module.scss b/src/Tabs/tabs.module.scss
@@ -1,12 +1,13 @@
 @import '../../scss/theme.scss';
+@import '../../scss/colors/synthesis-palette.scss';
 
-.tabs.tabs {
+.tabs {
   --border-width: 0.125rem;
 
   border-bottom: var(--border-width) solid $ux-gray-400;
 
   :global(.nav-link) {
-    color:$ux-gray-800;
+    color: $ux-gray-800;
     font: 400 0.875rem/1.25rem Inter, sans-serif;
     text-decoration: none;
     border: none;
@@ -23,14 +24,50 @@
     color: $ux-blue-500;
     border-bottom: var(--border-width) solid $ux-blue-500;
   }
-}
 
-.flexWrapUnset.flexWrapUnset {
-  flex-wrap: nowrap;
+  .flexWrapUnset {
+    flex-wrap: nowrap;
+  }
+
+  .navItemButtonFullHeight {
+    :global(.nav-item .button) {
+      height: calc(100% + 0.125rem);
+    }
+  }
 }
 
-.navItemButtonFullHeight.navItemButtonFullHeight {
-  :global(.nav-item .button) {
-    height: calc(100% + var(--border-width));
+:global(.Synthesized) .tabs {
+  border-bottom: 1px solid $synth-div-stroke-neutral;
+
+  :global(.nav-link) {
+    color: $synth-unselected-neutral;
+    border-bottom: 3px solid transparent;
+    margin-bottom: -1px;
+    position: relative;
+
+    &:after {
+      content: '';
+      border-bottom: 1px solid $synth-div-stroke-neutral;
+      width: 100%;
+      position: absolute;
+      bottom: -3px;
+      left: 0;
+      z-index: -1;
+    }
+  }
+
+  :global(.nav-link.active),
+  :global(.nav-link:hover),
+  :global(.nav-link:active),
+  :global(.nav-link:focus) {
+    font-weight: $synth-font-weight-bold;
+    color: $synth-text-neutral;
+    border-bottom: 3px solid $synth-indicator-stroke-green;
+  }
+
+  .navItemButtonFullHeight {
+    :global(.nav-item .button) {
+      height: calc(100% + 1px);
+    }
   }
 }