Proposal for form range

diff --git a/scss/forms/_form-range.scss b/scss/forms/_form-range.scss
index 4732213e977ef752d8fe1339d73c6bef7ceee7a8..76e703a98315a4f6407f5b17bd172f8b6f8a521f 100644 (file)
--- a/scss/forms/_form-range.scss
+++ b/scss/forms/_form-range.scss
@@ -29,7 +29,7 @@
     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);
+    @include gradient-bg(var(--#{$prefix}form-range-thumb-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);
@@ -55,7 +55,7 @@
     width: $form-range-thumb-width;
     height: $form-range-thumb-height;
     appearance: none;
-    @include gradient-bg($form-range-thumb-bg);
+    @include gradient-bg(var(--#{$prefix}form-range-thumb-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);
@@ -72,20 +72,13 @@
     color: transparent;
     cursor: $form-range-track-cursor;
     background-color: $form-range-track-bg;
-    border-color: transparent; // Firefox specific?
+    border-color: transparent;
     @include border-radius($form-range-track-border-radius);
     @include box-shadow($form-range-track-box-shadow);
   }
 
   &:disabled {
+    --#{$prefix}form-range-thumb-bg: #{$form-range-thumb-disabled-bg};
     pointer-events: none;
-
-    &::-webkit-slider-thumb {
-      background-color: $form-range-thumb-disabled-bg;
-    }
-
-    &::-moz-range-thumb {
-      background-color: $form-range-thumb-disabled-bg;
-    }
   }
 }