ASCII text
1
/* Slider */
2
$slider_size: 15px;
4
.slider {
6
height: $slider_size;
7
// slider trough
8
-barlevel-height: 3px; // has to be an odd number
9
-barlevel-background-color: $borders_color; //background of the trough
10
-barlevel-border-width: 1px;
11
-barlevel-border-color: $borders_color; // trough border color
12
// fill style
13
-barlevel-active-background-color: $selected_bg_color; //active trough fill
14
-barlevel-active-border-color: if($variant == 'light', darken($selected_bg_color, 4%), lighten($selected_bg_color, 2%)); //active trough border
15
// overfill style (red in this case)
16
-barlevel-overdrive-color: $destructive_color;
17
-barlevel-overdrive-border-color: if($variant == 'light', darken($destructive_color, 4%), lighten($destructive_color, 2%)); //trough border when red;
18
-barlevel-overdrive-separator-width:1px;
19
// slider hander
20
-slider-handle-radius: $slider_size * 0.5; // half the size of the size
21
-slider-handle-border-width: 1px;
22
-slider-handle-border-color: if($variant == 'light', $borders_color, $fg_color);
23
color: if($variant == 'light', lighten($bg_color, 10%), $fg_color);
25
&:hover { color: $hover_bg_color; }
26
&:active { color: $active_bg_color; }
27
}