diff options
| -rw-r--r-- | .bundlewatch.config.json | 2 | ||||
| -rw-r--r-- | scss/_nav.scss | 43 | ||||
| -rw-r--r-- | scss/_variables.scss | 4 | ||||
| -rw-r--r-- | site/content/docs/5.3/components/navs-tabs.md | 27 |
4 files changed, 72 insertions, 4 deletions
diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index 49880e124..23a003679 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -26,7 +26,7 @@ }, { "path": "./dist/css/bootstrap.css", - "maxSize": "31.25 kB" + "maxSize": "31.5 kB" }, { "path": "./dist/css/bootstrap.min.css", 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 diff --git a/site/content/docs/5.3/components/navs-tabs.md b/site/content/docs/5.3/components/navs-tabs.md index 57c47e0cb..ca1effd70 100644 --- a/site/content/docs/5.3/components/navs-tabs.md +++ b/site/content/docs/5.3/components/navs-tabs.md @@ -167,6 +167,27 @@ Take that same HTML, but use `.nav-pills` instead: </ul> {{< /example >}} +### Underline + +Take that same HTML, but use `.nav-underline` instead: + +{{< example >}} +<ul class="nav nav-underline"> + <li class="nav-item"> + <a class="nav-link active" aria-current="page" href="#">Active</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#">Link</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#">Link</a> + </li> + <li class="nav-item"> + <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> + </li> +</ul> +{{< /example >}} + ### Fill and justify Force your `.nav`'s contents to extend the full available width one of two modifier classes. To proportionately fill all available space with your `.nav-item`s, use `.nav-fill`. Notice that all horizontal space is occupied, but not every nav item has the same width. @@ -324,6 +345,12 @@ On the `.nav-pills` modifier class: {{< scss-docs name="nav-pills-css-vars" file="scss/_nav.scss" >}} +{{< added-in "5.3.0" >}} + +On the `.nav-underline` modifier class: + +{{< scss-docs name="nav-underline-css-vars" file="scss/_nav.scss" >}} + ### Sass variables {{< scss-docs name="nav-variables" file="scss/_variables.scss" >}} |