75 lines
2.0 KiB
SCSS
75 lines
2.0 KiB
SCSS
|
@use "../colors" as *;
|
||
|
|
@use "../vars" as *;
|
||
|
|
|
||
|
|
$form-range-slider-height: 45px;
|
||
|
|
// The slider's track, ie., unfilled background
|
||
|
|
@mixin slider_track {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
border-radius: $input-field-border-radius;
|
||
|
|
}
|
||
|
|
|
||
|
|
// The slider's draggable thingy
|
||
|
|
@mixin slider_thumb {
|
||
|
|
display: none; // Hide the actual thing, since we use a different representation
|
||
|
|
appearance: none;
|
||
|
|
width: 0;
|
||
|
|
height: $form-range-slider-height;
|
||
|
|
border: none;
|
||
|
|
border-radius: $input-field-border-radius;
|
||
|
|
background-color: $user-form-range-slider-filled;
|
||
|
|
cursor: pointer;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
// This gradient makes it look like a progress-bar, filled upto `--value`
|
||
|
|
$form-range-slider-background-gradient:
|
||
|
|
linear-gradient(
|
||
|
|
to right,
|
||
|
|
$user-form-range-slider-filled 0%,
|
||
|
|
$user-form-range-slider-filled var(--value),
|
||
|
|
$user-form-range-slider-background 0%
|
||
|
|
);
|
||
|
|
|
||
|
|
// Range input, styled as a progress bar
|
||
|
|
@mixin range-slider {
|
||
|
|
--value: 50; // This value is not used except for initialization
|
||
|
|
input[type="range"] {
|
||
|
|
-webkit-appearance: none;
|
||
|
|
appearance: none;
|
||
|
|
width: 100%;
|
||
|
|
height: $form-range-slider-height;
|
||
|
|
border-radius: $input-field-border-radius;
|
||
|
|
background: $form-range-slider-background-gradient; // The effect to make it look like a progress-bar
|
||
|
|
border: 1px solid $add-user-input-border-color;
|
||
|
|
cursor: pointer;
|
||
|
|
padding: 0;
|
||
|
|
box-sizing: border-box;
|
||
|
|
|
||
|
|
// Slider track
|
||
|
|
&::-webkit-slider-runnable-track {
|
||
|
|
@include slider_track;
|
||
|
|
}
|
||
|
|
|
||
|
|
&::-moz-range-track {
|
||
|
|
@include slider_track;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Slider thumb
|
||
|
|
&::-webkit-slider-thumb {
|
||
|
|
-webkit-appearance: none;
|
||
|
|
@include slider_thumb;
|
||
|
|
}
|
||
|
|
|
||
|
|
&::-moz-range-thumb {
|
||
|
|
@include slider_thumb;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:focus {
|
||
|
|
outline: none;
|
||
|
|
border-color: $add-user-input-focus-border-color;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|