gtk-3.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
  }
40
}
41
42
// mixed
43
@each $s,$mx in (':indeterminate', '-mixed'),
44
                  (':indeterminate:hover', '-mixed-hover'),
45
                  (':indeterminate:active', '-mixed-active'),
46
                  (':indeterminate:backdrop', '-mixed-backdrop'),
47
                  (':indeterminate:disabled', '-mixed-insensitive'),
48
                  (':indeterminate:disabled:backdrop', '-mixed-insensitive') {
49
  check#{$s}{
50
    -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")));
51
    -gtk-icon-shadow: none;
52
  }
53
  radio#{$s}{
54
    -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")));
55
    -gtk-icon-shadow: none;
56
  }
57
}
58
59
// unchecked:selected
60
@each $s,$un in (':selected','-unchecked'),
61
                  (':hover:selected', '-unchecked'),
62
                  (':active:selected', '-unchecked'),
63
                  (':backdrop:selected', '-unchecked'),
64
                  (':disabled:selected', '-unchecked'),
65
                  (':disabled:backdrop:selected', '-unchecked') {
66
  check#{$s}{
67
    -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")));
68
    -gtk-icon-shadow: none;
69
  }
70
  radio#{$s}{
71
    -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")));
72
    -gtk-icon-shadow: none;
73
  }
74
}
75
76
// checked:selected
77
@each $s,$ch in (':checked:selected', '-checked'),
78
                  (':checked:hover:selected', '-checked'),
79
                  (':checked:active:selected', '-checked'),
80
                  (':checked:backdrop:selected', '-checked'),
81
                  (':checked:disabled:selected', '-checked'),
82
                  (':checked:disabled:backdrop:selected', '-checked') {
83
  check#{$s}{
84
    -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")));
85
    -gtk-icon-shadow: none;
86
  }
87
  radio#{$s}{
88
    -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")));
89
    -gtk-icon-shadow: none;
90
  }
91
}
92
93
94
// mixed:selected
95
@each $s,$mx in (':indeterminate:selected', '-mixed'),
96
                  (':indeterminate:hover:selected', '-mixed'),
97
                  (':indeterminate:active:selected', '-mixed'),
98
                  (':indeterminate:backdrop:selected', '-mixed'),
99
                  (':indeterminate:disabled:selected', '-mixed'),
100
                  (':indeterminate:disabled:backdrop:selected', '-mixed') {
101
  check#{$s}{
102
    -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")));
103
    -gtk-icon-shadow: none;
104
  }
105
  radio#{$s}{
106
    -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")));
107
    -gtk-icon-shadow: none;
108
  }
109
}
110
111
112
// selection-mode unchecked
113
@each $s,$un in ('','-unchecked'),
114
                  (':hover', '-unchecked-hover'),
115
                  (':active', '-unchecked-active'),
116
                  (':backdrop', '-unchecked-backdrop'),
117
                  (':disabled', '-unchecked-insensitive'),
118
                  (':disabled:backdrop', '-unchecked-backdrop-insensitive') {
119
  .view.content-view check#{$s},
120
  .view.content-view.check#{$s}{
121
    -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-checkbox#{$un}.png"),url("../assets/checkbox#{$un}@2.png"));
122
    -gtk-icon-shadow: none;
123
  }
124
  .view.content-view radio#{$s},
125
  .view.content-view.radio#{$s}{
126
    -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-radio#{$un}.png"),url("../assets/radio#{$un}@2.png"));
127
    -gtk-icon-shadow: none;
128
  }
129
}
130
131
checkbutton.text-button, radiobutton.text-button {
132
  // this is for a nice focus on check and radios text
133
  padding: 2px 0;
134
  outline-offset: 0;
135
136
  label:not(:only-child) {
137
    &:first-child { margin-left: 4px; }
138
    &:last-child { margin-right: 4px; }
139
  }
140
}
141
142
check,
143
radio {
144
  margin: 0 4px;
145
146
  min-height: 16px;
147
  min-width: 16px;
148
  border: none;
149
150
  menu menuitem & {
151
    margin: 0; // this is a workaround for a menu check/radio size allocation issue
152
153
    &, &:hover, &:disabled { //FIXME use button reset mixin
154
      min-height: 14px;
155
      min-width: 14px;
156
      background-image: none;
157
      background-color: transparent;
158
      box-shadow: none;
159
      -gtk-icon-shadow: none;
160
      color: inherit;
161
      border-color: currentColor;
162
      animation: none;
163
    }
164
  }
165
}