86 lines
1.8 KiB
SCSS
86 lines
1.8 KiB
SCSS
@import "../../../css/static/properties";
|
|
@import "../../../css/static/mixin";
|
|
|
|
/* slider */
|
|
$track_height: .6em;
|
|
|
|
$thumb_width: .6em;
|
|
$thumb_height: 2em;
|
|
|
|
$tooltip_width: 4em;
|
|
$tooltip_height: 1.8em;
|
|
|
|
html:root {
|
|
--slider-filler-color: #4370a2;
|
|
--slider-disabled-filler-color: #3d618a;
|
|
|
|
--slider-thumb-color: #808080;
|
|
--slider-disabled-thumb-color: #4d4d4d;
|
|
}
|
|
|
|
.documentClass {
|
|
@include user-select(none);
|
|
}
|
|
|
|
.container {
|
|
font-size: .8em;
|
|
|
|
position: relative;
|
|
|
|
margin-top: $thumb_height / 2 - $track_height / 2;
|
|
margin-bottom: $thumb_height / 2 - $track_height / 2;
|
|
margin-right: $thumb_width / 2;
|
|
margin-left: $thumb_width / 2;
|
|
|
|
height: $track_height;
|
|
|
|
cursor: pointer;
|
|
|
|
background-color: #242527;
|
|
border-radius: $border_radius_large;
|
|
|
|
overflow: visible;
|
|
|
|
.filler {
|
|
position: absolute;
|
|
|
|
top: 0;
|
|
bottom: 0;
|
|
|
|
background-color: var(--slider-filler-color);
|
|
border-radius: $border_radius_large;
|
|
|
|
@include transition(background-color .15s ease-in-out);
|
|
}
|
|
|
|
.thumb {
|
|
position: absolute;
|
|
|
|
top: 0;
|
|
right: 0;
|
|
|
|
height: $thumb_height;
|
|
width: $thumb_width;
|
|
|
|
margin-left: -($thumb_width / 2);
|
|
margin-right: -($thumb_width / 2);
|
|
|
|
margin-top: -($thumb_height - $track_height) / 2;
|
|
margin-bottom: -($thumb_height - $track_height) / 2;
|
|
|
|
background-color: var(--slider-thumb-color);
|
|
@include transition(background-color .15s ease-in-out);
|
|
}
|
|
|
|
&.disabled {
|
|
pointer-events: none;
|
|
|
|
.thumb {
|
|
background-color: var(--slider-disabled-thumb-color)!important;
|
|
}
|
|
|
|
.filler {
|
|
background-color: var(--slider-disabled-filler-color);
|
|
}
|
|
}
|
|
} |