ASCII text
1
// Drawing mixins
2
// generic drawing of more complex things
4
// shadows
6
// $z-depth-1: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
7
$z-depth-1: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
8
$z-depth-2: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
9
$z-depth-3: 0 10px 10px rgba(0, 0, 0, 0.19), 0 6px 3px rgba(0, 0, 0, 0.23);
10
$z-depth-4: 0 14px 14px rgba(0, 0, 0, 0.25), 0 10px 5px rgba(0, 0, 0, 0.22);
11
$z-depth-5: 0 19px 19px rgba(0, 0, 0, 0.30), 0 15px 6px rgba(0, 0, 0, 0.22);
12
@keyframes ripple_effect {
14
from {
15
background-image: -gtk-gradient(radial,
16
center center, 0,
17
center center, 0.001,
18
to(gtkalpha(currentColor, $lower_opacity / 2)),
19
to(transparent)),
20
linear-gradient(to bottom, gtkalpha(currentColor, 0));
21
}
22
to {
23
background-image: -gtk-gradient(radial,
24
center center, 0,
25
center center, 0.4,
26
to(gtkalpha(currentColor, $lower_opacity / 2)),
27
to(transparent)),
28
linear-gradient(to bottom, gtkalpha(currentColor, $lower_opacity / 2));
29
}
30
}
31
@keyframes flat_ripple_effect {
33
from {
34
background-image: -gtk-gradient(radial,
35
center center, 0,
36
center center, 0.001,
37
to(gtkalpha(currentColor, $lower_opacity / 2)),
38
to(transparent)),
39
linear-gradient(to bottom, gtkalpha(currentColor, $lower_opacity / 2));
40
}
41
to {
42
background-image: -gtk-gradient(radial,
43
center center, 0,
44
center center, 0.4,
45
to(gtkalpha(currentColor, $lower_opacity / 2)),
46
to(transparent)),
47
linear-gradient(to bottom, gtkalpha(currentColor, $lower_opacity / 2));
48
}
49
}
50
@keyframes list_ripple_effect {
52
from {
53
background-image: -gtk-gradient(radial,
54
center center, 0,
55
center center, 0.001,
56
to(gtkalpha(currentColor, 0)),
57
to(transparent)),
58
linear-gradient(to bottom, gtkalpha(currentColor, 0.05));
59
}
60
to {
61
background-image: -gtk-gradient(radial,
62
center center, 0,
63
center center, 0.4,
64
to(gtkalpha(currentColor, $lower_opacity / 2)),
65
to(transparent)),
66
linear-gradient(to bottom, gtkalpha(currentColor, $lower_opacity / 2));
67
}
68
}
69
// entries
71
@mixin entry($t, $fc:$selected_bg_color) {
73
//
74
// Entries drawing function
75
//
76
// $t: entry type
77
// $fc: focus color
78
//
79
// possible $t values:
80
// normal, focus, insensitive, flat, flat-focus, flat-insensitive;
81
//
82
@if $t==normal {
84
box-shadow: $z-depth-1;
85
background-color: if($fc!=$selected_bg_color, $fc, $base_color);
86
color: if($fc!=$selected_bg_color, $selected_fg_color, $fg_color);
87
}
88
@if $t==focus {
89
box-shadow: $z-depth-2;
90
}
91
@if $t==insensitive {
92
color: $insensitive_fg_color;
93
background-color: $secondary_base_color;
94
}
95
@if $t==flat {
96
border-image: -gtk-gradient(radial,
97
center bottom, 0,
98
center bottom, 0.001,
99
to($fc),
100
to(transparent))
101
0 0 0 / 0 0 0px;
102
border-radius: 0;
103
box-shadow: inset 0 -1px if($fc!=$selected_bg_color, $fc, $track_color);
104
background-color: transparent;
105
color: $fg_color;
106
}
107
@if $t==flat-focus {
108
border-image: -gtk-gradient(radial,
109
center bottom, 0,
110
center bottom, 0.5,
111
to($fc),
112
to(transparent))
113
0 0 2 / 0 0 2px;
114
box-shadow: inset 0 -2px $fc;
115
transition: all $material_duration $material_timing_function, box-shadow 0 $material_timing_function $material_duration, color 0;
116
}
117
@if $t==flat-insensitive {
118
box-shadow: inset 0 -1px $track_color;
119
background-color: transparent;
120
color: $insensitive_fg_color;
121
}
122
}
123
// buttons
125
@mixin button($t, $c:$light_color, $tc:$fg_color) {
127
//
128
// Button drawing function
129
//
130
// $t: button type,
131
// $c: base button color for colored* types
132
// $tc: optional text color for colored* types
133
//
134
// possible $t values:
135
// normal, hover, active, insensitive, checked, checked-insensitive,
136
// flat, flat-hover, flat-active, flat-insensitive, flat-checked, flat-checked-insensitive, undecorated
137
//
138
@if $t==normal {
140
//
141
// normal button
142
//
143
box-shadow: $z-depth-1;
144
background-color: $c;
145
background-image: -gtk-gradient(radial,
146
center center, 0,
147
center center, 0.5,
148
to(gtkalpha(currentColor, 0)),
149
to(transparent)),
150
linear-gradient(to bottom, gtkalpha(currentColor, 0));
151
color: $secondary_fg_color;
152
}
153
@else if $t==hover {
155
//
156
// hovered button
157
//
158
box-shadow: $z-depth-2;
159
background-image: -gtk-gradient(radial,
160
center center, 0,
161
center center, 0.5,
162
to(gtkalpha(currentColor, 0)),
163
to(transparent)),
164
linear-gradient(to bottom, gtkalpha(currentColor, 0));
165
color: $fg_color;
166
}
167
@else if $t==active {
169
//
170
// pushed button
171
//
172
box-shadow: $z-depth-2;
173
color: $fg_color;
174
transition-property: opacity, border-color, border-image, box-shadow,
175
background-color, text-shadow, icon-shadow; // Remove background-image
176
animation: ripple_effect $material_duration $material_timing_function forwards;
177
}
178
@else if $t==insensitive {
179
//
180
// insensitive button
181
//
182
box-shadow: none;
183
background-color: $track_color;
184
color: if($tc!=$fg_color, $insensitive_fg_color, $insensitive_secondary_fg_color);
185
> .label { color: inherit; }
186
}
187
@else if $t==checked {
188
//
189
// checked button
190
//
191
background-color: $selected_bg_color;
192
color: $selected_fg_color;
193
}
194
@else if $t==checked-insensitive {
195
//
196
// checked insensitive button
197
//
198
background-color: $track_color;
199
color: scale-alpha($selected_bg_color, $disabled_opacity);
200
> .label { color: inherit; }
201
}
202
@else if $t==flat {
204
//
205
// normal flat button
206
//
207
box-shadow: none;
208
background-color: transparent;
209
background-image: -gtk-gradient(radial,
210
center center, 0,
211
center center, 0.5,
212
to(gtkalpha(currentColor, 0)),
213
to(transparent)),
214
linear-gradient(to bottom, gtkalpha(currentColor, 0));
215
}
216
@else if $t==flat-hover {
217
//
218
// hovered flat button
219
//
220
box-shadow: none;
221
background-image: -gtk-gradient(radial,
222
center center, 0,
223
center center, 0.5,
224
to(gtkalpha(currentColor, 0)),
225
to(transparent)),
226
linear-gradient(to bottom, gtkalpha(currentColor, $lower_opacity / 2));
227
}
228
@else if $t==flat-active {
229
//
230
// pushed flat button
231
//
232
box-shadow: none;
233
transition-property: opacity, border-color, border-image, box-shadow,
234
background-color, text-shadow, icon-shadow; // Remove background-image
235
animation: flat_ripple_effect $material_duration $material_timing_function forwards;
236
}
237
@else if $t==flat-insensitive {
238
//
239
// insensitive flat button
240
//
241
box-shadow: none;
242
background-color: transparent;
243
}
244
@else if $t==flat-checked {
245
//
246
// checked flat button
247
//
248
background-color: $track_color;
249
color: $fg_color;
250
}
251
@else if $t==flat-checked-insensitive {
252
//
253
// checked flat insensitive button
254
//
255
> .label { color: inherit; }
256
}
257
@else if $t==undecorated {
259
//
260
// reset
261
//
262
border-color: transparent;
263
background-color: transparent;
264
background-image: none;
265
box-shadow: none;
266
text-shadow: none;
267
icon-shadow: none;
268
}
269
}
270
@mixin overshoot($p, $t:normal, $c:$secondary_selected_bg_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) {
307
//
308
// undershoot
309
//
310
// $p: position
311
//
312
// possible $p values:
313
// top, bottom, right, left
314
//
315
$_undershoot_color_dark: scale-alpha($fg_color, $lower_opacity);
317
$_undershoot_color_light: scale-alpha($base_color, $lower_opacity);
318
$_gradient_dir: left;
320
$_dash_bg_size: 16px 2px;
321
$_gradient_repeat: repeat-x;
322
$_bg_pos: center $p;
323
background-color: transparent; // shouldn't be needed, but better to be sure;
325
@if ($p == left) or ($p == right) {
327
$_gradient_dir: top;
328
$_dash_bg_size: 2px 16px;
329
$_gradient_repeat: repeat-y;
330
$_bg_pos: $p center;
331
}
332
background-image: linear-gradient(to $_gradient_dir, // this is the dashed line
334
$_undershoot_color_light 50%,
335
$_undershoot_color_dark 50%);
336
padding-#{$p}: 0;
338
background-size: $_dash_bg_size;
339
background-repeat: $_gradient_repeat;
340
background-origin: content-box;
341
background-position: $_bg_pos;
342
}
343