From d80635c1cd503f0f017c014f3728ee4e3bc05264 Mon Sep 17 00:00:00 2001
From: Martijn Cuppens <martijn.cuppens@gmail.com>
Date: Wed, 25 Jul 2018 02:39:15 +0200
Subject: [PATCH] Custom input range disabled styling (#26540)
---
scss/_custom-forms.scss | 22 ++++++++++++++++++++++
scss/_variables.scss | 1 +
2 files changed, 23 insertions(+)
diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index 8348e261c5..5e1fa19927 100644
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -424,6 +424,28 @@
background-color: $custom-range-track-bg;
@include border-radius($custom-range-track-border-radius);
}
+
+ &:disabled {
+ &::-webkit-slider-thumb {
+ background-color: $custom-range-thumb-disabled-bg;
+ }
+
+ &::-webkit-slider-runnable-track {
+ cursor: default;
+ }
+
+ &::-moz-range-thumb {
+ background-color: $custom-range-thumb-disabled-bg;
+ }
+
+ &::-moz-range-track {
+ cursor: default;
+ }
+
+ &::-ms-thumb {
+ background-color: $custom-range-thumb-disabled-bg;
+ }
+ }
}
.custom-control-label::before,
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 0aa549447a..525f9be446 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -548,6 +548,7 @@ $custom-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1) !de
$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-range-thumb-disabled-bg: $gray-500 !default;
$custom-file-height: $input-height !default;
$custom-file-height-inner: $input-height-inner !default;
--
GitLab