@carbon/styles 0.11.0-rc.0 → 0.13.0-rc.0

package/scss/components/tabs/_tabs.scss

@@ -23,17 +23,19 @@
 @use '../../utilities/rotate' as *;
 @use '../../utilities/box-shadow' as *;
 @use '../../utilities/component-tokens' as *;
+@use '../../utilities/custom-property';
 @use '../../utilities/skeleton' as *;
 @use '../../utilities/visually-hidden' as *;
 @use '../../utilities/button-reset';
 @use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/convert' as *;
 
+$icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
+
 /// Tabs styles
 /// @access public
 /// @group tabs
 @mixin tabs {
-  // TODO: remove namespace and suffix in next major release
   .#{$prefix}--tabs {
     @include reset;
     @include type-style('body-short-01');
@@ -44,7 +46,7 @@
     min-height: rem(40px);
     color: $text-primary;
 
-    &.#{$prefix}--tabs--container {
+    &.#{$prefix}--tabs--contained {
       min-height: rem(48px);
     }
 
@@ -95,11 +97,11 @@
       background-image: linear-gradient(to right, transparent, $layer);
     }
 
-    &.#{$prefix}--tabs--container .#{$prefix}--tabs__overflow-indicator--left {
+    &.#{$prefix}--tabs--contained .#{$prefix}--tabs__overflow-indicator--left {
       background-image: linear-gradient(to left, transparent, $layer-accent);
     }
 
-    &.#{$prefix}--tabs--container .#{$prefix}--tabs__overflow-indicator--right {
+    &.#{$prefix}--tabs--contained .#{$prefix}--tabs__overflow-indicator--right {
       background-image: linear-gradient(to right, transparent, $layer-accent);
     }
 
@@ -124,7 +126,7 @@
           );
         }
 
-        &.#{$prefix}--tabs--container
+        &.#{$prefix}--tabs--contained
           .#{$prefix}--tabs__overflow-indicator--left {
           background-image: linear-gradient(
             to left,
@@ -133,7 +135,7 @@
           );
         }
 
-        &.#{$prefix}--tabs--container
+        &.#{$prefix}--tabs--contained
           .#{$prefix}--tabs__overflow-indicator--right {
           background-image: linear-gradient(
             to right,
@@ -162,7 +164,7 @@
       display: none;
     }
 
-    &.#{$prefix}--tabs--container .#{$prefix}--tab--overflow-nav-button {
+    &.#{$prefix}--tabs--contained .#{$prefix}--tab--overflow-nav-button {
       width: $spacing-09;
       margin: 0;
       background-color: $layer-accent;
@@ -189,11 +191,11 @@
       margin-left: rem(1px);
     }
 
-    &.#{$prefix}--tabs--container .#{$prefix}--tabs__nav-item {
+    &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item {
       background-color: $layer-accent;
     }
 
-    &.#{$prefix}--tabs--container
+    &.#{$prefix}--tabs--contained
       .#{$prefix}--tabs__nav-item
       + .#{$prefix}--tabs__nav-item {
       margin-left: 0;
@@ -201,87 +203,12 @@
       box-shadow: rem(-1px) 0 0 0 $border-strong;
     }
 
-    &.#{$prefix}--tabs--container
-      .#{$prefix}--tabs__nav-item
-      + .#{$prefix}--tabs__nav-item.#{$prefix}--tabs__nav-item--selected,
-    &.#{$prefix}--tabs--container
-      .#{$prefix}--tabs__nav-item.#{$prefix}--tabs__nav-item--selected
-      + .#{$prefix}--tabs__nav-item {
-      box-shadow: none;
-    }
-
     .#{$prefix}--tabs__nav-item .#{$prefix}--tabs__nav-link {
       transition: color $duration-fast-01 motion(standard, productive),
         border-bottom-color $duration-fast-01 motion(standard, productive),
         outline $duration-fast-01 motion(standard, productive);
     }
 
