gnome-shell/data/theme/gnome-shell-sass/widgets/_switches.scss
Daniel Ruiz de Alegría 259eaa9bbb switch: Style switches with pure CSS
Drop hardcoded assets, have a handle actor instead, change its align to
move it.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2717>
2024-06-20 13:30:57 +02:00

40 lines
880 B
SCSS

/* Switches */
$switch_width: 46px;
$switch_handle_size: 20px;
.toggle-switch {
width: $switch_width;
border-radius: $forced_circular_radius;
transition-duration: 100ms;
color: $fg_color;
@if $contrast == 'high' {
background: transparentize(if($variant == 'light', black, white), .7);
} @else {
background: transparentize(if($variant == 'light', black, white), .85);
}
StIcon {
icon-size: $base_icon_size;
}
.handle {
margin: 3px;
width: $switch_handle_size;
height: $switch_handle_size;
border-radius: $forced_circular_radius;
background: if($variant == 'light', white, mix(white, $bg_color, 80%));
box-shadow: 0 2px 4px transparentize(black, .8);
transition-duration: 100ms;
}
&:checked {
background: $selected_bg_color;
color: $selected_fg_color;
.handle {
background: white;
}
}
}