Differential D17154 Diff 48031 src/gtk318/widgets/_button.scss

Changeset View

Standalone View

View Options

src/gtk318/widgets/_button.scss

  • This file was added.
1​
2​// buttons
3​
4​@mixin button($t, $c:b_color(normal), $tc:b_color(text)) {
5​//
6​// Button drawing function
7​//
8​// $t: button type,
9​// $c: base button color for colored* types
10​// $tc: optional text color for colored* types
11​// $edge: set to none to not draw the bottom edge or specify a color to not
12​// use the default one
13​//
14​// possible $t values:
15​// normal, hover, active, insensitive, insensitive-active,
16​// backdrop, backdrop-active, backdrop-insensitive, backdrop-insensitive-active,
17​// osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated
18​//
19​
20​ @if $t==normal {
21​ //
22​ // normal button
23​ //
24​ box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
25​ text-shadow: none;
26​ icon-shadow: none;
27​
28​ color: $tc;
29​ border-color: if($c!=b_color(normal), $c, $border_color);
30​ background-image: button_gradient($c, normal);
31​ }
32​
33​ @else if $t==hover {
34​ //
35​ // hovered button
36​ //
37​ color: $tc;
38​ border-color: if($c!=b_color(normal), $c, b_color(hover));
39​ }
40​
41​ @else if $t==active {
42​ //
43​ // pushed button
44​ //
45​ color: if($tc==b_color(text),b_color(active-text), $tc);
46​ border-color: if($c!=b_color(normal), $c, b_color(active));
47​ background-image: if($c!=b_color(normal), button_gradient($c, active),
48​ button_gradient(b_color(active),active));
49​ }
50​
51​ @else if $t==active-hover {
52​ //
53​ //
54​ //
55​ color: $tc;
56​ border-color: if($c!=b_color(normal), transparentize($c, 0.5), b_color(hover));
57​ background-image: if($c!=b_color(normal), button_gradient(transparentize($c, 0.5),active),
58​ button_gradient(b_color(hover),active));
59​ }
60​
61​ @else if $t==insensitive {
62​ //
63​ // insensitive button
64​ //
65​ color: if($tc!=b_color(text),insensitive($tc),insensitive(b_color(text)));
66​ border-color: if($c!=b_color(normal), insensitive($c), insensitive($border_color));
67​ background-image: if($c!=b_color(normal), button_gradient(insensitive($c), normal),
68​ button_gradient(insensitive(b_color(normal)), normal));
69​ > .label { color: inherit; }
70​ }
71​
72​ @else if $t==insensitive-active {
73​ //
74​ // insensitive pushed button
75​ //
76​ color: if($tc!=b_color(text), insensitive($tc), insensitive(b_color(active-text)));
77​ border-color: insensitive(b_color(active));
78​ background-image: if($c!=b_color(normal), button_gradient(insensitive($c), active),
79​ button_gradient(insensitive(b_color(active)),active));
80​ > .label { color: inherit; }
81​ }
82​
83​ @else if $t==backdrop {
84​ //
85​ // backdrop button
86​ //
87​ color: backdrop($tc);
88​ border-color: backdrop($border_color);
89​ background-image: button_gradient(backdrop($c), normal);
90​ }
91​
92​ @else if $t==backdrop-active {
93​ //
94​ // backdrop pushed button
95​ //
96​ color: if($tc!=b_color(text), backdrop($tc), backdrop(b_color(active-text)));
97​ border-color: if($c!=b_color(normal), backdrop($c), backdrop(b_color(active)));
98​ background-image: if($c!=b_color(normal), button_gradient(backdrop($c), active),
99​ button_gradient(backdrop(b_color(active)),active));
100​ }
101​
102​ @else if $t==backdrop-insensitive {
103​ //
104​ // backdrop insensitive button
105​ //
106​ color: backdrop(insensitive($tc));
107​ border-color: if($c!=b_color(normal), backdrop(insensitive($c)), backdrop(insensitive($border_color)));
108​ background-image: button_gradient(backdrop(insensitive($c)));
109​ > .label { color: inherit; }
110​ }
111​
112​ @else if $t==backdrop-insensitive-active {
113​ //
114​ // backdrop insensitive pushed button
115​ //
116​ color: if($c!=b_color(normal), backdrop(insensitive($tc)), backdrop(insensitive(b_color(active-text))));
117​ border-color: if($c!=b_color(normal), backdrop(insensitive($c)), backdrop(insensitive(b_color(active))));
118​ background-image: if($c!=b_color(normal), button_gradient(backdrop(insensitive($c)), active),
119​ button_gradient(backdrop(insensitive(b_color(active))),active));
120​ > .label { color: inherit; }
121​ }
122​
123​ @else if $t==undecorated {
124​ //
125​ // reset
126​ //
127​ border-color: transparentize(white,1); //FIXME needed?
128​ background-color: transparent;
129​ background-image: none;
130​ box-shadow:none;
131​ color: $tc;
132​
133​ text-shadow: none;
134​ icon-shadow: none;
135​ }
136​}
137​
138​/***********
139​ * Buttons *
140​ ***********/
141​
142​// stuff for .needs-attention
143​$_dot_color: b_color(active);
144​@keyframes needs_attention {
145​ from {
146​ background-image: -gtk-gradient(radial,
147​ center center, 0,
148​ center center, 0.01,
149​ to($_dot_color),
150​ to(transparent));
151​ }
152​ to {
153​ background-image: -gtk-gradient(radial,
154​ center center, 0,
155​ center center, 0.5,
156​ to(s_color(normal)),
157​ to(transparent));
158​ }
159​}
160​
161​%buttons {
162​
163​ $_button_transition: all 200ms $ease-out-quad;
164​
165​ border: 1px solid;
166​ border-radius: $r;
167​ padding: 6px;
168​ background-clip: border-box;
169​ transition: $_button_transition;
170​ @include button(normal);
171​ &.flat {
172​ @include button(undecorated);
173​ // to avoid adiacent buttons borders clashing when transitioning, the transition on the normal state is set
174​ // to none, while it's added back in the hover state, so the button decoration will fade in on hover, but
175​ // it won't fade out when the pointer leave the button allocation area. To make the transition more evident
176​ // in this case the duration is increased.
177​ transition: none;
178​ &:hover {
179​ transition: $_button_transition;
180​ transition-duration: 500ms;
181​ &:active { transition: $_button_transition; }
182​ }
183​ &:checked { background-color: $border_color;}
184​ }
185​ &:hover {
186​ @include button(hover);
187​ -gtk-image-effect: highlight; // Do we want this?
188​ }
189​ &:active, &:checked {
190​ @include button(active);
191​ transition-duration: 50ms;
192​ &:hover {
193​ @include button(active-hover);
194​ }
195​ }
196​ &:backdrop {
197​ @include button(backdrop);
198​ -gtk-image-effect: none;
199​ &:active, &:checked {
200​ @include button(backdrop-active);
201​ }
202​ &:insensitive {
203​ @include button(backdrop-insensitive);
204​ }
205​ &:insensitive:active, &:insensitive:checked {
206​ @include button(backdrop-insensitive-active);
207​ }
208​ }
209​ &.flat:backdrop {
210​ -gtk-image-effect: none;
211​ @include button(undecorated);
212​ color: backdrop(b_color(text));
213​ }
214​ &.flat:insensitive {
215​ @include button(undecorated);
216​ color: insensitive(b_color(text));
217​ }
218​ &.flat:backdrop:insensitive {
219​ @include button(undecorated);
220​ color: backdrop(insensitive(b_color(text)));
221​ }
222​ &:insensitive {
223​ @include button(insensitive);
224​ &:active, &:checked {
225​ @include button(insensitive-active);
226​ }
227​ }
228​}
229​
230​.button {
231​ @extend %buttons;
232​ &.osd {
233​ @extend %buttons;
234​ }
235​ //overlay / OSD style
236​ .osd & {
237​ @extend %buttons;
238​ }
239​
240​ // Suggested and Destructive Action buttons
241​ @each $b_type, $button_color in (suggested-action, b_color(active)),
242​ (destructive-action, $error_color) {
243​ &.#{$b_type},
244​ &.#{$b_type}.osd & {
245​ @include button(normal, $button_color, b_color(active-text));
246​ &.flat {
247​ @include button(undecorated);
248​ color: $button_color;
249​ }
250​ &:hover { @include button(hover, $button_color, white); } //FIXME no hardcoded colors
251​ &:active, &:checked { @include button(active, $button_color, white); }
252​ &:backdrop, &.flat:backdrop {
253​ @include button(backdrop, $button_color, white);
254​ &:active, &:checked {
255​ @include button(backdrop-active, $button_color, white);
256​ }
257​ &:insensitive {
258​ @include button(backdrop-insensitive);
259​ &:active, &:checked {
260​ @include button(backdrop-insensitive-active, $button_color, white);
261​ }
262​ }
263​ }
264​ &.flat:backdrop, &.flat:insensitive, &.flat:backdrop:insensitive {
265​ @include button(undecorated);
266​ color: transparentize($button_color, 0.2);
267​ }
268​ &:insensitive {
269​ @include button(insensitive);
270​ &:active, &:checked {
271​ @include button(insensitive-active, $button_color, white);
272​ }
273​ }
274​ }
275​ }
276​
277​ &.image-button { padding: 6px; }
278​
279​ &.text-button {
280​ padding: 6px
281​ }
282​
283​ &.text-button.image-button {
284​ // those buttons needs uneven horizontal padding, we want the icon side
285​ // to have the image-button padding, while the text side the text-button
286​ // one, so we're adding the missing padding to the label depending on
287​ // its position inside the button
288​ padding: 6px; // same as .button
289​ .label:first-child { padding-left: 8px; }
290​ .label:last-child { padding-right: 8px; }
291​ }
292​
293​ .stack-switcher > & {
294​ // to position the needs attention dot, padding is added to the button
295​ // child, a label needs just lateral padding while an icon needs vertical
296​ // padding added too.
297​ > .label {
298​ padding-left: 6px; // label padding
299​ padding-right: 6px; //
300​ }
301​ > GtkImage {
302​ padding-left: 6px; // image padding
303​ padding-right: 6px; //
304​ padding-top: 3px; //
305​ padding-bottom: 3px; //
306​ }
307​ &.text-button {
308​ padding: 6px; // needed or it will get overridden
309​ }
310​ &.image-button {
311​ // we want image buttons to have a 1:1 aspect ratio, so compensation
312​ // of the padding added to the GtkImage is needed
313​ padding: 3px 0px;
314​ }
315​ &.needs-attention > .label,
316​ &.needs-attention > GtkImage { @extend %needs_attention; }
317​ &.needs-attention:active > .label,
318​ &.needs-attention:active > GtkImage,
319​ &.needs-attention:checked > .label,
320​ &.needs-attention:checked > GtkImage {
321​ animation: none;
322​ background-image: none;
323​ }
324​ }
325​
326​ //inline-toolbar buttons
327​ .inline-toolbar &, .inline-toolbar &:backdrop {
328​ border-radius: $r;
329​ border-width: 1px;
330​ @extend %linked;
331​ }
332​
333​ .primary-toolbar & { icon-shadow: none; }
334​
335​ .linked > &,
336​ .linked > &:hover,
337​ .linked > &:active,
338​ .linked > &:checked,
339​ .linked > &:backdrop { @extend %linked; }
340​
341​ .linked.vertical > &,
342​ .linked.vertical > &:hover,
343​ .linked.vertical > &:active,
344​ .linked.vertical > &:checked,
345​ .linked.vertical > &:backdrop { @extend %linked_vertical; }
346​}
347​
348​/**************
349​ * ComboBoxes *
350​ **************/
351​GtkComboBox {
352​ > .button { padding: 5px 4px; } // Otherwise combos
353​ // are bigger then
354​ // buttons
355​ -GtkComboBox-arrow-scaling: 0.5;
356​ -GtkComboBox-shadow-type: none;
357​
358​// box-shadow: 0 1px $borders_edge;
359​
360​
361​ &:insensitive {
362​ color: insensitive(b_color(text));
363​ text-shadow: none;
364​ icon-shadow: none;
365​ }
366​ &:backdrop {
367​ color: backdrop(b_color(text));
368​ text-shadow: none;
369​ icon-shadow: none;
370​ }
371​ &:backdrop:insensitive {
372​ color: backdrop(insensitive(b_color(text)));
373​ }
374​ .menuitem { text-shadow: none; }
375​ .separator.vertical {
376​ // always disable separators
377​ -GtkWidget-wide-separators: true;
378​ }
379​ &.combobox-entry .entry { @extend %linked; }
380​ &.combobox-entry .button, &.combobox-entry .button:backdrop {
381​ // It is needed to specify the backdrop button or it gets overridden
382​ @extend %linked;
383​ }
384​}
385​
386​%needs_attention {
387​ animation: needs_attention 150ms ease-in;
388​ $_dot_shadow: b_color(text);
389​ $_dot_shadow_r: 0.5;
390​ background-image: -gtk-gradient(radial,
391​ center center, 0,
392​ center center, 0.5,
393​ to($_dot_color),
394​ to(transparent)),
395​ -gtk-gradient(radial,
396​ center center, 0,
397​ center center, $_dot_shadow_r,
398​ to($_dot_shadow),
399​ to(transparent));
400​ background-size: 6px 6px, 6px 6px;
401​ background-repeat: no-repeat;
402​ background-position: right 3px, right 4px;
403​ &:backdrop {background-size: 6px 6px, 0 0;}
404​ &:dir(rtl) {
405​ background-position: left 3px, left 4px;
406​ }
407​}
408​
409​%linked_middle {
410​ border-radius: $r;
411​ &:dir(rtl) {
412​ border-radius: $r; // needed when including %linked_middle:dir(rtl)
413​ }
414​}
415​
416​%linked {
417​ @extend %linked_middle;
418​ &:first-child {
419​ border-radius: $r;
420​ border-style: solid;
421​ }
422​ &:last-child {
423​ border-radius: $r;
424​ &:dir(rtl) { }
425​ }
426​ &:only-child {
427​ border-radius: $r;
428​ border-style: solid;
429​ }
430​}
431​
432​%linked_vertical_middle {
433​ border-style: solid;
434​ border-radius: $r;
435​}
436​
437​%linked_vertical{
438​ @extend %linked_vertical_middle;
439​ &:first-child {
440​ border-radius: $r;
441​ }
442​ &:last-child {
443​ border-radius: $r;
444​ border-style: solid;
445​ }
446​ &:only-child {
447​ border-radius: $r;
448​ border-style: solid;
449​ }
450​}
451​
452​%undecorated_button {
453​ border-color: transparent;
454​ background-color: transparent;
455​ background-image: none;
456​ box-shadow:none;
457​ text-shadow: none;
458​ icon-shadow: none;
459​}