Fix custom range thumb style (#26385)

* Fix focus box shadow of custom ranges

* Put `:focus` selector right after `.custom-range`
* Remove unnecessary `outline: none`

* Fix box-shadow issues in IE/Edge

* Better align

* Fix thumb vertical positions in IE/Edge

* Fix incorrect formula of thumb vertical positions in Webkit

* Fix an incorrect comment

* Fix incorrect box-shadow-width

1 files changed, 10 insertions, 16 deletions

diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index f4e005a96..8348e261c 100644
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -320,6 +320,12 @@
 
   &:focus {
     outline: none;
+
+    // Pseudo-elements must be split across multiple rulesets to have an affect.
+    // No box-shadow() mixin for focus accessibility.
+    &::-webkit-slider-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; }
+    &::-moz-range-thumb     { box-shadow: $custom-range-thumb-focus-box-shadow; }
+    &::-ms-thumb            { box-shadow: $custom-range-thumb-focus-box-shadow; }
   }
 
   &::-moz-focus-outer {
@@ -329,7 +335,7 @@
   &::-webkit-slider-thumb {
     width: $custom-range-thumb-width;
     height: $custom-range-thumb-height;
-    margin-top: -($custom-range-thumb-width * .25); // Webkit specific?
+    margin-top: (($custom-range-track-height - $custom-range-thumb-height) / 2); // Webkit specific
     @include gradient-bg($custom-range-thumb-bg);
     border: $custom-range-thumb-border;
     @include border-radius($custom-range-thumb-border-radius);
@@ -337,11 +343,6 @@
     @include transition($custom-forms-transition);
     appearance: none;
 
-    &:focus {
-      outline: none;
-      box-shadow: $custom-range-thumb-focus-box-shadow; // No mixin for focus accessibility
-    }
-
     &:active {
       @include gradient-bg($custom-range-thumb-active-bg);
     }
@@ -368,11 +369,6 @@
     @include transition($custom-forms-transition);
     appearance: none;
 
-    &:focus {
-      outline: none;
-      box-shadow: $custom-range-thumb-focus-box-shadow; // No mixin for focus accessibility
-    }
-
     &:active {
       @include gradient-bg($custom-range-thumb-active-bg);
     }
@@ -392,6 +388,9 @@
   &::-ms-thumb {
     width: $custom-range-thumb-width;
     height: $custom-range-thumb-height;
+    margin-top: 0; // Edge specific
+    margin-right: $custom-range-thumb-focus-box-shadow-width; // Workaround that overflowed box-shadow is hidden.
+    margin-left: $custom-range-thumb-focus-box-shadow-width;  // Workaround that overflowed box-shadow is hidden.
     @include gradient-bg($custom-range-thumb-bg);
     border: $custom-range-thumb-border;
     @include border-radius($custom-range-thumb-border-radius);
@@ -399,11 +398,6 @@
     @include transition($custom-forms-transition);
     appearance: none;
 
-    &:focus {
-      outline: none;
-      box-shadow: $custom-range-thumb-focus-box-shadow; // No mixin for focus accessibility
-    }
-
     &:active {
       @include gradient-bg($custom-range-thumb-active-bg);
     }