ASCII text
1
// Drawing mixins
2
// generic drawing of more complex things
4
// shadows
6
@mixin shadow($level) {
7
@if $level==1 {
8
// box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
9
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
10
}
11
@if $level==2 {
12
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
13
}
14
@if $level==3 {
15
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.19), 0 6px 3px rgba(0, 0, 0, 0.23);
16
}
17
@if $level==4 {
18
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.25), 0 10px 5px rgba(0, 0, 0, 0.22);
19
}
20
@if $level==5 {
21
box-shadow: 0 19px 19px rgba(0, 0, 0, 0.30), 0 15px 6px rgba(0, 0, 0, 0.22);
22
}
23
}
24
@keyframes ripple_effect {
26
from {
27
background-image: -gtk-gradient(radial,
28
center center, 0,
29
center center, 0.001,
30
to(gtkalpha(currentColor, 0)),
31
to(transparent));
32
}
33
to {
34
background-image: -gtk-gradient(radial,
35
center center, 0,
36
center center, 0.75,
37
to($fill_color),
38
to(transparent));
39
}
40
}
41
@keyframes flat_ripple_effect {
43
from {
44
background-image: -gtk-gradient(radial,
45
center center, 0,
46
center center, 0.001,
47
to(gtkalpha(currentColor, 0.1)),
48
to(transparent)),
49
linear-gradient(to bottom, gtkalpha(currentColor, 0.1));
50
}
51
to {
52
background-image: -gtk-gradient(radial,
53
center center, 0,
54
center center, 0.75,
55
to(gtkalpha(currentColor, 0.1)),
56
to(transparent)),
57
linear-gradient(to bottom, gtkalpha(currentColor, 0.1));
58
}
59
}
60
@keyframes list_ripple_effect {
62
from {
63
background-image: -gtk-gradient(radial,
64
center center, 0,
65
center center, 0.001,
66
to(gtkalpha(currentColor, 0)),
67
to(transparent)),
68
linear-gradient(to bottom, gtkalpha(currentColor, 0.05));
69
}
70
to {
71
background-image: -gtk-gradient(radial,
72
center center, 0,
73
center center, 0.75,
74
to(gtkalpha(currentColor, 0.05)),
75
to(transparent)),
76
linear-gradient(to bottom, gtkalpha(currentColor, 0.05));
77
}
78
}
79
// entries
81
@mixin entry($t, $fc:$selected_bg_color) {
83
//
84
// Entries drawing function
85
//
86
// $t: entry type
87
// $fc: focus color
88
//
89
// possible $t values:
90
// normal, focus, insensitive, flat, flat-focus, flat-insensitive;
91
//
92
@if $t==normal {
94
@include shadow(1);
95
background-color: if($fc!=$selected_bg_color, $fc, $base_color);
96
color: if($fc!=$selected_bg_color, $selected_fg_color, $text_color);
97
}
98
@if $t==focus {
99
@include shadow(2);
100
}
101
@if $t==insensitive {
102
color: $insensitive_fg_color;
103
background-color: $insensitive_base_color;
104
}
105
@if $t==flat {
106
border-image: -gtk-gradient(radial,
107
center bottom, 0,
108
center bottom, 0.001,
109
to($fc),
110
to(transparent))
111
0 0 0 / 0 0 0px;
112
border-radius: 0;
113
box-shadow: inset 0 -1px if($fc!=$selected_bg_color, $fc, $fill_color);
114
background-color: transparent;
115
color: $text_color;
116
}
117
@if $t==flat-focus {
118
border-image: -gtk-gradient(radial,
119
center bottom, 0,
120
center bottom, 0.75,
121
to($fc),
122
to(transparent))
123
0 0 2 / 0 0 2px;
124
box-shadow: inset 0 -1px if($fc!=$selected_bg_color, $fc, $fill_color);
125
transition-duration: 0.4s;
126
}
127
@if $t==flat-insensitive {
128
box-shadow: inset 0 -1px $fill_color;
129
background-color: transparent;
130
color: $insensitive_fg_color;
131
}
132
}
133
// buttons
135
@mixin button($t, $c:$light_color, $tc:$fg_color) {
137
//
138
// Button drawing function
139
//
140
// $t: button type,
141
// $c: base button color for colored* types
142
// $tc: optional text color for colored* types
143
//
144
// possible $t values:
145
// normal, hover, active, insensitive, checked, checked-insensitive,
146
// flat, flat-hover, flat-active, flat-insensitive, flat-checked, flat-checked-insensitive, undecorated
147
//
148
@if $t==normal {
150
//
151
// normal button
152
//
153
@include shadow(1);
154
background-color: $c;
155
background-image: -gtk-gradient(radial,
156
center center, 0,
157
center center, 0.75,
158
to(gtkalpha(currentColor, 0)),
159
to(transparent));
160
color: if($tc!=$fg_color, $tc, $secondary_fg_color);
161
// transition-duration: 0.4s;
162
}
163
@else if $t==hover {
165
//
166
// hovered button
167
//
168
@include shadow(2);
169
background-image: -gtk-gradient(radial,
170
center center, 0,
171
center center, 0.75,
172
to(gtkalpha(currentColor, 0)),
173
to(transparent));
174
color: if($tc!=$fg_color, $tc, $fg_color);
175
// transition-duration: 0.2s;
176
}
177
@else if $t==active {
179
//
180
// pushed button
181
//
182
@include shadow(2);
183
color: if($tc!=$fg_color, $tc, $fg_color);
184
transition-duration: 0;
185
animation: ripple_effect 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
186
}
187
@else if $t==insensitive {
188
//
189
// insensitive button
190
//
191
box-shadow: none;
192
background-color: $fill_color;
193
color: if($tc!=$fg_color, $insensitive_fg_color, $insensitive_secondary_fg_color);
194
> .label { color: inherit; }
195
}
196
@else if $t==flat {
197
//
198
// normal flat button
199
//
200
box-shadow: none;
201
background-color: transparent;
202
background-image: -gtk-gradient(radial,
203
center center, 0,
204
center center, 0.75,
205
to(gtkalpha(currentColor, 0)),
206
to(transparent)),
207
linear-gradient(to bottom, gtkalpha(currentColor, 0));
208
color: if($tc!=$fg_color, $c, $secondary_fg_color);
209
}
210
@else if $t==flat-hover {
211
//
212
// hovered flat button
213
//
214
box-shadow: none;
215
background-image: -gtk-gradient(radial,
216
center center, 0,
217
center center, 0.75,
218
to(gtkalpha(currentColor, 0)),
219
to(transparent)),
220
linear-gradient(to bottom, gtkalpha(currentColor, 0.1));
221
color: if($tc!=$fg_color, $c, $fg_color);
222
}
223
@else if $t==flat-active {
224
//
225
// pushed flat button
226
//
227
box-shadow: none;
228
color: if($tc!=$fg_color, $c, $fg_color);
229
animation: flat_ripple_effect 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
230
}
231
@else if $t==flat-insensitive {
232
//
233
// insensitive flat button
234
//
235
box-shadow: none;
236
background-color: transparent;
237
color: if($tc!=$fg_color, $insensitive_fg_color, $insensitive_secondary_fg_color);
238
}
239
@else if $t==checked {
240
//
241
// backdrop checked button
242
//
243
background-color: $selected_bg_color;
244
color: $selected_fg_color;
245
&:not(:hover):not(:active) > .label { opacity: 0.8; }
246
&:not(:hover):not(:active) > GtkImage { opacity: 0.8; }
247
}
248
@else if $t==checked-insensitive {
249
//
250
// checked insensitive button
251
//
252
background-color: $fill_color;
253
color: transparentize($selected_bg_color, 0.6);
254
> .label { color: inherit; }
255
}
256
@else if $t==flat-checked {
258
//
259
// backdrop pushed button FIXME no colors here!
260
//
261
}
262
@else if $t==flat-checked-insensitive {
263
//
264
// flat-checked insensitive button
265
//
266
> .label { color: inherit; }
267
}
268
@else if $t==undecorated {
270
//
271
// reset
272
//
273
border-color: transparent;
274
background-color: transparent;
275
background-image: none;
276
box-shadow: none;
277
text-shadow: none;
278
icon-shadow: none;
279
}
280
}
281
@mixin overshoot($p, $t:normal, $c:$selected_bg_color) {
283
//
284
// overshoot
285
//
286
// $p: position
287
// $t: type
288
// $c: base color
289
//
290
// possible $p values:
291
// top, bottom, right, left
292
//
293
// possible $t values:
294
// normal, backdrop
295
//
296
$_position: center $p;
298
@if ($p == left) or ($p == right) {
300
$_position: $p center;
301
}
302
background-image: -gtk-gradient(radial,
304
$_position, 0,
305
$_position, 0.75,
306
to(transparentize($c, 0.8)),
307
to(transparent));
308
background-repeat: no-repeat;
310
background-position: $_position;
311
background-color: transparent; // reset some properties to be sure to not inherit them somehow
313
border: none; //
314
box-shadow: none; //
315
}
316
@mixin undershoot($p) {
318
//
319
// undershoot
320
//
321
// $p: position
322
//
323
// possible $p values:
324
// top, bottom, right, left
325
//
326
$_undershoot_color_dark: transparentize(black, 0.8);
328
$_undershoot_color_light: transparentize(white, 0.8);
329
$_gradient_dir: left;
331
$_dash_bg_size: 16px 2px;
332
$_gradient_repeat: repeat-x;
333
$_bg_pos: center $p;
334
background-color: transparent; // shouldn't be needed, but better to be sure;
336
@if ($p == left) or ($p == right) {
338
$_gradient_dir: top;
339
$_dash_bg_size: 2px 16px;
340
$_gradient_repeat: repeat-y;
341
$_bg_pos: $p center;
342
}
343
background-image: linear-gradient(to $_gradient_dir, // this is the dashed line
345
$_undershoot_color_light 50%,
346
$_undershoot_color_dark 50%);
347
padding-#{$p}: 0;
349
background-size: $_dash_bg_size;
350
background-repeat: $_gradient_repeat;
351
background-origin: content-box;
352
background-position: $_bg_pos;
353
}
354