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
@mixin entry($t, $fc: $primary_color) {
65
//
66
// entry
67
//
68
// $t: entry type
69
// $fc: focus color
70
//
71
@if $t == normal {
73
transition: $longer_transition, $shadow_transition;
74
box-shadow: $shadow_1;
75
background-color: if($fc == $primary_color, $base_color, $fc);
76
color: if($fc == $primary_color, $fg_color, $inverse_fg_color);
77
}
78
@if $t == focus {
80
box-shadow: $shadow_2;
81
}
82
@if $t == insensitive {
84
color: $disabled_fg_color;
85
background-color: $alt_base_color;
86
}
87
@if $t == flat-normal {
89
transition: $longer_transition;
90
border-image: -gtk-gradient(radial,
91
center bottom, 0,
92
center bottom, 0.001,
93
to($fc),
94
to(transparent))
95
0 0 0 / 0 0 0px;
96
border-radius: 0;
97
box-shadow: inset 0 -1px if($fc == $primary_color, $fill_color, $fc);
98
background-color: transparent;
99
color: $fg_color;
100
}
101
@if $t == flat-focus {
103
border-image: -gtk-gradient(radial,
104
center bottom, 0,
105
center bottom, 0.5,
106
to($fc),
107
to(transparent))
108
0 0 2 / 0 0 2px;
109
box-shadow: inset 0 -2px $fc;
110
transition: $longer_transition, box-shadow 0 $longer_duration;
111
}
112
@if $t == flat-insensitive {
114
box-shadow: inset 0 -1px $fill_color;
115
background-color: transparent;
116
color: $disabled_fg_color;
117
}
118
}
119
@mixin button($t, $c: $lighter_bg_color) {
122
//
123
// button
124
//
125
// $t: button type
126
// $c: base color
127
//
128
@if $t == normal {
130
transition: $longer_transition, $shadow_transition;
131
box-shadow: $shadow_1;
132
background-color: $c;
133
background-image: -gtk-gradient(radial,
134
center center, 0,
135
center center, 0.5,
136
to(gtkalpha(currentColor, 0)),
137
to(transparent)),
138
linear-gradient(to bottom, gtkalpha(currentColor, 0));
139
color: $secondary_fg_color;
140
}
141
@if $t == hover {
143
box-shadow: $shadow_2;
144
background-image: -gtk-gradient(radial,
145
center center, 0,
146
center center, 0.5,
147
to(gtkalpha(currentColor, 0)),
148
to(transparent)),
149
linear-gradient(to bottom, gtkalpha(currentColor, 0));
150
color: $fg_color;
151
}
152
@if $t == active {
154
transition: $longer_transition, $shadow_transition, background-image 0;
155
animation: ripple_effect $longer_duration $deceleration_curve forwards;
156
box-shadow: $shadow_2;
157
color: $fg_color;
158
}
159
@if $t == insensitive {
161
box-shadow: none;
162
background-color: $fill_color;
163
color: if($c == $lighter_bg_color, $disabled_secondary_fg_color, $disabled_fg_color);
164
> .label { color: inherit; }
166
}
167
@if $t == checked {
169
background-color: $primary_color;
170
color: $inverse_fg_color;
171
}
172
@if $t == checked-insensitive {
174
background-color: $fill_color;
175
color: scale-alpha($primary_color, $disabled_opacity);
176
> .label { color: inherit; }
177
}
178
@if $t == flat-normal {
180
transition: $longer_transition;
181
box-shadow: none;
182
background-color: transparent;
183
background-image: -gtk-gradient(radial,
184
center center, 0,
185
center center, 0.5,
186
to(gtkalpha(currentColor, 0)),
187
to(transparent)),
188
linear-gradient(to bottom, gtkalpha(currentColor, 0));
189
color: gtkalpha(currentColor, $secondary_opacity);
190
}
191
@if $t == flat-hover {
193
box-shadow: none;
194
background-image: -gtk-gradient(radial,
195
center center, 0,
196
center center, 0.5,
197
to(gtkalpha(currentColor, 0)),
198
to(transparent)),
199
linear-gradient(to bottom, gtkalpha(currentColor, $lower_opacity / 2));
200
color: currentColor;
201
}
202
@if $t == flat-active {
204
transition: $longer_transition, background-image 0;
205
animation: flat_ripple_effect $longer_duration $deceleration_curve forwards;
206
box-shadow: none;
207
color: currentColor;
208
}
209
@if $t == flat-insensitive {
211
box-shadow: none;
212
background-color: transparent;
213
color: if($c == $lighter_bg_color,
214
gtkalpha(currentColor, $secondary_opacity * $disabled_opacity),
215
gtkalpha(currentColor, $disabled_opacity));
216
> .label { color: inherit; }
218
}
219
@if $t == flat-checked {
221
background-color: $fill_color;
222
color: currentColor;
223
}
224
@if $t == flat-checked-insensitive {
226
background-color: $fill_color;
227
color: gtkalpha(currentColor, $disabled_opacity);
228
> .label { color: inherit; }
230
}
231
}
232
@mixin overshoot($p) {
235
//
236
// overshoot
237
//
238
// $p: position
239
//
240
// possible $p values:
241
// top, bottom, right, left
242
//
243
$_position: center $p;
245
@if ($p == left) or ($p == right) {
247
$_position: $p center;
248
}
249
background-image: -gtk-gradient(radial,
251
$_position, 0,
252
$_position, 0.75,
253
to(scale-alpha($alt_primary_color, $lower_opacity)),
254
to(transparent));
255
background-repeat: no-repeat;
257
background-position: $_position;
258
background-color: transparent; // reset some properties to be sure to not inherit them somehow
260
border: none; //
261
box-shadow: none; //
262
}
263
@mixin undershoot($p) {
266
//
267
// undershoot
268
//
269
// $p: position
270
//
271
// possible $p values:
272
// top, bottom, right, left
273
//
274
$_undershoot_color_dark: scale-alpha($fg_color, $lower_opacity);
276
$_undershoot_color_light: scale-alpha($base_color, $lower_opacity);
277
$_gradient_dir: left;
279
$_dash_bg_size: 12px 1px;
280
$_gradient_repeat: repeat-x;
281
$_bg_pos: left $p;
282
@if ($p == left) or ($p == right) {
284
$_gradient_dir: top;
285
$_dash_bg_size: 1px 12px;
286
$_gradient_repeat: repeat-y;
287
$_bg_pos: $p top;
288
}
289
background-color: transparent; // shouldn't be needed, but better to be sure
291
background-image: linear-gradient(to $_gradient_dir, // this is the dashed line
293
$_undershoot_color_light 50%,
294
$_undershoot_color_dark 50%);
295
padding-#{$p}: 1px;
297
background-size: $_dash_bg_size;
298
background-repeat: $_gradient_repeat;
299
background-origin: content-box;
300
background-position: $_bg_pos;
301
}
302