75 lines
1.7 KiB
SCSS
75 lines
1.7 KiB
SCSS
@import './unset';
|
|
|
|
@mixin slider($width: 0.7em, $slider-width: .5em, $gradient: $active-gradient, $slider: true, $focusable: true, $radius: $radius) {
|
|
@include unset($rec: true);
|
|
|
|
trough {
|
|
transition: $transition;
|
|
border-radius: $radius;
|
|
border: $border;
|
|
background-color: $widget-bg;
|
|
min-height: $width;
|
|
min-width: $width;
|
|
|
|
highlight,
|
|
progress {
|
|
border-radius: max($radius - $border-width, 0);
|
|
background-image: $gradient;
|
|
min-height: $width;
|
|
min-width: $width;
|
|
}
|
|
}
|
|
|
|
slider {
|
|
box-shadow: none;
|
|
background-color: transparent;
|
|
border: $border-width solid transparent;
|
|
transition: $transition;
|
|
border-radius: $radius;
|
|
min-height: $width;
|
|
min-width: $width;
|
|
margin: -$slider-width;
|
|
}
|
|
|
|
&:hover {
|
|
trough {
|
|
background-color: $hover-bg;
|
|
}
|
|
|
|
slider {
|
|
@if $slider {
|
|
background-color: $fg;
|
|
border-color: $border-color;
|
|
|
|
@if $shadows {
|
|
box-shadow: 0 0 3px 0 $shadow-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&:disabled {
|
|
|
|
highlight,
|
|
progress {
|
|
background-color: transparentize($fg, 0.4);
|
|
background-image: none;
|
|
}
|
|
}
|
|
|
|
@if $focusable {
|
|
trough:focus {
|
|
background-color: $hover-bg;
|
|
box-shadow: inset 0 0 0 $border-width $primary-bg;
|
|
|
|
slider {
|
|
@if $slider {
|
|
background-color: $fg;
|
|
box-shadow: inset 0 0 0 $border-width $primary-bg;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|