feat(tabs): add fade to default tabs

carbon-design-system · Sep 23, 2024 · 26df613 · 26df613
1 parent 7e532cf
commit 26df613
Showing 1 changed file with 17 additions and 6 deletions.
diff --git a/packages/styles/scss/components/tabs/_tabs.scss b/packages/styles/scss/components/tabs/_tabs.scss
@@ -163,17 +163,29 @@
     .#{$prefix}--tab--overflow-nav-button--next::before {
       position: absolute;
       z-index: 1;
-      background: linear-gradient(
-        to right,
-        rgba(255, 255, 255, 0),
-        $background
-      );
       block-size: 100%;
       content: '';
       inline-size: $spacing-03;
       inset-inline-start: -$spacing-03;
     }
 
+    &:not(.#{$prefix}--tabs--contained) {
+      .#{$prefix}--tab--overflow-nav-button--next::before {
+        background: linear-gradient(
+          to right,
+          rgba(255, 255, 255, 0),
+          $background
+        );
+      }
+      .#{$prefix}--tab--overflow-nav-button--previous::before {
+        background: linear-gradient(
+          to left,
+          rgba(255, 255, 255, 0),
+          $background
+        );
+      }
+    }
+
     .#{$prefix}--tab--overflow-nav-button--previous {
       position: absolute;
       z-index: 1;
@@ -184,7 +196,6 @@
     .#{$prefix}--tab--overflow-nav-button--previous::before {
       position: absolute;
       z-index: 1;
-      background: linear-gradient(to left, rgba(255, 255, 255, 0), $background);
       block-size: 100%;
       content: '';
       inline-size: $spacing-03;