* Implement scale color code.
parent
704dc5f150
commit
89481750de
|
@ -122,7 +122,7 @@
|
||||||
$_marks_length: 3px;
|
$_marks_length: 3px;
|
||||||
$_marks_distance: 1px;
|
$_marks_distance: 1px;
|
||||||
$button_bg: if(hue($bg_color) == 0deg, shade($bg_color, 1.2), $bg_color);
|
$button_bg: if(hue($bg_color) == 0deg, shade($bg_color, 1.2), $bg_color);
|
||||||
$ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
$ease-out-quad: cubic-bezier(.25, .46, .45, .94);
|
||||||
$button_transition: all 200ms $ease-out-quad;
|
$button_transition: all 200ms $ease-out-quad;
|
||||||
|
|
||||||
min-height: 10px;
|
min-height: 10px;
|
||||||
|
@ -134,6 +134,7 @@
|
||||||
trough { padding: 0 7px; }
|
trough { padding: 0 7px; }
|
||||||
highlight, fill { margin: 0 -7px; }
|
highlight, fill { margin: 0 -7px; }
|
||||||
}
|
}
|
||||||
|
|
||||||
&.vertical {
|
&.vertical {
|
||||||
padding: 0 6px;
|
padding: 0 6px;
|
||||||
|
|
||||||
|
@ -189,9 +190,7 @@
|
||||||
.osd & {
|
.osd & {
|
||||||
background-color: lighten($osd_bg, 7%);
|
background-color: lighten($osd_bg, 7%);
|
||||||
|
|
||||||
highlight {
|
highlight { background-color: $selected_bg_color; }
|
||||||
background-color: $selected_bg_color;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Troughs in selected list-rows and infobars
|
// Troughs in selected list-rows and infobars
|
||||||
|
@ -260,11 +259,13 @@
|
||||||
background-color: mix($selected_fg_color, $selected_bg_color, .85);
|
background-color: mix($selected_fg_color, $selected_bg_color, .85);
|
||||||
border-color: mix($selected_fg_color, $selected_bg_color, .85);
|
border-color: mix($selected_fg_color, $selected_bg_color, .85);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
background-color: mix($selected_fg_color, $selected_bg_color, .5);
|
background-color: mix($selected_fg_color, $selected_bg_color, .5);
|
||||||
border-color: mix($selected_fg_color, $selected_bg_color, .5);
|
border-color: mix($selected_fg_color, $selected_bg_color, .5);
|
||||||
}
|
}
|
||||||
&:disabled{
|
|
||||||
|
&:disabled {
|
||||||
background-color: mix($selected_fg_color, $selected_bg_color, .55);
|
background-color: mix($selected_fg_color, $selected_bg_color, .55);
|
||||||
border-color: mix($selected_fg_color, $selected_bg_color, .55);
|
border-color: mix($selected_fg_color, $selected_bg_color, .55);
|
||||||
}
|
}
|
||||||
|
@ -315,6 +316,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.horizontal {
|
&.horizontal {
|
||||||
indicator {
|
indicator {
|
||||||
min-height: $_marks_length;
|
min-height: $_marks_length;
|
||||||
|
@ -323,6 +325,7 @@
|
||||||
|
|
||||||
&.fine-tune indicator { min-height: ($_marks_length - 1px); }
|
&.fine-tune indicator { min-height: ($_marks_length - 1px); }
|
||||||
}
|
}
|
||||||
|
|
||||||
&.vertical {
|
&.vertical {
|
||||||
indicator {
|
indicator {
|
||||||
min-height: 1px;
|
min-height: 1px;
|
||||||
|
@ -331,5 +334,114 @@
|
||||||
|
|
||||||
&.fine-tune indicator { min-width: ($_marks_length - 1px); }
|
&.fine-tune indicator { min-width: ($_marks_length - 1px); }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.color {
|
||||||
|
trough {
|
||||||
|
background-image: image($borders_color);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.horizontal {
|
||||||
|
padding: 0 0 15px 0;
|
||||||
|
|
||||||
|
trough {
|
||||||
|
padding-bottom: 4px;
|
||||||
|
background-position: 0 -3px;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
slider {
|
||||||
|
&:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
|
||||||
|
margin-bottom: -11px;
|
||||||
|
margin-top: 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.vertical {
|
||||||
|
&:dir(ltr) {
|
||||||
|
padding: 0 0 0 15px;
|
||||||
|
|
||||||
|
trough {
|
||||||
|
padding-left: 4px;
|
||||||
|
background-position: 3px 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
slider {
|
||||||
|
&:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
|
||||||
|
margin-left: -11px;
|
||||||
|
margin-right: 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:dir(rtl) {
|
||||||
|
padding: 0 15px 0 0;
|
||||||
|
|
||||||
|
trough {
|
||||||
|
padding-right: 4px;
|
||||||
|
background-position: -3px 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
slider {
|
||||||
|
&:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
|
||||||
|
margin-right: -11px;
|
||||||
|
margin-left: 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.fine-tune {
|
||||||
|
&.horizontal {
|
||||||
|
padding: 0 0 12px 0;
|
||||||
|
|
||||||
|
trough {
|
||||||
|
padding-bottom: 7px;
|
||||||
|
background-position: 0 -6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
slider {
|
||||||
|
margin-bottom: -11px;
|
||||||
|
margin-top: 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.vertical {
|
||||||
|
&:dir(ltr) {
|
||||||
|
padding: 0 0 0 12px;
|
||||||
|
|
||||||
|
trough {
|
||||||
|
padding-left: 7px;
|
||||||
|
background-position: 6px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
slider {
|
||||||
|
margin-left: -11px;
|
||||||
|
margin-right: 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:dir(rtl) {
|
||||||
|
padding: 0 12px 0 0;
|
||||||
|
|
||||||
|
trough {
|
||||||
|
padding-right: 7px;
|
||||||
|
background-position: -6px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
slider {
|
||||||
|
margin-right: -11px;
|
||||||
|
margin-left: 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue