gtk-4.0/widgets/_checks-radios.scss 7.2 K raw
1
/*************************
2
 * Check and Radio Items *
3
 *************************/
4
// draw regular check and radio items using our PNG assets
5
// all assets are rendered from assets.svg. never add pngs directly
6
7
8
// unchecked
9
@each $s,$un in ('','-unchecked'),
10
                  (':hover', '-unchecked-hover'),
11
                  (':active', '-unchecked-active'),
12
                  (':backdrop', '-unchecked-backdrop'),
13
                  (':disabled', '-unchecked-insensitive'),
14
                  (':disabled:backdrop', '-unchecked-insensitive') {
15
  check#{$s}{
16
    -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/checkbox#{$un}.png"),url("../assets/checkbox#{$un}@2.png")), -gtk-scaled(url("../assets/checkbox#{$un}-dark.png"),url("../assets/checkbox#{$un}@2.png")));
17
    -gtk-icon-shadow: none;
18
  }
19
  radio#{$s}{
20
    -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/radio#{$un}.png"),url("../assets/radio#{$un}@2.png")), -gtk-scaled(url("../assets/radio#{$un}-dark.png"),url("../assets/radio#{$un}@2.png")));
21
    -gtk-icon-shadow: none;
22
  }
23
}
24
25
// checked
26
@each $s,$ch in (':checked', '-checked'),
27
                  (':checked:hover', '-checked-hover'),
28
                  (':checked:active', '-checked-active'),
29
                  (':checked:backdrop', '-checked-backdrop'),
30
                  (':checked:disabled', '-checked-insensitive'),
31
                  (':checked:disabled:backdrop', '-checked-insensitive') {
32
  check#{$s}{
33
    -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/checkbox#{$ch}.png"),url("../assets/checkbox#{$ch}@2.png")), -gtk-scaled(url("../assets/checkbox#{$ch}-dark.png"),url("../assets/checkbox#{$ch}@2.png")));
34
    -gtk-icon-shadow: none;
35
  }
36
  radio#{$s}{
37
    -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/radio#{$ch}.png"),url("../assets/radio#{$ch}@2.png")), -gtk-scaled(url("../assets/radio#{$ch}-dark.png"),url("../assets/radio#{$ch}@2.png")));
38
    -gtk-icon-shadow: none;
39
    background: none;
40
  }
41
}
42
43
// mixed
44
@each $s,$mx in (':indeterminate', '-mixed'),
45
                  (':indeterminate:hover', '-mixed-hover'),
46
                  (':indeterminate:active', '-mixed-active'),
47
                  (':indeterminate:backdrop', '-mixed-backdrop'),
48
                  (':indeterminate:disabled', '-mixed-insensitive'),
49
                  (':indeterminate:disabled:backdrop', '-mixed-insensitive') {
50
  check#{$s}{
51
    -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/checkbox#{$mx}.png"),url("../assets/checkbox#{$mx}@2.png")), -gtk-scaled(url("../assets/checkbox#{$mx}.png"),url("../assets/checkbox#{$mx}@2.png")));
52
    -gtk-icon-shadow: none;
53
  }
54
  radio#{$s}{
55
    -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/radio#{$mx}.png"),url("../assets/radio#{$mx}@2.png")), -gtk-scaled(url("../assets/radio#{$mx}.png"),url("../assets/radio#{$mx}@2.png")));
56
    -gtk-icon-shadow: none;
57
  }
58
}
59
60
// unchecked:selected
61
@each $s,$un in (':selected','-unchecked'),
62
                  (':hover:selected', '-unchecked'),
63
                  (':active:selected', '-unchecked'),
64
                  (':backdrop:selected', '-unchecked'),
65
                  (':disabled:selected', '-unchecked'),
66
                  (':disabled:backdrop:selected', '-unchecked') {
67
  check#{$s}{
68
    -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/checkbox#{$un}.png"),url("../assets/checkbox#{$un}@2.png")), -gtk-scaled(url("../assets/checkbox#{$un}-dark.png"),url("../assets/checkbox#{$un}@2.png")));
69
    -gtk-icon-shadow: none;
70
  }
71
  radio#{$s}{
72
    -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/selected-radio#{$un}.png"),url("../assets/selected-radio#{$un}@2.png")), -gtk-scaled(url("../assets/selected-radio#{$un}-dark.png"),url("../assets/selected-radio#{$un}@2.png")));
