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: 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
---
 scss/_nav.scss       | 43 ++++++++++++++++++++++++++++++++++++++++---
 scss/_variables.scss |  4 ++++
 2 files changed, 44 insertions(+), 3 deletions(-)

(limited to 'scss')

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 {
@@ -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 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
 
 
-- 
cgit v1.2.3