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
border-image: none;
117
box-shadow: $z-depth-1;
118
background-color: if($fc!=$selected_bg_color, $fc, $base_color);
119
color: if($fc!=$selected_bg_color, $selected_fg_color, $fg_color);
120
}
121
@if $t==focus {
123
border-image: none;
124
box-shadow: $z-depth-2;
125
}
126
@if $t==insensitive {
128
box-shadow: $z-depth-1;
129
background-color: $secondary_base_color;
130
color: $insensitive_fg_color;
131
}
132
@if $t==flat-normal {
134
border-image: radial-gradient(circle farthest-corner at center calc(100% - 1px),
135
$fc 0%,
136
transparent 0%)
137
0 0 0 / 0 0 0px;
138
box-shadow: inset 0 -1px if($fc!=$selected_bg_color, $fc, $track_color);
139
background-color: transparent;
140
color: $fg_color;
141
}
142
@if $t==flat-focus {
144
border-image: radial-gradient(circle farthest-corner at center calc(100% - 1px),
145
$fc 100%,
146
transparent 0%)
147
0 0 2 / 0 0 2px;
148
box-shadow: inset 0 -1px if($fc!=$selected_bg_color, $fc, $track_color);
149
}
150
@if $t==flat-insensitive {
152
box-shadow: inset 0 -1px $track_color;
153
background-color: transparent;
154
color: $insensitive_fg_color;
155
}
156
}
157
// buttons
160
@mixin button($t, $c:$light_color, $tc:$fg_color) {
162
//
163
// Button drawing function
164
//
165
// $t: button type,
166
// $c: base button color for colored* types
167
// $tc: optional text color for colored* types
168
//
169
// possible $t values:
170
// normal, hover, active, insensitive, checked, checked-insensitive,
171
// flat-normal, flat-hover, flat-active, flat-insensitive, flat-checked, flat-checked-insensitive;
172
//
173
@if $t==normal {
175
//
176
// normal button
177
//
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
//
189
// hovered button
190
//
191
box-shadow: $z-depth-2;
192
background-image: radial-gradient(circle farthest-corner at center,
193
gtkalpha(currentColor, 0) 100%,
194
transparent 0%),
195
image(gtkalpha(currentColor, 0));
196
color: $fg_color;
197
}
198
@if $t==active {
200
//
201
// pushed button
202
//
203
box-shadow: $z-depth-2;
204
color: $fg_color;
205
transition: all $material_duration $material_timing_function, color 0, background-image 0;
206
animation: ripple_effect $material_duration $material_timing_function forwards;
207
}
208
@if $t==insensitive {
210
//
211
// insensitive button
212
//
213
box-shadow: none;
214
background-color: $track_color;
215
color: if($tc!=$fg_color, $insensitive_fg_color, $insensitive_secondary_fg_color);
216
> label { color: inherit; }
218
}
219
@if $t==checked {
221
//
222
// checked button
223
//
224
background-color: $selected_bg_color;
225
color: $selected_fg_color;
226
}
227
@if $t==checked-insensitive {
229
//
230
// checked insensitive button
231
//
232
background-color: $track_color;
233
color: scale-alpha($selected_bg_color, $disabled_opacity);
234
> label { color: inherit; }
236
}
237
@if $t==flat-normal {
239
//
240
// normal flat button
241
//
242
box-shadow: none;
243
background-color: transparent;
244
background-image: radial-gradient(circle farthest-corner at center,
245
gtkalpha(currentColor, 0) 100%,
246
transparent 0%),
247
image(gtkalpha(currentColor, 0));
248
color: $secondary_fg_color;
249
}
250
@if $t==flat-hover {
252
//
253
// hovered flat button
254
//
255
box-shadow: none;
256
background-image: radial-gradient(circle farthest-corner at center,
257
gtkalpha(currentColor, 0) 100%,
258
transparent 0%),
259
image(gtkalpha(currentColor, $lower_opacity / 2));
260
color: $fg_color;
261
}
262
@if $t==flat-active {
264
//
265
// pushed flat button
266
//
267
box-shadow: none;
268
color: $fg_color;
269
transition: all $material_duration $material_timing_function, color 0, background-image 0;
270
animation: flat_ripple_effect $material_duration $material_timing_function forwards;
271
}
272
@if $t==flat-insensitive {
274
//
275
// insensitive flat button
276
//
277
box-shadow: none;
278
background-color: transparent;
279
color: if($tc!=$fg_color, $insensitive_fg_color, $insensitive_secondary_fg_color);
280
> label { color: inherit; }
282
}
283
@if $t==flat-checked {
285
//
286
// checked flat button
287
//
288
background-color: $track_color;
289
color: $fg_color;
290
}
291
@if $t==flat-checked-insensitive {
293
//
294
// checked flat insensitive button
295
//
296
background-color: $track_color;
297
color: $insensitive_fg_color;
298
> label { color: inherit; }
300
}
301
}
302
@mixin overshoot($p, $t:normal, $c:$secondary_selected_bg_color) {
305
//
306
// overshoot
307
//
308
// $p: position
309
// $t: type
310
// $c: base color
311
//
312
// possible $p values:
313
// top, bottom, right, left
314
//
315
// possible $t values:
316
// normal, backdrop
317
//
318
$_position: center $p;
320
@if ($p == left) or ($p == right) {
322
$_position: $p center;
323
}
324
background-image: -gtk-gradient(radial,
326
$_position, 0,
327
$_position, 0.75,
328
to(scale-alpha($c, $lower_opacity)),
329
to(transparent));
330
background-repeat: no-repeat;
332
background-position: $_position;
333
background-color: transparent; // reset some properties to be sure to not inherit them somehow
335
border: none; //
336
box-shadow: none; //
337
}
338
@mixin undershoot($p) {
341
//
342
// undershoot
343
//
344
// $p: position
345
//
346
// possible $p values:
347
// top, bottom, right, left
348
//
349
$_undershoot_color_dark: scale-alpha($fg_color, $lower_opacity);
351
$_undershoot_color_light: scale-alpha($base_color, $lower_opacity);
352
$_gradient_dir: left;
354
$_dash_bg_size: 16px 2px;
355
$_gradient_repeat: repeat-x;
356
$_bg_pos: center $p;
357
background-color: transparent; // shouldn't be needed, but better to be sure;
359
@if ($p == left) or ($p == right) {
361
$_gradient_dir: top;
362
$_dash_bg_size: 2px 16px;
363
$_gradient_repeat: repeat-y;
364
$_bg_pos: $p center;
365
}
366
background-image: linear-gradient(to $_gradient_dir, // this is the dashed line
368
$_undershoot_color_light 50%,
369
$_undershoot_color_dark 50%);
370
padding-#{$p}: 0;
372
background-size: $_dash_bg_size;
373
background-repeat: $_gradient_repeat;
374
background-origin: content-box;
375
background-position: $_bg_pos;
376
}
377