diff --git a/src/components/tabs/_tabs.scss b/src/components/tabs/_tabs.scss index 743ca14b2a78..b9c10d80b193 100644 --- a/src/components/tabs/_tabs.scss +++ b/src/components/tabs/_tabs.scss @@ -345,7 +345,7 @@ @include breakpoint(bp--sm--major) { background: transparent; & + .#{$prefix}--tabs__nav-item { - margin-left: rem(1px); + margin-left: rem(2px); } } @include max-breakpoint(bp--sm--major) { @@ -386,7 +386,7 @@ .#{$prefix}--tabs__nav-link { color: $text-01; font-weight: 600; - border-bottom: 2px solid $interactive-01; + border-bottom: 3px solid $interactive-01; } .#{$prefix}--tabs__nav-link:focus, @@ -444,7 +444,7 @@ //----------------------------- // Link Hover //----------------------------- - .#{$prefix}--tabs__nav-item:hover:not(.#{$prefix}--tabs__nav-item--selected:not(.#{$prefix}--tabs__nav-item--disabled)) + .#{$prefix}--tabs__nav-item:hover:not(.#{$prefix}--tabs__nav-item--selected):not(.#{$prefix}--tabs__nav-item--disabled) .#{$prefix}--tabs__nav-link { color: $text-01; @include breakpoint(bp--sm--major) { @@ -475,9 +475,9 @@ //----------------------------- // Link Focus //----------------------------- - .#{$prefix}--tabs__nav-item:not(.#{$prefix}--tabs__nav-item--selected:not(.#{$prefix}--tabs__nav-item--disabled)):not(.#{$prefix}--tabs__nav-item--selected) + .#{$prefix}--tabs__nav-item:not(.#{$prefix}--tabs__nav-item--selected):not(.#{$prefix}--tabs__nav-item--disabled):not(.#{$prefix}--tabs__nav-item--selected) .#{$prefix}--tabs__nav-link:focus, - .#{$prefix}--tabs__nav-item:not(.#{$prefix}--tabs__nav-item--selected:not(.#{$prefix}--tabs__nav-item--disabled)):not(.#{$prefix}--tabs__nav-item--selected) + .#{$prefix}--tabs__nav-item:not(.#{$prefix}--tabs__nav-item--selected):not(.#{$prefix}--tabs__nav-item--disabled):not(.#{$prefix}--tabs__nav-item--selected) a.#{$prefix}--tabs__nav-link:active { color: $text-02; } diff --git a/src/globals/scss/_theme-tokens.scss b/src/globals/scss/_theme-tokens.scss index fc7001a93894..7f084713c786 100644 --- a/src/globals/scss/_theme-tokens.scss +++ b/src/globals/scss/_theme-tokens.scss @@ -206,10 +206,10 @@ // Slider //Tab - $tab-underline-color: 2px solid $ibm-color__gray-30 !default !global; - $tab-underline-color-hover: 2px solid $ibm-color__gray-60 !default !global; + $tab-underline-color: 3px solid $ibm-color__gray-30 !default !global; + $tab-underline-color-hover: 3px solid $ibm-color__gray-60 !default !global; $tab-text-disabled: $ibm-color__gray-30 !default !global; - $tab-underline-disabled: 2px solid $ibm-color__gray-10 !default !global; + $tab-underline-disabled: 3px solid $ibm-color__gray-10 !default !global; // Toggle $toggle-background-color: $ibm-color__green-50 !default !global;