2021-04-21 13:48:05 +00:00
|
|
|
$rangeInputThumbSize: 14;
|
|
|
|
|
2017-02-22 22:40:51 +00:00
|
|
|
/**
|
|
|
|
* Disable the default webkit styles for range inputs (sliders).
|
|
|
|
*/
|
|
|
|
input[type=range]{
|
2017-02-22 23:14:09 +00:00
|
|
|
-webkit-appearance: none;
|
|
|
|
background: none;
|
2017-02-22 22:40:51 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
2021-06-10 12:48:44 +00:00
|
|
|
* Show focus for keyboard accessibility.
|
2017-02-22 22:40:51 +00:00
|
|
|
*/
|
|
|
|
input[type=range]:focus {
|
2021-06-10 12:48:44 +00:00
|
|
|
outline: 1px solid white !important;
|
2017-02-22 22:40:51 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Include the mixin for a range input style.
|
|
|
|
*/
|
|
|
|
@include slider {
|
2017-02-22 23:14:09 +00:00
|
|
|
background: $sliderTrackBackground;
|
|
|
|
border: none;
|
|
|
|
border-radius: 3px;
|
|
|
|
cursor: pointer;
|
|
|
|
height: 6px;
|
|
|
|
width: 100%;
|
2017-02-22 22:40:51 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Include the mixin for a range input thumb style.
|
|
|
|
*/
|
|
|
|
@include slider-thumb {
|
2017-02-22 23:14:09 +00:00
|
|
|
-webkit-appearance: none;
|
|
|
|
background: white;
|
|
|
|
border: 1px solid $sliderThumbBackground;
|
|
|
|
border-radius: 50%;
|
|
|
|
box-shadow: 0px 0px 1px $sliderThumbBackground;
|
|
|
|
cursor: pointer;
|
|
|
|
height: 14px;
|
|
|
|
margin-top: -4px;
|
|
|
|
width: 14px;
|
2017-02-22 22:40:51 +00:00
|
|
|
}
|