ASCII text
1
// Drawing mixins
2
// generic drawing of more complex things
4
// shadows
7
// FIXME: 1.5px doesn't work in box-shadow
9
// $z-depth-1: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
10
$z-depth-1: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
11
$z-depth-2: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
12
$z-depth-3: 0 10px 10px rgba(0, 0, 0, 0.19), 0 6px 3px rgba(0, 0, 0, 0.23);
13
$z-depth-4: 0 14px 14px rgba(0, 0, 0, 0.25), 0 10px 5px rgba(0, 0, 0, 0.22);
14
$z-depth-5: 0 19px 19px rgba(0, 0, 0, 0.30), 0 15px 6px rgba(0, 0, 0, 0.22);
15
// ripple effect animations
18
@keyframes ripple_effect {
20
from {
21
background-image: radial-gradient(circle farthest-corner at center,
22
gtkalpha(currentColor, $lower_opacity / 2) 0%,
23
transparent 0%),
24
image(gtkalpha(currentColor, 0));
25
}
26
to {
28
background-image: radial-gradient(circle farthest-corner at center,
29
gtkalpha(currentColor, $lower_opacity / 2) 100%,
30
transparent 0%),
31
image(gtkalpha(currentColor, $lower_opacity / 2));
32
}
33
}
34
@keyframes flat_ripple_effect {
36
from {
37
background-image: radial-gradient(circle farthest-corner at center,
38
gtkalpha(currentColor, $lower_opacity / 2) 0%,
39
transparent 0%),
40
image(gtkalpha(currentColor, $lower_opacity / 2));
41
}
42
to {
44
background-image: radial-gradient(circle farthest-corner at center,
45
gtkalpha(currentColor, $lower_opacity / 2) 100%,
46
transparent 0%),
47
image(gtkalpha(currentColor, $lower_opacity / 2));
48
}
49
}
50
@keyframes row_ripple_effect {
52
from {
53
background-image: radial-gradient(circle farthest-corner at center,
54
gtkalpha(currentColor, $lower_opacity / 2) 0%,
55
transparent 0%),
56
image(gtkalpha(currentColor, 0.05));
57
}
58
to {
60
background-image: radial-gradient(circle farthest-corner at center,
61
gtkalpha(currentColor, $lower_opacity / 2) 100%,
62
transparent 0%),
63
image(gtkalpha(currentColor, $lower_opacity / 2));
64
}
65
}
66
@keyframes tab_ripple_effect {
68
from {
69
background-image: radial-gradient(circle farthest-corner at center,
70
scale-alpha($selected_bg_color, $middle_opacity) 0%,
71
transparent 0%);
72
}
73
50% {
75
background-image: radial-gradient(circle farthest-corner at center,
76
scale-alpha($selected_bg_color, $middle_opacity) 100%,
77
transparent 0%);
78
}
79
to {
81
background-image: radial-gradient(circle farthest-corner at center,
82
transparent 100%,
83
transparent 0%);
84
}
85
}
86
@keyframes header_ripple_effect {
88
from {
89
background-image: radial-gradient(circle farthest-corner at center,
90
$selected_bg_color 0%,
91
transparent 0%);
92
}
93
to {
95
background-image: radial-gradient(circle farthest-corner at center,
96
$selected_bg_color 100%,
97
transparent 0%);
98
}
99
}
100
// entries
103
@mixin entry($t, $fc:$selected_bg_color) {
105
//
106
// Entries drawing function
107
//
108
// $t: entry type
109
// $fc: focus color
110
//
111
// possible $t values:
112
// normal, focus, insensitive, flat-normal, flat-focus, flat-insensitive;
113
//
114
@if $t==normal {
116
transition: $material_transition, $shadow_transition;
117
border-image: none;
118
box-shadow: $z-depth-1;
119
background-color: if($fc!=$selected_bg_color, $fc, $base_color);
120
color: if($fc!=$selected_bg_color, $selected_fg_color, $fg_color);
121
}
122
@if $t==focus {
124
border-image: none;
125
box-shadow: $z-depth-2;
126
}
127
@if $t==insensitive {
129
box-shadow: $z-depth-1;
130
background-color: $secondary_base_color;
131
color: $insensitive_fg_color;
132
}
133
@if $t==flat-normal {
135
transition: $material_transition;
136
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
137
$fc 0%,
138
transparent 0%)
139
0 0 0 / 0 0 0px;
140
box-shadow: inset 0 -1px if($fc!=$selected_bg_color, $fc, $track_color);
141
background-color: transparent;
142
color: $fg_color;
143
}
144
@if $t==flat-focus {
146
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
147
$fc 100%,
148
transparent 0%)
149
0 0 2 / 0 0 2px;
150
box-shadow: inset 0 -1px if($fc!=$selected_bg_color, $fc, $track_color);
151
}
152
@if $t==flat-insensitive {
154
box-shadow: inset 0 -1px $track_color;
155
background-color: transparent;
156
color: $insensitive_fg_color;
157
}
158
}
159
// buttons
162
@mixin button($t, $c:$light_color, $tc:$fg_color) {
164
//
165
// Button drawing function
166
//
167
// $t: button type,
168
// $c: base button color for colored* types
169
// $tc: optional text color for colored* types
170
//
171
// possible $t values:
172
// normal, hover, active, insensitive, checked, checked-insensitive,
173
// flat-normal, flat-hover, flat-active, flat-insensitive, flat-checked, flat-checked-insensitive;
174
//
175
@if $t==normal {
177
//
178
// normal button
179
//
180
transition: $material_transition, $shadow_transition;
181
box-shadow: $z-depth-1;
182
background-color: $c;
183
background-image: radial-gradient(circle farthest-corner at center,
184
gtkalpha(currentColor, 0) 100%,
185
transparent 0%),
186
image(gtkalpha(currentColor, 0));
187
color: $secondary_fg_color;
188
}
189
@if $t==hover {
191
//
192
// hovered button
193
//
194
box-shadow: $z-depth-2;
195
background-image: radial-gradient(circle farthest-corner at center,
196
gtkalpha(currentColor, 0) 100%,
197
transparent 0%),
198
image(gtkalpha(currentColor, 0));
199
color: $fg_color;
200
}
201
@if $t==active {
203
//
204
// pushed button
205
//
206
transition: $material_transition, $shadow_transition, background-image 0;
207
animation: ripple_effect $material_slower $material_ease_out forwards;
208
box-shadow: $z-depth-2;
209
color: $fg_color;
210
}
211
@if $t==insensitive {
213
//
214
// insensitive button
215
//
216
box-shadow: none;
217
background-color: $track_color;
218
color: if($tc!=$fg_color, $insensitive_fg_color, $insensitive_secondary_fg_color);
219
> label { color: inherit; }
221
}
222
@if $t==checked {
224
//
225
// checked button
226
//
227
background-color: $selected_bg_color;
228
color: $selected_fg_color;
229
}
230
@if $t==checked-insensitive {
232
//
233
// checked insensitive button
234
//
235
background-color: $track_color;
236
color: scale-alpha($selected_bg_color, $disabled_opacity);
237
> label { color: inherit; }
239
}
240
@if $t==flat-normal {
242
//
243
// normal flat button
244
//
245
transition: $material_transition;
246
box-shadow: none;
247
background-color: transparent;
248
background-image: radial-gradient(circle farthest-corner at center,
249
gtkalpha(currentColor, 0) 100%,
250
transparent 0%),
251
image(gtkalpha(currentColor, 0));
252
color: $secondary_fg_color;
253
}
254
@if $t==flat-hover {
256
//
257
// hovered flat button
258
//
259
box-shadow: none;
260
background-image: radial-gradient(circle farthest-corner at center,
261
gtkalpha(currentColor, 0) 100%,
262
transparent 0%),
263
image(gtkalpha(currentColor, $lower_opacity / 2));
264
color: $fg_color;
265
}
266
@if $t==flat-active {
268
//
269
// pushed flat button
270
//
271
transition: $material_transition, background-image 0;
272
animation: flat_ripple_effect $material_slower $material_ease_out forwards;
273
box-shadow: none;
274
color: $fg_color;
275
}
276
@if $t==flat-insensitive {
278
//
279
// insensitive flat button
280
//
281
box-shadow: none;
282
background-color: transparent;
283
color: if($tc!=$fg_color, $insensitive_fg_color, $insensitive_secondary_fg_color);
284
> label { color: inherit; }
286
}
287
@if $t==flat-checked {
289
//
290
// checked flat button
291
//
292
background-color: $track_color;
293
color: $fg_color;
294
}
295
@if $t==flat-checked-insensitive {
297
//
298
// checked flat insensitive button
299
//
300
background-color: $track_color;
301
color: $insensitive_fg_color;
302
> label { color: inherit; }
304
}
305
}
306
@mixin overshoot($p, $t:normal, $c:$secondary_selected_bg_color) {
309
//
310
// overshoot
311
//
312
// $p: position
313
// $t: type
314
// $c: base color
315
//
316
// possible $p values:
317
// top, bottom, right, left
318
//
319
// possible $t values:
320
// normal, backdrop
321
//
322
$_position: center $p;
324
@if ($p == left) or ($p == right) {
326
$_position: $p center;
327
}
328
background-image: -gtk-gradient(radial,
330
$_position, 0,
331
$_position, 0.75,
332
to(scale-alpha($c, $lower_opacity)),
333
to(transparent));
334
background-repeat: no-repeat;
336
background-position: $_position;
337
background-color: transparent; // reset some properties to be sure to not inherit them somehow
339
border: none; //
340
box-shadow: none; //
341
}
342
@mixin undershoot($p) {
345
//
346
// undershoot
347
//
348
// $p: position
349
//
350
// possible $p values:
351
// top, bottom, right, left
352
//
353
$_undershoot_color_dark: scale-alpha($fg_color, $lower_opacity);
355
$_undershoot_color_light: scale-alpha($base_color, $lower_opacity);
356
$_gradient_dir: left;
358
$_dash_bg_size: 16px 2px;
359
$_gradient_repeat: repeat-x;
360
$_bg_pos: center $p;
361
background-color: transparent; // shouldn't be needed, but better to be sure;
363
@if ($p == left) or ($p == right) {
365
$_gradient_dir: top;
366
$_dash_bg_size: 2px 16px;
367
$_gradient_repeat: repeat-y;
368
$_bg_pos: $p center;
369
}
370
background-image: linear-gradient(to $_gradient_dir, // this is the dashed line
372
$_undershoot_color_light 50%,
373
$_undershoot_color_dark 50%);
374
padding-#{$p}: 0;
376
background-size: $_dash_bg_size;
377
background-repeat: $_gradient_repeat;
378
background-origin: content-box;
379
background-position: $_bg_pos;
380
}
381