Merge branch 'main' into jo-docs-thanks-pagejo-docs-thanks-page

5 files changed, 9 insertions, 13 deletions

diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss
index 1d6d87363..b34250a71 100644
--- a/scss/forms/_form-check.scss
+++ b/scss/forms/_form-check.scss
@@ -113,6 +113,7 @@
     background-image: escape-svg($form-switch-bg-image);
     background-position: left center;
     @include border-radius($form-switch-border-radius);
+    @include transition($form-switch-transition);
 
     &:focus {
       background-image: escape-svg($form-switch-focus-bg-image);
diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss
index bac416f8c..5e43aea99 100644
--- a/scss/forms/_form-control.scss
+++ b/scss/forms/_form-control.scss
@@ -25,7 +25,7 @@
   &[type="file"] {
     overflow: hidden; // prevent pseudo element button overlap
 
-    &:not(:disabled):not([readonly]) {
+    &:not(:disabled):not(:read-only) {
       cursor: pointer;
     }
   }
@@ -65,7 +65,7 @@
   // disabled if the fieldset is disabled. Due to implementation difficulty, we
   // don't honor that edge case; we style them as disabled anyway.
   &:disabled,
-  &[readonly] {
+  &:read-only {
     background-color: $input-disabled-bg;
     border-color: $input-disabled-border-color;
     // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
@@ -73,7 +73,6 @@
   }
 
   // File input buttons theming
-  // stylelint-disable-next-line selector-pseudo-element-no-unknown
   &::file-selector-button {
     padding: $input-padding-y $input-padding-x;
     margin: (-$input-padding-y) (-$input-padding-x);
@@ -89,8 +88,7 @@
     @include transition($btn-transition);
   }
 
-  // stylelint-disable-next-line selector-pseudo-element-no-unknown
-  &:hover:not(:disabled):not([readonly])::file-selector-button {
+  &:hover:not(:disabled):not(:read-only)::file-selector-button {
     background-color: $form-file-button-hover-bg;
   }
 
@@ -109,7 +107,7 @@
     @include transition($btn-transition);
   }
 
-  &:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
+  &:hover:not(:disabled):not(:read-only)::-webkit-file-upload-button {
     background-color: $form-file-button-hover-bg;
   }
 }
@@ -150,7 +148,6 @@
   @include font-size($input-font-size-sm);
   @include border-radius($input-border-radius-sm);
 
-  // stylelint-disable-next-line selector-pseudo-element-no-unknown
   &::file-selector-button {
     padding: $input-padding-y-sm $input-padding-x-sm;
     margin: (-$input-padding-y-sm) (-$input-padding-x-sm);
@@ -170,7 +167,6 @@
   @include font-size($input-font-size-lg);
   @include border-radius($input-border-radius-lg);
 
-  // stylelint-disable-next-line selector-pseudo-element-no-unknown
   &::file-selector-button {
     padding: $input-padding-y-lg $input-padding-x-lg;
     margin: (-$input-padding-y-lg) (-$input-padding-x-lg);
@@ -207,7 +203,7 @@ textarea {
   height: auto; // Override fixed browser height
   padding: $input-padding-y;
 
-  &:not(:disabled):not([readonly]) {
+  &:not(:disabled):not(:read-only) {
     cursor: pointer;
   }
 
diff --git a/scss/forms/_form-range.scss b/scss/forms/_form-range.scss
index b603a7bc3..ae1d841d5 100644
--- a/scss/forms/_form-range.scss
+++ b/scss/forms/_form-range.scss
@@ -12,7 +12,7 @@
   appearance: none;
 
   &:focus {
-    outline: none;
+    outline: 0;
 
     // Pseudo-elements must be split across multiple rulesets to have an effect.
     // No box-shadow() mixin for focus accessibility.
diff --git a/scss/forms/_form-select.scss b/scss/forms/_form-select.scss
index 1866da964..15d5061ad 100644
--- a/scss/forms/_form-select.scss
+++ b/scss/forms/_form-select.scss
@@ -6,13 +6,12 @@
 .form-select {
   display: block;
   width: 100%;
-  padding: $form-select-padding-y ($form-select-padding-x + $form-select-indicator-padding) $form-select-padding-y $form-select-padding-x;
+  padding: $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x;
   font-family: $form-select-font-family;
   @include font-size($form-select-font-size);
   font-weight: $form-select-font-weight;
   line-height: $form-select-line-height;
   color: $form-select-color;
-  vertical-align: middle;
   background-color: $form-select-bg;
   background-image: escape-svg($form-select-indicator);
   background-repeat: no-repeat;
diff --git a/scss/forms/_validation.scss b/scss/forms/_validation.scss
index acd68f2ed..c48123a71 100644
--- a/scss/forms/_validation.scss
+++ b/scss/forms/_validation.scss
@@ -7,6 +7,6 @@
 
 // scss-docs-start form-validation-states-loop
 @each $state, $data in $form-validation-states {
-  @include form-validation-state($state, map-get($data, color), map-get($data, icon));
+  @include form-validation-state($state, $data...);
 }
 // scss-docs-end form-validation-states-loop