27 lines
1.1 KiB
SCSS
27 lines
1.1 KiB
SCSS
|
/* Slider */
|
||
|
|
|
||
|
|
$slider_size: 15px;
|
||
|
|
|
||
|
|
.slider {
|
||
|
|
height: $slider_size;
|
||
|
|
// slider trough
|
||
|
|
-barlevel-height: 3px; // has to be an odd number
|
||
|
|
-barlevel-background-color: $borders_color; //background of the trough
|
||
|
|
-barlevel-border-width: 1px;
|
||
|
|
-barlevel-border-color: $borders_color; // trough border color
|
||
|
|
// fill style
|
||
|
|
-barlevel-active-background-color: $selected_bg_color; //active trough fill
|
||
|
|
-barlevel-active-border-color: if($variant == 'light', darken($selected_bg_color, 4%), lighten($selected_bg_color, 2%)); //active trough border
|
||
|
|
// overfill style (red in this case)
|
||
|
|
-barlevel-overdrive-color: $destructive_color;
|
||
|
|
-barlevel-overdrive-border-color: if($variant == 'light', darken($destructive_color, 4%), lighten($destructive_color, 2%)); //trough border when red;
|
||
|
|
-barlevel-overdrive-separator-width:1px;
|
||
|
|
// slider hander
|
||
|
|
-slider-handle-radius: $slider_size * 0.5; // half the size of the size
|
||
|
|
-slider-handle-border-width: 1px;
|
||
|
|
-slider-handle-border-color: if($variant == 'light', $borders_color, $fg_color);
|
||
|
|
|
||
|
|
color: if($variant == 'light', lighten($bg_color, 10%), $fg_color);
|
||
|
|
&:hover { color: $hover_bg_color; }
|
||
|
|
&:active { color: $active_bg_color; }
|
||
|
|
}
|