diff --git a/src/Nav/_mixins.scss b/src/Nav/_mixins.scss index 9e896eb633..7c3900e461 100644 --- a/src/Nav/_mixins.scss +++ b/src/Nav/_mixins.scss @@ -1,4 +1,8 @@ -@mixin nav-tabs-link-focus($border-color) { +@mixin nav-tabs-link-focus( + $border-color, + $radius: $nav-tabs-border-radius, + $distance: $nav-tabs-link-distance-to-border +) { position: relative; outline: 0; z-index: map-get($map: $indexes, $key: 1); @@ -6,11 +10,11 @@ &::before { content: ""; position: absolute; - top: calc(#{$nav-tabs-link-distance-to-border} * -1); - right: calc(#{$nav-tabs-link-distance-to-border} * -1); - bottom: calc(#{$nav-tabs-link-distance-to-border} * -1); - left: calc(#{$nav-tabs-link-distance-to-border} * -1); + top: calc(#{$distance} * -1); + right: calc(#{$distance} * -1); + bottom: calc(#{$distance} * -1); + left: calc(#{$distance} * -1); border: solid $nav-tabs-border-width $border-color; - border-radius: $nav-tabs-border-radius; + border-radius: $radius; } } diff --git a/src/Nav/_variables.scss b/src/Nav/_variables.scss index eccd21e5ea..eabc50c897 100644 --- a/src/Nav/_variables.scss +++ b/src/Nav/_variables.scss @@ -9,19 +9,23 @@ $nav-link-font-weight: 500 !default; $nav-tabs-border-color: $light-400 !default; $nav-tabs-border-width: 2px !default; $nav-tabs-border-radius: 0 !default; +$nav-tabs-hover-bg: transparent !default; +$nav-tabs-focus-border-color: $nav-tabs-hover-bg !default; +$nav-tabs-disabled-bg: $nav-tabs-hover-bg !default; $nav-tabs-link-hover-border-color: transparent transparent $nav-tabs-border-color !default; $nav-tabs-link-hover-bg: $light-400 !default; $nav-tabs-link-active-color: $primary-500 !default; +$nav-tabs-link-active-border-color: $nav-tabs-link-active-color !default; $nav-tabs-link-active-bg: transparent !default; -$nav-tabs-link-active-border-color: transparent transparent $primary-500 !default; $nav-tabs-link-focus-border-color: $nav-tabs-link-active-color !default; -$nav-tabs-link-distance-to-border: .313rem !default; -$nav-tabs-link-border-bottom-width: .188rem !default; +$nav-tabs-link-distance-to-border: 4px !default; $nav-tabs-link-border-color: transparent !default; +$nav-tabs-link-disabled-border-color: $nav-tabs-link-border-color !default; $nav-pills-border-radius: $border-radius !default; $nav-pills-link-active-color: $component-active-color !default; $nav-pills-link-active-bg: $component-active-bg !default; +$nav-pills-link-active-border-color: $white !default; $nav-pills-link-border-color: $nav-tabs-border-color !default; $nav-pills-link-border-width: 1px !default; @@ -37,7 +41,8 @@ $nav-inverse-pills-link-active-hover-color: $nav-inverse-pills-link-color $nav-inverse-pills-link-active-hover-border-color: $nav-inverse-pills-link-border-color !default; $nav-inverse-pills-link-active-focus-hover-bg: $nav-inverse-pills-link-color !default; $nav-inverse-pills-link-active-focus-color: $nav-inverse-pills-link-active-color !default; -$nav-inverse-pills-link-active-focus-border-color: $nav-inverse-pills-link-color !default; +$nav-inverse-pills-link-active-focus-border-color: $primary !default; +$nav-inverse-pills-link-active-focus-hover-border-color: $nav-inverse-pills-link-active-focus-border-color !default; $nav-inverse-pills-link-border-width: $nav-pills-link-border-width !default; $nav-inverse-pills-tab-content-color: $nav-inverse-pills-link-color !default; @@ -48,5 +53,7 @@ $nav-inverse-tabs-link-active-hover-bg: transparent !default; $nav-inverse-tabs-link-focus-bg: $nav-inverse-tabs-link-color !default; $nav-inverse-tabs-link-active-border-color: $nav-inverse-tabs-link-color !default; $nav-inverse-tabs-link-active-bg: $nav-inverse-tabs-link-hover-bg !default; -$nav-inverse-tabs-link-active-border-bottom-width: $nav-tabs-link-border-bottom-width !default; +$nav-inverse-tabs-link-active-border-bottom-width: $nav-tabs-border-width !default; $nav-inverse-tabs-tab-content-color: $nav-inverse-tabs-link-color !default; +$nav-inverse-tabs-dropdown-border-color: $nav-inverse-tabs-link-active-hover-bg !default; +$nav-inverse-tabs-dropdown-bottom-gap: .4375rem !default; diff --git a/src/Nav/index.scss b/src/Nav/index.scss index af41cbf9fd..43eac11f2b 100644 --- a/src/Nav/index.scss +++ b/src/Nav/index.scss @@ -43,7 +43,7 @@ border: $nav-pills-link-border-width solid $nav-pills-link-border-color; &:focus { - @include nav-tabs-link-focus($nav-tabs-link-focus-border-color); + @include nav-tabs-link-focus($nav-tabs-link-focus-border-color, $nav-pills-border-radius); } &:hover { @@ -55,10 +55,10 @@ .nav-item.show .nav-link { color: $nav-pills-link-active-color; background-color: $nav-pills-link-active-bg; - border-color: $nav-pills-link-active-bg; + border-color: $nav-pills-link-active-border-color; &:focus { - @include nav-tabs-link-focus($nav-tabs-link-focus-border-color); + @include nav-tabs-link-focus($nav-tabs-link-focus-border-color, $nav-pills-border-radius); } } } @@ -97,10 +97,14 @@ border-color: $nav-inverse-pills-link-active-hover-border-color; } - &:focus:hover { - background-color: $nav-inverse-pills-link-active-focus-hover-bg; - color: $nav-inverse-pills-link-active-focus-color; + &:focus { border-color: $nav-inverse-pills-link-active-focus-border-color; + + &:hover { + background-color: $nav-inverse-pills-link-active-focus-hover-bg; + color: $nav-inverse-pills-link-active-focus-color; + border-color: $nav-inverse-pills-link-active-focus-hover-border-color; + } } } } @@ -114,6 +118,14 @@ color: $nav-inverse-tabs-link-color; border-bottom: $nav-tabs-border-width solid $nav-inverse-tabs-link-border-bottom-color; + .dropdown .dropdown-toggle { + border-bottom: $nav-tabs-border-width solid $nav-inverse-tabs-dropdown-border-color; + + &:hover { + border-bottom: none; + } + } + &:hover { background-color: $nav-inverse-tabs-link-hover-bg; } @@ -142,26 +154,37 @@ .nav-tabs { border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color; + button.nav-link { + border: none; + border-bottom: $nav-tabs-border-width solid $nav-tabs-link-border-color; + + &.disabled { + border-color: $nav-tabs-link-disabled-border-color; + } + } + .nav-link { margin-bottom: calc(#{$nav-tabs-border-width} * -1); - border: $nav-tabs-border-width solid $nav-tabs-link-border-color; - border-bottom-width: $nav-tabs-link-border-bottom-width; @include border-top-radius($nav-tabs-border-radius); &:hover { - border-color: $nav-tabs-link-hover-border-color; background-color: $nav-tabs-link-hover-bg; } + .dropdown { + padding-bottom: .125rem; + } + &:focus { + border-bottom: $nav-tabs-border-width solid $nav-tabs-focus-border-color; + @include nav-tabs-link-focus($nav-tabs-link-focus-border-color); } &.disabled { color: $nav-link-disabled-color; - background-color: transparent; - border-color: transparent; + background-color: $nav-tabs-disabled-bg; } } @@ -169,7 +192,7 @@ .nav-item.show .nav-link { color: $nav-tabs-link-active-color; background-color: $nav-tabs-link-active-bg; - border-color: $nav-tabs-link-active-border-color; + border-bottom: $nav-tabs-border-width solid $nav-tabs-link-active-border-color; &:hover { background-color: $nav-tabs-link-hover-bg; diff --git a/src/Tabs/_variables.scss b/src/Tabs/_variables.scss index 831cc67b0b..2d98a95d4b 100644 --- a/src/Tabs/_variables.scss +++ b/src/Tabs/_variables.scss @@ -14,9 +14,11 @@ $tab-inverse-pills-link-dropdown-toggle-padding-x: .625rem !default; $tab-inverse-pills-link-dropdown-toggle-padding-y: $spacer !default; $tab-inverse-pills-link-dropdown-toggle-focus-bg: $white !default; $tab-inverse-pills-link-dropdown-toggle-focus-color: $primary-500 !default; +$tab-inverse-pills-link-dropdown-toggle-focus-border-color: $tab-inverse-pills-link-dropdown-toggle-focus-bg !default; $tab-inverse-pills-link-dropdown-toggle-active-color: $tab-inverse-pills-link-dropdown-toggle-focus-color !default; $tab-inverse-pills-link-dropdown-toggle-active-hover-color: $tab-inverse-pills-link-dropdown-toggle-focus-bg !default; $tab-inverse-pills-link-dropdown-toggle-active-hover-bg: $primary-300 !default; +$tab-inverse-pills-link-dropdown-distance: 5px !default; $tab-inverse-tabs-link-dropdown-toggle-padding-x: .625rem !default; $tab-inverse-tabs-link-dropdown-toggle-padding-y: $spacer !default; $tab-inverse-tabs-link-dropdown-toggle-hover-bg: transparent !default; diff --git a/src/Tabs/index.scss b/src/Tabs/index.scss index 0681d53f4e..bb3bcc5d92 100644 --- a/src/Tabs/index.scss +++ b/src/Tabs/index.scss @@ -64,6 +64,7 @@ &.nav-inverse-pills .pgn__tab_more.nav-link { .dropdown .dropdown-toggle { padding: $tab-inverse-pills-link-dropdown-toggle-padding-x $tab-inverse-pills-link-dropdown-toggle-padding-y; + border: none; &:focus { background-color: $tab-inverse-pills-link-dropdown-toggle-focus-bg; @@ -78,12 +79,20 @@ color: $tab-inverse-pills-link-dropdown-toggle-active-hover-color; background-color: $tab-inverse-pills-link-dropdown-toggle-active-hover-bg; } + + &:focus { + @include nav-tabs-link-focus( + $tab-inverse-pills-link-dropdown-toggle-focus-border-color, + $nav-tabs-border-radius, + $tab-inverse-pills-link-dropdown-distance + ); + } } } // Nav tabs &.nav-tabs .pgn__tab_more.nav-link .dropdown .dropdown-toggle { - padding: .563rem 1rem; + padding: .563rem $tab-more-link-dropdown-toggle-padding-y; } // Nav inverse tabs