diff options
| author | Mark Otto <markd.otto@gmail.com> | 2022-04-06 23:08:07 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-04-06 23:08:07 +0300 |
| commit | 0323fe99d2b696ccb539b121387e174eaf209c17 (patch) | |
| tree | 1a84c5923c615a929641011c749f6304c1bb6ae4 | |
| parent | a7153567e13c81c5cda749c67f9f8f93977cde70 (diff) | |
Fix for missing CSS variables on `.navbar-nav` (#36105)
* Fix for missing CSS variables on .navbar-nav
* Document new CSS vars on .navbar-nav
| -rw-r--r-- | scss/_navbar.scss | 23 | ||||
| -rw-r--r-- | site/content/docs/5.1/components/navbar.md | 4 |
2 files changed, 12 insertions, 15 deletions
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" >}} |