73
    -gtk-icon-shadow: none;
74
  }
75
}
76
77
// checked:selected
78
@each $s,$ch in (':checked:selected', '-checked'),
79
                  (':checked:hover:selected', '-checked'),
80
                  (':checked:active:selected', '-checked'),
81
                  (':checked:backdrop:selected', '-checked'),
82
                  (':checked:disabled:selected', '-checked'),
83
                  (':checked:disabled:backdrop:selected', '-checked') {
84
  check#{$s}{
85
    -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/checkbox#{$ch}.png"),url("../assets/checkbox#{$ch}@2.png")), -gtk-scaled(url("../assets/checkbox#{$ch}-dark.png"),url("../assets/checkbox#{$ch}@2.png")));
86
    -gtk-icon-shadow: none;
87
  }
88
  radio#{$s}{
89
    -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/selected-radio#{$ch}.png"),url("../assets/selected-radio#{$ch}@2.png")), -gtk-scaled(url("../assets/selected-radio#{$ch}-dark.png"),url("../assets/selected-radio#{$ch}@2.png")));
90
    -gtk-icon-shadow: none;
91
  }
92
}
93
94
95
// mixed:selected
96
@each $s,$mx in (':indeterminate:selected', '-mixed'),
97
                  (':indeterminate:hover:selected', '-mixed'),
98
                  (':indeterminate:active:selected', '-mixed'),
99
                  (':indeterminate:backdrop:selected', '-mixed'),
100
                  (':indeterminate:disabled:selected', '-mixed'),
101
                  (':indeterminate:disabled:backdrop:selected', '-mixed') {
102
  check#{$s}{
103
    -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/selected-checkbox#{$mx}.png"),url("../assets/selected-checkbox#{$mx}@2.png")), -gtk-scaled(url("../assets/selected-checkbox#{$mx}.png"),url("../assets/selected-checkbox#{$mx}@2.png")));
104
    -gtk-icon-shadow: none;
105
  }
106
  radio#{$s}{
107
    -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/selected-radio#{$mx}.png"),url("../assets/selected-radio#{$mx}@2.png")), -gtk-scaled(url("../assets/selected-radio#{$mx}.png"),url("../assets/selected-radio#{$mx}@2.png")));
108
    -gtk-icon-shadow: none;
109
  }
110
}
111
112
113
// selection-mode unchecked
114
@each $s,$un in ('','-unchecked'),
115
                  (':hover', '-unchecked-hover'),
116
                  (':active', '-unchecked-active'),
117
                  (':backdrop', '-unchecked-backdrop'),
118
                  (':disabled', '-unchecked-insensitive'),
119
                  (':disabled:backdrop', '-unchecked-backdrop-insensitive') {
120
  .view.content-view check#{$s},
121
  .view.content-view.check#{$s}{
122
    -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-checkbox#{$un}.png"),url("../assets/checkbox#{$un}@2.png"));
123
    -gtk-icon-shadow: none;
124
  }
125
  .view.content-view radio#{$s},
126
  .view.content-view.radio#{$s}{
127
    -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-radio#{$un}.png"),url("../assets/radio#{$un}@2.png"));
128
    -gtk-icon-shadow: none;
129
  }
130
}
131
132
checkbutton.text-button, radiobutton.text-button {
133
  // this is for a nice focus on check and radios text
134
  padding: 2px 0;
135
  outline-offset: 0;
136
137
  label:not(:only-child) {
138
    &:first-child { margin-left: 4px; }
139
    &:last-child { margin-right: 4px; }
140
  }
141
}
142
143
check,
144
radio {
145
  margin: 0 4px;
146
147
  min-height: 16px;
148
  min-width: 16px;
149
  border: none;
150
151
  menu menuitem & {
152
    margin: 0; // this is a workaround for a menu check/radio size allocation issue
153
154
    &, &:hover, &:disabled { //FIXME use button reset mixin
155
      min-height: 14px;
156
      min-width: 14px;
157
      background-image: none;
158
      background-color: transparent;
159
      box-shadow: none;
160
      -gtk-icon-shadow: none;
161
      color: inherit;
162
      border-color: currentColor;
163
      animation: none;
164
    }
165
  }
166
}