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, $text_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: $insensitive_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, $fill_color);
104
background-color: transparent;
105
color: $text_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 $fill_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: $fill_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
// backdrop checked button
189
//
190
background-color: $selected_bg_color;
191
color: $selected_fg_color;
192
&:not(:hover):not(:active) > .label { opacity: 0.8; }
193
&:not(:hover):not(:active) > GtkImage { opacity: 0.8; }
194
}
195
@else if $t==checked-insensitive {
196
//
197
// checked insensitive button
198
//
199
background-color: $fill_color;
200
color: transparentize($selected_bg_color, 0.6);
201
> .label { color: inherit; }
202
}
203
@else if $t==flat {
205
//
206
// normal flat button
207
//
208
box-shadow: none;
209
background-color: transparent;
210
background-image: -gtk-gradient(radial,
211
center center, 0,
212
center center, 0.5,
213
to(gtkalpha(currentColor, 0)),
214
to(transparent)),
215
linear-gradient(to bottom, gtkalpha(currentColor, 0));
216
}
217
@else if $t==flat-hover {
218
//
219
// hovered flat button
220
//
221
box-shadow: none;
222
background-image: -gtk-gradient(radial,
223
center center, 0,
224
center center, 0.5,
225
to(gtkalpha(currentColor, 0)),
226
to(transparent)),
227
linear-gradient(to bottom, gtkalpha(currentColor, 0.1));
228
}
229
@else if $t==flat-active {
230
//
231
// pushed flat button
232
//
233
box-shadow: none;
234
animation: flat_ripple_effect 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
235
}
236
@else if $t==flat-insensitive {
237
//
238
// insensitive flat button
239
//
240
box-shadow: none;
241
background-color: transparent;
242
}
243
@else if $t==flat-checked {
244
//
245
// backdrop pushed button FIXME no colors here!
246
//
247
background-color: $fill_color;
248
color: $fg_color;
249
}
250
@else if $t==flat-checked-insensitive {
251
//
252
// flat-checked insensitive button
253
//
254
> .label { color: inherit; }
255
}
256
@else if $t==undecorated {
258
//
259
// reset
260
//
261
border-color: transparent;
262
background-color: transparent;
263
background-image: none;
264
box-shadow: none;
265
text-shadow: none;
266
icon-shadow: none;
267
}
268
}
269
@mixin overshoot($p, $t:normal, $c:$selected_bg_color) {
271
//
272
// overshoot
273
//
274
// $p: position
275
// $t: type
276
// $c: base color
277
//
278
// possible $p values:
279
// top, bottom, right, left
280
//
281
// possible $t values:
282
// normal, backdrop
283
//
284
$_position: center $p;
286
@if ($p == left) or ($p == right) {
288
$_position: $p center;
289
}
290
background-image: -gtk-gradient(radial,
292
$_position, 0,
293
$_position, 0.75,
294
to(transparentize($c, 0.8)),
295
to(transparent));
296
background-repeat: no-repeat;
298
background-position: $_position;
299
background-color: transparent; // reset some properties to be sure to not inherit them somehow
301
border: none; //
302
box-shadow: none; //
303
}
304
@mixin undershoot($p) {
306
//
307
// undershoot
308
//
309
// $p: position
310
//
311
// possible $p values:
312
// top, bottom, right, left
313
//
314
$_undershoot_color_dark: transparentize(black, 0.8);
316
$_undershoot_color_light: transparentize(white, 0.8);
317
$_gradient_dir: left;
319
$_dash_bg_size: 16px 2px;
320
$_gradient_repeat: repeat-x;
321
$_bg_pos: center $p;
322
background-color: transparent; // shouldn't be needed, but better to be sure;
324
@if ($p == left) or ($p == right) {
326
$_gradient_dir: top;
327
$_dash_bg_size: 2px 16px;
328
$_gradient_repeat: repeat-y;
329
$_bg_pos: $p center;
330
}
331
background-image: linear-gradient(to $_gradient_dir, // this is the dashed line
333
$_undershoot_color_light 50%,
334
$_undershoot_color_dark 50%);
335
padding-#{$p}: 0;
337
background-size: $_dash_bg_size;
338
background-repeat: $_gradient_repeat;
339
background-origin: content-box;
340
background-position: $_bg_pos;
341
}
342