Update scss mixins to comply with scss-linting rules (#22151)

* Fixed some linting issues

* Run npm tasks after scss cleanup

* Revert "Run npm tasks after scss cleanup"

This reverts commit 1103a0da68.

* Property sort order for grid

* Let's respest the property order in the mixins

* Respect property sort order in reboot file

* ::-ms-expand is a vendor-prefix, add it to the scss-lint disable

* Revert hover mixin comment

* Fixed missing mixin hover-focus

scss/_custom-forms.scss

@@ -1,4 +1,4 @@
-// scss-lint:disable PropertyCount
+// scss-lint:disable PropertyCount, VendorPrefix
 
 // Embedded icons from Open Iconic.
 // Released under MIT and copyright 2014 Waybury.

scss/_forms.scss

@@ -1,4 +1,4 @@
-// scss-lint:disable QualifyingElement
+// scss-lint:disable QualifyingElement, VendorPrefix
 
 //
 // Textual form controls

scss/_reboot.scss

@@ -22,8 +22,8 @@ html {
   box-sizing: border-box; // 1
   font-family: sans-serif; // 2
   line-height: 1.15; // 3
-  -ms-text-size-adjust: 100%; // 4
   -webkit-text-size-adjust: 100%; // 4
+  -ms-text-size-adjust: 100%; // 4
   -ms-overflow-style: scrollbar; // 5
   -webkit-tap-highlight-color: rgba(0,0,0,0); // 6
 }

scss/mixins/_alert.scss

@@ -1,9 +1,9 @@
 // Alerts
 
 @mixin alert-variant($background, $border, $body-color) {
+  color: $body-color;
   background-color: $background;
   border-color: $border;
-  color: $body-color;
 
   hr {
     border-top-color: darken($border, 5%);

scss/mixins/_border-radius.scss

@@ -8,15 +8,15 @@
 
 @mixin border-top-radius($radius) {
   @if $enable-rounded {
-    border-top-right-radius: $radius;
     border-top-left-radius: $radius;
+    border-top-right-radius: $radius;
   }
 }
 
 @mixin border-right-radius($radius) {
   @if $enable-rounded {
-    border-bottom-right-radius: $radius;
     border-top-right-radius: $radius;
+    border-bottom-right-radius: $radius;
   }
 }
 
@@ -29,7 +29,7 @@
 
 @mixin border-left-radius($radius) {
   @if $enable-rounded {
-    border-bottom-left-radius: $radius;
     border-top-left-radius: $radius;
+    border-bottom-left-radius: $radius;
   }
 }

scss/mixins/_buttons.scss

@@ -48,8 +48,8 @@
 
 @mixin button-outline-variant($color, $color-hover: #fff) {
   color: $color;
-  background-image: none;
   background-color: transparent;
+  background-image: none;
   border-color: $color;
 
   @include hover {

scss/mixins/_clearfix.scss

@@ -1,7 +1,7 @@
 @mixin clearfix() {
   &::after {
     display: block;
-    content: "";
     clear: both;
+    content: "";
   }
 }

scss/mixins/_forms.scss

@@ -27,8 +27,8 @@
   // Set validation states also for addons
   .input-group-addon {
     color: $color;
-    border-color: $color;
     background-color: lighten($color, 40%);
+    border-color: $color;
   }
 }
 

scss/mixins/_gradients.scss

@@ -17,8 +17,8 @@
 }
 
 @mixin gradient-directional($start-color: #555, $end-color: #333, $deg: 45deg) {
-  background-repeat: repeat-x;
   background-image: linear-gradient($deg, $start-color, $end-color);
+  background-repeat: repeat-x;
 }
 @mixin gradient-x-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
   background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);

scss/mixins/_grid.scss

@@ -4,8 +4,8 @@
 
 @mixin make-container($gutters: $grid-gutter-widths) {
   position: relative;
-  margin-left: auto;
   margin-right: auto;
+  margin-left: auto;
 
   @each $breakpoint in map-keys($gutters) {
     @include media-breakpoint-up($breakpoint) {

scss/mixins/_hover.scss

@@ -8,16 +8,18 @@
 //    }
 //  }
 //  @else {
+// scss-lint:disable Indentation
     &:hover { @content }
+// scss-lint:enable Indentation
 //  }
 }
 
+
 @mixin hover-focus {
   @if $enable-hover-media-query {
     &:focus { @content }
     @include hover { @content }
-  }
-  @else {
+  } @else {
     &:focus,
     &:hover {
       @content
@@ -32,8 +34,7 @@
       @content
     }
     @include hover { @content }
-  }
-  @else {
+  } @else {
     &,
     &:focus,
     &:hover {
@@ -49,8 +50,7 @@
       @content
     }
     @include hover { @content }
-  }
-  @else {
+  } @else {
     &:focus,
     &:active,
     &:hover {

scss/mixins/_list-group.scss

@@ -6,6 +6,7 @@
     background-color: $background;
   }
 
+  //scss-lint:disable QualifyingElement
   a.list-group-item-#{$state},
   button.list-group-item-#{$state} {
     color: $color;
@@ -21,4 +22,5 @@
       border-color: $color;
     }
   }
+  // scss-lint:enable QualifyingElement
 }

scss/mixins/_reset-text.scss

@@ -1,17 +1,18 @@
+// scss-lint:disable DuplicateProperty
 @mixin reset-text {
   font-family: $font-family-base;
   // We deliberately do NOT reset font-size or word-wrap.
   font-style: normal;
   font-weight: $font-weight-normal;
-  letter-spacing: normal;
-  line-break: auto;
   line-height: $line-height-base;
   text-align: left; // Fallback for where `start` is not supported
   text-align: start;
   text-decoration: none;
   text-shadow: none;
   text-transform: none;
-  white-space: normal;
+  letter-spacing: normal;
   word-break: normal;
   word-spacing: normal;
+  white-space: normal;
+  line-break: auto;
 }

scss/mixins/_resize.scss

@@ -1,6 +1,6 @@
 // Resize anything
 
 @mixin resizable($direction) {
-  resize: $direction; // Options: horizontal, vertical, both
   overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible`
+  resize: $direction; // Options: horizontal, vertical, both
 }

scss/mixins/_text-truncate.scss

@@ -5,4 +5,4 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-}
+}