Differential D22877 Diff 62907 src/gtk3/widgets/_button.scss

Changeset View

Standalone View

View Options

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 Lines169 &.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 Lines194 &: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 Lines234 @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