ASCII text
1
// Drawing mixins
2
// generic drawing of more complex things
4
// ripple effect animations
7
@keyframes ripple_effect {
9
to { background-size: 1000% 1000%; }
10
}
11
@keyframes header_ripple_effect {
13
from {
14
background-image: radial-gradient(circle farthest-corner at center,
15
$primary_color 0%,
16
transparent 0%);
17
}
18
to {
20
background-image: radial-gradient(circle farthest-corner at center,
21
$primary_color 100%,
22
transparent 0%);
23
}
24
}
25
@mixin entry($t, $fc:$primary_color) {
28
//
29
// Entries drawing function
30
//
31
// $t: entry type
32
// $fc: focus color
33
//
34
// possible $t values:
35
// normal, focus, disabled, flat-normal, flat-focus, flat-disabled;
36
//
37
@if $t == normal {
39
transition: $longer_transition, $shadow_transition;
40
border-image: none;
41
box-shadow: $shadow_1;
42
background-color: if($fc != $primary_color, $fc, $base_color);
43
color: if($fc != $primary_color, $inverse_fg_color, $fg_color);
44
}
45
@if $t == focus {
47
border-image: none;
48
box-shadow: $shadow_2;
49
}
50
@if $t == disabled {
52
box-shadow: $shadow_1;
53
background-color: $alt_base_color;
54
color: $disabled_fg_color;
55
}
56
@if $t == flat-normal {
58
transition: $longer_transition;
59
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
60
$fc 0%,
61
transparent 0%)
62
0 0 0 / 0 0 0px;
63
box-shadow: inset 0 -1px if($fc != $primary_color, $fc, $fill_color);
64
background-color: transparent;
65
color: $fg_color;
66
}
67
@if $t == flat-focus {
69
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
70
$fc 100%,
71
transparent 0%)
72
0 0 2 / 0 0 2px;
73
box-shadow: inset 0 -1px if($fc != $primary_color, $fc, $fill_color);
74
}
75
@if $t == flat-disabled {
77
box-shadow: inset 0 -1px $fill_color;
78
background-color: transparent;
79
color: $disabled_fg_color;
80
}
81
}
82
@mixin button($t, $c:$lighter_bg_color, $tc:$fg_color) {
85
//
86
// Button drawing function
87
//
88
// $t: button type,
89
// $c: base button color for colored* types
90
// $tc: optional text color for colored* types
91
//
92
// possible $t values:
93
// normal, hover, active, disabled, checked, checked-disabled,
94
// flat-normal, flat-hover, flat-active, flat-disabled, flat-checked, flat-checked-disabled;
95
//
96
@if $t == normal {
98
transition: $longer_transition,
99
$shadow_transition,
100
background-size $ripple_duration $deceleration_curve,
101
background-image $ripple_duration * 2 $deceleration_curve;
102
box-shadow: $shadow_1, inset 0 0 0 9999px transparent;
103
background-color: $c;
104
background-image: radial-gradient(circle farthest-corner at center,
105
transparent 10%,
106
transparent 0%);
107
background-repeat: no-repeat;
108
background-position: center;
109
background-size: 1000% 1000%;
110
color: $secondary_fg_color;
111
}
112
@if $t == hover {
114
box-shadow: $shadow_2, inset 0 0 0 9999px transparent;
115
color: $fg_color;
116
}
117
@if $t == active {
119
transition: $longer_transition,
120
background-size 0,
121
background-image 0;
122
animation: ripple_effect $longer_duration $deceleration_curve forwards;
123
box-shadow: $shadow_2, inset 0 0 0 9999px $semi_fill_color;
124
background-image: radial-gradient(circle farthest-corner at center,
125
$semi_fill_color 10%,
126
transparent 0%);
127
background-size: 0% 0%;
128
color: $fg_color;
129
}
130
@if $t == disabled {
132
box-shadow: none;
133
background-color: $fill_color;
134
color: if($tc != $fg_color, $disabled_fg_color, $disabled_secondary_fg_color);
135
}
136
@if $t == checked {
138
background-color: $primary_color;
139
color: $inverse_fg_color;
140
}
141
@if $t == checked-disabled {
143
background-color: $fill_color;
144
color: scale-alpha($primary_color, $disabled_opacity);
145
}
146
@if $t == flat-normal {
148
transition: $longer_transition,
149
background-size $ripple_duration $deceleration_curve,
150
background-image $ripple_duration * 2 $deceleration_curve;
151
box-shadow: inset 0 0 0 9999px transparent;
152
background-color: transparent;
153
background-image: radial-gradient(circle farthest-corner at center,
154
transparent 10%,
155
transparent 0%);
156
background-repeat: no-repeat;
157
background-position: center;
158
background-size: 1000% 1000%;
159
color: gtkalpha(currentColor, $secondary_opacity);
160
}
161
@if $t == flat-hover {
163
box-shadow: inset 0 0 0 9999px $semi_fill_color;
164
color: currentColor;
165
}
166
@if $t == flat-active {
168
transition: $longer_transition,
169
background-size 0,
170
background-image 0;
171
animation: ripple_effect $longer_duration $deceleration_curve forwards;
172
box-shadow: inset 0 0 0 9999px $semi_fill_color;
173
background-image: radial-gradient(circle farthest-corner at center,
174
$semi_fill_color 10%,
175
transparent 0%);
176
background-size: 0% 0%;
177
color: currentColor;
178
}
179
@if $t == flat-disabled {
181
box-shadow: none;
182
background-color: transparent;
183
color: if($tc != $fg_color, gtkalpha(currentColor, $disabled_opacity), gtkalpha(currentColor, $secondary_opacity * $disabled_opacity));
184
}
185
@if $t == flat-checked {
187
background-color: $fill_color;
188
color: currentColor;
189
}
190
@if $t == flat-checked-disabled {
192
background-color: $fill_color;
193
color: gtkalpha(currentColor, $disabled_opacity);
194
}
195
}
196
@mixin overshoot($p, $t:normal, $c:$alt_primary_color) {
199
//
200
// overshoot
201
//
202
// $p: position
203
// $t: type
204
// $c: base color
205
//
206
// possible $p values:
207
// top, bottom, right, left
208
//
209
// possible $t values:
210
// normal, backdrop
211
//
212
$_position: center $p;
214
@if ($p == left) or ($p == right) {
216
$_position: $p center;
217
}
218
background-image: -gtk-gradient(radial,
220
$_position, 0,
221
$_position, 0.75,
222
to(scale-alpha($c, $lower_opacity)),
223
to(transparent));
224
background-repeat: no-repeat;
226
background-position: $_position;
227
background-color: transparent; // reset some properties to be sure to not inherit them somehow
229
border: none; //
230
box-shadow: none; //
231
}
232
@mixin undershoot($p) {
235
//
236
// undershoot
237
//
238
// $p: position
239
//
240
// possible $p values:
241
// top, bottom, right, left
242
//
243
$_undershoot_color_dark: scale-alpha($fg_color, $lower_opacity);
245
$_undershoot_color_light: scale-alpha($base_color, $lower_opacity);
246
$_gradient_dir: left;
248
$_dash_bg_size: 12px 1px;
249
$_gradient_repeat: repeat-x;
250
$_bg_pos: left $p;
251
background-color: transparent; // shouldn't be needed, but better to be sure;
253
@if ($p == left) or ($p == right) {
255
$_gradient_dir: top;
256
$_dash_bg_size: 1px 12px;
257
$_gradient_repeat: repeat-y;
258
$_bg_pos: $p top;
259
}
260
background-image: linear-gradient(to $_gradient_dir, // this is the dashed line
262
$_undershoot_color_light 50%,
263
$_undershoot_color_dark 50%);
264
padding-#{$p}: 1px;
266
background-size: $_dash_bg_size;
267
background-repeat: $_gradient_repeat;
268
background-origin: content-box;
269
background-position: $_bg_pos;
270
}
271