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
}
73
@if $t == disabled {
75
box-shadow: inset 0 -1px $divider_color;
76
background-color: $fill_color;
77
color: $disabled_fg_color;
78
}
79
}
80
@mixin button($t) {
83
//
84
// button
85
//
86
// $t: button type
87
//
88
@if $t == normal {
90
transition: $shorter_transition,
91
background-size $ripple_duration $deceleration_curve,
92
background-image $ripple_opacity_duration $deceleration_curve;
93
box-shadow: $shadow_1, inset 0 0 0 9999px transparent;
94
background-color: $surface_color;
95
background-image: radial-gradient(circle farthest-corner at center,
96
transparent 10%,
97
transparent 0%);
98
background-repeat: no-repeat;
99
background-position: center;
100
background-size: 1000% 1000%;
101
color: $fg_color;
102
}
103
@if $t == hover {
105
box-shadow: $shadow_2, inset 0 0 0 9999px transparent;
106
color: $fg_color;
107
}
108
@if $t == active {
110
transition: $shorter_transition,
111
background-size 0,
112
background-image 0;
113
animation: ripple_effect $longer_duration $deceleration_curve forwards;
114
box-shadow: $shadow_2, inset 0 0 0 9999px $hover_overlay_color;
115
background-image: radial-gradient(circle farthest-corner at center,
116
$active_overlay_color 10%,
117
transparent 0%);
118
background-size: 0% 0%;
119
color: $fg_color;
120
}
121
@if $t == disabled {
123
box-shadow: none;
124
background-color: $fill_color;
125
color: $disabled_fg_color;
126
}
127
@if $t == checked {
129
background-color: $primary_color;
130
color: $inverse_fg_color;
131
}
132
@if $t == checked-disabled {
134
background-color: $divider_color;
135
color: $disabled_fg_color;
136
}
137
@if $t == flat-normal {
139
transition: $shorter_transition,
140
border-image $longer_duration $deceleration_curve,
141
background-size $ripple_duration $deceleration_curve,
142
background-image $ripple_opacity_duration $deceleration_curve;
143
box-shadow: inset 0 0 0 9999px transparent;
144
background-color: transparent;
145
background-image: radial-gradient(circle farthest-corner at center,
146
transparent 10%,
147
transparent 0%);
148
background-repeat: no-repeat;
149
background-position: center;
150
background-size: 1000% 1000%;
151
color: $secondary_fg_color;
152
}
153
@if $t == flat-hover {
155
box-shadow: inset 0 0 0 9999px $hover_overlay_color;
156
color: $fg_color;
157
}
158
@if $t == flat-active {
160
transition: $shorter_transition,
161
border-image $longer_duration $deceleration_curve,
162
background-size 0,
163
background-image 0;
164
animation: ripple_effect $longer_duration $deceleration_curve forwards;
165
box-shadow: inset 0 0 0 9999px $hover_overlay_color;
166
background-image: radial-gradient(circle farthest-corner at center,
167
$active_overlay_color 10%,
168
transparent 0%);
169
background-size: 0% 0%;
170
color: $fg_color;
171
}
172
@if $t == flat-disabled {
174
box-shadow: none;
175
background-color: transparent;
176
color: $disabled_secondary_fg_color;
177
}
178
@if $t == flat-checked {
180
background-color: $checked_overlay_color;
181
color: $fg_color;
182
}
183
@if $t == flat-checked-disabled {
185
background-color: $divider_color;
186
color: $disabled_fg_color;
187
}
188
}
189
@mixin overshoot($p) {
192
//
193
// overshoot
194
//
195
// $p: position
196
//
197
// possible $p values:
198
// top, bottom, right, left
199
//
200
$_position: center $p;
202
@if ($p == left) or ($p == right) {
204
$_position: $p center;
205
}
206
background-image: -gtk-gradient(radial,
208
$_position, 0,
209
$_position, 0.75,
210
to(rgba($primary_color, 0.24)),
211
to(transparent));
212
background-repeat: no-repeat;
214
background-position: $_position;
215
background-color: transparent; // reset some properties to be sure to not inherit them somehow
217
border: none; //
218
box-shadow: none; //
219
}
220
@mixin undershoot($p) {
223
//
224
// undershoot
225
//
226
// $p: position
227
//
228
// possible $p values:
229
// top, bottom, right, left
230
//
231
$_undershoot_color_dark: $track_color;
233
$_undershoot_color_light: rgba($base_color, 0.3);
234
$_gradient_dir: left;
236
$_dash_bg_size: 12px 1px;
237
$_gradient_repeat: repeat-x;
238
$_bg_pos: left $p;
239
@if ($p == left) or ($p == right) {
241
$_gradient_dir: top;
242
$_dash_bg_size: 1px 12px;
243
$_gradient_repeat: repeat-y;
244
$_bg_pos: $p top;
245
}
246
background-color: transparent; // shouldn't be needed, but better to be sure
248
background-image: linear-gradient(to $_gradient_dir, // this is the dashed line
250
$_undershoot_color_light 50%,
251
$_undershoot_color_dark 50%);
252
padding-#{$p}: 1px;
254
background-size: $_dash_bg_size;
255
background-repeat: $_gradient_repeat;
256
background-origin: content-box;
257
background-position: $_bg_pos;
258
}
259