ASCII text
1
// Drawing mixins
2
// generic drawing of more complex things
4
// shadows
7
// based shadow values:
9
// https://material-design.storage.googleapis.com/images/layout-principles-dimensionality-shadows-08_large_mdpi.png
10
// box-shadow 1px blur doesn't draw correctly, see
12
// https://bugzilla.gnome.org/show_bug.cgi?id=738484
13
// $z-depth-1: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
14
$z-depth-1: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
15
$z-depth-2: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
16
$z-depth-3: 0 10px 10px rgba(0, 0, 0, 0.19), 0 6px 3px rgba(0, 0, 0, 0.23);
17
$z-depth-4: 0 14px 14px rgba(0, 0, 0, 0.25), 0 10px 5px rgba(0, 0, 0, 0.22);
18
$z-depth-5: 0 19px 19px rgba(0, 0, 0, 0.30), 0 15px 6px rgba(0, 0, 0, 0.22);
19
// ripple effect animations
22
@keyframes ripple_effect {
24
from {
25
background-image: radial-gradient(circle farthest-corner at center,
26
gtkalpha(currentColor, $lower_opacity / 2) 0%,
27
transparent 0%),
28
image(gtkalpha(currentColor, 0));
29
}
30
to {
32
background-image: radial-gradient(circle farthest-corner at center,
33
gtkalpha(currentColor, $lower_opacity / 2) 100%,
34
transparent 0%),
35
image(gtkalpha(currentColor, $lower_opacity / 2));
36
}
37
}
38
@keyframes flat_ripple_effect {
40
from {
41
background-image: radial-gradient(circle farthest-corner at center,
42
gtkalpha(currentColor, $lower_opacity / 2) 0%,
43
transparent 0%),
44
image(gtkalpha(currentColor, $lower_opacity / 2));
45
}
46
to {
48
background-image: radial-gradient(circle farthest-corner at center,
49
gtkalpha(currentColor, $lower_opacity / 2) 100%,
50
transparent 0%),
51
image(gtkalpha(currentColor, $lower_opacity / 2));
52
}
53
}
54
@keyframes row_ripple_effect {
56
from {
57
background-image: radial-gradient(circle farthest-corner at center,
58
gtkalpha(currentColor, $lower_opacity / 2) 0%,
59
transparent 0%),
60
image(gtkalpha(currentColor, 0));
61
}
62
to {
64
background-image: radial-gradient(circle farthest-corner at center,
65
gtkalpha(currentColor, $lower_opacity / 2) 100%,
66
transparent 0%),
67
image(gtkalpha(currentColor, 0));
68
}
69
}
70
@keyframes tab_ripple_effect {
72
from {
73
background-image: radial-gradient(circle farthest-corner at center,
74
scale-alpha($primary_color, $middle_opacity) 0%,
75
transparent 0%);
76
}
77
50% {
79
background-image: radial-gradient(circle farthest-corner at center,
80
scale-alpha($primary_color, $middle_opacity) 100%,
81
transparent 0%);
82
}
83
to {
85
background-image: radial-gradient(circle farthest-corner at center,
86
transparent 100%,
87
transparent 0%);
88
}
89
}
90
@keyframes header_ripple_effect {
92
from {
93
background-image: radial-gradient(circle farthest-corner at center,
94
$primary_color 0%,
95
transparent 0%);
96
}
97
to {
99
background-image: radial-gradient(circle farthest-corner at center,
100
$primary_color 100%,
101
transparent 0%);
102
}
103
}
104
@mixin entry($t, $fc:$primary_color) {
107
//
108
// Entries drawing function
109
//
110
// $t: entry type
111
// $fc: focus color
112
//
113
// possible $t values:
114
// normal, focus, disabled, flat-normal, flat-focus, flat-disabled;
115
//
116
@if $t == normal {
118
transition: $longer_transition, $shadow_transition;
119
border-image: none;
120
box-shadow: $z-depth-1;
121
background-color: if($fc != $primary_color, $fc, $base_color);
122
color: if($fc != $primary_color, $inversed_fg_color, $fg_color);
123
}
124
@if $t == focus {
126
border-image: none;
127
box-shadow: $z-depth-2;
128
}
129
@if $t == disabled {
131
box-shadow: $z-depth-1;
132
background-color: $alt_base_color;
133
color: $disabled_fg_color;
134
}
135
@if $t == flat-normal {
137
transition: $longer_transition;
138
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
139
$fc 0%,
140
transparent 0%)
141
0 0 0 / 0 0 0px;
142
box-shadow: inset 0 -1px if($fc != $primary_color, $fc, $track_color);
143
background-color: transparent;
144
color: $fg_color;
145
}
146
@if $t == flat-focus {
148
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
149
$fc 100%,
150
transparent 0%)
151
0 0 2 / 0 0 2px;
152
box-shadow: inset 0 -1px if($fc != $primary_color, $fc, $track_color);
153
}
154
@if $t == flat-disabled {
156
box-shadow: inset 0 -1px $track_color;
157
background-color: transparent;
158
color: $disabled_fg_color;
159
}
160
}
161
@mixin button($t, $c:$lighter_bg_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, disabled, checked, checked-disabled,
173
// flat-normal, flat-hover, flat-active, flat-disabled, flat-checked, flat-checked-disabled;
174
//
175
@if $t == normal {
177
transition: $longer_transition, $shadow_transition;
178
box-shadow: $z-depth-1;
179
background-color: $c;
180
background-image: radial-gradient(circle farthest-corner at center,
181
gtkalpha(currentColor, 0) 100%,
182
transparent 0%),
183
image(gtkalpha(currentColor, 0));
184
color: $secondary_fg_color;
185
}
186
@if $t == hover {
188
box-shadow: $z-depth-2;
189
background-image: radial-gradient(circle farthest-corner at center,
190
gtkalpha(currentColor, 0) 100%,
191
transparent 0%),
192
image(gtkalpha(currentColor, 0));
193
color: $fg_color;
194
}
195
@if $t == active {
197
transition: $longer_transition, $shadow_transition, background-image 0;
198
animation: ripple_effect $longer_duration $deceleration_curve forwards;
199
box-shadow: $z-depth-2;
200
color: $fg_color;
201
}
202
@if $t == disabled {
204
box-shadow: none;
205
background-color: $track_color;
206
color: if($tc != $fg_color, $disabled_fg_color, $disabled_secondary_fg_color);
207
> label { color: inherit; }
209
}
210
@if $t == checked {
212
background-color: $primary_color;
213
color: $inversed_fg_color;
214
}
215
@if $t == checked-disabled {
217
background-color: $track_color;
218
color: scale-alpha($primary_color, $disabled_opacity);
219
> label { color: inherit; }
221
}
222
@if $t == flat-normal {
224
transition: $longer_transition;
225
box-shadow: none;
226
background-color: transparent;
227
background-image: radial-gradient(circle farthest-corner at center,
228
gtkalpha(currentColor, 0) 100%,
229
transparent 0%),
230
image(gtkalpha(currentColor, 0));
231
color: gtkalpha(currentColor, $enabled_opacity);
232
}
233
@if $t == flat-hover {
235
box-shadow: none;
236
background-image: radial-gradient(circle farthest-corner at center,
237
gtkalpha(currentColor, 0) 100%,
238
transparent 0%),
239
image(gtkalpha(currentColor, $lower_opacity / 2));
240
color: currentColor;
241
}
242
@if $t == flat-active {
244
transition: $longer_transition, background-image 0;
245
animation: flat_ripple_effect $longer_duration $deceleration_curve forwards;
246
box-shadow: none;
247
color: currentColor;
248
}
249
@if $t == flat-disabled {
251
box-shadow: none;
252
background-color: transparent;
253
color: if($tc != $fg_color, gtkalpha(currentColor, $disabled_opacity), gtkalpha(currentColor, $enabled_opacity * $disabled_opacity));
254
> label { color: inherit; }
256
}
257
@if $t == flat-checked {
259
background-color: $track_color;
260
color: currentColor;
261
}
262
@if $t == flat-checked-disabled {
264
background-color: $track_color;
265
color: gtkalpha(currentColor, $disabled_opacity);
266
> label { color: inherit; }
268
}
269
}
270
@mixin overshoot($p, $t:normal, $c:$alt_primary_color) {
273
//
274
// overshoot
275
//
276
// $p: position
277
// $t: type
278
// $c: base color
279
//
280
// possible $p values:
281
// top, bottom, right, left
282
//
283
// possible $t values:
284
// normal, backdrop
285
//
286
$_position: center $p;
288
@if ($p == left) or ($p == right) {
290
$_position: $p center;
291
}
292
background-image: -gtk-gradient(radial,
294
$_position, 0,
295
$_position, 0.75,
296
to(scale-alpha($c, $lower_opacity)),
297
to(transparent));
298
background-repeat: no-repeat;
300
background-position: $_position;
301
background-color: transparent; // reset some properties to be sure to not inherit them somehow
303
border: none; //
304
box-shadow: none; //
305
}
306
@mixin undershoot($p) {
309
//
310
// undershoot
311
//
312
// $p: position
313
//
314
// possible $p values:
315
// top, bottom, right, left
316
//
317
$_undershoot_color_dark: scale-alpha($fg_color, $lower_opacity);
319
$_undershoot_color_light: scale-alpha($base_color, $lower_opacity);
320
$_gradient_dir: left;
322
$_dash_bg_size: 12px 1px;
323
$_gradient_repeat: repeat-x;
324
$_bg_pos: left $p;
325
background-color: transparent; // shouldn't be needed, but better to be sure;
327
@if ($p == left) or ($p == right) {
329
$_gradient_dir: top;
330
$_dash_bg_size: 1px 12px;
331
$_gradient_repeat: repeat-y;
332
$_bg_pos: $p top;
333
}
334
background-image: linear-gradient(to $_gradient_dir, // this is the dashed line
336
$_undershoot_color_light 50%,
337
$_undershoot_color_dark 50%);
338
padding-#{$p}: 1px;
340
background-size: $_dash_bg_size;
341
background-repeat: $_gradient_repeat;
342
background-origin: content-box;
343
background-position: $_bg_pos;
344
}
345