Minor Sass cleanup and consistency changes. (#23959)

6 files changed, 27 insertions, 21 deletions

diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index 15d218e87..57f96886a 100644
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -147,8 +147,7 @@
       }
 
       @include media-breakpoint-up($next) {
-        flex-direction: row;
-        flex-wrap: nowrap;
+        flex-flow: row nowrap;
         justify-content: flex-start;
 
         .navbar-nav {
diff --git a/scss/_variables.scss b/scss/_variables.scss
index c0b5494e6..8eebffdf8 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -407,8 +407,8 @@ $custom-radio-indicator-border-radius: 50% !default;
 $custom-radio-indicator-icon-checked: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$custom-control-indicator-checked-color}'/%3E%3C/svg%3E"), "#", "%23") !default;
 
 $custom-select-padding-y:          .375rem !default;
-$custom-select-padding-x:          .75rem  !default;
-$custom-select-height:              $input-height  !default;
+$custom-select-padding-x:          .75rem !default;
+$custom-select-height:              $input-height !default;
 $custom-select-indicator-padding:   1rem !default; // Extra padding to account for the presence of the background-image based indicator
 $custom-select-line-height:         $input-btn-line-height !default;
 $custom-select-color:               $input-color !default;
diff --git a/scss/mixins/_grid-framework.scss b/scss/mixins/_grid-framework.scss
index a9e7c7590..5e7d1ffb5 100644
--- a/scss/mixins/_grid-framework.scss
+++ b/scss/mixins/_grid-framework.scss
@@ -10,7 +10,7 @@
     width: 100%;
     min-height: 1px; // Prevent columns from collapsing when empty
     padding-right: ($gutter / 2);
-    padding-left:  ($gutter / 2);
+    padding-left: ($gutter / 2);
   }
 
   @each $breakpoint in map-keys($breakpoints) {
@@ -56,7 +56,7 @@
       @for $i from 0 through ($columns - 1) {
         @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
           .offset#{$infix}-#{$i} {
-            @include make-col-offset($i, $columns)
+            @include make-col-offset($i, $columns);
           }
         }
       }
diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss
index 584c78b92..808b2cc42 100644
--- a/scss/mixins/_grid.scss
+++ b/scss/mixins/_grid.scss
@@ -7,7 +7,7 @@
   margin-right: auto;
   margin-left: auto;
   padding-right: ($grid-gutter-width / 2);
-  padding-left:  ($grid-gutter-width / 2);
+  padding-left: ($grid-gutter-width / 2);
 }
 
 
@@ -24,7 +24,7 @@
   display: flex;
   flex-wrap: wrap;
   margin-right: ($grid-gutter-width / -2);
-  margin-left:  ($grid-gutter-width / -2);
+  margin-left: ($grid-gutter-width / -2);
 }
 
 @mixin make-col-ready() {
@@ -35,7 +35,7 @@
   width: 100%;
   min-height: 1px; // Prevent collapsing
   padding-right: ($grid-gutter-width / 2);
-  padding-left:  ($grid-gutter-width / 2);
+  padding-left: ($grid-gutter-width / 2);
 }
 
 @mixin make-col($size, $columns: $grid-columns) {
diff --git a/scss/mixins/_hover.scss b/scss/mixins/_hover.scss
index 4aa4b1d5d..72d1804f3 100644
--- a/scss/mixins/_hover.scss
+++ b/scss/mixins/_hover.scss
@@ -9,7 +9,7 @@
 //  }
 //  @else {
 // scss-lint:disable Indentation
-    &:hover { @content }
+    &:hover { @content; }
 // scss-lint:enable Indentation
 //  }
 }
@@ -17,12 +17,14 @@
 
 @mixin hover-focus {
   @if $enable-hover-media-query {
-    &:focus { @content }
-    @include hover { @content }
+    &:focus {
+      @content;
+    }
+    @include hover { @content; }
   } @else {
     &:focus,
     &:hover {
-      @content
+      @content;
     }
   }
 }
@@ -31,14 +33,14 @@
   @if $enable-hover-media-query {
     &,
     &:focus {
-      @content
+      @content;
     }
-    @include hover { @content }
+    @include hover { @content; }
   } @else {
     &,
     &:focus,
     &:hover {
-      @content
+      @content;
     }
   }
 }
@@ -47,14 +49,14 @@
   @if $enable-hover-media-query {
     &:focus,
     &:active {
-      @content
+      @content;
     }
-    @include hover { @content }
+    @include hover { @content; }
   } @else {
     &:focus,
     &:active,
     &:hover {
-      @content
+      @content;
     }
   }
 }
diff --git a/scss/utilities/_background.scss b/scss/utilities/_background.scss
index 1ef34fd8e..e382d4f90 100644
--- a/scss/utilities/_background.scss
+++ b/scss/utilities/_background.scss
@@ -2,5 +2,10 @@
   @include bg-variant('.bg-#{$color}', $value);
 }
 
-.bg-white { background-color: $white !important; }
-.bg-transparent { background-color: transparent !important; }
+.bg-white {
+  background-color: $white !important;
+}
+
+.bg-transparent {
+  background-color: transparent !important;
+}