ASCII text
1
// generic drawing of more complex things
2
// ripple effect animations
5
@keyframes ripple_effect {
7
from {
8
background-image: -gtk-gradient(radial,
9
center center, 0,
10
center center, 0.001,
11
to(gtkalpha(currentColor, $lower_opacity / 2)),
12
to(transparent)),
13
linear-gradient(to bottom, gtkalpha(currentColor, 0));
14
}
15
to {
16
background-image: -gtk-gradient(radial,
17
center center, 0,
18
center center, 0.4,
19
to(gtkalpha(currentColor, $lower_opacity / 2)),
20
to(transparent)),
21
linear-gradient(to bottom, gtkalpha(currentColor, $lower_opacity / 2));
22
}
23
}
24
@keyframes flat_ripple_effect {
26
from {
27
background-image: -gtk-gradient(radial,
28
center center, 0,
29
center center, 0.001,
30
to(gtkalpha(currentColor, $lower_opacity / 2)),
31
to(transparent)),
32
linear-gradient(to bottom, gtkalpha(currentColor, $lower_opacity / 2));
33
}
34
to {
35
background-image: -gtk-gradient(radial,
36
center center, 0,
37
center center, 0.4,
38
to(gtkalpha(currentColor, $lower_opacity / 2)),
39
to(transparent)),
40
linear-gradient(to bottom, gtkalpha(currentColor, $lower_opacity / 2));
41
}
42
}
43
@keyframes list_ripple_effect {
45
from {
46
background-image: -gtk-gradient(radial,
47
center center, 0,
48
center center, 0.001,
49
to(gtkalpha(currentColor, $lower_opacity / 2)),
50
to(transparent)),
51
linear-gradient(to bottom, gtkalpha(currentColor, 0));
52
}
53
to {
54
background-image: -gtk-gradient(radial,
55
center center, 0,
56
center center, 0.4,
57
to(gtkalpha(currentColor, $lower_opacity / 2)),
58
to(transparent)),
59
linear-gradient(to bottom, gtkalpha(currentColor, 0));
60
}
61
}
62
// entries
64
@mixin entry($t, $fc:$primary_color) {
66
//
67
// Entries drawing function
68
//
69
// $t: entry type
70
// $fc: focus color
71
//
72
// possible $t values:
73
// normal, focus, insensitive, flat-normal, flat-focus, flat-insensitive;
74
//
75
@if $t==normal {
77
transition: $longer_transition, $shadow_transition;
78
box-shadow: $shadow_1;
79
background-color: if($fc!=$primary_color, $fc, $base_color);
80
color: if($fc!=$primary_color, $inverse_fg_color, $fg_color);
81
}
82
@if $t==focus {
84
box-shadow: $shadow_2;
85
}
86
@if $t==insensitive {
88
color: $disabled_fg_color;
89
background-color: $alt_base_color;
90
}
91
@if $t==flat-normal {
93
transition: $longer_transition;
94
border-image: -gtk-gradient(radial,
95
center bottom, 0,
96
center bottom, 0.001,
97
to($fc),
98
to(transparent))
99
0 0 0 / 0 0 0px;
100
border-radius: 0;
101
box-shadow: inset 0 -1px if($fc!=$primary_color, $fc, $fill_color);
102
background-color: transparent;
103
color: $fg_color;
104
}
105
@if $t==flat-focus {
107
border-image: -gtk-gradient(radial,
108
center bottom, 0,
109
center bottom, 0.5,
110
to($fc),
111
to(transparent))
112
0 0 2 / 0 0 2px;
113
box-shadow: inset 0 -2px $fc;
114
transition: $longer_transition, box-shadow 0 $longer_duration;
115
}
116
@if $t==flat-insensitive {
118
box-shadow: inset 0 -1px $fill_color;
119
background-color: transparent;
120
color: $disabled_fg_color;
121
}
122
}
123
// buttons
125
@mixin button($t, $c:$lighter_bg_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-normal, flat-hover, flat-active, flat-insensitive, flat-checked, flat-checked-insensitive;
137
//
138
@if $t==normal {
140
transition: $longer_transition, $shadow_transition;
141
box-shadow: $shadow_1;
142
background-color: $c;
143
background-image: -gtk-gradient(radial,
144
center center, 0,
145
center center, 0.5,
146
to(gtkalpha(currentColor, 0)),
147
to(transparent)),
148
linear-gradient(to bottom, gtkalpha(currentColor, 0));
149
color: $secondary_fg_color;
150
}
151
@else if $t==hover {
153
box-shadow: $shadow_2;
154
background-image: -gtk-gradient(radial,
155
center center, 0,
156
center center, 0.5,
157
to(gtkalpha(currentColor, 0)),
158
to(transparent)),
159
linear-gradient(to bottom, gtkalpha(currentColor, 0));
160
color: $fg_color;
161
}
162
@else if $t==active {
164
transition: $longer_transition, $shadow_transition, background-image 0;
165
animation: ripple_effect $longer_duration $deceleration_curve forwards;
166
box-shadow: $shadow_2;
167
color: $fg_color;
168
}
169
@else if $t==insensitive {
171
box-shadow: none;
172
background-color: $fill_color;
173
color: if($tc!=$fg_color, $disabled_fg_color, $disabled_secondary_fg_color);
174
> .label { color: inherit; }
176
}
177
@else if $t==checked {
179
background-color: $primary_color;
180
color: $inverse_fg_color;
181
}
182
@else if $t==checked-insensitive {
184
background-color: $fill_color;
185
color: scale-alpha($primary_color, $disabled_opacity);
186
> .label { color: inherit; }
187
}
188
@else if $t==flat-normal {
190
transition: $longer_transition;
191
box-shadow: none;
192
background-color: transparent;
193
background-image: -gtk-gradient(radial,
194
center center, 0,
195
center center, 0.5,
196
to(gtkalpha(currentColor, 0)),
197
to(transparent)),
198
linear-gradient(to bottom, gtkalpha(currentColor, 0));
199
color: gtkalpha(currentColor, $secondary_opacity);
200
}
201
@else if $t==flat-hover {
203
box-shadow: none;
204
background-image: -gtk-gradient(radial,
205
center center, 0,
206
center center, 0.5,
207
to(gtkalpha(currentColor, 0)),
208
to(transparent)),
209
linear-gradient(to bottom, gtkalpha(currentColor, $lower_opacity / 2));
210
color: currentColor;
211
}
212
@else if $t==flat-active {
214
transition: $longer_transition, background-image 0;
215
animation: flat_ripple_effect $longer_duration $deceleration_curve forwards;
216
box-shadow: none;
217
color: currentColor;
218
}
219
@else if $t==flat-insensitive {
221
box-shadow: none;
222
background-color: transparent;
223
color: if($tc != $fg_color, gtkalpha(currentColor, $disabled_opacity), gtkalpha(currentColor, $secondary_opacity * $disabled_opacity));
224
> .label { color: inherit; }
226
}
227
@else if $t==flat-checked {
229
background-color: $fill_color;
230
color: currentColor;
231
}
232
@else if $t==flat-checked-insensitive {
234
background-color: $fill_color;
235
color: gtkalpha(currentColor, $disabled_opacity);
236
> .label { color: inherit; }
238
}
239
}
240
@mixin overshoot($p, $t:normal, $c:$alt_primary_color) {
242
//
243
// overshoot
244
//
245
// $p: position
246
// $t: type
247
// $c: base color
248
//
249
// possible $p values:
250
// top, bottom, right, left
251
//
252
// possible $t values:
253
// normal, backdrop
254
//
255
$_position: center $p;
257
@if ($p == left) or ($p == right) {
259
$_position: $p center;
260
}
261
background-image: -gtk-gradient(radial,
263
$_position, 0,
264
$_position, 0.75,
265
to(scale-alpha($c, $lower_opacity)),
266
to(transparent));
267
background-repeat: no-repeat;
269
background-position: $_position;
270
background-color: transparent; // reset some properties to be sure to not inherit them somehow
272
border: none; //
273
box-shadow: none; //
274
}
275
@mixin undershoot($p) {
277
//
278
// undershoot
279
//
280
// $p: position
281
//
282
// possible $p values:
283
// top, bottom, right, left
284
//
285
$_undershoot_color_dark: scale-alpha($fg_color, $lower_opacity);
287
$_undershoot_color_light: scale-alpha($base_color, $lower_opacity);
288
$_gradient_dir: left;
290
$_dash_bg_size: 12px 1px;
291
$_gradient_repeat: repeat-x;
292
$_bg_pos: left $p;
293
background-color: transparent; // shouldn't be needed, but better to be sure;
295
@if ($p == left) or ($p == right) {
297
$_gradient_dir: top;
298
$_dash_bg_size: 1px 12px;
299
$_gradient_repeat: repeat-y;
300
$_bg_pos: $p top;
301
}
302
background-image: linear-gradient(to $_gradient_dir, // this is the dashed line
304
$_undershoot_color_light 50%,
305
$_undershoot_color_dark 50%);
306
padding-#{$p}: 1px;
308
background-size: $_dash_bg_size;
309
background-repeat: $_gradient_repeat;
310
background-origin: content-box;
311
background-position: $_bg_pos;
312
}
313