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
$semi_track_color 0%,
27
transparent 0%),
28
image($zero_track_color);
29
}
30
to {
32
background-image: radial-gradient(circle farthest-corner at center,
33
$semi_track_color 100%,
34
transparent 0%),
35
image($semi_track_color);
36
}
37
}
38
@keyframes flat_ripple_effect {
40
from {
41
background-image: radial-gradient(circle farthest-corner at center,
42
$semi_track_color 0%,
43
transparent 0%),
44
image($semi_track_color);
45
}
46
to {
48
background-image: radial-gradient(circle farthest-corner at center,
49
$semi_track_color 100%,
50
transparent 0%),
51
image($semi_track_color);
52
}
53
}
54
@keyframes row_ripple_effect {
56
from {
57
background-image: radial-gradient(circle farthest-corner at center,
58
$semi_track_color 0%,
59
transparent 0%),
60
image($zero_track_color);
61
}
62
to {
64
background-image: radial-gradient(circle farthest-corner at center,
65
$semi_track_color 100%,
66
transparent 0%),
67
image($zero_track_color);
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
$zero_track_color 100%,
182
transparent 0%),
183
image($zero_track_color);
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
$zero_track_color 100%,
191
transparent 0%),
192
image($zero_track_color);
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
}
208
@if $t == checked {
210
background-color: $primary_color;
211
color: $inversed_fg_color;
212
}
213
@if $t == checked-disabled {
215
background-color: $track_color;
216
color: scale-alpha($primary_color, $disabled_opacity);
217
}
218
@if $t == flat-normal {
220
transition: $longer_transition;
221
box-shadow: none;
222
background-color: transparent;
223
background-image: radial-gradient(circle farthest-corner at center,
224
$zero_track_color 100%,
225
transparent 0%),
226
image($zero_track_color);
227
color: gtkalpha(currentColor, $enabled_opacity);
228
}
229
@if $t == flat-hover {
231
box-shadow: none;
232
background-image: radial-gradient(circle farthest-corner at center,
233
$zero_track_color 100%,
234
transparent 0%),
235
image($semi_track_color);
236
color: currentColor;
237
}
238
@if $t == flat-active {
240
transition: $longer_transition, background-image 0;
241
animation: flat_ripple_effect $longer_duration $deceleration_curve forwards;
242
box-shadow: none;
243
color: currentColor;
244
}
245
@if $t == flat-disabled {
247
box-shadow: none;
248
background-color: transparent;
249
color: if($tc != $fg_color, gtkalpha(currentColor, $disabled_opacity), gtkalpha(currentColor, $enabled_opacity * $disabled_opacity));
250
}
251
@if $t == flat-checked {
253
background-color: $track_color;
254
color: currentColor;
255
}
256
@if $t == flat-checked-disabled {
258
background-color: $track_color;
259
color: gtkalpha(currentColor, $disabled_opacity);
260
}
261
}
262
@mixin overshoot($p, $t:normal, $c:$alt_primary_color) {
265
//
266
// overshoot
267
//
268
// $p: position
269
// $t: type
270
// $c: base color
271
//
272
// possible $p values:
273
// top, bottom, right, left
274
//
275
// possible $t values:
276
// normal, backdrop
277
//
278
$_position: center $p;
280
@if ($p == left) or ($p == right) {
282
$_position: $p center;
283
}
284
background-image: -gtk-gradient(radial,
286
$_position, 0,
287
$_position, 0.75,
288
to(scale-alpha($c, $lower_opacity)),
289
to(transparent));
290
background-repeat: no-repeat;
292
background-position: $_position;
293
background-color: transparent; // reset some properties to be sure to not inherit them somehow
295
border: none; //
296
box-shadow: none; //
297
}
298
@mixin undershoot($p) {
301
//
302
// undershoot
303
//
304
// $p: position
305
//
306
// possible $p values:
307
// top, bottom, right, left
308
//
309
$_undershoot_color_dark: scale-alpha($fg_color, $lower_opacity);
311
$_undershoot_color_light: scale-alpha($base_color, $lower_opacity);
312
$_gradient_dir: left;
314
$_dash_bg_size: 12px 1px;
315
$_gradient_repeat: repeat-x;
316
$_bg_pos: left $p;
317
background-color: transparent; // shouldn't be needed, but better to be sure;
319
@if ($p == left) or ($p == right) {
321
$_gradient_dir: top;
322
$_dash_bg_size: 1px 12px;
323
$_gradient_repeat: repeat-y;
324
$_bg_pos: $p top;
325
}
326
background-image: linear-gradient(to $_gradient_dir, // this is the dashed line
328
$_undershoot_color_light 50%,
329
$_undershoot_color_dark 50%);
330
padding-#{$p}: 1px;
332
background-size: $_dash_bg_size;
333
background-repeat: $_gradient_repeat;
334
background-origin: content-box;
335
background-position: $_bg_pos;
336
}
337