Files
SweetTokyoNight/gtk-4.0/widgets/_switches.scss
2021-12-05 14:48:59 -06:00

100 lines
2.0 KiB
SCSS

/**********
* Switch *
**********/
switch {
font-size: 1px;
font-weight: bold;
outline-offset: -4px;
transition: all 200ms ease-in;
border: none;
border-radius: 14px;
color: transparent;
padding: 2.3px 0px;
background: linear-gradient(to right, #859398, #859398);
// border: 1px solid rgba(170, 170, 170, 0.4);
box-shadow: 0px 2px 3px rgba(138, 138, 138, 0.753);
&:disabled {
background-color: $insensitive_bg_color;
}
&:backdrop {
background-color: $backdrop_bg_color;
transition: $backdrop_transition;
&:disabled { background-color: $insensitive_bg_color; }
}
&:active,
&:checked {
// border: 1px solid $teal;
background: linear-gradient(to right, #ff9200, #fadd00);
slider{
background: #fff;
}
&:backdrop {
//border: 1px solid $teal;
background: linear-gradient(to right, darken(#ff9200, 5%), darken(#fadd00, 5%));
slider {
&:backdrop {
box-shadow:none;
background-color:transparentize($base_color, 0.1);
border:none;
}
}
}
}
// Handle
slider {
padding:2px;
margin: 0 2.3px;
min-width: 12px;
min-height: 12px;
border-radius: 100%;
transition: $button_transition;
background-color: lighten(#859398, 20%);
&:backdrop {
padding:2px;
box-shadow:none;
background-color:$base_color;
}
}
&:checked slider { }
&:backdrop {
}
row:selected & {
@if $variant == 'light' {
box-shadow: none;
border-color: $selected_borders_color;
&:backdrop { border-color: $selected_borders_color; }
&.slider:dir(rtl) { border-left-color: $borders_color; }
&.slider:dir(ltr) { border-right-color: $borders_color; }
&.slider { &:checked, & { border-color: $selected_borders_color; } }
}
}
// Trough
trough {
&:active,
&:checked {
background-color: $selected_bg_color;
&:backdrop {
background-color: $backdrop_selected_bg_color;
}
}
}
}