kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity

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

* Fix for missing CSS variables on .navbar-nav

* Document new CSS vars on .navbar-nav
This commit is contained in:
Mark Otto 2022-04-06 13:08:07 -07:00 committed by GitHub
parent a7153567e1
commit 0323fe99d2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 12 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
scss/_navbar.scss
View File

@ -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);

4
site/content/docs/5.1/components/navbar.md
View File

@ -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" >}}