From 1fc6a158915c7366340518b6b656e7f6db22063e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 16 Feb 2021 15:17:46 -0800 Subject: [PATCH 1/5] Add .nav-underline modifier class --- scss/_nav.scss | 23 ++++++++++++++++--- site/content/docs/5.3/components/navs-tabs.md | 21 +++++++++++++++++ 2 files changed, 41 insertions(+), 3 deletions(-) diff --git a/scss/_nav.scss b/scss/_nav.scss index 9efc03bc8ff8..3f3a19de526b 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 { @@ -129,6 +128,24 @@ } +// +// Underline +// + +.nav-underline { + .nav-link { + border-bottom: .125rem solid transparent; + } + + .nav-link.active, + .show > .nav-link { + font-weight: $font-weight-bold; + color: $dark; + border-bottom-color: $dark; + } +} + + // // Justified variants // diff --git a/site/content/docs/5.3/components/navs-tabs.md b/site/content/docs/5.3/components/navs-tabs.md index 57c47e0cb2dd..a1b04b1cbc8b 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: {{< /example >}} +### Underline + +Take that same HTML, but use `.nav-underline` instead: + +{{< example >}} + +{{< /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. From c227b8a954fd1726d62dd313e3bbf27e23a109a6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 10 Mar 2021 20:44:14 -0800 Subject: [PATCH 2/5] Tweak sizing and spacing, add underline on hover --- scss/_nav.scss | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/scss/_nav.scss b/scss/_nav.scss index 3f3a19de526b..2e0b91d7223c 100644 --- a/scss/_nav.scss +++ b/scss/_nav.scss @@ -133,15 +133,27 @@ // .nav-underline { + .nav-item + .nav-item, + .nav-link + .nav-link { + margin-left: $nav-link-padding-x; + } + .nav-link { + padding-right: 0; + padding-left: 0; border-bottom: .125rem solid transparent; + + &:hover, + &:focus { + border-bottom-color: currentColor; + } } .nav-link.active, .show > .nav-link { font-weight: $font-weight-bold; color: $dark; - border-bottom-color: $dark; + border-bottom-color: currentColor; } } From 31ad2af4a2b54b385342b2d5ddb42e4a9a3a7ac2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 28 Dec 2022 20:59:50 -0800 Subject: [PATCH 3/5] Rebuild with Sass and CSS variables --- scss/_nav.scss | 24 ++++++++++++++++-------- scss/_variables.scss | 4 ++++ 2 files changed, 20 insertions(+), 8 deletions(-) diff --git a/scss/_nav.scss b/scss/_nav.scss index 2e0b91d7223c..1b3cf082f0bb 100644 --- a/scss/_nav.scss +++ b/scss/_nav.scss @@ -133,27 +133,35 @@ // .nav-underline { - .nav-item + .nav-item, - .nav-link + .nav-link { - margin-left: $nav-link-padding-x; - } + // 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: .125rem solid transparent; + border-bottom: var(--#{$prefix}nav-underline-border-width) solid transparent; &:hover, &:focus { - border-bottom-color: currentColor; + border-bottom-color: currentcolor; } } .nav-link.active, .show > .nav-link { font-weight: $font-weight-bold; - color: $dark; - border-bottom-color: currentColor; + color: var(--#{$prefix}nav-underline-link-active-color); + border-bottom-color: currentcolor; } } diff --git a/scss/_variables.scss b/scss/_variables.scss index 1be146bd0ac7..cf6b8a787896 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 From 98204608e4b1ffc4fdeb449ca6f76652c0288fce Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 28 Dec 2022 21:04:33 -0800 Subject: [PATCH 4/5] Document CSS vars --- site/content/docs/5.3/components/navs-tabs.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/site/content/docs/5.3/components/navs-tabs.md b/site/content/docs/5.3/components/navs-tabs.md index a1b04b1cbc8b..ca1effd70085 100644 --- a/site/content/docs/5.3/components/navs-tabs.md +++ b/site/content/docs/5.3/components/navs-tabs.md @@ -345,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" >}} From 13465171a0cf57d320a6ba3907c4040008ec93bf Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 28 Dec 2022 21:10:25 -0800 Subject: [PATCH 5/5] Bump bundlewatch --- .bundlewatch.config.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index 49880e124253..23a003679e5a 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",