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

77 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-05-24 17:58:40 +02:00
-GtkSwitch-slider-width: 20px;
-GtkSwitch-slider-height: 20px;
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;
2016-05-24 01:16:33 +02:00
border-radius: 16px;
2016-04-15 03:54:38 +02:00
color: transparent;
2016-05-24 18:54:03 +02:00
background-color: transparentize(black,0.9);
2016-05-25 03:16:43 +02:00
box-shadow: if($variant == 'light', (inset 0 0 0 1px transparentize(black,0.9), 0px 1px $bottom_highlight), (inset 0 0 0 1px transparentize(black,0.75), 0px 1px $bottom_highlight));
2016-04-15 03:54:38 +02:00
2016-04-19 00:39:13 +02:00
&:insensitive {
2016-05-24 18:54:03 +02:00
background-color: $insensitive_base_color;
2016-05-24 01:16:33 +02:00
box-shadow: if($variant == 'light', inset 0 0 0 1px transparentize(black, 0.9), 0 0 0 1px transparentize(black, 0.8));
2016-04-15 03:54:38 +02:00
}
2016-04-15 18:59:10 +02:00
&:active,
&:checked {
background-color: $selected_bg_color;
2016-05-24 20:16:34 +02:00
box-shadow: if($variant == 'light', inset 0 0 0 1px $selected_borders_color, 0 0 0 1px transparentize(black, 0.8));
2016-04-15 18:59:10 +02:00
2016-05-24 18:54:03 +02:00
&:backdrop,
&:insensitive {
2016-04-15 18:59:10 +02:00
background-color: $backdrop_selected_bg_color;
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-05-24 01:16:33 +02:00
border:none;
2016-05-24 18:54:03 +02:00
padding:2px;
2016-05-24 19:49:58 +02:00
outline-radius: 12px;
2016-05-24 01:16:33 +02:00
border-radius: 12px;
2016-04-15 03:54:38 +02:00
transition: $button_transition;
2016-05-24 01:16:33 +02:00
background-color: $base_color;
box-shadow: inset 0 1px 0 0 transparentize(white,0.9),
2016-05-24 18:54:03 +02:00
0 2px 2px 0 $shadow_color,
0 1px 2px 0 $shadow_color;
2016-04-15 03:54:38 +02:00
2016-05-24 01:16:33 +02:00
&:active {
background-color: white;
}
2016-04-15 18:59:10 +02:00
&:backdrop {
2016-05-24 01:16:33 +02:00
background-color: $backdrop_base_color;
box-shadow: 0 1px 2px 0 transparentize(black, 0.9);
}
&: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
}
}