From: Mark Otto <markd.otto@gmail.com>
Date: Wed, 6 Apr 2022 20:08:07 +0000 (-0700)
Subject: Fix for missing CSS variables on `.navbar-nav` (#36105)
X-Git-Tag: v5.2.0-beta1~100
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=0323fe99d2b696ccb539b121387e174eaf209c17;p=thirdparty%2Fbootstrap.git

Fix for missing CSS variables on `.navbar-nav` (#36105)

* Fix for missing CSS variables on .navbar-nav

* Document new CSS vars on .navbar-nav
---

diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index 8fbdab71d6..6db562519c 100644
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -84,27 +84,20 @@
 // Custom navbar navigation (doesn't require `.nav`, but does make use of `.nav-link`).
 
 .navbar-nav {
+  // scss-docs-start navbar-nav-css-vars
+  --#{$prefix}nav-link-padding-x: 0;
+  --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
+  --#{$prefix}nav-link-color: var(--#{$prefix}navbar-color);
+  --#{$prefix}nav-link-hover-color: var(--#{$prefix}navbar-hover-color);
+  --#{$prefix}nav-link-disabled-color: var(--#{$prefix}navbar-disabled-color);
+  // scss-docs-end navbar-nav-css-vars
+
   display: flex;
   flex-direction: column; // cannot use `inherit` to get the `.navbar`s value
   padding-left: 0;
   margin-bottom: 0;
   list-style: none;
 
-  .nav-link {
-    padding-right: 0;
-    padding-left: 0;
-    color: var(--#{$prefix}navbar-color);
-
-    &:hover,
-    &:focus {
-      color: var(--#{$prefix}navbar-hover-color);
-    }
-
-    &.disabled {
-      color: var(--#{$prefix}navbar-disabled-color);
-    }
-  }
-
   .show > .nav-link,
   .nav-link.active {
     color: var(--#{$prefix}navbar-active-color);
diff --git a/site/content/docs/5.1/components/navbar.md b/site/content/docs/5.1/components/navbar.md
index 7b36f245c1..392531160d 100644
--- a/site/content/docs/5.1/components/navbar.md
+++ b/site/content/docs/5.1/components/navbar.md
@@ -742,6 +742,10 @@ As part of Bootstrap's evolving CSS variables approach, navbars now use local CS
 
 {{< scss-docs name="navbar-css-vars" file="scss/_navbar.scss" >}}
 
+Some additional CSS variables are also present on `.navbar-nav`:
+
+{{< scss-docs name="navbar-nav-css-vars" file="scss/_navbar.scss" >}}
+
 ### Sass variables
 
 {{< scss-docs name="navbar-variables" file="scss/_variables.scss" >}}