From 7d9aa9d71602ff6856c02ee9b9d2bacf2ee3d2f4 Mon Sep 17 00:00:00 2001
From: Mark Otto <markd.otto@gmail.com>
Date: Wed, 28 Dec 2022 21:55:54 -0800
Subject: [PATCH] Add .nav-underline modifier class (#33126)

* Add .nav-underline modifier class

* Tweak sizing and spacing, add underline on hover

* Rebuild with Sass and CSS variables

* Document CSS vars

* Bump bundlewatch
---
 .bundlewatch.config.json                      |  2 +-
 scss/_nav.scss                                | 43 +++++++++++++++++--
 scss/_variables.scss                          |  4 ++
 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 49880e1242..23a003679e 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 9efc03bc8f..1b3cf082f0 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,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 1be146bd0a..cf6b8a7878 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 57c47e0cb2..ca1effd700 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" >}}