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 scale_ripple_effect {
11
to { background-size: auto, 1000% 1000%; }
12
}
13
@keyframes header_ripple_effect {
15
from {
16
background-image: radial-gradient(circle farthest-corner at center,
17
$primary_color 0%,
18
transparent 0%);
19
}
20
to {
22
background-image: radial-gradient(circle farthest-corner at center,
23
$primary_color 100%,
24
transparent 0%);
25
}
26
}
27
@mixin entry($t, $fc: $primary_color) {
30
//
31
// entry
32
//
33
// $t: entry type
34
// $fc: focus color
35
//
36
@if $t == raised-normal {
38
transition: $shorter_transition;
39
border-image: none;
40
box-shadow: $shadow_1;
41
background-color: if($fc == $primary_color, $base_color, $fc);
42
color: if($fc == $primary_color, $fg_color, $inverse_fg_color);
43
}
44
@if $t == raised-focus {
46
border-image: none;
47
box-shadow: $shadow_2;
48
}
49
@if $t == raised-disabled {
51
box-shadow: $shadow_1;
52
background-color: $alt_base_color;
53
color: $disabled_fg_color;
54
}
55
@if $t == normal {
57
transition: $shorter_transition, border-image $longer_duration $deceleration_curve;
58
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
59
$fc 0%,
60
transparent 0%)
61
0 0 0 / 0 0 0px;
62
box-shadow: inset 0 -1px if($fc == $primary_color, $track_color, $fc);
63
background-color: $fill_color;
64
color: $fg_color;
65
}
66
@if $t == focus {
68
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
69
$fc 100%,
70
transparent 0%)
71
0 0 2 / 0 0 2px;
72
box-shadow: inset 0 -1px if($fc == $primary_color, $track_color, $fc);
73
}
74
@if $t == disabled {
76
box-shadow: inset 0 -1px $divider_color;
77
background-color: $fill_color;
78
color: $disabled_fg_color;
79
}
80
}
81
@mixin button($t, $c: $button_bg_color) {
84
//
85
// button
86
//
87
// $t: button type
88
// $c: base color
89
//
90
@if $t == normal {
92
transition: $shorter_duration,
93
background-size $ripple_duration $deceleration_curve,
94
background-image $ripple_opacity_duration $deceleration_curve;
95
box-shadow: $shadow_1, inset 0 0 0 9999px transparent;
96
background-color: $c;
97
background-image: radial-gradient(circle farthest-corner at center,
98
transparent 10%,
99
transparent 0%);
100
background-repeat: no-repeat;
101
background-position: center;
102
background-size: 1000% 1000%;
103
color: $button_fg_color;
104
}
105
@if $t == hover {
107
box-shadow: $shadow_2, inset 0 0 0 9999px transparent;
108
color: $fg_color;
109
}
110
@if $t == active {
112
transition: $shorter_duration,
113
background-size 0,
114
background-image 0;
115
animation: ripple_effect $longer_duration $deceleration_curve forwards;
116
box-shadow: $shadow_2, inset 0 0 0 9999px $hover_bg_color;
117
background-image: radial-gradient(circle farthest-corner at center,
118
$active_bg_color 10%,
119
transparent 0%);
120
background-size: 0% 0%;
121
color: $fg_color;
122
}
123
@if $t == disabled {
125
box-shadow: none;
126
background-color: $divider_color;
127
color: if($c == $button_bg_color, $disabled_secondary_fg_color, $disabled_fg_color);
128
}
129
@if $t == checked {
131
background-color: $primary_color;
132
color: $inverse_fg_color;
133
}
134
@if $t == checked-disabled {
136
background-color: rgba($primary_color, 0.3);
137
color: rgba($primary_color, 0.5);
138
}
139
@if $t == flat-normal {
141
transition: $shorter_duration,
142
border-image $longer_duration $deceleration_curve,
143
background-size $ripple_duration $deceleration_curve,
144
background-image $ripple_opacity_duration $deceleration_curve;
145
box-shadow: inset 0 0 0 9999px transparent;
146
background-color: transparent;
147
background-image: radial-gradient(circle farthest-corner at center,
148
transparent 10%,
149
transparent 0%);
150
background-repeat: no-repeat;
151
background-position: center;
152
background-size: 1000% 1000%;
153
color: $secondary_fg_color;
154
}
155
@if $t == flat-hover {
157
box-shadow: inset 0 0 0 9999px $hover_bg_color;
158
color: $fg_color;
159
}
160
@if $t == flat-active {
162
transition: $shorter_duration,
163
border-image $longer_duration $deceleration_curve,
164
background-size 0,
165
background-image 0;
166
animation: ripple_effect $longer_duration $deceleration_curve forwards;
167
box-shadow: inset 0 0 0 9999px $hover_bg_color;
168
background-image: radial-gradient(circle farthest-corner at center,
169
$active_bg_color 10%,
170
transparent 0%);
171
background-size: 0% 0%;
172
color: $fg_color;
173
}
174
@if $t == flat-disabled {
176
box-shadow: none;
177
background-color: transparent;
178
color: if($c == $button_bg_color, $disabled_secondary_fg_color, $disabled_fg_color);
179
}
180
@if $t == flat-checked {
182
background-color: $checked_bg_color;
183
color: $fg_color;
184
}
185
@if $t == flat-checked-disabled {
187
background-color: $divider_color;
188
color: $disabled_fg_color;
189
}
190
}
191
@mixin overshoot($p) {
194
//
195
// overshoot
196
//
197
// $p: position
198
//
199
// possible $p values:
200
// top, bottom, right, left
201
//
202
$_position: center $p;
204
@if ($p == left) or ($p == right) {
206
$_position: $p center;
207
}
208
background-image: -gtk-gradient(radial,
210
$_position, 0,
211
$_position, 0.75,
212
to(rgba($alt_primary_color, 0.3)),
213
to(transparent));
214
background-repeat: no-repeat;
216
background-position: $_position;
217
background-color: transparent; // reset some properties to be sure to not inherit them somehow
219
border: none; //
220
box-shadow: none; //
221
}
222
@mixin undershoot($p) {
225
//
226
// undershoot
227
//
228
// $p: position
229
//
230
// possible $p values:
231
// top, bottom, right, left
232
//
233
$_undershoot_color_dark: $track_color;
235
$_undershoot_color_light: rgba($base_color, 0.3);
236
$_gradient_dir: left;
238
$_dash_bg_size: 12px 1px;
239
$_gradient_repeat: repeat-x;
240
$_bg_pos: left $p;
241
@if ($p == left) or ($p == right) {
243
$_gradient_dir: top;
244
$_dash_bg_size: 1px 12px;
245
$_gradient_repeat: repeat-y;
246
$_bg_pos: $p top;
247
}
248
background-color: transparent; // shouldn't be needed, but better to be sure
250
background-image: linear-gradient(to $_gradient_dir, // this is the dashed line
252
$_undershoot_color_light 50%,
253
$_undershoot_color_dark 50%);
254
padding-#{$p}: 1px;
256
background-size: $_dash_bg_size;
257
background-repeat: $_gradient_repeat;
258
background-origin: content-box;
259
background-position: $_bg_pos;
260
}
261