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, 0.1)),
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, 0.1)),
27
to(transparent)),
28
linear-gradient(to bottom, gtkalpha(currentColor, 0.1));
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, 0.1)),
38
to(transparent)),
39
linear-gradient(to bottom, gtkalpha(currentColor, 0.1));
40
}
41
to {
42
background-image: -gtk-gradient(radial,
43
center center, 0,
44
center center, 0.4,
45
to(gtkalpha(currentColor, 0.1)),
46
to(transparent)),
47
linear-gradient(to bottom, gtkalpha(currentColor, 0.1));
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, 0.1)),
65
to(transparent)),
66
linear-gradient(to bottom, gtkalpha(currentColor, 0.1));
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 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0 cubic-bezier(0.4, 0, 0.2, 1) 0.2s, 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-duration: 0;
175
animation: ripple_effect 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
176
}
177
@else if $t==insensitive {
178
//
179
// insensitive button
180
//
181
box-shadow: none;
182
background-color: $track_color;
183
color: if($tc!=$fg_color, $insensitive_fg_color, $insensitive_secondary_fg_color);
184
> .label { color: inherit; }
185
}
186
@else if $t==checked {
187
//
188
// checked button
189
//
190
background-color: $selected_bg_color;
191
color: $selected_fg_color;
192
}
193
@else if $t==checked-insensitive {
194
//
195
// checked insensitive button
196
//
197
background-color: $track_color;
198
color: gtkopacity($selected_bg_color, 0.4);
199
> .label { color: inherit; }
200
}
201
@else if $t==flat {
203
//
204
// normal flat button
205
//
206
box-shadow: none;
207
background-color: transparent;
208
background-image: -gtk-gradient(radial,
209
center center, 0,
210
center center, 0.5,
211
to(gtkalpha(currentColor, 0)),
212
to(transparent)),
213
linear-gradient(to bottom, gtkalpha(currentColor, 0));
214
}
215
@else if $t==flat-hover {
216
//
217
// hovered flat button
218
//
219
box-shadow: none;
220
background-image: -gtk-gradient(radial,
221
center center, 0,
222
center center, 0.5,
223
to(gtkalpha(currentColor, 0)),
224
to(transparent)),
225
linear-gradient(to bottom, gtkalpha(currentColor, 0.1));
226
}
227
@else if $t==flat-active {
228
//
229
// pushed flat button
230
//
231
box-shadow: none;
232
animation: flat_ripple_effect 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
233
}
234
@else if $t==flat-insensitive {
235
//
236
// insensitive flat button
237
//
238
box-shadow: none;
239
background-color: transparent;
240
}
241
@else if $t==flat-checked {
242
//
243
// checked flat button
244
//
245
background-color: $track_color;
246
color: $fg_color;
247
}
248
@else if $t==flat-checked-insensitive {
249
//
250
// checked flat insensitive button
251
//
252
> .label { color: inherit; }
253
}
254
@else if $t==undecorated {
256
//
257
// reset
258
//
259
border-color: transparent;
260
background-color: transparent;
261
background-image: none;
262
box-shadow: none;
263
text-shadow: none;
264
icon-shadow: none;
265
}
266
}
267
@mixin overshoot($p, $t:normal, $c:$secondary_selected_bg_color) {
269
//
270
// overshoot
271
//
272
// $p: position
273
// $t: type
274
// $c: base color
275
//
276
// possible $p values:
277
// top, bottom, right, left
278
//
279
// possible $t values:
280
// normal, backdrop
281
//
282
$_position: center $p;
284
@if ($p == left) or ($p == right) {
286
$_position: $p center;
287
}
288
background-image: -gtk-gradient(radial,
290
$_position, 0,
291
$_position, 0.75,
292
to(gtkopacity($c, 0.2)),
293
to(transparent));
294
background-repeat: no-repeat;
296
background-position: $_position;
297
background-color: transparent; // reset some properties to be sure to not inherit them somehow
299
border: none; //
300
box-shadow: none; //
301
}
302
@mixin undershoot($p) {
304
//
305
// undershoot
306
//
307
// $p: position
308
//
309
// possible $p values:
310
// top, bottom, right, left
311
//
312
$_undershoot_color_dark: gtkopacity(black, 0.2);
314
$_undershoot_color_light: gtkopacity(white, 0.2);
315
$_gradient_dir: left;
317
$_dash_bg_size: 16px 2px;
318
$_gradient_repeat: repeat-x;
319
$_bg_pos: center $p;
320
background-color: transparent; // shouldn't be needed, but better to be sure;
322
@if ($p == left) or ($p == right) {
324
$_gradient_dir: top;
325
$_dash_bg_size: 2px 16px;
326
$_gradient_repeat: repeat-y;
327
$_bg_pos: $p center;
328
}
329
background-image: linear-gradient(to $_gradient_dir, // this is the dashed line
331
$_undershoot_color_light 50%,
332
$_undershoot_color_dark 50%);
333
padding-#{$p}: 0;
335
background-size: $_dash_bg_size;
336
background-repeat: $_gradient_repeat;
337
background-origin: content-box;
338
background-position: $_bg_pos;
339
}
340