-    //-----------------------------
-    // Item Hover
-    //-----------------------------
-    &.#{$prefix}--tabs--container .#{$prefix}--tabs__nav-item:hover {
-      background-color: $layer-selected-hover;
-    }
-
-    //---------------------------------------------
-    // Item Disabled
-    //---------------------------------------------
-    .#{$prefix}--tabs__nav-item--disabled,
-    .#{$prefix}--tabs__nav-item--disabled:hover {
-      background-color: transparent;
-      cursor: not-allowed;
-      outline: none;
-    }
-
-    &.#{$prefix}--tabs--container
-      .#{$prefix}--tabs__nav-item.#{$prefix}--tabs__nav-item--disabled,
-    &.#{$prefix}--tabs--container
-      .#{$prefix}--tabs__nav-item.#{$prefix}--tabs__nav-item--disabled:hover {
-      background-color: button.$button-disabled;
-    }
-
-    //-----------------------------
-    // Item Selected
-    //-----------------------------
-    .#{$prefix}--tabs__nav-item--selected {
-      transition: color $duration-fast-01 motion(standard, productive);
-    }
-
-    .#{$prefix}--tabs__nav-item--selected .#{$prefix}--tabs__nav-link,
-    .#{$prefix}--tabs__nav-item--selected .#{$prefix}--tabs__nav-link:focus,
-    .#{$prefix}--tabs__nav-item--selected .#{$prefix}--tabs__nav-link:active {
-      @include type-style('productive-heading-01');
-
-      border-bottom: 2px solid $border-interactive;
-      color: $text-primary;
-    }
-
-    &.#{$prefix}--tabs--container .#{$prefix}--tabs__nav-item--selected,
-    &.#{$prefix}--tabs--container .#{$prefix}--tabs__nav-item--selected:hover {
-      background-color: $layer;
-
-      .#{$prefix}--tabs__nav-link:focus,
-      .#{$prefix}--tabs__nav-link:active {
-        box-shadow: none;
-      }
-    }
-
-    &.#{$prefix}--tabs--container
-      .#{$prefix}--tabs__nav-item--selected
-      .#{$prefix}--tabs__nav-link {
-      // Draws the border without affecting the inner-content
-      box-shadow: inset 0 2px 0 0 $border-interactive;
-      // height - vertical padding
-      line-height: calc(#{rem(48px)} - (#{$spacing-03} * 2));
-    }
-
-    &.#{$prefix}--tabs--light.#{$prefix}--tabs--container
-      .#{$prefix}--tabs__nav-item--selected,
-    &.#{$prefix}--tabs--light.#{$prefix}--tabs--container
-      .#{$prefix}--tabs__nav-item--selected:hover {
-      background-color: $background;
-    }
-
     //-----------------------------
     // Link
     //-----------------------------
@@ -295,10 +222,10 @@
       }
 
       overflow: hidden;
+      max-width: 10rem;
       padding: $spacing-04 $spacing-05 $spacing-03;
       border-bottom: $tab-underline-color;
       color: $text-secondary;
-      text-align: left;
       text-decoration: none;
       text-overflow: ellipsis;
       transition: border $duration-fast-01 motion(standard, productive),
@@ -311,12 +238,88 @@
       }
     }
 
-    &.#{$prefix}--tabs--container .#{$prefix}--tabs__nav-link {
+    &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-link {
       height: rem(48px);
       padding: $spacing-03 $spacing-05;
       border-bottom: 0;
       // height - vertical padding
       line-height: calc(#{rem(48px)} - (#{$spacing-03} * 2));
+      text-align: left;
+    }
+
+    //-----------------------------
+    // Icon Item
+    //-----------------------------
+
+    .#{$prefix}--tabs__nav-item--icon,
+    &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item--icon {
+      display: flex;
+      width: $icon-tab-size;
+      height: $icon-tab-size;
+      align-items: center;
+      justify-content: center;
+      padding: 0;
+    }
+
+    &.#{$prefix}--tabs__icon--lg {
+      @include custom-property.declaration('icon-tab-size', rem(48px));
+    }
+
+    //-----------------------------
+    // Item Hover
+    //-----------------------------
+    &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item:hover {
+      background-color: $layer-selected-hover;
+    }
+
+    //-----------------------------
+    // Item Selected
+    //-----------------------------
+    .#{$prefix}--tabs__nav-item--selected {
+      border-bottom: 2px solid $border-interactive;
+      transition: color $duration-fast-01 motion(standard, productive);
+    }
+
+    &.#{$prefix}--tabs--contained
+      .#{$prefix}--tabs__nav-item--selected
+      + .#{$prefix}--tabs__nav-item {
+      box-shadow: none;
+    }
+
+    &.#{$prefix}--tabs--contained
+      .#{$prefix}--tabs__nav-item.#{$prefix}--tabs__nav-item--selected {
+      // Draws the border without affecting the inner-content
+      box-shadow: inset 0 2px 0 0 $border-interactive;
+    }
+
+    &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item--selected,
+    .#{$prefix}--tabs__nav-item--selected,
+    .#{$prefix}--tabs__nav-item--selected:focus
+      .#{$prefix}--tabs__nav-link:focus,
+    .#{$prefix}--tabs__nav-item--selected:active
+      .#{$prefix}--tabs__nav-link:active {
+      @include type-style('productive-heading-01');
+
+      color: $text-primary;
+    }
+
+    &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item--selected,
+    &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item--selected:hover {
+      background-color: $layer;
+      // height - vertical padding
+      line-height: calc(#{rem(48px)} - (#{$spacing-03} * 2));
+
+      .#{$prefix}--tabs__nav-link:focus,
+      .#{$prefix}--tabs__nav-link:active {
+        box-shadow: none;
+      }
+    }
+
+    &.#{$prefix}--tabs--light.#{$prefix}--tabs--contained
+      .#{$prefix}--tabs__nav-item--selected,
+    &.#{$prefix}--tabs--light.#{$prefix}--tabs--contained
+      .#{$prefix}--tabs__nav-item--selected:hover {
+      background-color: $background;
     }
 
     //-----------------------------
