123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101 |
- /**********
- * Switch *
- **********/
- $_switch_bg: if($variant == 'light', transparentize(black, 0.9), lighten($base_color, 10%));
- $_switch_slider_bg:$base_color;
- switch {
- font-size: 1px;
- font-weight: bold;
- outline-offset: -4px;
- transition: all 200ms ease-in;
- border: none;
- border-radius: 14px;
- color: transparent;
- padding: 2px;
- background-color:$_switch_bg;
- box-shadow: inset 0 0 0 1px transparentize(black, 0.95), 0px 1px $bottom_highlight;
- &:disabled {
- background-color: $insensitive_bg_color;
- }
- &:backdrop {
- background-color: darken($_switch_bg, 7%);
- transition: $backdrop_transition;
- &:disabled { background-color: $insensitive_bg_color; }
- }
- &:active,
- &:checked {
- background-color: $lime;
- &:backdrop {
- background-color: $lime;
- slider {
- &:backdrop {
- box-shadow:none;
- background-color:transparentize($base_color, 0.1);
- border:none;
- }
- }
- }
- }
- // Handle
- slider {
- padding:2px;
- min-width: 16px;
- min-height: 16px;
- border-radius: 100%;
- transition: $button_transition;
- background-color: $_switch_slider_bg;
- box-shadow: 0 2px 2px transparentize(black, 0.8),
- 0 1px 2px transparentize(black, 0.8);
- &: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;
- }
- }
- }
- }
|