mirror of
https://github.com/luneko/SweetTokyoNight.git
synced 2025-12-13 07:29:51 +01:00
100 lines
2.0 KiB
SCSS
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;
|
|
}
|
|
}
|
|
}
|
|
}
|