48 lines
892 B
SCSS
48 lines
892 B
SCSS
.Slider {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
user-select: none;
|
|
touch-action: none;
|
|
width: $unit-20x;
|
|
height: 20px;
|
|
|
|
.SliderTrack {
|
|
background-color: var(--button-bg);
|
|
position: relative;
|
|
flex-grow: 1;
|
|
border-radius: 9999px;
|
|
height: 3px;
|
|
}
|
|
}
|
|
|
|
.SliderRange {
|
|
position: absolute;
|
|
background-color: var(--accent-blue);
|
|
border-radius: 9999px;
|
|
height: 100%;
|
|
}
|
|
|
|
.SliderThumb {
|
|
display: block;
|
|
width: 20px;
|
|
height: 20px;
|
|
background-color: var(--slider-thumb-bg);
|
|
box-shadow: 0 2px 10px var(--slider-thumb-shadow);
|
|
border-radius: 10px;
|
|
|
|
&:hover {
|
|
background-color: var(--slider-thumb-bg-hover);
|
|
box-shadow: 0 2px 10px var(--slider-thumb-shadow-hover);
|
|
cursor: grab;
|
|
}
|
|
|
|
&:active {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
&:focus {
|
|
outline: none;
|
|
box-shadow: 0 0 0 5px rgba($accent--blue--light, 0.6);
|
|
}
|
|
}
|