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));
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, 0));
67
}
68
}
69
@keyframes tab_ripple_effect {
71
from {
72
background-image: radial-gradient(circle farthest-corner at center,
73
scale-alpha($primary_color, $middle_opacity) 0%,
74
transparent 0%);
75
}
76
50% {
78
background-image: radial-gradient(circle farthest-corner at center,
79
scale-alpha($primary_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
$primary_color 0%,
94
transparent 0%);
95
}
96
to {
98
background-image: radial-gradient(circle farthest-corner at center,
99
$primary_color 100%,
100
transparent 0%);
101
}
102
}
103
@mixin entry($t, $fc:$primary_color) {
106
//
107
// Entries drawing function
108
//
109
// $t: entry type
110
// $fc: focus color
111
//
112
// possible $t values:
113
// normal, focus, disabled, flat-normal, flat-focus, flat-disabled;
114
//
115
@if $t == normal {
117
transition: $longer_transition, $shadow_transition;
118
border-image: none;
119
box-shadow: $z-depth-1;
120
background-color: if($fc != $primary_color, $fc, $base_color);
121
color: if($fc != $primary_color, $inversed_fg_color, $fg_color);
122
}
123
@if $t == focus {
125
border-image: none;
126
box-shadow: $z-depth-2;
127
}
128
@if $t == disabled {
130
box-shadow: $z-depth-1;
131
background-color: $alt_base_color;
132
color: $disabled_fg_color;
133
}
134
@if $t == flat-normal {
136
transition: $longer_transition;
137
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
138
$fc 0%,
139
transparent 0%)
140
0 0 0 / 0 0 0px;
141
box-shadow: inset 0 -1px if($fc != $primary_color, $fc, $track_color);
142
background-color: transparent;
143
color: $fg_color;
144
}
145
@if $t == flat-focus {
147
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
148
$fc 100%,
149
transparent 0%)
150
0 0 2 / 0 0 2px;
151
box-shadow: inset 0 -1px if($fc != $primary_color, $fc, $track_color);
152
}
153
@if $t == flat-disabled {
155
box-shadow: inset 0 -1px $track_color;
156
background-color: transparent;
157
color: $disabled_fg_color;
158
}
159
}
160
@mixin button($t, $c:$lighter_bg_color, $tc:$fg_color) {
163
//
164
// Button drawing function
165
//
166
// $t: button type,
167
// $c: base button color for colored* types
168
// $tc: optional text color for colored* types
169
//
170
// possible $t values:
171
// normal, hover, active, disabled, checked, checked-disabled,
172
// flat-normal, flat-hover, flat-active, flat-disabled, flat-checked, flat-checked-disabled;
173
//
174
@if $t == normal {
176
transition: $longer_transition, $shadow_transition;
177
box-shadow: $z-depth-1;
178
background-color: $c;
179
background-image: radial-gradient(circle farthest-corner at center,
180
gtkalpha(currentColor, 0) 100%,
181
transparent 0%),
182
image(gtkalpha(currentColor, 0));
183
color: $secondary_fg_color;
184
}
185
@if $t == hover {
187
box-shadow: $z-depth-2;
188
background-image: radial-gradient(circle farthest-corner at center,
189
gtkalpha(currentColor, 0) 100%,
190
transparent 0%),
191
image(gtkalpha(currentColor, 0));
192
color: $fg_color;
193
}
194
@if $t == active {
196
transition: $longer_transition, $shadow_transition, background-image 0;
197
animation: ripple_effect $longer_duration $deceleration_curve forwards;
198
box-shadow: $z-depth-2;
199
color: $fg_color;
200
}
201
@if $t == disabled {
203
box-shadow: none;
204
background-color: $track_color;
205
color: if($tc != $fg_color, $disabled_fg_color, $disabled_secondary_fg_color);
206
> label { color: inherit; }
208
}
209
@if $t == checked {
211
background-color: $primary_color;
212
color: $inversed_fg_color;
213
}
214
@if $t == checked-disabled {
216
background-color: $track_color;
217
color: scale-alpha($primary_color, $disabled_opacity);
218
> label { color: inherit; }
220
}
221
@if $t == flat-normal {
223
transition: $longer_transition;
224
box-shadow: none;
225
background-color: transparent;
226
background-image: radial-gradient(circle farthest-corner at center,
227
gtkalpha(currentColor, 0) 100%,
228
transparent 0%),
229
image(gtkalpha(currentColor, 0));
230
color: gtkalpha(currentColor, $enabled_opacity);
231
}
232
@if $t == flat-hover {
234
box-shadow: none;
235
background-image: radial-gradient(circle farthest-corner at center,
236
gtkalpha(currentColor, 0) 100%,
237
transparent 0%),
238
image(gtkalpha(currentColor, $lower_opacity / 2));
239
color: currentColor;
240
}
241
@if $t == flat-active {
243
transition: $longer_transition, background-image 0;
244
animation: flat_ripple_effect $longer_duration $deceleration_curve forwards;
245
box-shadow: none;
246
color: currentColor;
247
}
248
@if $t == flat-disabled {
250
box-shadow: none;
251
background-color: transparent;
252
color: if($tc != $fg_color, gtkalpha(currentColor, $disabled_opacity), gtkalpha(currentColor, $enabled_opacity * $disabled_opacity));
253
> label { color: inherit; }
255
}
256
@if $t == flat-checked {
258
background-color: $track_color;
259
color: currentColor;
260
}
261
@if $t == flat-checked-disabled {
263
background-color: $track_color;
264
color: gtkalpha(currentColor, $disabled_opacity);
265
> label { color: inherit; }
267
}
268
}
269
@mixin overshoot($p, $t:normal, $c:$alt_primary_color) {
272
//
273
// overshoot
274
//
275
// $p: position
276
// $t: type
277
// $c: base color
278
//
279
// possible $p values:
280
// top, bottom, right, left
281
//
282
// possible $t values:
283
// normal, backdrop
284
//
285
$_position: center $p;
287
@if ($p == left) or ($p == right) {
289
$_position: $p center;
290
}
291
background-image: -gtk-gradient(radial,
293
$_position, 0,
294
$_position, 0.75,
295
to(scale-alpha($c, $lower_opacity)),
296
to(transparent));
297
background-repeat: no-repeat;
299
background-position: $_position;
300
background-color: transparent; // reset some properties to be sure to not inherit them somehow
302
border: none; //
303
box-shadow: none; //
304
}
305
@mixin undershoot($p) {
308
//
309
// undershoot
310
//
311
// $p: position
312
//
313
// possible $p values:
314
// top, bottom, right, left
315
//
316
$_undershoot_color_dark: scale-alpha($fg_color, $lower_opacity);
318
$_undershoot_color_light: scale-alpha($base_color, $lower_opacity);
319
$_gradient_dir: left;
321
$_dash_bg_size: 12px 1px;
322
$_gradient_repeat: repeat-x;
323
$_bg_pos: left $p;
324
background-color: transparent; // shouldn't be needed, but better to be sure;
326
@if ($p == left) or ($p == right) {
328
$_gradient_dir: top;
329
$_dash_bg_size: 1px 12px;
330
$_gradient_repeat: repeat-y;
331
$_bg_pos: $p top;
332
}
333
background-image: linear-gradient(to $_gradient_dir, // this is the dashed line
335
$_undershoot_color_light 50%,
336
$_undershoot_color_dark 50%);
337
padding-#{$p}: 1px;
339
background-size: $_dash_bg_size;
340
background-repeat: $_gradient_repeat;
341
background-origin: content-box;
342
background-position: $_bg_pos;
343
}
344