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(transparent);
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(transparent);
45
}
46
to {
48
background-image: radial-gradient(circle farthest-corner at center,
49
$semi_track_color 100%,
50
transparent 0%),
51
image(transparent);
52
}
53
}
54
@keyframes tab_ripple_effect {
56
from {
57
background-image: radial-gradient(circle farthest-corner at center,
58
scale-alpha($primary_color, $middle_opacity) 0%,
59
transparent 0%);
60
}
61
50% {
63
background-image: radial-gradient(circle farthest-corner at center,
64
scale-alpha($primary_color, $middle_opacity) 100%,
65
transparent 0%);
66
}
67
to {
69
background-image: radial-gradient(circle farthest-corner at center,
70
transparent 100%,
71
transparent 0%);
72
}
73
}
74
@keyframes header_ripple_effect {
76
from {
77
background-image: radial-gradient(circle farthest-corner at center,
78
$primary_color 0%,
79
transparent 0%);
80
}
81
to {
83
background-image: radial-gradient(circle farthest-corner at center,
84
$primary_color 100%,
85
transparent 0%);
86
}
87
}
88
@mixin entry($t, $fc:$primary_color) {
91
//
92
// Entries drawing function
93
//
94
// $t: entry type
95
// $fc: focus color
96
//
97
// possible $t values:
98
// normal, focus, disabled, flat-normal, flat-focus, flat-disabled;
99
//
100
@if $t == normal {
102
transition: $longer_transition, $shadow_transition;
103
border-image: none;
104
box-shadow: $z-depth-1;
105
background-color: if($fc != $primary_color, $fc, $base_color);
106
color: if($fc != $primary_color, $inversed_fg_color, $fg_color);
107
}
108
@if $t == focus {
110
border-image: none;
111
box-shadow: $z-depth-2;
112
}
113
@if $t == disabled {
115
box-shadow: $z-depth-1;
116
background-color: $alt_base_color;
117
color: $disabled_fg_color;
118
}
119
@if $t == flat-normal {
121
transition: $longer_transition;
122
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
123
$fc 0%,
124
transparent 0%)
125
0 0 0 / 0 0 0px;
126
box-shadow: inset 0 -1px if($fc != $primary_color, $fc, $track_color);
127
background-color: transparent;
128
color: $fg_color;
129
}
130
@if $t == flat-focus {
132
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
133
$fc 100%,
134
transparent 0%)
135
0 0 2 / 0 0 2px;
136
box-shadow: inset 0 -1px if($fc != $primary_color, $fc, $track_color);
137
}
138
@if $t == flat-disabled {
140
box-shadow: inset 0 -1px $track_color;
141
background-color: transparent;
142
color: $disabled_fg_color;
143
}
144
}
145
@mixin button($t, $c:$lighter_bg_color, $tc:$fg_color) {
148
//
149
// Button drawing function
150
//
151
// $t: button type,
152
// $c: base button color for colored* types
153
// $tc: optional text color for colored* types
154
//
155
// possible $t values:
156
// normal, hover, active, disabled, checked, checked-disabled,
157
// flat-normal, flat-hover, flat-active, flat-disabled, flat-checked, flat-checked-disabled;
158
//
159
@if $t == normal {
161
transition: $longer_transition, $shadow_transition, background-image $longer_duration * 2 $deceleration_curve;
162
box-shadow: $z-depth-1;
163
background-color: $c;
164
background-image: radial-gradient(circle farthest-corner at center,
165
transparent 100%,
166
transparent 0%),
167
image(transparent);
168
color: $secondary_fg_color;
169
}
170
@if $t == hover {
172
box-shadow: $z-depth-2;
173
color: $fg_color;
174
}
175
@if $t == active {
177
transition: $longer_transition, $shadow_transition, background-image 0;
178
animation: ripple_effect $longer_duration $deceleration_curve forwards;
179
box-shadow: $z-depth-2;
180
color: $fg_color;
181
}
182
@if $t == disabled {
184
box-shadow: none;
185
background-color: $track_color;
186
color: if($tc != $fg_color, $disabled_fg_color, $disabled_secondary_fg_color);
187
}
188
@if $t == checked {
190
background-color: $primary_color;
191
color: $inversed_fg_color;
192
}
193
@if $t == checked-disabled {
195
background-color: $track_color;
196
color: scale-alpha($primary_color, $disabled_opacity);
197
}
198
@if $t == flat-normal {
200
transition: $longer_transition, background-image $longer_duration * 2 $deceleration_curve;
201
box-shadow: inset 0 0 0 9999px transparent;
202
background-color: transparent;
203
background-image: radial-gradient(circle farthest-corner at center,
204
transparent 100%,
205
transparent 0%),
206
image(transparent);
207
color: gtkalpha(currentColor, $enabled_opacity);
208
}
209
@if $t == flat-hover {
211
box-shadow: inset 0 0 0 9999px $semi_track_color;
212
color: currentColor;
213
}
214
@if $t == flat-active {
216
transition: $longer_transition, background-image 0;
217
animation: flat_ripple_effect $longer_duration $deceleration_curve forwards;
218
box-shadow: inset 0 0 0 9999px $semi_track_color;
219
color: currentColor;
220
}
221
@if $t == flat-disabled {
223
box-shadow: none;
224
background-color: transparent;
225
color: if($tc != $fg_color, gtkalpha(currentColor, $disabled_opacity), gtkalpha(currentColor, $enabled_opacity * $disabled_opacity));
226
}
227
@if $t == flat-checked {
229
background-color: $track_color;
230
color: currentColor;
231
}
232
@if $t == flat-checked-disabled {
234
background-color: $track_color;
235
color: gtkalpha(currentColor, $disabled_opacity);
236
}
237
}
238
@mixin overshoot($p, $t:normal, $c:$alt_primary_color) {
241
//
242
// overshoot
243
//
244
// $p: position
245
// $t: type
246
// $c: base color
247
//
248
// possible $p values:
249
// top, bottom, right, left
250
//
251
// possible $t values:
252
// normal, backdrop
253
//
254
$_position: center $p;
256
@if ($p == left) or ($p == right) {
258
$_position: $p center;
259
}
260
background-image: -gtk-gradient(radial,
262
$_position, 0,
263
$_position, 0.75,
264
to(scale-alpha($c, $lower_opacity)),
265
to(transparent));
266
background-repeat: no-repeat;
268
background-position: $_position;
269
background-color: transparent; // reset some properties to be sure to not inherit them somehow
271
border: none; //
272
box-shadow: none; //
273
}
274
@mixin undershoot($p) {
277
//
278
// undershoot
279
//
280
// $p: position
281
//
282
// possible $p values:
283
// top, bottom, right, left
284
//
285
$_undershoot_color_dark: scale-alpha($fg_color, $lower_opacity);
287
$_undershoot_color_light: scale-alpha($base_color, $lower_opacity);
288
$_gradient_dir: left;
290
$_dash_bg_size: 12px 1px;
291
$_gradient_repeat: repeat-x;
292
$_bg_pos: left $p;
293
background-color: transparent; // shouldn't be needed, but better to be sure;
295
@if ($p == left) or ($p == right) {
297
$_gradient_dir: top;
298
$_dash_bg_size: 1px 12px;
299
$_gradient_repeat: repeat-y;
300
$_bg_pos: $p top;
301
}
302
background-image: linear-gradient(to $_gradient_dir, // this is the dashed line
304
$_undershoot_color_light 50%,
305
$_undershoot_color_dark 50%);
306
padding-#{$p}: 1px;
308
background-size: $_dash_bg_size;
309
background-repeat: $_gradient_repeat;
310
background-origin: content-box;
311
background-position: $_bg_pos;
312
}
313