From 01021609a1060625dda10063fb818b3449c7839c Mon Sep 17 00:00:00 2001
From: gijsbotje <botje_gijs@hotmail.com>
Date: Sun, 13 Aug 2017 03:26:33 +0200
Subject: [PATCH 01/13] added the styling
---
scss/_custom-forms.scss | 102 ++++++++++++++++++++++++++++++++++++++++
1 file changed, 102 insertions(+)
diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index b58fffb8f5..53de8c46ba 100644
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -252,3 +252,105 @@
}
}
}
+
+// Range
+//
+// Replace the browser default range with a custom one.
+.custom-range {
+ width: 100%;
+ padding-left: 0;
+ background-color: transparent;
+ -webkit-appearance: none;
+
+ &:focus {
+ outline: none;
+
+ &::-webkit-slider-thumb, &::-moz-range-thumb, &::-ms-thumb {
+ box-shadow: $custom-control-indicator-focus-box-shadow;
+ }
+ }
+
+ &::-moz-focus-inner, &:-moz-focusring {
+ border: 0;
+ outline: none;
+ }
+
+ &:active {
+
+ &::-webkit-slider-thumb, &::-moz-range-thumb, &::-ms-thumb {
+ background-color: $custom-control-indicator-active-bg;
+ }
+ }
+
+ // webkit styling
+ &::-webkit-slider-thumb {
+ width: $custom-control-indicator-size;
+ height: $custom-control-indicator-size;
+ margin-top: -($custom-control-indicator-size * .25);
+ background-color: $custom-control-indicator-checked-bg;
+ border: 0;
+ border-radius: $custom-control-indicator-size;
+ -webkit-appearance: none;
+ }
+
+ &::-webkit-slider-runnable-track {
+ width: 100%;
+ height: $custom-control-indicator-size * .5;
+ color: transparent;
+ cursor: pointer;
+ background-color: $custom-control-indicator-bg;
+ border-color: transparent;
+ border-radius: $custom-control-indicator-size;
+ }
+
+ // firefox styling
+ &::-moz-range-thumb {
+ width: $custom-control-indicator-size;
+ height: $custom-control-indicator-size;
+ background-color: $custom-control-indicator-checked-bg;
+ border: 0;
+ border-radius: $custom-control-indicator-size;
+ -webkit-appearance: none;
+ }
+
+ &::-moz-range-track {
+ width: 100%;
+ height: $custom-control-indicator-size * .5;
+ color: transparent;
+ cursor: pointer;
+ background-color: $custom-control-indicator-bg;
+ border-color: transparent;
+ border-radius: $custom-control-indicator-size;
+ }
+
+ // IE styling
+ &::-ms-thumb {
+ width: $custom-control-indicator-size;
+ height: $custom-control-indicator-size;
+ background-color: $custom-control-indicator-checked-bg;
+ border: 0;
+ border-radius: $custom-control-indicator-size;
+ -webkit-appearance: none;
+ }
+
+ &::-ms-track {
+ width: 100%;
+ height: $custom-control-indicator-size * .5;
+ color: transparent;
+ cursor: pointer;
+ background-color: transparent;
+ border-color: transparent;
+ border-width: ($custom-control-indicator-size * .5);
+ }
+
+ &::-ms-fill-lower {
+ background-color: $custom-control-indicator-bg;
+ border-radius: $custom-control-indicator-size;
+ }
+
+ &::-ms-fill-upper {
+ margin-right: 15px;
+ background-color: $custom-control-indicator-bg;
+ border-radius: $custom-control-indicator-size;
+ }
+}
--
GitLab
From c02fa07e5c48c6f00df388974eb23d9da2998f23 Mon Sep 17 00:00:00 2001
From: gijsbotje <botje_gijs@hotmail.com>
Date: Sun, 13 Aug 2017 03:27:49 +0200
Subject: [PATCH 02/13] added the documentation
---
docs/4.0/components/forms.md | 14 ++++++++++++++
1 file changed, 14 insertions(+)
diff --git a/docs/4.0/components/forms.md b/docs/4.0/components/forms.md
index 1ae5c81f3b..823a03788a 100644
--- a/docs/4.0/components/forms.md
+++ b/docs/4.0/components/forms.md
@@ -1017,6 +1017,20 @@ Custom `<select>` menus need only a custom class, `.custom-select` to trigger th
</select>
{% endexample %}
+### Range control
+
+Custom `<input type="range">` controls need only a custom class, `.custom-range` to trigger the custom styles.
+
+{% example html %}
+<input type="range" class="custom-range">
+{% endexample %}
+
+Additionally you can add steps by defining `min` and `max` attributes.
+
+{% example html %}
+<input type="range" class="custom-range" min="0" max="5">
+{% endexample %}
+
### File browser
The file input is the most gnarly of the bunch and require additional JavaScript if you'd like to hook them up with functional *Choose file...* and selected file name text.
--
GitLab
From 0355a3132b163afd53b633cdbf35ed6a48cf455d Mon Sep 17 00:00:00 2001
From: Gijs Boddeus <botje_gijs@hotmail.com>
Date: Sun, 13 Aug 2017 16:24:22 +0200
Subject: [PATCH 03/13] update for one rule per line
---
scss/_custom-forms.scss | 11 ++++++++---
1 file changed, 8 insertions(+), 3 deletions(-)
diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index 2a7e9c83cf..4aff4750d3 100644
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -266,19 +266,24 @@
&:focus {
outline: none;
- &::-webkit-slider-thumb, &::-moz-range-thumb, &::-ms-thumb {
+ &::-webkit-slider-thumb,
+ &::-moz-range-thumb,
+ &::-ms-thumb {
box-shadow: $custom-control-indicator-focus-box-shadow;
}
}
- &::-moz-focus-inner, &:-moz-focusring {
+ &::-moz-focus-inner,
+ &:-moz-focusring {
border: 0;
outline: none;
}
&:active {
- &::-webkit-slider-thumb, &::-moz-range-thumb, &::-ms-thumb {
+ &::-webkit-slider-thumb,
+ &::-moz-range-thumb,
+ &::-ms-thumb {
background-color: $custom-control-indicator-active-bg;
}
}
--
GitLab
From 126f7318de61dfc3199424eaaf36a80fd55bfa95 Mon Sep 17 00:00:00 2001
From: Gijs Boddeus <botje_gijs@hotmail.com>
Date: Sun, 13 Aug 2017 16:28:34 +0200
Subject: [PATCH 04/13] fix hound error: trailing whitespace
---
scss/_custom-forms.scss | 10 +++++-----
1 file changed, 5 insertions(+), 5 deletions(-)
diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index 4aff4750d3..4bef854cce 100644
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -266,14 +266,14 @@
&:focus {
outline: none;
- &::-webkit-slider-thumb,
- &::-moz-range-thumb,
+ &::-webkit-slider-thumb,
+ &::-moz-range-thumb,
&::-ms-thumb {
box-shadow: $custom-control-indicator-focus-box-shadow;
}
}
- &::-moz-focus-inner,
+ &::-moz-focus-inner,
&:-moz-focusring {
border: 0;
outline: none;
@@ -281,8 +281,8 @@
&:active {
- &::-webkit-slider-thumb,
- &::-moz-range-thumb,
+ &::-webkit-slider-thumb,
+ &::-moz-range-thumb,
&::-ms-thumb {
background-color: $custom-control-indicator-active-bg;
}
--
GitLab
From e9f63e5d658d19b95997c37ad47c25f99e87b3c8 Mon Sep 17 00:00:00 2001
From: Gijs Boddeus <botje_gijs@hotmail.com>
Date: Sun, 13 Aug 2017 16:36:40 +0200
Subject: [PATCH 05/13] trimmed off vendor prefixes
---
scss/_custom-forms.scss | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index 4bef854cce..f95575bb11 100644
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -261,7 +261,7 @@
width: 100%;
padding-left: 0;
background-color: transparent;
- -webkit-appearance: none;
+ appearance: none;
&:focus {
outline: none;
@@ -296,7 +296,7 @@
background-color: $custom-control-indicator-checked-bg;
border: 0;
border-radius: $custom-control-indicator-size;
- -webkit-appearance: none;
+ appearance: none;
}
&::-webkit-slider-runnable-track {
@@ -316,7 +316,7 @@
background-color: $custom-control-indicator-checked-bg;
border: 0;
border-radius: $custom-control-indicator-size;
- -webkit-appearance: none;
+ appearance: none;
}
&::-moz-range-track {
@@ -336,7 +336,7 @@
background-color: $custom-control-indicator-checked-bg;
border: 0;
border-radius: $custom-control-indicator-size;
- -webkit-appearance: none;
+ appearance: none;
}
&::-ms-track {
--
GitLab
From 8b29be0f743e23057718e96b9e8187b55cb21409 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sun, 11 Feb 2018 18:10:04 -0800
Subject: [PATCH 06/13] Add note about track and thumb
---
docs/4.0/components/forms.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/4.0/components/forms.md b/docs/4.0/components/forms.md
index 91df95f110..48feb2f756 100644
--- a/docs/4.0/components/forms.md
+++ b/docs/4.0/components/forms.md
@@ -1173,7 +1173,7 @@ As is the `size` attribute:
### Range
-Create custom `<input type="range">` controls with `.custom-range`.
+Create custom `<input type="range">` controls with `.custom-range`. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only IE and Firefox support "filling" their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it.
{% example html %}
<input type="range" class="custom-range">
--
GitLab
From 6c620de01fdbfed50c34849d3d17d601d0bc48d3 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sun, 11 Feb 2018 18:11:53 -0800
Subject: [PATCH 07/13] Psuedo-elements must be split across multiple rulesets
to have an affect
---
scss/_custom-forms.scss | 48 ++++++++++++++++++++++++++---------------
1 file changed, 31 insertions(+), 17 deletions(-)
diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index aaefd3cfbf..3f0ab1057c 100644
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -298,7 +298,10 @@
// Range
//
-// Replace the browser default range with a custom one.
+// Style range inputs the same across browsers. Vendor-specific rules for psuedo
+// elements cannot be mixed. As such, there are no shared styles for focus or
+// active states on prefixed selectors.
+
.custom-range {
width: 100%;
padding-left: 0;
@@ -307,12 +310,6 @@
&:focus {
outline: none;
-
- &::-webkit-slider-thumb,
- &::-moz-range-thumb,
- &::-ms-thumb {
- box-shadow: $custom-control-indicator-focus-box-shadow;
- }
}
&::-moz-focus-inner,
@@ -321,16 +318,8 @@
outline: none;
}
- &:active {
-
- &::-webkit-slider-thumb,
- &::-moz-range-thumb,
- &::-ms-thumb {
- background-color: $custom-control-indicator-active-bg;
- }
}
- // webkit styling
&::-webkit-slider-thumb {
width: $custom-control-indicator-size;
height: $custom-control-indicator-size;
@@ -339,6 +328,15 @@
border: 0;
border-radius: $custom-control-indicator-size;
appearance: none;
+
+ &:focus {
+ outline: none;
+ box-shadow: $custom-control-indicator-focus-box-shadow;
+ }
+
+ &:active {
+ background-color: $custom-control-indicator-active-bg;
+ }
}
&::-webkit-slider-runnable-track {
@@ -351,7 +349,6 @@
border-radius: $custom-control-indicator-size;
}
- // firefox styling
&::-moz-range-thumb {
width: $custom-control-indicator-size;
height: $custom-control-indicator-size;
@@ -359,6 +356,15 @@
border: 0;
border-radius: $custom-control-indicator-size;
appearance: none;
+
+ &:focus {
+ outline: none;
+ box-shadow: $custom-control-indicator-focus-box-shadow;
+ }
+
+ &:active {
+ background-color: $custom-control-indicator-active-bg;
+ }
}
&::-moz-range-track {
@@ -371,7 +377,6 @@
border-radius: $custom-control-indicator-size;
}
- // IE styling
&::-ms-thumb {
width: $custom-control-indicator-size;
height: $custom-control-indicator-size;
@@ -379,6 +384,15 @@
border: 0;
border-radius: $custom-control-indicator-size;
appearance: none;
+
+ &:focus {
+ outline: none;
+ box-shadow: $custom-control-indicator-focus-box-shadow;
+ }
+
+ &:active {
+ background-color: $custom-control-indicator-active-bg;
+ }
}
&::-ms-track {
--
GitLab
From 302337ca177a875977a44980ec7c48b67dc11469 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sun, 11 Feb 2018 18:12:07 -0800
Subject: [PATCH 08/13] Fix firefox inner focus
---
scss/_custom-forms.scss | 6 +-----
1 file changed, 1 insertion(+), 5 deletions(-)
diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index 3f0ab1057c..a760d3b760 100644
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -312,12 +312,8 @@
outline: none;
}
- &::-moz-focus-inner,
- &:-moz-focusring {
+ &::-moz-focus-outer {
border: 0;
- outline: none;
- }
-
}
&::-webkit-slider-thumb {
--
GitLab
From 28d7191647dba5318ce377402f0ebffc4157613e Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sun, 11 Feb 2018 18:12:20 -0800
Subject: [PATCH 09/13] Seems that FF is the only one affected by this
---
scss/_custom-forms.scss | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index a760d3b760..bc8672e859 100644
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -304,7 +304,7 @@
.custom-range {
width: 100%;
- padding-left: 0;
+ padding-left: 0; // Firefox specific
background-color: transparent;
appearance: none;
--
GitLab
From 5d6c642cabb48a0decfc8fc0a77f5a7045b1885a Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sun, 11 Feb 2018 19:52:59 -0800
Subject: [PATCH 10/13] Add support for gradients
---
scss/_custom-forms.scss | 12 ++++++------
1 file changed, 6 insertions(+), 6 deletions(-)
diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index bc8672e859..2beff14cfd 100644
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -320,7 +320,7 @@
width: $custom-control-indicator-size;
height: $custom-control-indicator-size;
margin-top: -($custom-control-indicator-size * .25);
- background-color: $custom-control-indicator-checked-bg;
+ @include gradient-bg($custom-control-indicator-checked-bg);
border: 0;
border-radius: $custom-control-indicator-size;
appearance: none;
@@ -331,7 +331,7 @@
}
&:active {
- background-color: $custom-control-indicator-active-bg;
+ @include gradient-bg($custom-control-indicator-active-bg);
}
}
@@ -348,7 +348,7 @@
&::-moz-range-thumb {
width: $custom-control-indicator-size;
height: $custom-control-indicator-size;
- background-color: $custom-control-indicator-checked-bg;
+ @include gradient-bg($custom-control-indicator-checked-bg);
border: 0;
border-radius: $custom-control-indicator-size;
appearance: none;
@@ -359,7 +359,7 @@
}
&:active {
- background-color: $custom-control-indicator-active-bg;
+ @include gradient-bg($custom-control-indicator-active-bg);
}
}
@@ -376,7 +376,7 @@
&::-ms-thumb {
width: $custom-control-indicator-size;
height: $custom-control-indicator-size;
- background-color: $custom-control-indicator-checked-bg;
+ @include gradient-bg($custom-control-indicator-checked-bg);
border: 0;
border-radius: $custom-control-indicator-size;
appearance: none;
@@ -387,7 +387,7 @@
}
&:active {
- background-color: $custom-control-indicator-active-bg;
+ @include gradient-bg($custom-control-indicator-active-bg);
}
}
--
GitLab
From 1a4ece0eb638398f10ac5b03a7ff105c6ef74c8b Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Thu, 15 Feb 2018 18:47:20 -0800
Subject: [PATCH 11/13] Add labels, clarify min/max changes
---
docs/4.0/components/forms.md | 8 +++++---
1 file changed, 5 insertions(+), 3 deletions(-)
diff --git a/docs/4.0/components/forms.md b/docs/4.0/components/forms.md
index 48feb2f756..d74adda49d 100644
--- a/docs/4.0/components/forms.md
+++ b/docs/4.0/components/forms.md
@@ -1176,13 +1176,15 @@ As is the `size` attribute:
Create custom `<input type="range">` controls with `.custom-range`. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only IE and Firefox support "filling" their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it.
{% example html %}
-<input type="range" class="custom-range">
+<label for="customRange1">Example range</label>
+<input type="range" class="custom-range" id="customRange1">
{% endexample %}
-Additionally, you may specify steps by adding `min` and `max` attributes.
+Range inputs have implicit values for `min` and `max`—`0` and `100`, respectively. You may specify new values for those using the `min` and `max` attributes.
{% example html %}
-<input type="range" class="custom-range" min="0" max="5">
+<label for="customRange2">Example range</label>
+<input type="range" class="custom-range" min="0" max="5" id="customRange2">
{% endexample %}
### File browser
--
GitLab
From 5451a38f23eb711d0d371ade51b94f1f6125bc23 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sat, 17 Feb 2018 14:26:36 -0800
Subject: [PATCH 12/13] add step example
---
docs/4.0/components/forms.md | 7 +++++++
1 file changed, 7 insertions(+)
diff --git a/docs/4.0/components/forms.md b/docs/4.0/components/forms.md
index d74adda49d..fee34d019f 100644
--- a/docs/4.0/components/forms.md
+++ b/docs/4.0/components/forms.md
@@ -1187,6 +1187,13 @@ Range inputs have implicit values for `min` and `max`—`0` and `100`, respectiv
<input type="range" class="custom-range" min="0" max="5" id="customRange2">
{% endexample %}
+By default, range inputs "snap" to integer values. To change this, you can specify a `step` value. In the example below, we double the number of steps by using `step="0.5"`.
+
+{% example html %}
+<label for="customRange3">Example range</label>
+<input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3">
+{% endexample %}
+
### File browser
The file input is the most gnarly of the bunch and requires additional JavaScript if you'd like to hook them up with functional *Choose file...* and selected file name text.
--
GitLab
From 7a2406a878c10b7872d6c6e360a651b88dfad123 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sun, 18 Feb 2018 21:08:36 -0800
Subject: [PATCH 13/13] add custom range vars
---
scss/_custom-forms.scss | 92 ++++++++++++++++++++++-------------------
scss/_variables.scss | 16 +++++++
2 files changed, 65 insertions(+), 43 deletions(-)
diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index 2beff14cfd..27de8769a4 100644
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -317,98 +317,104 @@
}
&::-webkit-slider-thumb {
- width: $custom-control-indicator-size;
- height: $custom-control-indicator-size;
- margin-top: -($custom-control-indicator-size * .25);
- @include gradient-bg($custom-control-indicator-checked-bg);
- border: 0;
- border-radius: $custom-control-indicator-size;
+ width: $custom-range-thumb-width;
+ height: $custom-range-thumb-height;
+ margin-top: -($custom-range-thumb-width * .25); // Webkit specific?
+ @include gradient-bg($custom-range-thumb-bg);
+ border: $custom-range-thumb-border;
+ @include border-radius($custom-range-thumb-border-radius);
+ @include box-shadow($custom-range-thumb-box-shadow);
appearance: none;
&:focus {
outline: none;
- box-shadow: $custom-control-indicator-focus-box-shadow;
+ box-shadow: $custom-range-thumb-focus-box-shadow; // No mixin for focus accessibility
}
&:active {
- @include gradient-bg($custom-control-indicator-active-bg);
+ @include gradient-bg($custom-range-thumb-active-bg);
}
}
&::-webkit-slider-runnable-track {
- width: 100%;
- height: $custom-control-indicator-size * .5;
- color: transparent;
- cursor: pointer;
- background-color: $custom-control-indicator-bg;
+ width: $custom-range-track-width;
+ height: $custom-range-track-height;
+ color: transparent; // Why?
+ cursor: $custom-range-track-cursor;
+ background-color: $custom-range-track-bg;
border-color: transparent;
- border-radius: $custom-control-indicator-size;
+ @include border-radius($custom-range-track-border-radius);
+ @include box-shadow($custom-range-track-box-shadow);
}
&::-moz-range-thumb {
- width: $custom-control-indicator-size;
- height: $custom-control-indicator-size;
- @include gradient-bg($custom-control-indicator-checked-bg);
- border: 0;
- border-radius: $custom-control-indicator-size;
+ width: $custom-range-thumb-width;
+ height: $custom-range-thumb-height;
+ @include gradient-bg($custom-range-thumb-bg);
+ border: $custom-range-thumb-border;
+ @include border-radius($custom-range-thumb-border-radius);
+ @include box-shadow($custom-range-thumb-box-shadow);
appearance: none;
&:focus {
outline: none;
- box-shadow: $custom-control-indicator-focus-box-shadow;
+ box-shadow: $custom-range-thumb-focus-box-shadow; // No mixin for focus accessibility
}
&:active {
- @include gradient-bg($custom-control-indicator-active-bg);
+ @include gradient-bg($custom-range-thumb-active-bg);
}
}
&::-moz-range-track {
- width: 100%;
- height: $custom-control-indicator-size * .5;
+ width: $custom-range-track-width;
+ height: $custom-range-track-height;
color: transparent;
- cursor: pointer;
- background-color: $custom-control-indicator-bg;
- border-color: transparent;
- border-radius: $custom-control-indicator-size;
+ cursor: $custom-range-track-cursor;
+ background-color: $custom-range-track-bg;
+ border-color: transparent; // Firefox specific?
+ @include border-radius($custom-range-track-border-radius);
+ @include box-shadow($custom-range-track-box-shadow);
}
&::-ms-thumb {
- width: $custom-control-indicator-size;
- height: $custom-control-indicator-size;
- @include gradient-bg($custom-control-indicator-checked-bg);
- border: 0;
- border-radius: $custom-control-indicator-size;
+ width: $custom-range-thumb-width;
+ height: $custom-range-thumb-height;
+ @include gradient-bg($custom-range-thumb-bg);
+ border: $custom-range-thumb-border;
+ @include border-radius($custom-range-thumb-border-radius);
+ @include box-shadow($custom-range-thumb-box-shadow);
appearance: none;
&:focus {
outline: none;
- box-shadow: $custom-control-indicator-focus-box-shadow;
+ box-shadow: $custom-range-thumb-focus-box-shadow; // No mixin for focus accessibility
}
&:active {
- @include gradient-bg($custom-control-indicator-active-bg);
+ @include gradient-bg($custom-range-thumb-active-bg);
}
}
&::-ms-track {
- width: 100%;
- height: $custom-control-indicator-size * .5;
+ width: $custom-range-track-width;
+ height: $custom-range-track-height;
color: transparent;
- cursor: pointer;
+ cursor: $custom-range-track-cursor;
background-color: transparent;
border-color: transparent;
- border-width: ($custom-control-indicator-size * .5);
+ border-width: ($custom-range-thumb-height * .5);
+ @include box-shadow($custom-range-track-box-shadow);
}
&::-ms-fill-lower {
- background-color: $custom-control-indicator-bg;
- border-radius: $custom-control-indicator-size;
+ background-color: $custom-range-track-bg;
+ @include border-radius($custom-range-track-border-radius);
}
&::-ms-fill-upper {
- margin-right: 15px;
- background-color: $custom-control-indicator-bg;
- border-radius: $custom-control-indicator-size;
+ margin-right: 15px; // arbitrary?
+ background-color: $custom-range-track-bg;
+ @include border-radius($custom-range-track-border-radius);
}
}
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 2178e1f9cb..8f60cbb5bc 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -504,6 +504,22 @@ $custom-select-height-sm: $input-height-sm !default;
$custom-select-font-size-lg: 125% !default;
$custom-select-height-lg: $input-height-lg !default;
+$custom-range-track-width: 100% !default;
+$custom-range-track-height: .5rem !default;
+$custom-range-track-cursor: pointer !default;
+$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-file-height: $input-height !default;
$custom-file-focus-border-color: $input-focus-border-color !default;
$custom-file-focus-box-shadow: $input-btn-focus-box-shadow !default;
--
GitLab