diff --git a/src/Nav/Nav.scss b/src/Nav/Nav.scss index 96740bf8b6..ac4ade4a76 100644 --- a/src/Nav/Nav.scss +++ b/src/Nav/Nav.scss @@ -55,7 +55,7 @@ .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); @@ -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; + } } } } @@ -118,11 +122,7 @@ border-bottom: $nav-tabs-border-width solid $nav-inverse-tabs-dropdown-border-color; &:hover { - border-bottom: $nav-tabs-border-width solid $nav-inverse-tabs-link-hover-bg; - } - - &:focus::before { - bottom: calc(#{$nav-inverse-tabs-dropdown-bottom-gap} * -1); + border-bottom: none; } } @@ -155,8 +155,8 @@ border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color; button.nav-link { - border: $nav-tabs-border-width solid $nav-tabs-link-border-color; - border-bottom-width: $nav-tabs-link-border-bottom-width; + border: none; + border-bottom: $nav-tabs-border-width solid $nav-tabs-link-border-color; &.disabled { border-color: $nav-tabs-link-disabled-border-color; @@ -169,16 +169,18 @@ @include border-top-radius($nav-tabs-border-radius); &:hover { - background-color: $nav-tabs-link-hover-bg; + background-color: $nav-tabs-hover-bg; } &: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; + background-color: $nav-tabs-disabled-bg; } } diff --git a/src/Nav/_variables.scss b/src/Nav/_variables.scss index 8fb4958375..eabc50c897 100644 --- a/src/Nav/_variables.scss +++ b/src/Nav/_variables.scss @@ -9,20 +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-focus-border-color: $nav-tabs-link-active-color !default; -$nav-tabs-link-distance-to-border: .313rem !default; -$nav-tabs-link-border-bottom-width: 2px !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; @@ -38,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; @@ -49,7 +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/Tabs/Tabs.scss b/src/Tabs/Tabs.scss index 2de5541e61..dd2a90223f 100644 --- a/src/Tabs/Tabs.scss +++ b/src/Tabs/Tabs.scss @@ -22,6 +22,7 @@ .dropdown .dropdown-toggle { display: block; + border: none; } } @@ -78,20 +79,19 @@ color: $tab-inverse-pills-link-dropdown-toggle-active-hover-color; background-color: $tab-inverse-pills-link-dropdown-toggle-active-hover-bg; } + + &:focus::before { + top: calc(#{$tab-inverse-pills-link-dropdown-distance} * -1); + bottom: calc(#{$tab-inverse-pills-link-dropdown-distance} * -1); + right: calc(#{$tab-inverse-pills-link-dropdown-distance} * -1); + left: calc(#{$tab-inverse-pills-link-dropdown-distance} * -1); + } } } // Nav tabs - &.nav-tabs .pgn__tab_more.nav-link { - .dropdown .dropdown-toggle { - padding: .563rem $tab-more-link-dropdown-toggle-padding-y; - } - - &.active .dropdown .dropdown-toggle:hover { - border-bottom: - $tab-more-link-dropdown-toggle-border-active solid - $tab-more-link-dropdown-toggle-border-active-color; - } + &.nav-tabs .pgn__tab_more.nav-link .dropdown .dropdown-toggle { + padding: .563rem $tab-more-link-dropdown-toggle-padding-y; } // Nav inverse tabs diff --git a/src/Tabs/_variables.scss b/src/Tabs/_variables.scss index 74805d72eb..8cb9cf9215 100644 --- a/src/Tabs/_variables.scss +++ b/src/Tabs/_variables.scss @@ -10,8 +10,6 @@ $tab-more-link-dropdown-toggle-btn-focus-color: $tab-more-link-dropd $tab-more-link-dropdown-toggle-btn-focus-border-color: $tab-more-link-dropdown-toggle-focus-bg !default; $tab-more-link-dropdown-toggle-active-color: $tab-more-link-dropdown-toggle-focus-color !default; $tab-more-link-dropdown-toggle-hover-color: $tab-more-link-dropdown-toggle-focus-bg !default; -$tab-more-link-dropdown-toggle-border-active: 2px !default; -$tab-more-link-dropdown-toggle-border-active-color: $primary !default; $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; @@ -19,6 +17,7 @@ $tab-inverse-pills-link-dropdown-toggle-focus-color: $primary-500 !defaul $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;