Navbar optimizations (#29864)

- Remove redundant `display: inline-block` from flex children
- Remove `line-height: inherit;` which is the default value of `line-height`
- Use flex shorthand
- Improve background shorthand
- Fix removed brand margin caused by requiring containers in navbars

2 files changed, 6 insertions, 9 deletions

diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index 977401686..5e777a363 100644
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -52,12 +52,10 @@
 // Used for brand, project, or site names.
 
 .navbar-brand {
-  display: inline-block;
   padding-top: $navbar-brand-padding-y;
   padding-bottom: $navbar-brand-padding-y;
-  margin-right: $navbar-padding-x;
+  margin-right: $navbar-brand-margin-right;
   @include font-size($navbar-brand-font-size);
-  line-height: inherit;
   white-space: nowrap;
 
   &:hover,
@@ -94,7 +92,6 @@
 //
 
 .navbar-text {
-  display: inline-block;
   padding-top: $nav-link-padding-y;
   padding-bottom: $nav-link-padding-y;
 }
@@ -109,8 +106,7 @@
 // the default flexbox row orientation. Requires the use of `flex-wrap: wrap`
 // on the `.navbar` parent.
 .navbar-collapse {
-  flex-basis: 100%;
-  flex-grow: 1;
+  flex: 1 0 100%;
   // For always expanded or extra full navbars, ensure content aligns itself
   // properly vertically. Can be easily overridden with flex utilities.
   align-items: center;
@@ -138,9 +134,9 @@
   width: 1.5em;
   height: 1.5em;
   vertical-align: middle;
-  content: "";
-  background: no-repeat center center;
-  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 100%;
 }
 
 // Generate series of `.navbar-expand-*` responsive classes for configuring
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 2fa04f6ce..c34e2d170 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -843,6 +843,7 @@ $navbar-brand-font-size:            $font-size-lg !default;
 $nav-link-height:                   $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
 $navbar-brand-height:               $navbar-brand-font-size * $line-height-base !default;
 $navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) / 2 !default;
+$navbar-brand-margin-right:         1rem !default;
 
 $navbar-toggler-padding-y:          .25rem !default;
 $navbar-toggler-padding-x:          .75rem !default;