|
98
|
1 // Drawing mixins
|
|
|
2
|
|
|
3 // generic drawing of more complex things
|
|
|
4
|
|
|
5 //
|
|
|
6 // Helper mixin for drawing visible focus rings
|
|
|
7 //
|
|
|
8 // If $target is specified, the focus ring is applied to the specified child element.
|
|
|
9 // If $outer is true, the focus ring extends outward. Otherwise, it extends inward.
|
|
|
10 // If $within is true, use focus-within instead of focus:focus-visible
|
|
|
11 //
|
|
|
12 @mixin focus-ring($target: null, $width: 2px, $offset: -$width, $outer: false, $focus-state: 'focus:focus-visible', $fc: $focus_border_color) {
|
|
|
13 transition-property: outline, outline-width, outline-offset, outline-color;
|
|
|
14 transition-duration: 300ms;
|
|
|
15 animation-timing-function: ease-in-out;
|
|
|
16 & #{$target} {
|
|
|
17 outline: 0 solid transparent;
|
|
|
18 outline-offset: if($outer, $offset + 4px, $offset + $width + 4px);
|
|
|
19 }
|
|
|
20
|
|
|
21 &:#{$focus-state} #{$target} {
|
|
|
22 outline-color: $fc;
|
|
|
23 outline-width: $width;
|
|
|
24 outline-offset: $offset;
|
|
|
25 }
|
|
|
26 }
|
|
|
27
|
|
|
28 @mixin _shadows($list...) {
|
|
|
29 //
|
|
|
30 // Helper mixin to stack up to box-shadows;
|
|
|
31 //
|
|
|
32 $shadows: null;
|
|
|
33
|
|
|
34 @each $shadow in $list {
|
|
|
35 @if $shadow!=none { $shadows: $shadows, $shadow; }
|
|
|
36 }
|
|
|
37
|
|
|
38 box-shadow: $shadows;
|
|
|
39 }
|
|
|
40
|
|
|
41 // entries
|
|
|
42
|
|
|
43 @mixin entry($t, $fc:$focus_border_color) {
|
|
|
44 //
|
|
|
45 // Entries drawing function
|
|
|
46 //
|
|
|
47 // $t: entry type
|
|
|
48 // $fc: focus color
|
|
|
49 //
|
|
|
50 // possible $t values:
|
|
|
51 // normal, focus, insensitive, backdrop, backdrop-insensitive, osd, osd-focus, osd-backdrop, block_cursor;
|
|
|
52 //
|
|
|
53
|
|
|
54 @if $t==normal {
|
|
|
55 color: $text_color;
|
|
|
56 border-color: $borders_color;
|
|
|
57 background-color: $base_color;
|
|
|
58 // for the transition to work the number of shadows in different states needs to match, hence the transparent shadow here.
|
|
|
59 }
|
|
|
60 @if $t==insensitive {
|
|
|
61 color: $insensitive_fg_color;
|
|
|
62 border-color: $borders_color;
|
|
|
63 background-color: $insensitive_bg_color;
|
|
|
64 }
|
|
|
65 @if $t==backdrop {
|
|
|
66 color: $backdrop_text_color;
|
|
|
67 border-color: $backdrop_borders_color;
|
|
|
68 background-color: $backdrop_base_color;
|
|
|
69 }
|
|
|
70 @if $t==backdrop-insensitive {
|
|
|
71 color: $backdrop_insensitive_color;
|
|
|
72 border-color: $backdrop_borders_color;
|
|
|
73 background-color: $insensitive_bg_color;
|
|
|
74 }
|
|
|
75 @if $t==osd {
|
|
|
76 color: $osd_text_color;
|
|
|
77 border-color: $osd_borders_color;
|
|
|
78 background-color: transparentize(opacify($osd_borders_color, 1), 0.5);
|
|
|
79 background-clip: padding-box;
|
|
|
80 box-shadow: none;
|
|
|
81 -gtk-icon-shadow: 0 1px black;
|
|
|
82 }
|
|
|
83 @if $t==osd-focus {
|
|
|
84 color: $osd_text_color;
|
|
|
85 border-color: $selected_bg_color;
|
|
|
86 background-color: transparentize(opacify($osd_borders_color, 1), 0.5);
|
|
|
87 background-clip: padding-box;
|
|
|
88 }
|
|
|
89 @if $t==osd-insensitive {
|
|
|
90 color: $osd_insensitive_fg_color;
|
|
|
91 border-color: $osd_borders_color;
|
|
|
92 background-color: $osd_insensitive_bg_color;
|
|
|
93 background-clip: padding-box;
|
|
|
94 }
|
|
|
95 @if $t==osd-backdrop {
|
|
|
96 color: $osd_text_color;
|
|
|
97 border-color: $osd_borders_color;
|
|
|
98 background-color: transparentize(opacify($osd_borders_color, 1), 0.5);
|
|
|
99 background-clip: padding-box;
|
|
|
100 }
|
|
|
101 @if $t==block_cursor {
|
|
|
102 color: $base_color;
|
|
|
103 background-color: $text_color;
|
|
|
104 }
|
|
|
105 }
|
|
|
106
|
|
|
107 // buttons
|
|
|
108
|
|
|
109 @function _border_color($c, $darker: false) {
|
|
|
110 @if $darker == true { @return darken($c, 20%); }
|
|
|
111 @else { @return darken($c, 15%); }
|
|
|
112 }
|
|
|
113
|
|
|
114 $_default_button_c: lighten($bg_color,2%);
|
|
|
115 @mixin button($t, $c:$_default_button_c, $tc:$fg_color) {
|
|
|
116 //
|
|
|
117 // Button drawing function
|
|
|
118 //
|
|
|
119 // $t: button type,
|
|
|
120 // $c: base button color for colored* types
|
|
|
121 // $tc: optional text color for colored* types
|
|
|
122 //
|
|
|
123 // possible $t values:
|
|
|
124 // normal, hover, active, checked-hover, checked-active, insensitive, insensitive-active,
|
|
|
125 // backdrop, backdrop-active, backdrop-insensitive, backdrop-insensitive-active,
|
|
|
126 // osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated
|
|
|
127 //
|
|
|
128 $_button_shadow: 0 1px 2px transparentize($shadow_color, 0.03);
|
|
|
129
|
|
|
130 @if $t==normal {
|
|
|
131 //
|
|
|
132 // normal button
|
|
|
133 //
|
|
|
134 color: $tc;
|
|
|
135 outline-color: if($c != $_default_button_c, $alt_focus_border_color, $focus_border_color);
|
|
|
136 border-color: if($c!=$_default_button_c, _border_color($c, true), $borders_color); //tint if not default button color
|
|
|
137 background-image: if($variant == 'light', linear-gradient(to top, darken($c, 2%) 2px, $c),
|
|
|
138 linear-gradient(to top, darken($c,1%) 2px, $c));
|
|
|
139 @include _shadows($_button_shadow);
|
|
|
140 }
|
|
|
141
|
|
|
142 @else if $t==hover {
|
|
|
143 //
|
|
|
144 // hovered button
|
|
|
145 //
|
|
|
146 color: $tc;
|
|
|
147 border-color: if($c != $_default_button_c, _border_color($c), $borders_color);
|
|
|
148 @if $variant == 'light' {
|
|
|
149 background-image: linear-gradient(to top, darken($c,16%), darken($c,8%) 1px);
|
|
|
150 @include _shadows($_button_shadow);
|
|
|
151 }
|
|
|
152 @else {
|
|
|
153 background-image: linear-gradient(to top, darken($c,4%) 20%, darken($c, 3%) 90%);
|
|
|
154 @include _shadows($_button_shadow);
|
|
|
155 }
|
|
|
156 }
|
|
|
157
|
|
|
158 @else if $t==active {
|
|
|
159 //
|
|
|
160 // pushed button
|
|
|
161 //
|
|
|
162 color: $tc;
|
|
|
163 border-color: if($c != $_default_button_c, _border_color($c), $borders_color);
|
|
|
164 background-image: if($variant == 'light', image(darken($c, 14%)), image(darken($c, 9%)));
|
|
|
165 box-shadow: none;
|
|
|
166 }
|
|
|
167
|
|
|
168 @else if $t==checked-hover {
|
|
|
169 //
|
|
|
170 // pushed togglebutton hover
|
|
|
171 //
|
|
|
172 color: $tc;
|
|
|
173 border-color: if($c != $_default_button_c, _border_color($c), $borders_color);
|
|
|
174 background-image: if($variant == 'light', image(darken($c, 18%)), image(darken($c, 12%)));
|
|
|
175 box-shadow: none;
|
|
|
176 }
|
|
|
177
|
|
|
178 @else if $t==checked-active {
|
|
|
179 //
|
|
|
180 // pushed togglebutton pushed further :)
|
|
|
181 //
|
|
|
182 color: $tc;
|
|
|
183 border-color: if($c != $_default_button_c, _border_color($c), $borders_color);
|
|
|
184 background-image: if($variant == 'light', image(darken($c, 22%)), image(darken($c, 14%)));
|
|
|
185 box-shadow: none;
|
|
|
186 }
|
|
|
187
|
|
|
188 @else if $t==insensitive {
|
|
|
189 //
|
|
|
190 // insensitive button
|
|
|
191 //
|
|
|
192 $_bg: if($c != $_default_button_c, mix($c, $base_color, 85%), $insensitive_bg_color);
|
|
|
193
|
|
|
194 color: if($tc != $fg_color, mix($tc, $_bg, 50%), $insensitive_fg_color);
|
|
|
195 border-color: if($c != $_default_button_c, _border_color($c), $insensitive_borders_color);
|
|
|
196 background-image: image($_bg);
|
|
|
197 }
|
|
|
198
|
|
|
199 @else if $t==insensitive-active {
|
|
|
200 //
|
|
|
201 // insensitive pushed button
|
|
|
202 //
|
|
|
203 $_bg: if($variant == 'light', darken(mix($c, $base_color, 85%), 8%), darken(mix($c, $base_color, 85%), 6%));
|
|
|
204 $_bc: if($c != $_default_button_c, _border_color($c), $insensitive_borders_color);
|
|
|
205
|
|
|
206 color: if($c != $_default_button_c, mix($tc, $_bg, 60%), $insensitive_fg_color);
|
|
|
207 border-color: $_bc;
|
|
|
208 background-image: image($_bg);
|
|
|
209 box-shadow: none;
|
|
|
210 }
|
|
|
211
|
|
|
212 @else if $t==backdrop {
|
|
|
213 //
|
|
|
214 // backdrop button
|
|
|
215 //
|
|
|
216 $_bg: if($c != $_default_button_c, $c, $backdrop_bg_color);
|
|
|
217 $_bc: if($variant == 'light', $c, _border_color($c));
|
|
|
218
|
|
|
219 color: if($tc != $fg_color, mix($tc, $_bg, 80%), $backdrop_fg_color);
|
|
|
220 border-color: if($c != $_default_button_c, $_bc, $backdrop_borders_color);
|
|
|
221 background-image: image($_bg);
|
|
|
222 box-shadow: none;
|
|
|
223 }
|
|
|
224
|
|
|
225 @else if $t==backdrop-active {
|
|
|
226 //
|
|
|
227 // backdrop pushed button
|
|
|
228 //
|
|
|
229 $_bg: if($variant == 'light', darken(mix($c, $base_color, 85%), 8%), darken(mix($c, $base_color, 85%), 4%));
|
|
|
230 $_bc: if($variant == 'light', $_bg ,_border_color($c));
|
|
|
231
|
|
|
232 color: if($tc != $fg_color, mix($tc, $_bg, 80%), $backdrop_fg_color);
|
|
|
233 border-color: if($c != $_default_button_c, $_bc, $backdrop_borders_color);
|
|
|
234 background-image: image($_bg);
|
|
|
235 box-shadow: none;
|
|
|
236 }
|
|
|
237
|
|
|
238 @else if $t==backdrop-insensitive {
|
|
|
239 //
|
|
|
240 // backdrop insensitive button
|
|
|
241 //
|
|
|
242
|
|
|
243 $_bg: if($c != $_default_button_c, mix($c, $base_color, 85%), $insensitive_bg_color);
|
|
|
244 $_bc: if($variant == 'light', $_bg,_border_color($c));
|
|
|
245
|
|
|
246 color: if($c != $_default_button_c, mix($tc, $_bg, 35%), $backdrop_insensitive_color);
|
|
|
247 border-color: if($c != $_default_button_c, $_bc, $backdrop_borders_color);
|
|
|
248 background-image: image($_bg);
|
|
|
249 box-shadow: none;
|
|
|
250 }
|
|
|
251
|
|
|
252 @else if $t==backdrop-insensitive-active {
|
|
|
253 //
|
|
|
254 // backdrop insensitive pushed button
|
|
|
255 //
|
|
|
256
|
|
|
257 $_bg: if($variant == 'light', darken(mix($c, $base_color, 85%), 8%), darken(mix($c, $base_color, 85%), 4%));
|
|
|
258 $_bc: if($variant == 'light', $_bg, _border_color($c));
|
|
|
259
|
|
|
260 color: if($c != $_default_button_c, mix($tc, $_bg, 35%), $backdrop_insensitive_color);
|
|
|
261 border-color: if($c != $_default_button_c, $_bc, $backdrop_borders_color);
|
|
|
262 background-image: image($_bg);
|
|
|
263 box-shadow: none;
|
|
|
264 }
|
|
|
265
|
|
|
266 @else if $t==osd {
|
|
|
267 //
|
|
|
268 // normal osd button
|
|
|
269 //
|
|
|
270 $_bg: if($c != $_default_button_c, transparentize($c, 0.5), $osd_bg_color);
|
|
|
271
|
|
|
272 color: $osd_fg_color;
|
|
|
273 outline-color: if($c != $_default_button_c, $alt_focus_border_color, $focus_border_color);
|
|
|
274 border-color: $osd_borders_color;
|
|
|
275 background-color: transparent;
|
|
|
276 background-image: image($_bg);
|
|
|
277 background-clip: padding-box;
|
|
|
278 }
|
|
|
279
|
|
|
280 @else if $t==osd-hover {
|
|
|
281 //
|
|
|
282 // active osd button
|
|
|
283 //
|
|
|
284 $_bg: if($c != $_default_button_c, transparentize($c, 0.3), darken($osd_bg_color, 10%));
|
|
|
285
|
|
|
286 color: white;
|
|
|
287 border-color: $osd_borders_color;
|
|
|
288 background-color: transparent;
|
|
|
289 background-image: image($_bg);
|
|
|
290 background-clip: padding-box;
|
|
|
291 }
|
|
|
292
|
|
|
293 @else if $t==osd-active {
|
|
|
294 //
|
|
|
295 // active osd button
|
|
|
296 //
|
|
|
297 $_bg: if($c != $_default_button_c, $c, darken($osd_bg_color, 20%));
|
|
|
298
|
|
|
299 color: white;
|
|
|
300 border-color: $osd_borders_color;
|
|
|
301 background-color: transparent;
|
|
|
302 background-image: image($_bg);
|
|
|
303 background-clip: padding-box;
|
|
|
304 box-shadow: none;
|
|
|
305 }
|
|
|
306
|
|
|
307 @else if $t==osd-insensitive {
|
|
|
308 //
|
|
|
309 // insensitive osd button
|
|
|
310 //
|
|
|
311 color: $osd_insensitive_fg_color;
|
|
|
312 border-color: $osd_borders_color;
|
|
|
313 background-color: transparent;
|
|
|
314 background-image: image($osd_insensitive_bg_color);
|
|
|
315 background-clip: padding-box;
|
|
|
316 }
|
|
|
317
|
|
|
318 @else if $t==osd-backdrop {
|
|
|
319 //
|
|
|
320 // backdrop osd button
|
|
|
321 //
|
|
|
322 $_bg: if($c != $_default_button_c, transparentize($c, 0.5), $osd_bg_color);
|
|
|
323
|
|
|
324 color: $osd_fg_color;
|
|
|
325 border-color: $osd_borders_color;
|
|
|
326 background-color: transparent;
|
|
|
327 background-image: image($_bg);
|
|
|
328 background-clip: padding-box;
|
|
|
329 }
|
|
|
330
|
|
|
331 @else if $t==undecorated {
|
|
|
332 //
|
|
|
333 // reset
|
|
|
334 //
|
|
|
335 border-color: transparent;
|
|
|
336 background-color: transparent;
|
|
|
337 background-image: none;
|
|
|
338 box-shadow: none;
|
|
|
339 }
|
|
|
340 @else if $t==undecorated-hover {
|
|
|
341 border-color: transparent;
|
|
|
342 background-image: none;
|
|
|
343 box-shadow: none;
|
|
|
344 @if $variant == 'light' {
|
|
|
345 background-color: darken($c,14%);
|
|
|
346 } @else {
|
|
|
347 background-color: darken($c,1%);
|
|
|
348 }
|
|
|
349 }
|
|
|
350 @else if $t==undecorated-active {
|
|
|
351 border-color: transparent;
|
|
|
352 background-image: none;
|
|
|
353 box-shadow: none;
|
|
|
354 @if $variant == 'light' {
|
|
|
355 background-color: darken($c,20%);
|
|
|
356 }
|
|
|
357 @else {
|
|
|
358 background-color: darken($c,5%);
|
|
|
359 }
|
|
|
360 }
|
|
|
361 }
|
|
|
362
|
|
|
363 @mixin headerbar_fill($c:$headerbar_bg_color, $ov: none) {
|
|
|
364 //
|
|
|
365 // headerbar fill
|
|
|
366 //
|
|
|
367 // $c: base color
|
|
|
368 // $ov: a background layer for background shorthand (hence no commas!)
|
|
|
369 //
|
|
|
370 $gradient: linear-gradient(to top, darken($c, 2%), lighten($c, 1%));
|
|
|
371
|
|
|
372 @if $variant == 'dark' { $gradient: linear-gradient(to top, lighten($c, 4%), lighten($c, 6%)); }
|
|
|
373
|
|
|
374 @if $ov != none { background: $c $ov, $gradient; }
|
|
|
375 @else { background: $c $gradient; }
|
|
|
376
|
|
|
377 }
|
|
|
378
|
|
|
379 @mixin overshoot($p, $t:normal, $c:$fg_color) {
|
|
|
380 //
|
|
|
381 // overshoot
|
|
|
382 //
|
|
|
383 // $p: position
|
|
|
384 // $t: type
|
|
|
385 // $c: base color
|
|
|
386 //
|
|
|
387 // possible $p values:
|
|
|
388 // top, bottom, right, left
|
|
|
389 //
|
|
|
390 // possible $t values:
|
|
|
391 // normal, backdrop
|
|
|
392 //
|
|
|
393
|
|
|
394 $_small_gradient_length: 3%;
|
|
|
395 $_big_gradient_length: 50%;
|
|
|
396
|
|
|
397 $_small_gradient_size: 100% $_small_gradient_length;
|
|
|
398 $_big_gradient_size: 100% $_big_gradient_length;
|
|
|
399
|
|
|
400 @if $p==right or $p==left {
|
|
|
401 $_small_gradient_size: $_small_gradient_length 100%;
|
|
|
402 $_big_gradient_size: $_big_gradient_length 100%;
|
|
|
403 }
|
|
|
404
|
|
|
405 $_small_gradient_color: $c;
|
|
|
406 $_big_gradient_color: transparentize($c, 0.93);
|
|
|
407
|
|
|
408 @if $c==$fg_color {
|
|
|
409 $_small_gradient_color: darken($borders_color, 10%);
|
|
|
410 $_big_gradient_color: transparentize($fg_color, 0.93);
|
|
|
411
|
|
|
412 @if $t==backdrop { $_small_gradient_color: $backdrop_borders_color; }
|
|
|
413 }
|
|
|
414
|
|
|
415 $_small_gradient: radial-gradient(farthest-side at $p,
|
|
|
416 $_small_gradient_color 85%,
|
|
|
417 transparentize($_small_gradient_color, 1));
|
|
|
418
|
|
|
419 $_big_gradient: radial-gradient(farthest-side at $p,
|
|
|
420 $_big_gradient_color,
|
|
|
421 transparentize($_big_gradient_color, 1));
|
|
|
422
|
|
|
423 @if $t==normal {
|
|
|
424 background-image: $_small_gradient, $_big_gradient;
|
|
|
425 background-size: $_small_gradient_size, $_big_gradient_size;
|
|
|
426 }
|
|
|
427
|
|
|
428 @else if $t==backdrop {
|
|
|
429 background-image: $_small_gradient;
|
|
|
430 background-size: $_small_gradient_size;
|
|
|
431 }
|
|
|
432
|
|
|
433 background-repeat: no-repeat;
|
|
|
434 background-position: $p;
|
|
|
435
|
|
|
436 background-color: transparent; // reset some properties to be sure to not inherit them somehow
|
|
|
437 border: none; //
|
|
|
438 box-shadow: none; //
|
|
|
439 }
|
|
|
440
|
|
|
441 /***************************
|
|
|
442 * Check and Radio buttons *
|
|
|
443 ***************************/
|
|
|
444
|
|
|
445 @mixin check($t, $c:$checkradio_bg_color, $tc:$checkradio_fg_color, $checked: false) {
|
|
|
446 // Check/Radio drawing function
|
|
|
447 //
|
|
|
448 // $t: check/radio type,
|
|
|
449 // $c: base button color for colored* types
|
|
|
450 // $tc: optional text color for colored* types
|
|
|
451 // $checked: bool to chose between checked/unchecked
|
|
|
452 //
|
|
|
453 // possible $t values:
|
|
|
454 // normal, hover, active, insensitive, backdrop, backdrop-insensitive, menu
|
|
|
455
|
|
|
456 $_border_color: if($c==$checkradio_bg_color, $checkradio_borders_color, $alt_borders_color);
|
|
|
457 $_dim_border_color: transparentize($_border_color, if($variant == 'light', 0.3, 0.7));
|
|
|
458
|
|
|
459 @if $t==normal {
|
|
|
460 background-clip: if($checked, border-box, padding-box);
|
|
|
461 background-image: linear-gradient(to bottom, lighten($c, 5%) 20%, $c 90%);
|
|
|
462 border-color: $_border_color;
|
|
|
463 box-shadow: 0 1px transparentize(black, 0.95);
|
|
|
464 color: $tc;
|
|
|
465 }
|
|
|
466
|
|
|
467 @if $t==hover {
|
|
|
468 background-image: if($c == white, image(darken($c, 5%)), linear-gradient(to bottom, lighten($c, 9%) 10%, lighten($c, 4%) 90%));
|
|
|
469 }
|
|
|
470
|
|
|
471 @if $t==active {
|
|
|
472 box-shadow: inset 0 1px if($variant == 'light', rgba(0, 0, 0, 0.2), black);
|
|
|
473 background-image: if($c == white, image(darken($c, 15%)), image(darken($c, 5%)));
|
|
|
474 }
|
|
|
475
|
|
|
476 @if $t==insensitive {
|
|
|
477 box-shadow: none;
|
|
|
478 color: transparentize($tc, 0.3);
|
|
|
479 }
|
|
|
480
|
|
|
481 @if $t==backdrop {
|
|
|
482 background-image: image($c);
|
|
|
483 box-shadow: none;
|
|
|
484 color: $tc;
|
|
|
485 }
|
|
|
486
|
|
|
487 @if $t==backdrop-insensitive {
|
|
|
488 box-shadow: none;
|
|
|
489 color: transparentize($tc, 0.3);
|
|
|
490 }
|
|
|
491
|
|
|
492 @if $t==menu {
|
|
|
493 transform: scale(0.8);
|
|
|
494 border-width: 1.2px;
|
|
|
495 border-color: transparent;
|
|
|
496 box-shadow: none;
|
|
|
497 background-image: image(transparent);
|
|
|
498 color: $tc;
|
|
|
499 }
|
|
|
500
|
|
|
501 @if $t==menu-active {
|
|
|
502 transform: scale(0.8);
|
|
|
503 border-width: 1.2px;
|
|
|
504 color: $tc;
|
|
|
505 box-shadow: none;
|
|
|
506 background-image: image(transparent);
|
|
|
507 }
|
|
|
508 }
|
