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

78 lines
1.8 KiB
SCSS

/**********
* Switch *
**********/
GtkSwitch {
-GtkSwitch-slider-width: 20px;
-GtkSwitch-slider-height: 20px;
font: 1;
font-weight: bold;
outline-offset: -4px;
transition: all 200ms ease-in;
border: none;
border-radius: 16px;
color: transparent;
background-color: if($variant == 'light', transparentize(black, 0.9), transparentize(black, 0.8));
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));
&:insensitive {
background-color: transparentize(black, 0.9);
box-shadow: if($variant == 'light', inset 0 0 0 1px transparentize(black, 0.9), 0 0 0 1px transparentize(black, 0.8));
}
&:active,
&:checked {
background-color: $selected_bg_color;
&:backdrop {
background-color: $backdrop_selected_bg_color;
}
}
// Handle
.slider {
border:none;
padding:3px;
border-radius: 12px;
transition: $button_transition;
background-color: $base_color;
box-shadow: inset 0 1px 0 0 transparentize(white,0.9),
0 2px 2px 0 transparentize(black, 0.8),
0 1px 2px 0 transparentize(black, 0.8);
&:active {
background-color: white;
box-shadow: 0 2px 2px 0 transparentize(black, 0.8),
0 1px 2px 0 transparentize(black, 0.8);
}
&:backdrop {
background-color: $backdrop_base_color;
box-shadow: 0 1px 2px 0 transparentize(black, 0.9);
}
&:insensitive {
background-color: $insensitive_base_color;
border: 1px solid transparentize(black, 0.8);
box-shadow:none;
}
}
// Trough
.trough {
&:active,
&:checked {
background-color: $selected_bg_color;
&:backdrop {
background-color: $backdrop_selected_bg_color;
}
}
}
}