themes/whitey/gtk-3.22/_drawing.scss (view raw)
1//
2// Drawing mixins
3//
4// Generic drawing of more complex things
5//
6
7
8//
9// Scaling function
10//
11
12$ref_size: 13.3px; // = 10pt = 1em
13
14@function rem($px, $fs: $ref_size) {
15 @return ($px / $fs ) * 1rem;
16}
17
18
19//
20// Default shadows
21//
22
23$z-depth-1: 0 1px 1px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.16);
24$z-depth-2: 0 2px 2px rgba(0, 0, 0, 0.12), 0 3px 4px rgba(0, 0, 0, 0.20);
25$z-depth-3: 0 5px 5px rgba(0, 0, 0, 0.16), 0 4px 4px rgba(0, 0, 0, 0.20);
26$z-depth-4: 0 6px 8px -4px rgba(0, 0, 0, 0.16),
27 0 10px 6px rgba(0, 0, 0, 0.20);
28$z-depth-5: 0 8px 10px -4px rgba(0, 0, 0, 0.20),
29 0 12px 8px rgba(0, 0, 0, 0.24);
30
31// z-depth-1 actual shadows + dummy z-depth-2 area
32$z-depth-1-backdrop: 0 2px 2px transparent,
33 0 3px 4px transparent,
34 0 3px 3px -1px rgba(0, 0, 0, 0.08);
35// z-depth-2 actual shadows + dummy z-depth-4 area
36$z-depth-2-backdrop: 0 10px 6px transparent,
37 0 6px 8px -4px transparent,
38 0 2px 2px rgba(0, 0, 0, 0.12),
39 0 3px 4px rgba(0, 0, 0, 0.20);
40
41
42//
43// Header-bar shadows
44//
45
46$header-shadow-light: 0 1px 1px rgba(0, 0, 0, 0.16),
47 0 1px 2px rgba(0, 0, 0, 0.26),
48 0 2px 3px rgba(0, 0, 0, 0.32);
49$header-shadow-dark: 0 1px 1px rgba(0, 0, 0, 0.06),
50 0 1px 2px rgba(0, 0, 0, 0.14),
51 0 2px 3px rgba(0, 0, 0, 0.20);
52$sub-header-shadow-light-ltr: 0 1px 1px rgba(0, 0, 0, 0.16),
53 0 1px 2px rgba(0, 0, 0, 0.26),
54 0 2px 3px rgba(0, 0, 0, 0.32),
55 -5px 0 0 -1px $inverted_dark_color,
56 -2px 0 0 -1px $borders_color;
57$sub-header-shadow-dark-ltr: 0 1px 1px rgba(0, 0, 0, 0.06),
58 0 1px 2px rgba(0, 0, 0, 0.14),
59 0 2px 3px rgba(0, 0, 0, 0.20),
60 -5px 0 0 -1px $inverted_dark_color,
61 -2px 0 0 -1px $borders_color;
62$sub-header-shadow-light-rtl: 0 1px 1px rgba(0, 0, 0, 0.16),
63 0 1px 2px rgba(0, 0, 0, 0.26),
64 0 2px 3px rgba(0, 0, 0, 0.32),
65 5px 0 0 -1px $inverted_dark_color,
66 2px 0 0 -1px $borders_color;
67$sub-header-shadow-dark-rtl: 0 1px 1px rgba(0, 0, 0, 0.06),
68 0 1px 2px rgba(0, 0, 0, 0.14),
69 0 2px 3px rgba(0, 0, 0, 0.20),
70 5px 0 0 -1px $inverted_dark_color,
71 2px 0 0 -1px $borders_color;
72$selected-header-shadow-light-ltr: 0 1px 1px rgba(0, 0, 0, 0.16),
73 0 1px 2px rgba(0, 0, 0, 0.26),
74 0 2px 3px rgba(0, 0, 0, 0.32),
75 -5px 0 0 -1px $selected_bg_color,
76 -2px 0 0 -1px $solid_dark_borders_color;
77$selected-header-shadow-dark-ltr: 0 1px 1px rgba(0, 0, 0, 0.06),
78 0 1px 2px rgba(0, 0, 0, 0.14),
79 0 2px 3px rgba(0, 0, 0, 0.20),
80 -5px 0 0 -1px $selected_bg_color,
81 -2px 0 0 -1px $solid_dark_borders_color;
82$selected_header-shadow-light-rtl: 0 1px 1px rgba(0, 0, 0, 0.16),
83 0 1px 2px rgba(0, 0, 0, 0.26),
84 0 2px 3px rgba(0, 0, 0, 0.32),
85 5px 0 0 -1px $selected_bg_color,
86 2px 0 0 -1px $solid_dark_borders_color;
87$selected-header-shadow-dark-rtl: 0 1px 1px rgba(0, 0, 0, 0.06),
88 0 1px 2px rgba(0, 0, 0, 0.14),
89 0 2px 3px rgba(0, 0, 0, 0.20),
90 5px 0 0 -1px $selected_bg_color,
91 2px 0 0 -1px $solid_dark_borders_color;
92
93
94//
95// Side-bar shadows
96//
97
98$sidebar-light-ltr: inset -2px 2px 2px -2px rgba(0, 0, 0, 0.05),
99 inset -3px 3px 3px -2px rgba(0, 0, 0, 0.05);
100$sidebar-light-rtl: inset 2px 2px 2px -2px rgba(0, 0, 0, 0.05),
101 inset 3px 3px 3px -2px rgba(0, 0, 0, 0.05);
102$sidebar-dark-ltr: inset -2px 2px 1px -2px rgba(0, 0, 0, 0.02),
103 inset -3px 3px 3px -2px rgba(0, 0, 0, 0.06);
104$sidebar-dark-rtl: inset 2px 2px 1px -2px rgba(0, 0, 0, 0.02),
105 inset 3px 3px 3px -2px rgba(0, 0, 0, 0.06);
106
107
108//
109// Inline-toolbar shadows
110//
111
112$inline-shadow-light: inset 0 1px 2px -1px rgba(0, 0, 0, 0.02),
113 inset 0 2px 3px -2px rgba(0, 0, 0, 0.07);
114$inline-shadow-dark: inset 0 1px 2px -1px rgba(0, 0, 0, 0.03),
115 inset 0 3px 4px -3px rgba(0, 0, 0, 0.06);
116
117
118//
119// Info-bar shadows
120//
121// $infobar-shadow-light: inset 0 1px 2px rgba(0, 0, 0, 0.08);
122// $infobar-shadow-dark: inset 0 1px 2px rgba(0, 0, 0, 0.04);
123
124
125//
126// Reorderable-tab shadows
127//
128
129$tab-shadow-light: -1px 0 2px rgba(0, 0, 0, 0.02),
130 -1px 0 4px rgba(0, 0, 0, 0.02),
131 1px 0 2px rgba(0, 0, 0, 0.02),
132 1px 0 4px rgba(0, 0, 0, 0.02);
133$tab-shadow-dark: -1px 0 2px rgba(0, 0, 0, 0.02),
134 -1px 0 4px rgba(0, 0, 0, 0.03),
135 1px 0 2px rgba(0, 0, 0, 0.02),
136 1px 0 4px rgba(0, 0, 0, 0.03);
137
138
139//
140// Menubar shadows
141//
142
143$menubar-shadow: inset 0 2px 2px -3px rgba(0, 0, 0, 0.26),
144 inset 0 5px 3px -5px rgba(0, 0, 0, 0.39),
145 inset 0 -1px $borders_color;
146
147
148//
149// Toolbar shadows
150//
151
152$toolbar-shadow-light: inset 0 1px 1px rgba(0, 0, 0, 0.18),
153 inset 0 4px 2px -4px rgba(0, 0, 0, 0.20),
154 inset 0 8px 3px -5px rgba(0, 0, 0, 0.24);
155$toolbar-shadow-dark: inset 0 1px 1px rgba(0, 0, 0, 0.22),
156 inset 0 4px 3px -4px rgba(0, 0, 0, 0.22),
157 inset 0 8px 3px -5px rgba(0, 0, 0, 0.24);
158
159
160/******************
161 * Ripple effects *
162 ******************/
163
164//
165// Ripple effects
166//
167
168@keyframes ripple_effect {
169//
170// Ripple effect drawing function
171//
172
173 from {
174 background-image: -gtk-gradient(radial,
175 center center, 0,
176 center center, 0.001,
177 to(gtkalpha(currentColor, 0.1)),
178 to(transparent)),
179 linear-gradient(to bottom, gtkalpha(currentColor, 0), gtkalpha(currentColor, 0));
180 }
181 to {
182 background-image: -gtk-gradient(radial,
183 center center, 0,
184 center center, 0.4,
185 to(gtkalpha(currentColor, 0.1)),
186 to(transparent)),
187 linear-gradient(to bottom, gtkalpha(currentColor, 0.1), gtkalpha(currentColor, 0.1));
188 }
189}
190
191@keyframes flat_ripple_effect {
192 from {
193 background-image: -gtk-gradient(radial,
194 center center, 0,
195 center center, 0.001,
196 to(gtkalpha(currentColor, 0.1)),
197 to(transparent)),
198 linear-gradient(to bottom, gtkalpha(currentColor, 0.1), gtkalpha(currentColor, 0.1));
199 }
200 to {
201 background-image: -gtk-gradient(radial,
202 center center, 0,
203 center center, 0.4,
204 to(gtkalpha(currentColor, 0.1)),
205 to(transparent)),
206 linear-gradient(to bottom, gtkalpha(currentColor, 0.1), gtkalpha(currentColor, 0.1));
207 }
208}
209
210@keyframes list_ripple_effect {
211 from {
212 background-image: -gtk-gradient(radial,
213 center center, 0,
214 center center, 0.001,
215 to(gtkalpha(currentColor, 0)),
216 to(transparent)),
217 linear-gradient(to bottom, gtkalpha(currentColor, 0.05), gtkalpha(currentColor, 0.05));
218 }
219 to {
220 background-image: -gtk-gradient(radial,
221 center center, 0,
222 center center, 0.4,
223 to(gtkalpha(currentColor, 0.1)),
224 to(transparent)),
225 linear-gradient(to bottom, gtkalpha(currentColor, 0.1), gtkalpha(currentColor, 0.1));
226 }
227}
228
229
230//
231// Entries
232//
233
234@mixin entry($t, $fc:$selected_bg_color) {
235//
236// Entries drawing function
237//
238// $t: entry type
239// $fc: focus color
240//
241// possible $t values:
242// normal, focus, insensitive, flat-normal, flat-focus, flat-insensitive;
243//
244
245 @if $t==normal {
246 border-radius: 0;
247 -gtk-outline-radius: 0;
248 border-color: $solid_light_borders_color;
249 border-image: -gtk-gradient(radial,
250 center bottom, 0,
251 center bottom, 0.5,
252 to($track_color),
253 to(transparent))
254 0 0 1 / 0 0 1px;
255 background-color: transparent;
256 color: $secondary_fg_color;
257 }
258 @if $t==focus {
259 border-color: $solid_light_borders_color;
260 border-image: -gtk-gradient(radial,
261 center bottom, 0,
262 center bottom, 0.5,
263 to($fc),
264 to(transparent))
265 0 0 2 / 0 0 2px;
266 color: $fg_color;
267 transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1),
268 box-shadow 0 cubic-bezier(0.4, 0, 0.2, 1) 0.2s, color 0;
269 }
270 @if $t==insensitive {
271 border-color: $solid_light_borders_color;
272 border-image: -gtk-gradient(radial,
273 center bottom, 0,
274 center bottom, 0.5,
275 to($track_color),
276 to(transparent))
277 0 0 1 / 0 0 1px;
278 background-color: transparent;
279 color: $insensitive_fg_color;
280 }
281 @if $t==flat-normal {
282 border-radius: 0;
283 -gtk-outline-radius: 0;
284 border-color: $solid_light_borders_color;
285 border-image: -gtk-gradient(radial,
286 center bottom, 0,
287 center bottom, 0.5,
288 to($track_color),
289 to(transparent))
290 0 0 1 / 0 0 1px;
291 background-color: transparent;
292 color: $secondary_fg_color;
293 }
294 @if $t==flat-focus {
295 border-color: $solid_light_borders_color;
296 border-image: -gtk-gradient(radial,
297 center bottom, 0,
298 center bottom, 0.5,
299 to($fc),
300 to(transparent))
301 0 0 2 / 0 0 2px;
302 color: $fg_color;
303 transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1),
304 box-shadow 0 cubic-bezier(0.4, 0, 0.2, 1) 0.2s, color 0;
305 }
306 @if $t==flat-insensitive {
307 border-color: $solid_light_borders_color;
308 border-image: -gtk-gradient(radial,
309 center bottom, 0,
310 center bottom, 0.5,
311 to($track_color),
312 to(transparent))
313 0 0 1 / 0 0 1px;
314 color: $insensitive_fg_color;
315 }
316}
317
318
319//
320// Buttons
321//
322
323@mixin button($t, $c:$light_color, $tc:$fg_color) {
324//
325// Button drawing function
326//
327// $t: button type,
328// $c: base button color for colored* types
329// $tc: optional text color for colored* types
330//
331// possible $t values:
332// normal, hover, active, insensitive, checked, checked-insensitive,
333// flat-normal, flat-hover, flat-active, flat-insensitive, flat-checked,
334// flat-checked-insensitive, undecorated
335//
336
337 @if $t==normal {
338 //
339 // normal button
340 //
341 box-shadow: $z-depth-1,
342 inset 0 1px $highlight_color;
343 background-color: $c;
344 background-image: -gtk-gradient(radial,
345 center center, 0,
346 center center, 0.5,
347 to(gtkalpha(currentColor, 0)),
348 to(transparent)),
349 linear-gradient(to bottom, gtkalpha(currentColor, 0), gtkalpha(currentColor, 0));
350 color: $secondary_fg_color;
351 }
352
353 @else if $t==hover {
354 //
355 // hovered button
356 //
357 box-shadow: $z-depth-2,
358 inset 0 1px $highlight_color;
359 background-image: -gtk-gradient(radial,
360 center center, 0,
361 center center, 0.5,
362 to(gtkalpha(currentColor, 0)),
363 to(transparent)),
364 linear-gradient(to bottom, gtkalpha(currentColor, 0), gtkalpha(currentColor, 0));
365 color: $fg_color;
366 }
367
368 @else if $t==active {
369 //
370 // pushed button
371 //
372 box-shadow: $z-depth-2,
373 inset 0 1px $highlight_color;
374 color: $fg_color;
375 transition-duration: 0;
376 animation: ripple_effect 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
377 }
378 @else if $t==insensitive {
379 //
380 // insensitive button
381 //
382 box-shadow: none;
383 background-color: $track_color;
384 color: if($tc!=$fg_color, $insensitive_fg_color,
385 $insensitive_secondary_fg_color);
386 > label { color: inherit; }
387 }
388 @else if $t==checked {
389 //
390 // checked button
391 //
392 box-shadow: $z-depth-1,
393 inset 0 1px $highlight_color;
394 background-color: $selected_bg_color;
395 color: $selected_fg_color;
396 }
397 @else if $t==checked-insensitive {
398 //
399 // checked insensitive button
400 //
401 box-shadow: none;
402 background-color: $track_color;
403 color: gtkopacity($selected_bg_color, 0.4);
404 > label { color: inherit; }
405 }
406
407 @else if $t==flat-normal {
408 //
409 // normal flat button
410 //
411 box-shadow: none;
412 background-color: transparent;
413 background-image: -gtk-gradient(radial,
414 center center, 0,
415 center center, 0.5,
416 to(gtkalpha(currentColor, 0)),
417 to(transparent)),
418 linear-gradient(to bottom, gtkalpha(currentColor, 0), gtkalpha(currentColor, 0));
419 }
420 @else if $t==flat-hover {
421 //
422 // hovered flat button
423 //
424 box-shadow: none;
425 background-image: -gtk-gradient(radial,
426 center center, 0,
427 center center, 0.5,
428 to(gtkalpha(currentColor, 0)),
429 to(transparent)),
430 linear-gradient(to bottom, gtkalpha(currentColor, 0.1), gtkalpha(currentColor, 0.1));
431 }
432 @else if $t==flat-active {
433 //
434 // pushed flat button
435 //
436 box-shadow: none;
437 animation: flat_ripple_effect 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
438 }
439 @else if $t==flat-insensitive {
440 //
441 // insensitive flat button
442 //
443 box-shadow: none;
444 background-color: transparent;
445 }
446 @else if $t==flat-checked {
447 //
448 // checked flat button
449 //
450 background-color: $track_color;
451 color: $fg_color;
452 }
453 @else if $t==flat-checked-insensitive {
454 //
455 // checked flat insensitive button
456 //
457 > label { color: inherit; }
458 }
459
460 @else if $t==undecorated {
461 //
462 // reset
463 //
464 border-color: transparent;
465 background-color: transparent;
466 background-image: none;
467 box-shadow: none;
468 text-shadow: none;
469 -gtk-icon-shadow: none;
470 }
471}
472
473
474//
475// Overshoot
476//
477
478@mixin overshoot($p, $t:normal, $c:$secondary_selected_bg_color) {
479//
480// Overshoot drawing function
481//
482// $p: position
483// $t: type
484// $c: base color
485//
486// possible $p values:
487// top, bottom, right, left
488//
489// possible $t values:
490// normal, backdrop
491//
492
493 $_position: center $p;
494
495 @if ($p == left) or ($p == right) {
496 $_position: $p center;
497 }
498
499 background-image: -gtk-gradient(radial,
500 $_position, 0,
501 $_position, 0.75,
502 to(gtkopacity($c, 0.2)),
503 to(transparent));
504
505 background-repeat: no-repeat;
506 background-position: $_position;
507
508 // reset some properties to be sure to not inherit them somehow
509 background-color: transparent;
510 border: none;
511 box-shadow: none;
512}
513
514
515//
516// Undershoot
517//
518
519@mixin undershoot($p, $fading_color: $base_color) {
520//
521// Undershoot drawing function
522//
523// $p: position
524// $fading_color: actual colour for fader
525//
526// possible $p values:
527// top, bottom, right, left
528//
529
530 // shouldn't be needed, but better to be sure
531 background-color: transparent;
532
533 $_gradient_dir: $p;
534 $_fader_size: 16px 32px;
535 $_gradient_repeat: repeat-x;
536 $_bg_pos: center $p;
537
538
539 @if ($p == left) or ($p == right) {
540 $_fader_size: 32px 16px;
541 $_gradient_repeat: repeat-y;
542 $_bg_pos: $p center;
543 }
544
545 // this is the dashed line
546 background-image: linear-gradient(to $_gradient_dir,
547 gtkopacity($fading_color, 0.01),
548 gtkopacity($fading_color, 0.04),
549 gtkopacity($fading_color, 0.20),
550 gtkopacity($fading_color, 0.44),
551 gtkopacity($fading_color, 0.94));
552
553 padding-#{$p}: 0;
554 background-size: $_fader_size;
555 background-repeat: $_gradient_repeat;
556 background-origin: content-box;
557 background-position: $_bg_pos;
558}
559