Changeset View
Changeset View
Standalone View
Standalone View
src/gtk3/widgets/_button.scss
1 | @charset "UTF-8"; | 1 | @charset "UTF-8"; | ||
---|---|---|---|---|---|
2 | 2 | | |||
3 | 3 | | |||
4 | // buttons | 4 | // buttons | ||
5 | 5 | | |||
6 | @mixin button($t, $c:b_color(normal), $tc:b_color(text)) { | 6 | @mixin button($t) { | ||
7 | // $c:gtk("@theme_button_background_normal"), $tc:gtk("@theme_button_foreground_normal") | ||||
7 | // | 8 | // | ||
8 | // Button drawing function | 9 | // Button drawing function | ||
9 | // | 10 | // | ||
10 | // $t: button type, | 11 | // $t: button type, | ||
11 | // $c: base button color for colored* types | 12 | // $c: base button color for colored* types | ||
12 | // $tc: optional text color for colored* types | 13 | // $tc: optional text color for colored* types | ||
13 | // $edge: set to none to not draw the bottom edge or specify a color to not | 14 | // $edge: set to none to not draw the bottom edge or specify a color to not | ||
14 | // use the default one | 15 | // use the default one | ||
15 | // | 16 | // | ||
16 | // possible $t values: | 17 | // possible $t values: | ||
17 | // normal, hover, active, insensitive, insensitive-active, | 18 | // normal, hover, active, insensitive, insensitive-active, | ||
18 | // backdrop, backdrop-active, backdrop-insensitive, backdrop-insensitive-active, | 19 | // backdrop, backdrop-active, backdrop-insensitive, backdrop-insensitive-active, | ||
19 | // osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated | 20 | // osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated | ||
20 | // | 21 | // | ||
21 | 22 | | |||
22 | @if $t==normal { | 23 | @if $t==normal { | ||
23 | // | 24 | // | ||
24 | // normal button | 25 | // normal button | ||
25 | // | 26 | // | ||
26 | box-shadow: 1px 1px 1px rgba(0,0,0,0.1); | 27 | box-shadow: 1px 1px 1px rgba(0,0,0,0.1); | ||
27 | text-shadow: none; | 28 | text-shadow: none; | ||
28 | -gtk-icon-shadow: none; | 29 | -gtk-icon-shadow: none; | ||
29 | 30 | | |||
30 | color: $tc; | 31 | color: gtk("@theme_button_foreground_normal"); | ||
31 | border-color: if($c!=b_color(normal), $c, $border_color); | 32 | border-color: gtk("@borders"); | ||
32 | background-image: button_gradient($c, normal); | 33 | background-color: gtk("@theme_button_background_normal"); | ||
33 | } | 34 | } | ||
34 | 35 | | |||
35 | @else if $t==hover { | 36 | @else if $t==hover { | ||
36 | // | 37 | // | ||
37 | // hovered button | 38 | // hovered button | ||
38 | // | 39 | // | ||
39 | color: $tc; | 40 | color: gtk("@theme_button_foreground_normal"); | ||
40 | border-color: if($c!=b_color(normal), $c, b_color(hover)); | 41 | border-color: gtk("@theme_button_decoration_hover"); | ||
41 | } | 42 | } | ||
42 | 43 | | |||
43 | @else if $t==active { | 44 | @else if $t==active { | ||
44 | // | 45 | // | ||
45 | // pushed button | 46 | // pushed button | ||
46 | // | 47 | // | ||
47 | color: if($tc==b_color(text),b_color(active-text), $tc); | 48 | color: gtk("@theme_button_foreground_active"); | ||
48 | border-color: if($c!=b_color(normal), $c, b_color(active)); | 49 | border-color: gtk("@theme_button_decoration_focus"); | ||
49 | background-image: if($c!=b_color(normal), button_gradient($c, active), | 50 | background-color: gtk("@theme_button_decoration_focus"); | ||
50 | button_gradient(b_color(active),active)); | | |||
51 | } | 51 | } | ||
52 | 52 | | |||
53 | @else if $t==active-hover { | 53 | @else if $t==active-hover { | ||
54 | // | 54 | // | ||
55 | // | 55 | // | ||
56 | // | 56 | // | ||
57 | color: $tc; | 57 | color: gtk("@theme_button_foreground_normal"); | ||
58 | border-color: if($c!=b_color(normal), transparentize($c, 0.5), b_color(hover)); | 58 | border-color: gtk("@theme_button_decoration_hover"); | ||
59 | background-image: if($c!=b_color(normal), button_gradient(transparentize($c, 0.5),active), | 59 | background-color: gtk("@theme_button_decoration_hover"); | ||
60 | button_gradient(b_color(hover),active)); | | |||
61 | } | 60 | } | ||
62 | 61 | | |||
63 | @else if $t==insensitive { | 62 | @else if $t==insensitive { | ||
64 | // | 63 | // | ||
65 | // insensitive button | 64 | // insensitive button | ||
66 | // | 65 | // | ||
67 | color: if($tc!=b_color(text),insensitive($tc),insensitive(b_color(text))); | 66 | color: gtk("@theme_button_foreground_insensitive"); | ||
68 | border-color: if($c!=b_color(normal), insensitive($c), insensitive($border_color)); | 67 | border-color: gtk("@insensitive_borders"); | ||
69 | background-image: if($c!=b_color(normal), button_gradient(insensitive($c), normal), | 68 | background-color: gtk("@theme_button_background_insensitive"); | ||
70 | button_gradient(insensitive(b_color(normal)), normal)); | 69 | | ||
71 | > .label { color: inherit; } | 70 | > .label { color: inherit; } | ||
72 | } | 71 | } | ||
73 | 72 | | |||
74 | @else if $t==insensitive-active { | 73 | @else if $t==insensitive-active { | ||
75 | // | 74 | // | ||
76 | // insensitive pushed button | 75 | // insensitive pushed button | ||
77 | // | 76 | // | ||
78 | color: if($tc!=b_color(text), insensitive($tc), insensitive(b_color(active-text))); | 77 | color: gtk("@theme_button_foreground_active_insensitive"); | ||
79 | border-color: insensitive(b_color(active)); | 78 | border-color: gtk("@theme_button_decoration_focus_insensitive"); | ||
80 | background-image: if($c!=b_color(normal), button_gradient(insensitive($c), active), | 79 | background-color: gtk("@theme_button_decoration_focus_insensitive"); | ||
81 | button_gradient(insensitive(b_color(active)),active)); | | |||
82 | > .label { color: inherit; } | 80 | > .label { color: inherit; } | ||
83 | } | 81 | } | ||
84 | 82 | | |||
85 | @else if $t==backdrop { | 83 | @else if $t==backdrop { | ||
86 | // | 84 | // | ||
87 | // backdrop button | 85 | // backdrop button | ||
88 | // | 86 | // | ||
89 | color: backdrop($tc); | 87 | color: gtk("@theme_button_foreground_backdrop"); | ||
90 | border-color: backdrop($border_color); | 88 | border-color: gtk("@unfocused_borders"); | ||
91 | background-image: button_gradient(backdrop($c), normal); | 89 | background-color: gtk("@theme_button_background_backdrop"); | ||
92 | } | 90 | } | ||
93 | 91 | | |||
94 | @else if $t==backdrop-active { | 92 | @else if $t==backdrop-active { | ||
95 | // | 93 | // | ||
96 | // backdrop pushed button | 94 | // backdrop pushed button | ||
97 | // | 95 | // | ||
98 | color: if($tc!=b_color(text), backdrop($tc), backdrop(b_color(active-text))); | 96 | color: gtk("@theme_button_foreground_active_backdrop"); | ||
99 | border-color: if($c!=b_color(normal), backdrop($c), backdrop(b_color(active))); | 97 | border-color: gtk("@theme_button_decoration_focus_backdrop"); | ||
100 | background-image: if($c!=b_color(normal), button_gradient(backdrop($c), active), | 98 | background-color: gtk("@theme_button_decoration_focus_backdrop"); | ||
101 | button_gradient(backdrop(b_color(active)),active)); | | |||
102 | } | 99 | } | ||
103 | 100 | | |||
104 | @else if $t==backdrop-insensitive { | 101 | @else if $t==backdrop-insensitive { | ||
105 | // | 102 | // | ||
106 | // backdrop insensitive button | 103 | // backdrop insensitive button | ||
107 | // | 104 | // | ||
108 | color: backdrop(insensitive($tc)); | 105 | color: gtk("@theme_button_foreground_backdrop_insensitive"); | ||
109 | border-color: if($c!=b_color(normal), backdrop(insensitive($c)), backdrop(insensitive($border_color))); | 106 | border-color: gtk("@unfocused_insensitive_borders"); | ||
110 | background-image: button_gradient(backdrop(insensitive($c))); | 107 | background-color: gtk("@theme_button_background_backdrop_insensitive"); | ||
111 | > .label { color: inherit; } | 108 | > .label { color: inherit; } | ||
112 | } | 109 | } | ||
113 | 110 | | |||
114 | @else if $t==backdrop-insensitive-active { | 111 | @else if $t==backdrop-insensitive-active { | ||
115 | // | 112 | // | ||
116 | // backdrop insensitive pushed button | 113 | // backdrop insensitive pushed button | ||
117 | // | 114 | // | ||
118 | color: if($c!=b_color(normal), backdrop(insensitive($tc)), backdrop(insensitive(b_color(active-text)))); | 115 | color: gtk("@theme_button_foreground_active_backdrop_insensitive"); | ||
119 | border-color: if($c!=b_color(normal), backdrop(insensitive($c)), backdrop(insensitive(b_color(active)))); | 116 | border-color: gtk("@theme_button_decoration_focus_backdrop_insensitive"); | ||
120 | background-image: if($c!=b_color(normal), button_gradient(backdrop(insensitive($c)), active), | 117 | background-color: gtk("@theme_button_decoration_focus_backdrop_insensitive"); | ||
121 | button_gradient(backdrop(insensitive(b_color(active))),active)); | | |||
122 | > .label { color: inherit; } | 118 | > .label { color: inherit; } | ||
123 | } | 119 | } | ||
124 | 120 | | |||
125 | @else if $t==undecorated { | 121 | @else if $t==undecorated { | ||
126 | // | 122 | // | ||
127 | // reset | 123 | // reset | ||
128 | // | 124 | // | ||
129 | border-color: transparentize(white,1); //FIXME needed? | 125 | border-color: transparent; | ||
130 | background-color: transparent; | 126 | background-color: transparent; | ||
131 | background-image: none; | 127 | background-image: none; | ||
132 | box-shadow:none; | 128 | box-shadow:none; | ||
133 | color: $tc; | 129 | color: gtk("@theme_button_foreground_normal"); | ||
134 | 130 | | |||
135 | text-shadow: none; | 131 | text-shadow: none; | ||
136 | -gtk-icon-shadow: none; | 132 | -gtk-icon-shadow: none; | ||
137 | } | 133 | } | ||
138 | } | 134 | } | ||
139 | 135 | | |||
140 | /*********** | 136 | /*********** | ||
141 | * Buttons * | 137 | * Buttons * | ||
142 | ***********/ | 138 | ***********/ | ||
143 | 139 | | |||
144 | // stuff for .needs-attention | 140 | // stuff for .needs-attention | ||
145 | $_dot_color: b_color(active); | 141 | $_dot_color: gtk("@theme_button_decoration_focus"); | ||
146 | @keyframes needs_attention { | 142 | @keyframes needs_attention { | ||
147 | from { | 143 | from { | ||
148 | background-image: -gtk-gradient(radial, | 144 | background-image: -gtk-gradient(radial, | ||
149 | center center, 0, | 145 | center center, 0, | ||
150 | center center, 0.01, | 146 | center center, 0.01, | ||
151 | to($_dot_color), | 147 | to($_dot_color), | ||
152 | to(transparent)); | 148 | to(transparent)); | ||
153 | } | 149 | } | ||
154 | to { | 150 | to { | ||
155 | background-image: -gtk-gradient(radial, | 151 | background-image: -gtk-gradient(radial, | ||
156 | center center, 0, | 152 | center center, 0, | ||
157 | center center, 0.5, | 153 | center center, 0.5, | ||
158 | to(s_color(normal)), | 154 | to(gtk("@theme_selected_bg_color")), | ||
159 | to(transparent)); | 155 | to(transparent)); | ||
160 | } | 156 | } | ||
161 | } | 157 | } | ||
162 | 158 | | |||
163 | %buttons { | 159 | %buttons { | ||
164 | 160 | | |||
165 | $_button_transition: all 200ms $ease-out-quad; | 161 | $_button_transition: all 200ms $ease-out-quad; | ||
166 | 162 | | |||
Show All 10 Lines | 169 | &.flat { | |||
177 | // it won't fade out when the pointer leave the button allocation area. To make the transition more evident | 173 | // it won't fade out when the pointer leave the button allocation area. To make the transition more evident | ||
178 | // in this case the duration is increased. | 174 | // in this case the duration is increased. | ||
179 | transition: none; | 175 | transition: none; | ||
180 | &:hover { | 176 | &:hover { | ||
181 | transition: $_button_transition; | 177 | transition: $_button_transition; | ||
182 | transition-duration: 500ms; | 178 | transition-duration: 500ms; | ||
183 | &:active { transition: $_button_transition; } | 179 | &:active { transition: $_button_transition; } | ||
184 | } | 180 | } | ||
185 | &:checked { background-color: $border_color;} | 181 | &:checked { background-color: gtk("@borders");} | ||
186 | } | 182 | } | ||
187 | &:hover { | 183 | &:hover { | ||
188 | @include button(hover); | 184 | @include button(hover); | ||
189 | -gtk-icon-effect: none; // Do we want this? | 185 | -gtk-icon-effect: none; // Do we want this? | ||
190 | } | 186 | } | ||
191 | &:active, &:checked { | 187 | &:active, &:checked { | ||
192 | @include button(active); | 188 | @include button(active); | ||
193 | transition-duration: 50ms; | 189 | transition-duration: 50ms; | ||
Show All 12 Lines | 194 | &:backdrop { | |||
206 | } | 202 | } | ||
207 | &:disabled:active, &:disabled:checked { | 203 | &:disabled:active, &:disabled:checked { | ||
208 | @include button(backdrop-insensitive-active); | 204 | @include button(backdrop-insensitive-active); | ||
209 | } | 205 | } | ||
210 | } | 206 | } | ||
211 | &.flat:backdrop { | 207 | &.flat:backdrop { | ||
212 | -gtk-icon-effect: none; | 208 | -gtk-icon-effect: none; | ||
213 | @include button(undecorated); | 209 | @include button(undecorated); | ||
214 | color: backdrop(b_color(text)); | 210 | color: gtk("@theme_button_foreground_backdrop"); | ||
215 | } | 211 | } | ||
216 | &.flat:disabled { | 212 | &.flat:disabled { | ||
217 | @include button(undecorated); | 213 | @include button(undecorated); | ||
218 | color: insensitive(b_color(text)); | 214 | color: gtk("@theme_button_foreground_insensitive"); | ||
219 | } | 215 | } | ||
220 | &.flat:backdrop:disabled { | 216 | &.flat:backdrop:disabled { | ||
221 | @include button(undecorated); | 217 | @include button(undecorated); | ||
222 | color: backdrop(insensitive(b_color(text))); | 218 | color: gtk("@theme_button_foreground_backdrop_insensitive"); | ||
223 | } | 219 | } | ||
224 | &:disabled { | 220 | &:disabled { | ||
225 | @include button(insensitive); | 221 | @include button(insensitive); | ||
226 | &:active, &:checked { | 222 | &:active, &:checked { | ||
227 | @include button(insensitive-active); | 223 | @include button(insensitive-active); | ||
228 | } | 224 | } | ||
229 | } | 225 | } | ||
230 | separator { | 226 | separator { | ||
Show All 37 Lines | 234 | @at-root %button_basic, & { | |||
268 | // color: $drop_target_color; | 264 | // color: $drop_target_color; | ||
269 | // border-color: $drop_target_color; | 265 | // border-color: $drop_target_color; | ||
270 | // box-shadow: inset 0 0 0 1px $drop_target_color; | 266 | // box-shadow: inset 0 0 0 1px $drop_target_color; | ||
271 | // } | 267 | // } | ||
272 | } | 268 | } | ||
273 | 269 | | |||
274 | @at-root %button_selected, & { | 270 | @at-root %button_selected, & { | ||
275 | row:selected & { | 271 | row:selected & { | ||
276 | border-color: s_color(normal); | 272 | border-color: gtk("@theme_selected_bg_color"); | ||
277 | 273 | | |||
278 | &.flat:not(:active):not(:checked):not(:hover):not(disabled) { | 274 | &.flat:not(:active):not(:checked):not(:hover):not(disabled) { | ||
279 | color: s_color(text); | 275 | color: gtk("@theme_selected_fg_color"); | ||
280 | border-color: transparent; | 276 | border-color: transparent; | ||
281 | 277 | | |||
282 | &:backdrop { color: backdrop(s_color(text)); } | 278 | &:backdrop { | ||
279 | color: gtk("@theme_unfocused_selected_fg_color"); | ||||
280 | } | ||||
283 | } | 281 | } | ||
284 | } | 282 | } | ||
285 | } | 283 | } | ||
286 | 284 | | |||
287 | // Suggested and Destructive Action buttons | 285 | // Suggested and Destructive Action buttons | ||
288 | @each $b_type, $button_color in (suggested-action, b_color(active)), | 286 | @each $b_type, $button_color in (suggested-action, gtk("@theme_button_decoration_focus")), | ||
289 | (destructive-action, $error_color) { | 287 | (destructive-action, gtk("@error_color")) { | ||
290 | &.#{$b_type}, | 288 | &.#{$b_type}, | ||
291 | &.#{$b_type}.osd & { | 289 | &.#{$b_type}.osd & { | ||
292 | @include button(normal, $button_color, b_color(active-text)); | 290 | @include button(normal); | ||
291 | background-color: $button_color; | ||||
292 | color: gtk("@theme_button_foreground_active"); | ||||
293 | &.flat { | 293 | &.flat { | ||
294 | @include button(undecorated); | 294 | @include button(undecorated); | ||
295 | color: $button_color; | 295 | color: $button_color; | ||
296 | } | 296 | } | ||
297 | &:hover { @include button(hover, $button_color, white); } //FIXME no hardcoded colors | 297 | &:hover { | ||
298 | &:active, &:checked { @include button(active, $button_color, white); } | 298 | @include button(hover); | ||
299 | color: white; //! FIXME - No hardcoded colors. | ||||
300 | background-color: $button_color; | ||||
301 | } | ||||
302 | &:active, &:checked { | ||||
303 | @include button(active); | ||||
304 | background-color: $button_color; | ||||
305 | color: white; | ||||
306 | } | ||||
299 | &:backdrop, &.flat:backdrop { | 307 | &:backdrop, &.flat:backdrop { | ||
300 | @include button(backdrop, $button_color, white); | 308 | @include button(backdrop); | ||
309 | background-color: $button_color; | ||||
310 | color: white; | ||||
301 | &:active, &:checked { | 311 | &:active, &:checked { | ||
302 | @include button(backdrop-active, $button_color, white); | 312 | @include button(backdrop-active); | ||
313 | background-color: $button_color; | ||||
314 | color: white; | ||||
303 | } | 315 | } | ||
304 | &:disabled { | 316 | &:disabled { | ||
305 | @include button(backdrop-insensitive); | 317 | @include button(backdrop-insensitive); | ||
306 | &:active, &:checked { | 318 | &:active, &:checked { | ||
307 | @include button(backdrop-insensitive-active, $button_color, white); | 319 | @include button(backdrop-insensitive-active); | ||
320 | background-color: $button_color; | ||||
321 | color: white; | ||||
308 | } | 322 | } | ||
309 | } | 323 | } | ||
310 | } | 324 | } | ||
311 | &.flat:backdrop, &.flat:disabled, &.flat:backdrop:disabled { | 325 | &.flat:backdrop, &.flat:disabled, &.flat:backdrop:disabled { | ||
312 | @include button(undecorated); | 326 | @include button(undecorated); | ||
313 | color: transparentize($button_color, 0.2); | 327 | color: gtkalpha($button_color, 0.8); | ||
314 | } | 328 | } | ||
315 | &:disabled { | 329 | &:disabled { | ||
316 | @include button(insensitive); | 330 | @include button(insensitive); | ||
317 | &:active, &:checked { | 331 | &:active, &:checked { | ||
318 | @include button(insensitive-active, $button_color, white); | 332 | @include button(insensitive-active); | ||
333 | background-color: $button_color; | ||||
334 | color: white; | ||||
319 | } | 335 | } | ||
320 | } | 336 | } | ||
321 | } | 337 | } | ||
322 | } | 338 | } | ||
323 | 339 | | |||
324 | 340 | | |||
325 | .stack-switcher > & { | 341 | .stack-switcher > & { | ||
326 | // to position the needs attention dot, padding is added to the button | 342 | // to position the needs attention dot, padding is added to the button | ||
▲ Show 20 Lines • Show All 90 Lines • ▼ Show 20 Line(s) | |||||
417 | .linked.vertical > combobox > box > button.combo { @extend %linked_vertical_middle; } | 433 | .linked.vertical > combobox > box > button.combo { @extend %linked_vertical_middle; } | ||
418 | .linked.vertical > combobox:first-child > box > button.combo { @extend %linked_vertical:first-child;} | 434 | .linked.vertical > combobox:first-child > box > button.combo { @extend %linked_vertical:first-child;} | ||
419 | .linked.vertical > combobox:last-child > box > button.combo { @extend %linked_vertical:last-child; } | 435 | .linked.vertical > combobox:last-child > box > button.combo { @extend %linked_vertical:last-child; } | ||
420 | .linked.vertical > combobox:only-child > box > button.combo { @extend %linked_vertical:only-child; } | 436 | .linked.vertical > combobox:only-child > box > button.combo { @extend %linked_vertical:only-child; } | ||
421 | 437 | | |||
422 | 438 | | |||
423 | %needs_attention { | 439 | %needs_attention { | ||
424 | animation: needs_attention 150ms ease-in; | 440 | animation: needs_attention 150ms ease-in; | ||
425 | $_dot_shadow: b_color(text); | 441 | $_dot_shadow: gtk("@theme_button_foreground_normal"); | ||
426 | $_dot_shadow_r: 0.5; | 442 | $_dot_shadow_r: 0.5; | ||
427 | background-image: -gtk-gradient(radial, | 443 | background-image: -gtk-gradient(radial, | ||
428 | center center, 0, | 444 | center center, 0, | ||
429 | center center, 0.5, | 445 | center center, 0.5, | ||
430 | to($_dot_color), | 446 | to($_dot_color), | ||
431 | to(transparent)), | 447 | to(transparent)), | ||
432 | -gtk-gradient(radial, | 448 | -gtk-gradient(radial, | ||
433 | center center, 0, | 449 | center center, 0, | ||
▲ Show 20 Lines • Show All 65 Lines • Show Last 20 Lines |