ASCII text
1
// generic drawing of more complex things
2
// ripple effect animations
5
@keyframes ripple_effect {
7
to { background-size: 1000% 1000%; }
8
}
9
@keyframes header_ripple_effect {
11
from {
12
background-image: radial-gradient(circle farthest-corner at center,
13
$primary_color 0%,
14
transparent 0%);
15
}
16
to {
18
background-image: radial-gradient(circle farthest-corner at center,
19
$primary_color 100%,
20
transparent 0%);
21
}
22
}
23
@mixin entry($t, $fc: $primary_color) {
26
//
27
// entry
28
//
29
// $t: entry type
30
// $fc: focus color
31
//
32
@if $t == normal {
34
transition: $longer_transition, $shadow_transition;
35
border-image: none;
36
box-shadow: $shadow_1;
37
background-color: if($fc == $primary_color, $base_color, $fc);
38
color: if($fc == $primary_color, $fg_color, $inverse_fg_color);
39
}
40
@if $t == focus {
42
border-image: none;
43
box-shadow: $shadow_2;
44
}
45
@if $t == disabled {
47
box-shadow: $shadow_1;
48
background-color: $alt_base_color;
49
color: $disabled_fg_color;
50
}
51
@if $t == flat-normal {
53
transition: $longer_transition;
54
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
55
$fc 0%,
56
transparent 0%)
57
0 0 0 / 0 0 0px;
58
box-shadow: inset 0 -1px if($fc == $primary_color, $track_color, $fc);
59
background-color: transparent;
60
color: $fg_color;
61
}
62
@if $t == flat-focus {
64
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
65
$fc 100%,
66
transparent 0%)
67
0 0 2 / 0 0 2px;
68
box-shadow: inset 0 -1px if($fc == $primary_color, $track_color, $fc);
69
}
70
@if $t == flat-disabled {
72
box-shadow: inset 0 -1px $divider_color;
73
background-color: transparent;
74
color: $disabled_fg_color;
75
}
76
}
77
@mixin button($t, $c: $lighter_bg_color) {
80
//
81
// button
82
//
83
// $t: button type
84
// $c: base color
85
//
86
@if $t == normal {
88
transition: $longer_transition,
89
$shadow_transition,
90
background-size $ripple_duration $deceleration_curve,
91
background-image $ripple_duration * 2 $deceleration_curve;
92
box-shadow: $shadow_1, inset 0 0 0 9999px transparent;
93
background-color: $c;
94
background-image: radial-gradient(circle farthest-corner at center,
95
transparent 10%,
96
transparent 0%);
97
background-repeat: no-repeat;
98
background-position: center;
99
background-size: 1000% 1000%;
100
color: $button_fg_color;
101
}
102
@if $t == hover {
104
box-shadow: $shadow_2, inset 0 0 0 9999px transparent;
105
color: $fg_color;
106
}
107
@if $t == active {
109
transition: $longer_transition,
110
background-size 0,
111
background-image 0;
112
animation: ripple_effect $longer_duration $deceleration_curve forwards;
113
box-shadow: $shadow_2, inset 0 0 0 9999px $semi_fill_color;
114
background-image: radial-gradient(circle farthest-corner at center,
115
$semi_fill_color 10%,
116
transparent 0%);
117
background-size: 0% 0%;
118
color: $fg_color;
119
}
120
@if $t == disabled {
122
box-shadow: none;
123
background-color: $divider_color;
124
color: if($c == $lighter_bg_color, $disabled_secondary_fg_color, $disabled_fg_color);
125
}
126
@if $t == checked {
128
background-color: $primary_color;
129
color: $inverse_fg_color;
130
}
131
@if $t == checked-disabled {
133
background-color: rgba($primary_color, $lower_opacity);
134
color: rgba($primary_color, $disabled_opacity);
135
}
136
@if $t == flat-normal {
138
transition: $longer_transition,
139
background-size $ripple_duration $deceleration_curve,
140
background-image $ripple_duration * 2 $deceleration_curve;
141
box-shadow: inset 0 0 0 9999px transparent;
142
background-color: transparent;
143
background-image: radial-gradient(circle farthest-corner at center,
144
transparent 10%,
145
transparent 0%);
146
background-repeat: no-repeat;
147
background-position: center;
148
background-size: 1000% 1000%;
149
color: $secondary_fg_color;
150
}
151
@if $t == flat-hover {
153
box-shadow: inset 0 0 0 9999px $semi_fill_color;
154
color: $fg_color;
155
}
156
@if $t == flat-active {
158
transition: $longer_transition,
159
background-size 0,
160
background-image 0;
161
animation: ripple_effect $longer_duration $deceleration_curve forwards;
162
box-shadow: inset 0 0 0 9999px $semi_fill_color;
163
background-image: radial-gradient(circle farthest-corner at center,
164
$semi_fill_color 10%,
165
transparent 0%);
166
background-size: 0% 0%;
167
color: $fg_color;
168
}
169
@if $t == flat-disabled {
171
box-shadow: none;
172
background-color: transparent;
173
color: if($c == $lighter_bg_color, $disabled_secondary_fg_color, $disabled_fg_color);
174
}
175
@if $t == flat-checked {
177
background-color: $track_color;
178
color: $fg_color;
179
}
180
@if $t == flat-checked-disabled {
182
background-color: $divider_color;
183
color: $disabled_fg_color;
184
}
185
}
186
@mixin overshoot($p) {
189
//
190
// overshoot
191
//
192
// $p: position
193
//
194
// possible $p values:
195
// top, bottom, right, left
196
//
197
$_position: center $p;
199
@if ($p == left) or ($p == right) {
201
$_position: $p center;
202
}
203
background-image: -gtk-gradient(radial,
205
$_position, 0,
206
$_position, 0.75,
207
to(rgba($alt_primary_color, $lower_opacity)),
208
to(transparent));
209
background-repeat: no-repeat;
211
background-position: $_position;
212
background-color: transparent; // reset some properties to be sure to not inherit them somehow
214
border: none; //
215
box-shadow: none; //
216
}
217
@mixin undershoot($p) {
220
//
221
// undershoot
222
//
223
// $p: position
224
//
225
// possible $p values:
226
// top, bottom, right, left
227
//
228
$_undershoot_color_dark: $track_color;
230
$_undershoot_color_light: rgba($base_color, $lower_opacity);
231
$_gradient_dir: left;
233
$_dash_bg_size: 12px 1px;
234
$_gradient_repeat: repeat-x;
235
$_bg_pos: left $p;
236
@if ($p == left) or ($p == right) {
238
$_gradient_dir: top;
239
$_dash_bg_size: 1px 12px;
240
$_gradient_repeat: repeat-y;
241
$_bg_pos: $p top;
242
}
243
background-color: transparent; // shouldn't be needed, but better to be sure
245
background-image: linear-gradient(to $_gradient_dir, // this is the dashed line
247
$_undershoot_color_light 50%,
248
$_undershoot_color_dark 50%);
249
padding-#{$p}: 1px;
251
background-size: $_dash_bg_size;
252
background-repeat: $_gradient_repeat;
253
background-origin: content-box;
254
background-position: $_bg_pos;
255
}
256