109 lines
2.5 KiB
SCSS
109 lines
2.5 KiB
SCSS
$track-color: $whitish;
|
|
$thumb-color: $grayer;
|
|
$thumb-shadow: rgba($thumb-color, .3);
|
|
|
|
$thumb-radius: 50%;
|
|
$thumb-height: 14px;
|
|
$thumb-width: 14px;
|
|
$thumb-border-width: 0;
|
|
$thumb-border-color: transparent;
|
|
|
|
$track-width: 200px;
|
|
$track-height: 3px;
|
|
$track-border-width: 0;
|
|
$track-border-color: transparent;
|
|
|
|
$track-radius: 1px;
|
|
$contrast: 2;
|
|
|
|
@mixin track() {
|
|
width: $track-width;
|
|
height: $track-height;
|
|
cursor: pointer;
|
|
transition: all .2s ease;
|
|
}
|
|
|
|
@mixin thumb() {
|
|
border: $thumb-border-width solid $thumb-border-color;
|
|
height: $thumb-height;
|
|
width: $thumb-width;
|
|
border-radius: $thumb-radius;
|
|
background: $thumb-color;
|
|
cursor: pointer;
|
|
box-shadow: 0 0 0 2px $thumb-shadow;
|
|
transition: box-shadow .2s;
|
|
}
|
|
|
|
.range-slider {
|
|
-webkit-appearance: none;
|
|
margin: $thumb-height / 2 0;
|
|
width: $track-width;
|
|
|
|
&:focus {
|
|
&::-webkit-slider-runnable-track {
|
|
background: lighten($track-color, $contrast);
|
|
}
|
|
&::-webkit-slider-thumb {
|
|
box-shadow: 0 0 0 4px $thumb-shadow;
|
|
}
|
|
&::-moz-range-thumb {
|
|
box-shadow: 0 0 0 4px $thumb-shadow;
|
|
}
|
|
&::-ms-fill-lower {
|
|
background: $track-color;
|
|
}
|
|
&::-ms-fill-upper {
|
|
background: lighten($track-color, $contrast);
|
|
}
|
|
}
|
|
|
|
&::-webkit-slider-runnable-track {
|
|
@include track();
|
|
background: $track-color;
|
|
border: $track-border-width solid $track-border-color;
|
|
border-radius: $track-radius;
|
|
}
|
|
|
|
&::-webkit-slider-thumb {
|
|
@include thumb();
|
|
-webkit-appearance: none;
|
|
margin-top: ((-$track-border-width * 2 + $track-height) / 2) - ($thumb-height / 2);
|
|
}
|
|
|
|
&::-moz-range-track {
|
|
@include track();
|
|
background: $track-color;
|
|
border: $track-border-width solid $track-border-color;
|
|
border-radius: $track-radius;
|
|
}
|
|
|
|
&::-moz-range-thumb {
|
|
@include thumb();
|
|
}
|
|
|
|
&::-ms-track {
|
|
@include track();
|
|
background: transparent;
|
|
border-color: transparent;
|
|
border-width: $thumb-width 0;
|
|
color: transparent;
|
|
}
|
|
|
|
&::-ms-fill-lower {
|
|
background: darken($track-color, $contrast);
|
|
border: $track-border-width solid $track-border-color;
|
|
border-radius: $track-radius * 2;
|
|
}
|
|
|
|
&::-ms-fill-upper {
|
|
background: $track-color;
|
|
border: $track-border-width solid $track-border-color;
|
|
border-radius: $track-radius * 2;
|
|
}
|
|
|
|
&::-ms-thumb {
|
|
@include thumb();
|
|
}
|
|
|
|
}
|