@@ -327,31 +330,35 @@
       color: $text-primary;
     }
 
-    &.#{$prefix}--tabs--container
-      .#{$prefix}--tabs__nav-item
-      .#{$prefix}--tabs__nav-link {
-      border-bottom: none;
-    }
-
     //-----------------------------
-    //  Link Disabled
+    //  Item Disabled
     //-----------------------------
-    .#{$prefix}--tabs__nav-item--disabled .#{$prefix}--tabs__nav-link {
+
+    .#{$prefix}--tabs__nav-item--disabled {
       border-bottom: $tab-underline-disabled;
+      background-color: transparent;
       color: $tab-text-disabled;
+      outline: none;
     }
 
-    .#{$prefix}--tabs__nav-item--disabled:hover .#{$prefix}--tabs__nav-link {
+    .#{$prefix}--tabs__nav-item--disabled:hover {
       border-bottom: $tab-underline-disabled;
       color: $tab-text-disabled;
       cursor: not-allowed;
-      pointer-events: none;
     }
 
-    .#{$prefix}--tabs__nav-item--disabled .#{$prefix}--tabs__nav-link:focus,
-    .#{$prefix}--tabs__nav-item--disabled .#{$prefix}--tabs__nav-link:active {
+    &.#{$prefix}--tabs--contained
+      .#{$prefix}--tabs__nav-item.#{$prefix}--tabs__nav-item--disabled,
+    &.#{$prefix}--tabs--contained
+      .#{$prefix}--tabs__nav-item.#{$prefix}--tabs__nav-item--disabled:hover {
+      background-color: button.$button-disabled;
+    }
+
+    .#{$prefix}--tabs__nav-item--disabled:focus,
+    .#{$prefix}--tabs__nav-item--disabled:active {
       border-bottom: $tab-underline-disabled;
       outline: none;
+      pointer-events: none;
     }
 
     .#{$prefix}--tabs--light
@@ -375,9 +382,7 @@
       border-bottom-color: $border-subtle;
     }
 
-    &.#{$prefix}--tabs--container
-      .#{$prefix}--tabs__nav-item--disabled
-      .#{$prefix}--tabs__nav-link {
+    &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item--disabled {
       border-bottom: none;
       color: $text-on-color-disabled;
     }
@@ -401,7 +406,7 @@
     pointer-events: none;
   }
 
-  .#{$prefix}--skeleton.#{$prefix}--tabs:not(.#{$prefix}--tabs--container)
+  .#{$prefix}--skeleton.#{$prefix}--tabs:not(.#{$prefix}--tabs--contained)
     .#{$prefix}--tabs__nav-link {
     border-bottom: 2px solid $skeleton-element;
   }
@@ -429,7 +434,6 @@
     @include high-contrast-mode('focus');
   }
 
-  // stylelint-disable-next-line no-duplicate-selectors
   .#{$prefix}--tabs
     .#{$prefix}--tabs__nav-item--disabled
     .#{$prefix}--tabs__nav-link {