ASCII text
1
// Drawing mixins
2
// generic drawing of more complex things
4
// shadows
7
// Reference URL:
9
// https://material-design.storage.googleapis.com/images/layout-principles-dimensionality-shadows-08_large_mdpi.png
10
// FIXME: 1.5px doesn't work in box-shadow
12
// $z-depth-1: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
13
$z-depth-1: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
14
$z-depth-2: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
15
$z-depth-3: 0 10px 10px rgba(0, 0, 0, 0.19), 0 6px 3px rgba(0, 0, 0, 0.23);
16
$z-depth-4: 0 14px 14px rgba(0, 0, 0, 0.25), 0 10px 5px rgba(0, 0, 0, 0.22);
17
$z-depth-5: 0 19px 19px rgba(0, 0, 0, 0.30), 0 15px 6px rgba(0, 0, 0, 0.22);
18
// ripple effect animations
21
@keyframes ripple_effect {
23
from {
24
background-image: radial-gradient(circle farthest-corner at center,
25
gtkalpha(currentColor, $lower_opacity / 2) 0%,
26
transparent 0%),
27
image(gtkalpha(currentColor, 0));
28
}
29
to {
31
background-image: radial-gradient(circle farthest-corner at center,
32
gtkalpha(currentColor, $lower_opacity / 2) 100%,
33
transparent 0%),
34
image(gtkalpha(currentColor, $lower_opacity / 2));
35
}
36
}
37
@keyframes flat_ripple_effect {
39
from {
40
background-image: radial-gradient(circle farthest-corner at center,
41
gtkalpha(currentColor, $lower_opacity / 2) 0%,
42
transparent 0%),
43
image(gtkalpha(currentColor, $lower_opacity / 2));
44
}
45
to {
47
background-image: radial-gradient(circle farthest-corner at center,
48
gtkalpha(currentColor, $lower_opacity / 2) 100%,
49
transparent 0%),
50
image(gtkalpha(currentColor, $lower_opacity / 2));
51
}
52
}
53
@keyframes row_ripple_effect {
55
from {
56
background-image: radial-gradient(circle farthest-corner at center,
57
gtkalpha(currentColor, $lower_opacity / 2) 0%,
58
transparent 0%),
59
image(gtkalpha(currentColor, 0.05));
60
}
61
to {
63
background-image: radial-gradient(circle farthest-corner at center,
64
gtkalpha(currentColor, $lower_opacity / 2) 100%,
65
transparent 0%),
66
image(gtkalpha(currentColor, $lower_opacity / 2));
67
}
68
}
69
@keyframes tab_ripple_effect {
71
from {
72
background-image: radial-gradient(circle farthest-corner at center,
73
scale-alpha($selected_bg_color, $middle_opacity) 0%,
74
transparent 0%);
75
}
76
50% {
78
background-image: radial-gradient(circle farthest-corner at center,
79
scale-alpha($selected_bg_color, $middle_opacity) 100%,
80
transparent 0%);
81
}
82
to {
84
background-image: radial-gradient(circle farthest-corner at center,
85
transparent 100%,
86
transparent 0%);
87
}
88
}
89
@keyframes header_ripple_effect {
91
from {
92
background-image: radial-gradient(circle farthest-corner at center,
93
$selected_bg_color 0%,
94
transparent 0%);
95
}
96
to {
98
background-image: radial-gradient(circle farthest-corner at center,
99
$selected_bg_color 100%,
100
transparent 0%);
101
}
102
}
103
// entries
106
@mixin entry($t, $fc:$selected_bg_color) {
108
//
109
// Entries drawing function
110
//
111
// $t: entry type
112
// $fc: focus color
113
//
114
// possible $t values:
115
// normal, focus, insensitive, flat-normal, flat-focus, flat-insensitive;
116
//
117
@if $t == normal {
119
transition: $material_transition, $shadow_transition;
120
border-image: none;
121
box-shadow: $z-depth-1;
122
background-color: if($fc != $selected_bg_color, $fc, $base_color);
123
color: if($fc != $selected_bg_color, $selected_fg_color, $fg_color);
124
}
125
@if $t == focus {
127
border-image: none;
128
box-shadow: $z-depth-2;
129
}
130
@if $t == insensitive {
132
box-shadow: $z-depth-1;
133
background-color: $secondary_base_color;
134
color: $insensitive_fg_color;
135
}
136
@if $t == flat-normal {
138
transition: $material_transition;
139
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
140
$fc 0%,
141
transparent 0%)
142
0 0 0 / 0 0 0px;
143
box-shadow: inset 0 -1px if($fc != $selected_bg_color, $fc, $track_color);
144
background-color: transparent;
145
color: $fg_color;
146
}
147
@if $t == flat-focus {
149
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
150
$fc 100%,
151
transparent 0%)
152
0 0 2 / 0 0 2px;
153
box-shadow: inset 0 -1px if($fc != $selected_bg_color, $fc, $track_color);
154
}
155
@if $t == flat-insensitive {
157
box-shadow: inset 0 -1px $track_color;
158
background-color: transparent;
159
color: $insensitive_fg_color;
160
}
161
}
162
// buttons
165
@mixin button($t, $c:$light_color, $tc:$fg_color) {
167
//
168
// Button drawing function
169
//
170
// $t: button type,
171
// $c: base button color for colored* types
172
// $tc: optional text color for colored* types
173
//
174
// possible $t values:
175
// normal, hover, active, insensitive, checked, checked-insensitive,
176
// flat-normal, flat-hover, flat-active, flat-insensitive, flat-checked, flat-checked-insensitive;
177
//
178
@if $t == normal {
180
//
181
// normal button
182
//
183
transition: $material_transition, $shadow_transition;
184
box-shadow: $z-depth-1;
185
background-color: $c;
186
background-image: radial-gradient(circle farthest-corner at center,
187
gtkalpha(currentColor, 0) 100%,
188
transparent 0%),
189
image(gtkalpha(currentColor, 0));
190
color: $secondary_fg_color;
191
}
192
@if $t == hover {
194
//
195
// hovered button
196
//
197
box-shadow: $z-depth-2;
198
background-image: radial-gradient(circle farthest-corner at center,
199
gtkalpha(currentColor, 0) 100%,
200
transparent 0%),
201
image(gtkalpha(currentColor, 0));
202
color: $fg_color;
203
}
204
@if $t == active {
206
//
207
// pushed button
208
//
209
transition: $material_transition, $shadow_transition, background-image 0;
210
animation: ripple_effect $material_slower $material_ease_out forwards;
211
box-shadow: $z-depth-2;
212
color: $fg_color;
213
}
214
@if $t == insensitive {
216
//
217
// insensitive button
218
//
219
box-shadow: none;
220
background-color: $track_color;
221
color: if($tc != $fg_color, $insensitive_fg_color, $insensitive_secondary_fg_color);
222
> label { color: inherit; }
224
}
225
@if $t == checked {
227
//
228
// checked button
229
//
230
background-color: $selected_bg_color;
231
color: $selected_fg_color;
232
}
233
@if $t == checked-insensitive {
235
//
236
// checked insensitive button
237
//
238
background-color: $track_color;
239
color: scale-alpha($selected_bg_color, $disabled_opacity);
240
> label { color: inherit; }
242
}
243
@if $t == flat-normal {
245
//
246
// normal flat button
247
//
248
transition: $material_transition;
249
box-shadow: none;
250
background-color: transparent;
251
background-image: radial-gradient(circle farthest-corner at center,
252
gtkalpha(currentColor, 0) 100%,
253
transparent 0%),
254
image(gtkalpha(currentColor, 0));
255
color: $secondary_fg_color;
256
}
257
@if $t == flat-hover {
259
//
260
// hovered flat button
261
//
262
box-shadow: none;
263
background-image: radial-gradient(circle farthest-corner at center,
264
gtkalpha(currentColor, 0) 100%,
265
transparent 0%),
266
image(gtkalpha(currentColor, $lower_opacity / 2));
267
color: $fg_color;
268
}
269
@if $t == flat-active {
271
//
272
// pushed flat button
273
//
274
transition: $material_transition, background-image 0;
275
animation: flat_ripple_effect $material_slower $material_ease_out forwards;
276
box-shadow: none;
277
color: $fg_color;
278
}
279
@if $t == flat-insensitive {
281
//
282
// insensitive flat button
283
//
284
box-shadow: none;
285
background-color: transparent;
286
color: if($tc != $fg_color, $insensitive_fg_color, $insensitive_secondary_fg_color);
287
> label { color: inherit; }
289
}
290
@if $t == flat-checked {
292
//
293
// checked flat button
294
//
295
background-color: $track_color;
296
color: $fg_color;
297
}
298
@if $t == flat-checked-insensitive {
300
//
301
// checked flat insensitive button
302
//
303
background-color: $track_color;
304
color: $insensitive_fg_color;
305
> label { color: inherit; }
307
}
308
}
309
@mixin overshoot($p, $t:normal, $c:$secondary_selected_bg_color) {
312
//
313
// overshoot
314
//
315
// $p: position
316
// $t: type
317
// $c: base color
318
//
319
// possible $p values:
320
// top, bottom, right, left
321
//
322
// possible $t values:
323
// normal, backdrop
324
//
325
$_position: center $p;
327
@if ($p == left) or ($p == right) {
329
$_position: $p center;
330
}
331
background-image: -gtk-gradient(radial,
333
$_position, 0,
334
$_position, 0.75,
335
to(scale-alpha($c, $lower_opacity)),
336
to(transparent));
337
background-repeat: no-repeat;
339
background-position: $_position;
340
background-color: transparent; // reset some properties to be sure to not inherit them somehow
342
border: none; //
343
box-shadow: none; //
344
}
345
@mixin undershoot($p) {
348
//
349
// undershoot
350
//
351
// $p: position
352
//
353
// possible $p values:
354
// top, bottom, right, left
355
//
356
$_undershoot_color_dark: scale-alpha($fg_color, $lower_opacity);
358
$_undershoot_color_light: scale-alpha($base_color, $lower_opacity);
359
$_gradient_dir: left;
361
$_dash_bg_size: 12px 1px;
362
$_gradient_repeat: repeat-x;
363
$_bg_pos: left $p;
364
background-color: transparent; // shouldn't be needed, but better to be sure;
366
@if ($p == left) or ($p == right) {
368
$_gradient_dir: top;
369
$_dash_bg_size: 1px 12px;
370
$_gradient_repeat: repeat-y;
371
$_bg_pos: $p top;
372
}
373
background-image: linear-gradient(to $_gradient_dir, // this is the dashed line
375
$_undershoot_color_light 50%,
376
$_undershoot_color_dark 50%);
377
padding-#{$p}: 1px;
379
background-size: $_dash_bg_size;
380
background-repeat: $_gradient_repeat;
381
background-origin: content-box;
382
background-position: $_bg_pos;
383
}
384