feat(css): add CSS vars to navbars (#1422)

scss/_navbar.scss

@@ -7,6 +7,7 @@
  // scss-docs-start navbar-css-vars
  --#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
  --#{$prefix}navbar-padding-y: 0; // Boosted mod: no padding in small breakpoints
+ --#{$prefix}navbar-font-weight: #{$navbar-font-weight}; // Boosted mod
  --#{$prefix}navbar-border-width: #{$navbar-border-width}; // Boosted mod
  --#{$prefix}navbar-border-color: #{$navbar-border-color}; // Boosted mod
  --#{$prefix}navbar-color: #{$navbar-light-color};
@@ -36,6 +37,7 @@
  --#{$prefix}navbar-toggler-padding-x: #{$navbar-toggler-padding-x};
  --#{$prefix}navbar-toggler-font-size: #{$navbar-toggler-font-size-xs}; // Boosted mod
  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg-small)}; // Boosted mod
+ --#{$prefix}navbar-toggler-icon-filter: none; // Boosted mod
  --#{$prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
  --#{$prefix}navbar-toggler-border-radius: #{$navbar-toggler-border-radius};
  --#{$prefix}navbar-toggler-focus-width: #{$navbar-toggler-focus-width};
@@ -49,7 +51,7 @@
  justify-content: space-between; // space out brand from logo
  padding: var(--#{$prefix}navbar-padding-y) var(--#{$prefix}navbar-padding-x);
  // Boosted mod
- font-weight: $font-weight-bold;
+ font-weight: var(--#{$prefix}navbar-font-weight);
  box-shadow: inset 0 calc(-1 * var(--#{$prefix}navbar-border-width)) 0 var(--#{$prefix}navbar-border-color); /* stylelint-disable-line function-disallowed-list */
  @include transition($navbar-transition);
  // End mod
@@ -162,7 +164,7 @@
  // scss-docs-start navbar-nav-css-vars
  --#{$prefix}nav-link-padding-x: var(--#{$prefix}navbar-nav-link-padding-x); // Boosted mod
  --#{$prefix}nav-link-padding-y: var(--#{$prefix}navbar-nav-link-padding-y); // Boosted mod
- @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
+ @include rfs(var(--#{$prefix}navbar-nav-font-size, $font-size-base), --#{$prefix}nav-link-font-size); // Boosted mod
  --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
  --#{$prefix}nav-link-color: var(--#{$prefix}navbar-color);
  --#{$prefix}nav-link-hover-color: var(--#{$prefix}navbar-hover-color);
@@ -173,7 +175,6 @@
  flex-direction: column; // cannot use `inherit` to get the `.navbar`s value
  padding: var(--#{$prefix}navbar-nav-padding-top) var(--#{$prefix}navbar-nav-padding-x) var(--#{$prefix}navbar-nav-padding-bottom); // Boosted mod
  margin-bottom: 0;
- @include font-size(var(--#{$prefix}navbar-nav-font-size, $font-size-base)); // Boosted mod
  line-height: var(--#{$prefix}navbar-nav-line-height, $line-height-base); // Boosted mod
  letter-spacing: var(--#{$prefix}navbar-nav-letter-spacing, $letter-spacing-base); // Boosted mod
  list-style: none;
@@ -198,8 +199,8 @@
  border-top: var(--#{$prefix}navbar-border-width) solid var(--#{$prefix}navbar-border-color);
 
  .badge {
- padding: $navbar-badge-padding-y $navbar-badge-padding-x;
- margin-top: $navbar-badge-margin-top;
+ --#{$prefix}badge-padding: #{$navbar-badge-padding-y $navbar-badge-padding-x};
+ margin-top: $navbar-badge-margin-top; // stay in Scss because no need of CSS var
  }
 
  .nav-link.nav-icon {
@@ -315,14 +316,14 @@
  }
 
  // Boosted mod: close icon when opened & color state
- &:hover .navbar-toggler-icon,
- &:focus .navbar-toggler-icon,
- &:active .navbar-toggler-icon {
- filter: $orange-filter;
+ &:hover,
+ &:focus,
+ &:active {
+ --#{$prefix}navbar-toggler-icon-filter: #{$orange-filter};
  }
 
- &[aria-expanded="true"] .navbar-toggler-icon {
- background-image: escape-svg($navbar-toggler-icon-close-bg);
+ &[aria-expanded="true"] {
+ --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-toggler-icon-close-bg)};
  }
 
  &.collapsed {
@@ -339,6 +340,7 @@
  height: 1.5em;
  vertical-align: middle;
  background-image: var(--#{$prefix}navbar-toggler-icon-bg);
+ filter: var(--#{$prefix}navbar-toggler-icon-filter); // Boosted mod
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
@@ -514,11 +516,6 @@
  --#{$prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
  --#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
  // Boosted mod: No --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)}; since we handle the variant with filter
+ --#{$prefix}navbar-toggler-icon-filter: #{$invert-filter}; // Boosted mod
  // scss-docs-end navbar-dark-css-vars
-
- // Boosted mod
- .navbar-toggler-icon {
- filter: $invert-filter;
- }
- // End mod
 }

scss/_orange-navbar.scss

@@ -5,6 +5,8 @@
 .supra {
  // scss-docs-start supra-navbar-css-vars
  --#{$prefix}navbar-padding-y: 0px; /* stylelint-disable-line length-zero-no-unit */
+ --#{$prefix}navbar-nav-font-size: #{$font-size-sm};
+ --#{$prefix}navbar-nav-line-height: #{$line-height-sm};
  --#{$prefix}navbar-nav-link-padding-y: #{$navbar-supra-link-padding-y};
  --#{$prefix}navbar-nav-link-padding-x: #{$navbar-supra-link-padding-x};
  --#{$prefix}navbar-nav-icon-padding-y: #{$navbar-supra-icon-padding-y};
@@ -14,15 +16,11 @@
 
  display: none;
 
- .navbar-nav {
- .nav-link {
- padding-top: var(--#{$prefix}navbar-nav-link-padding-y);
- font-size: $font-size-sm;
- line-height: $line-height-sm;
+ .navbar-nav .nav-link {
+ padding-top: var(--#{$prefix}navbar-nav-link-padding-y);
 
- &.nav-icon {
- padding-top: add(var(--#{$prefix}navbar-nav-icon-padding-y), .3125rem);
- }
+ &.nav-icon {
+ padding-top: add(var(--#{$prefix}navbar-nav-icon-padding-y), .3125rem);
  }
  }
 }

scss/_variables.scss

@@ -1247,6 +1247,7 @@ $nav-pills-link-active-bg: $component-active-bg !default;
 // scss-docs-start navbar-variables
 $navbar-padding-y: .375rem !default; // Boosted mod
 $navbar-padding-x: null !default;
+$navbar-font-weight: $font-weight-bold !default; // Boosted mod
 
 $navbar-nav-link-padding-y: 1rem !default; // Boosted mod
 $navbar-nav-link-padding-x-xs: $spacer * .25 !default; // Boosted mod