paper-gtk-theme/Paper/gtk-3.18/widgets/_switches.scss

87 lines
1.7 KiB
SCSS
Raw Normal View History

2016-04-15 03:54:38 +02:00
/**********
* Switch *
**********/
2016-04-15 18:59:10 +02:00
GtkSwitch {
2016-04-19 00:39:13 +02:00
-GtkSwitch-slider-width: 24px;
-GtkSwitch-slider-height: 24px;
2016-04-15 18:59:10 +02:00
2016-04-15 03:54:38 +02:00
font: 1;
font-weight: bold;
outline-offset: -4px;
transition: all 200ms ease-in;
border: none;
border-radius: 14px;
color: transparent;
background-color: if($variant == 'light', transparentize(black, 0.9), transparent);
box-shadow: if($variant == 'light', (inset 0 0 0 1px transparentize(black, 0.8), 0px 1px $bottom_highlight), 0 0 0 1px transparentize(black, 0.7));
2016-04-15 03:54:38 +02:00
2016-04-19 00:39:13 +02:00
&:insensitive {
background-color: transparentize(black, 0.9);
2016-04-15 03:54:38 +02:00
}
&:backdrop {
2016-04-15 18:59:10 +02:00
background-color: $backdrop_bg_color;
2016-04-15 03:54:38 +02:00
transition: $backdrop_transition;
2016-04-19 00:39:13 +02:00
&:insensitive { background-color: $insensitive_bg_color; }
2016-04-15 18:59:10 +02:00
}
&:active,
&:checked {
background-color: $selected_bg_color;
&:backdrop {
background-color: $backdrop_selected_bg_color;
.slider,
slider {
&:backdrop {
box-shadow:none;
background-color:transparentize($bg_color, 0.1);
2016-04-15 18:59:10 +02:00
border:none;
}
}
2016-04-15 03:54:38 +02:00
}
}
2016-04-15 18:59:10 +02:00
// Handle
2016-04-19 00:39:13 +02:00
.slider {
2016-04-15 03:54:38 +02:00
padding:2px;
border-radius: 50%;
transition: $button_transition;
background-color: if($variant == 'light', $bg_color, darken($bg_color, 5%));
2016-04-15 03:54:38 +02:00
box-shadow: if($variant == 'light', (
0 2px 2px transparentize(black, 0.8),
0 1px 2px transparentize(black, 0.8)
),(
none
));
2016-04-15 18:59:10 +02:00
&:backdrop {
box-shadow:none;
}
&:insensitive {
box-shadow:none;
2016-04-15 18:59:10 +02:00
}
2016-04-15 03:54:38 +02:00
}
// Trough
.trough {
2016-04-15 18:59:10 +02:00
&:active,
&:checked {
2016-04-15 03:54:38 +02:00
background-color: $selected_bg_color;
2016-04-15 18:59:10 +02:00
&:backdrop {
background-color: $backdrop_selected_bg_color;
}
2016-04-15 03:54:38 +02:00
}
2016-04-15 03:54:38 +02:00
}
}