gtk-4.0/widgets/_switches.scss 2.1 K raw
1
/**********
2
 * Switch *
3
 **********/
4
switch {
5
  font-size: 1px;
6
  min-width: 40px;
7
  min-height: 25px;
8
  background-color: transparent;
9
  background-size: 40px 24px;
10
  background-repeat: no-repeat;
11
  background-position: center center;
12
  background-image: -gtk-scaled(url("../assets/switch-off.svg"),url("../assets/switch-off.svg"));
13
14
  &:disabled {
15
    background-image: -gtk-scaled(url("../assets/switch-insensitive.svg"),url("../assets/switch-insensitive.svg"));
16
    slider {
17
      background-image: -gtk-scaled(url("../assets/switch-slider-insensitive.svg"),url("../assets/switch-slider-insensitive@2.png"));
18
    }
19
  }
20
21
  &, & slider {
22
    outline-color: transparent;
23
    color: transparent;
24
    border: none;
25
    box-shadow: none; 
26
  }
27
  
28
  &:checked {
29
    background-image: -gtk-scaled(url("../assets/switch-on.svg"),url("../assets/switch-on.svg"));
30
    slider {
31
      background-image: -gtk-scaled(url("../assets/switch-slider-on.svg"),url("../assets/switch-slider-on@2.png"));
32
    }
33
    &:disabled {
34
      background-image: -gtk-scaled(url("../assets/switch-on-insensitive.svg"),url("../assets/switch-on-insensitive.svg"));
35
      slider {
36
        background-image: -gtk-scaled(url("../assets/switch-slider-on-insensitive.svg"),url("../assets/switch-slider-on-insensitive@2.png"));
37
      }
38
    }
39
  }
40
41
  // Handle
42
  slider {
43
    min-width: 1px;
44
    min-height: 1px;
45
    background-repeat: no-repeat;
46
    background-position: left center;
47
    background-color: transparent;
48
    background-image: -gtk-scaled(url("../assets/switch-slider-off.svg"),url("../assets/switch-slider-off@2.png"));
49
  }
50
51
  &:checked slider { }
52
53
  &:backdrop {
54
  }
55
56
  row:selected & {
57
    &:checked {
58
      background-image: -gtk-scaled(url("../assets/switch-off.svg"),url("../assets/switch-off.svg"));
59
      slider {
60
        background-image: -gtk-scaled(url("../assets/switch-slider-on-selected.svg"),url("../assets/switch-slider-on-selected@2.png"));
61
      }
62
    } 
63
  }
64
65
  // Trough
66
  trough {
67
68
    &:active,
69
    &:checked {
70
      background-color: $selected_bg_color;
71
72
      &:backdrop {
73
        background-color: $backdrop_selected_bg_color;
74
      }
75
    }
76
  }
77
}