Fix Sass properties order for newer stylelint-config-recess-order (#38851)

diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index 4226ab894a6079642e6ecb949735e4209a28b1a1..81ea21617d0258d3f1b00e99e524c005ade84949 100644 (file)
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -524,15 +524,15 @@ legend {
   height: auto;
 }
 
-// 1. Correct the outline style in Safari.
-// 2. This overrides the extra rounded corners on search inputs in iOS so that our
+// 1. This overrides the extra rounded corners on search inputs in iOS so that our
 //    `.form-control` class can properly style them. Note that this cannot simply
 //    be added to `.form-control` as it's not specific enough. For details, see
 //    https://github.com/twbs/bootstrap/issues/11586.
+// 2. Correct the outline style in Safari.
 
 [type="search"] {
-  outline-offset: -2px; // 1
-  -webkit-appearance: textfield; // 2
+  -webkit-appearance: textfield; // 1
+  outline-offset: -2px; // 2
 }
 
 // 1. A few input types should stay LTR

diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss
index 83aacba2ed554d167d66cd450c4a4f0ec14a38d4..f8d9b08f8ce705e52de6754bca420c54d5433fdd 100644 (file)
--- a/scss/forms/_form-check.scss
+++ b/scss/forms/_form-check.scss
@@ -33,13 +33,13 @@
   height: $form-check-input-width;
   margin-top: ($line-height-base - $form-check-input-width) * .5; // line-height minus check height
   vertical-align: top;
+  appearance: none;
   background-color: var(--#{$prefix}form-check-bg);
   background-image: var(--#{$prefix}form-check-bg-image);
   background-repeat: no-repeat;
   background-position: center;
   background-size: contain;
   border: $form-check-input-border;
-  appearance: none;
   print-color-adjust: exact; // Keep themed appearance for print
   @include transition($form-check-transition);
 

diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss
index ca2a7df4cd348e8a6e021240549694319df19fff..67ae5f4f90389e4f5da849a03443d59e4e6b28e1 100644 (file)
--- a/scss/forms/_form-control.scss
+++ b/scss/forms/_form-control.scss
@@ -11,10 +11,10 @@
   font-weight: $input-font-weight;
   line-height: $input-line-height;
   color: $input-color;
+  appearance: none; // Fix appearance for date inputs in Safari
   background-color: $input-bg;
   background-clip: padding-box;
   border: $input-border-width solid $input-border-color;
-  appearance: none; // Fix appearance for date inputs in Safari
 
   // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
   @include border-radius($input-border-radius, 0);

diff --git a/scss/forms/_form-range.scss b/scss/forms/_form-range.scss
index 6de42132ea05647f586bec81b9102334907a1f22..4732213e977ef752d8fe1339d73c6bef7ceee7a8 100644 (file)
--- a/scss/forms/_form-range.scss
+++ b/scss/forms/_form-range.scss
@@ -8,8 +8,8 @@
   width: 100%;
   height: add($form-range-thumb-height, $form-range-thumb-focus-box-shadow-width * 2);
   padding: 0; // Need to reset padding
-  background-color: transparent;
   appearance: none;
+  background-color: transparent;
 
   &:focus {
     outline: 0;
@@ -28,12 +28,12 @@
     width: $form-range-thumb-width;
     height: $form-range-thumb-height;
     margin-top: ($form-range-track-height - $form-range-thumb-height) * .5; // Webkit specific
+    appearance: none;
     @include gradient-bg($form-range-thumb-bg);
     border: $form-range-thumb-border;
     @include border-radius($form-range-thumb-border-radius);
     @include box-shadow($form-range-thumb-box-shadow);
     @include transition($form-range-thumb-transition);
-    appearance: none;
 
     &:active {
       @include gradient-bg($form-range-thumb-active-bg);
@@ -54,12 +54,12 @@
   &::-moz-range-thumb {
     width: $form-range-thumb-width;
     height: $form-range-thumb-height;
+    appearance: none;
     @include gradient-bg($form-range-thumb-bg);
     border: $form-range-thumb-border;
     @include border-radius($form-range-thumb-border-radius);
     @include box-shadow($form-range-thumb-box-shadow);
     @include transition($form-range-thumb-transition);
-    appearance: none;
 
     &:active {
       @include gradient-bg($form-range-thumb-active-bg);

diff --git a/scss/forms/_form-select.scss b/scss/forms/_form-select.scss
index 0b26323ffdb52432a4e2750d01e19ad82889b78b..69ace529d76a6fa0d1170c1519283ff88236baf0 100644 (file)
--- a/scss/forms/_form-select.scss
+++ b/scss/forms/_form-select.scss
@@ -14,6 +14,7 @@
   font-weight: $form-select-font-weight;
   line-height: $form-select-line-height;
   color: $form-select-color;
+  appearance: none;
   background-color: $form-select-bg;
   background-image: var(--#{$prefix}form-select-bg-img), var(--#{$prefix}form-select-bg-icon, none);
   background-repeat: no-repeat;
@@ -23,7 +24,6 @@
   @include border-radius($form-select-border-radius, 0);
   @include box-shadow($form-select-box-shadow);
   @include transition($form-select-transition);
-  appearance: none;
 
   &:focus {
     border-color: $form-select-focus-border-color;