diff options
Diffstat (limited to 'scss')
| -rw-r--r-- | scss/_nav.scss | 43 | ||||
| -rw-r--r-- | scss/_variables.scss | 4 |
2 files changed, 44 insertions, 3 deletions
diff --git a/scss/_nav.scss b/scss/_nav.scss index 9efc03bc8..1b3cf082f 100644 --- a/scss/_nav.scss +++ b/scss/_nav.scss @@ -28,6 +28,8 @@ font-weight: var(--#{$prefix}nav-link-font-weight); color: var(--#{$prefix}nav-link-color); text-decoration: if($link-decoration == none, null, none); + background: none; + border: 0; @include transition($nav-link-transition); &:hover, @@ -63,7 +65,6 @@ .nav-link { margin-bottom: calc(-1 * var(--#{$prefix}nav-tabs-border-width)); // stylelint-disable-line function-disallowed-list - background: none; border: var(--#{$prefix}nav-tabs-border-width) solid transparent; @include border-top-radius(var(--#{$prefix}nav-tabs-border-radius)); @@ -110,8 +111,6 @@ // scss-docs-end nav-pills-css-vars .nav-link { - background: none; - border: 0; @include border-radius(var(--#{$prefix}nav-pills-border-radius)); &:disabled { @@ -130,6 +129,44 @@ // +// Underline +// + +.nav-underline { + // scss-docs-start nav-underline-css-vars + --#{$prefix}nav-underline-gap: #{$nav-underline-gap}; + --#{$prefix}nav-underline-border-width: #{$nav-underline-border-width}; + --#{$prefix}nav-underline-link-active-color: #{$nav-underline-link-active-color}; + // scss-docs-end nav-underline-css-vars + + gap: var(--#{$prefix}nav-underline-gap); + + // .nav-item + .nav-item, + // .nav-link + .nav-link { + // margin-left: $nav-link-padding-x; + // } + + .nav-link { + padding-right: 0; + padding-left: 0; + border-bottom: var(--#{$prefix}nav-underline-border-width) solid transparent; + + &:hover, + &:focus { + border-bottom-color: currentcolor; + } + } + + .nav-link.active, + .show > .nav-link { + font-weight: $font-weight-bold; + color: var(--#{$prefix}nav-underline-link-active-color); + border-bottom-color: currentcolor; + } +} + + +// // Justified variants // diff --git a/scss/_variables.scss b/scss/_variables.scss index 1be146bd0..cf6b8a787 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1136,6 +1136,10 @@ $nav-tabs-link-active-border-color: var(--#{$prefix}border-color) var(--#{$prefi $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-underline-gap: 1rem !default; +$nav-underline-border-width: .125rem !default; +$nav-underline-link-active-color: var(--#{$prefix}emphasis-color) !default; // scss-docs-end nav-variables |