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

diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index f4e005a96245af48fb606629b5540116abc7094f..8348e261c581d1279b3694eaa39a7a06e7ab1441 100644 (file)
--- 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);
     }

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 6531a934f78cee13d53c85138d19ff83d57289d5..94ea935780ddca9685042cfb312d7ab5a343bc19 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -537,14 +537,15 @@ $custom-range-track-bg:             $gray-300 !default;
 $custom-range-track-border-radius:  1rem !default;
 $custom-range-track-box-shadow:     inset 0 .25rem .25rem rgba($black, .1) !default;
 
-$custom-range-thumb-width:            1rem !default;
-$custom-range-thumb-height:           $custom-range-thumb-width !default;
-$custom-range-thumb-bg:               $component-active-bg !default;
-$custom-range-thumb-border:           0 !default;
-$custom-range-thumb-border-radius:    1rem !default;
-$custom-range-thumb-box-shadow:       0 .1rem .25rem rgba($black, .1) !default;
-$custom-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-btn-focus-box-shadow !default;
-$custom-range-thumb-active-bg:        lighten($component-active-bg, 35%) !default;
+$custom-range-thumb-width:                   1rem !default;
+$custom-range-thumb-height:                  $custom-range-thumb-width !default;
+$custom-range-thumb-bg:                      $component-active-bg !default;
+$custom-range-thumb-border:                  0 !default;
+$custom-range-thumb-border-radius:           1rem !default;
+$custom-range-thumb-box-shadow:              0 .1rem .25rem rgba($black, .1) !default;
+$custom-range-thumb-focus-box-shadow:        0 0 0 1px $body-bg, $input-btn-focus-box-shadow !default;
+$custom-range-thumb-focus-box-shadow-width:  $input-btn-focus-width !default; // For focus box shadow issue in IE/Edge
+$custom-range-thumb-active-bg:               lighten($component-active-bg, 35%) !default;
 
 $custom-file-height:                $input-height !default;
 $custom-file-height-inner:          $input-height-inner !default;