ASCII text
1
// generic drawing of more complex things
2
// ripple effect animations
5
@keyframes ripple {
7
to { background-size: 1000% 1000%; }
8
}
9
@keyframes ripple-slider {
11
to { background-size: auto, 1000% 1000%; }
12
}
13
@keyframes ripple-headerbar {
15
from {
16
background-image: radial-gradient(circle farthest-corner at center,
17
$primary 0%,
18
transparent 0%);
19
}
20
to {
22
background-image: radial-gradient(circle farthest-corner at center,
23
$primary 100%,
24
transparent 0%);
25
}
26
}
27
@mixin entry($t, $fc: $primary) {
30
//
31
// entry
32
//
33
// $t: entry type
34
// $fc: focus color
35
//
36
@if $t == normal {
38
transition: $transition, border-image $duration-ripple $ease-out;
39
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
40
$fc 0%,
41
transparent 0%)
42
0 0 0 / 0 0 0px;
43
box-shadow: inset 0 0 0 9999px transparent, inset 0 -1px if($fc == $primary, $track, $fc);
44
background-color: $fill;
45
color: $text;
46
}
47
@if $t == hover {
49
box-shadow: inset 0 0 0 9999px $overlay-hover, inset 0 -1px if($fc == $primary, $track, $fc);
50
}
51
@if $t == focus {
53
box-shadow: inset 0 0 0 9999px $overlay-focus, inset 0 -1px if($fc == $primary, $track, $fc);
54
}
55
@if $t == checked {
57
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
58
$fc 100%,
59
transparent 0%)
60
0 0 2 / 0 0 2px;
61
}
62
@if $t == disabled {
64
box-shadow: inset 0 0 0 9999px transparent, inset 0 -1px $divider;
65
background-color: $fill;
66
color: $text-disabled;
67
}
68
@if $t == raised-normal {
70
transition: $transition;
71
border-image: none;
72
box-shadow: $shadow-1;
73
background-color: if($fc == $primary, $base, $fc);
74
color: if($fc == $primary, $text, on($fc));
75
}
76
@if $t == raised-hover {
78
box-shadow: $shadow-2;
79
}
80
@if $t == raised-focus {
82
border-image: none;
83
box-shadow: $shadow-2;
84
}
85
@if $t == raised-disabled {
87
box-shadow: $shadow-1;
88
background-color: $base-alt;
89
color: $text-disabled;
90
}
91
}
92
@mixin button($t) {
95
//
96
// button
97
//
98
// $t: button type
99
//
100
@if $t == normal {
102
transition: $transition,
103
background-size $duration-ripple-aftermath $ease-out,
104
background-image $duration-ripple-aftermath-opacity $ease-out;
105
outline: none;
106
box-shadow: $shadow-1, inset 0 0 0 9999px transparent;
107
background-color: $surface;
108
background-image: radial-gradient(circle farthest-corner at center,
109
transparent 10%,
110
transparent 0%);
111
background-repeat: no-repeat;
112
background-position: center;
113
background-size: 1000% 1000%;
114
color: $text;
115
}
116
@if $t == hover {
118
box-shadow: $shadow-2, inset 0 0 0 9999px transparent;
119
color: $text;
120
}
121
@if $t == focus {
123
box-shadow: $shadow-2, inset 0 0 0 9999px transparent;
124
color: $text;
125
}
126
@if $t == active {
128
transition: $transition,
129
background-size 0,
130
background-image 0;
131
animation: ripple $duration-ripple $ease-out forwards;
132
box-shadow: $shadow-2, inset 0 0 0 9999px $overlay-hover;
133
background-image: radial-gradient(circle farthest-corner at center,
134
$overlay-active 10%,
135
transparent 0%);
136
background-size: 0% 0%;
137
color: $text;
138
}
139
@if $t == disabled {
141
box-shadow: none;
142
background-color: $fill;
143
color: $text-disabled;
144
}
145
@if $t == checked {
147
background-color: $primary;
148
color: on($primary);
149
}
150
@if $t == checked-disabled {
152
background-color: $divider;
153
color: $text-disabled;
154
}
155
@if $t == flat-normal {
157
transition: $transition,
158
border-image $duration-ripple $ease-out,
159
background-size $duration-ripple-aftermath $ease-out,
160
background-image $duration-ripple-aftermath-opacity $ease-out;
161
outline: none;
162
box-shadow: inset 0 0 0 9999px transparent;
163
background-color: transparent;
164
background-image: radial-gradient(circle farthest-corner at center,
165
transparent 10%,
166
transparent 0%);
167
background-repeat: no-repeat;
168
background-position: center;
169
background-size: 1000% 1000%;
170
color: $text-secondary;
171
}
172
@if $t == flat-hover {
174
box-shadow: inset 0 0 0 9999px $overlay-hover;
175
color: $text;
176
}
177
@if $t == flat-focus {
179
box-shadow: inset 0 0 0 9999px $overlay-focus;
180
color: $text;
181
}
182
@if $t == flat-active {
184
transition: $transition,
185
border-image $duration-ripple $ease-out,
186
background-size 0,
187
background-image 0;
188
animation: ripple $duration-ripple $ease-out forwards;
189
box-shadow: inset 0 0 0 9999px $overlay-hover;
190
background-image: radial-gradient(circle farthest-corner at center,
191
$overlay-active 10%,
192
transparent 0%);
193
background-size: 0% 0%;
194
color: $text;
195
}
196
@if $t == flat-disabled {
198
box-shadow: none;
199
background-color: transparent;
200
color: $text-secondary-disabled;
201
}
202
@if $t == flat-checked {
204
background-color: $overlay-checked;
205
color: $text;
206
}
207
@if $t == flat-checked-disabled {
209
background-color: $divider;
210
color: $text-disabled;
211
}
212
}
213
@mixin overshoot($p) {
216
//
217
// overshoot
218
//
219
// $p: position
220
//
221
// possible $p values:
222
// top, bottom, right, left
223
//
224
$_position: center $p;
226
@if ($p == left) or ($p == right) {
228
$_position: $p center;
229
}
230
background-image: -gtk-gradient(radial,
232
$_position, 0,
233
$_position, 0.75,
234
to(rgba($primary, 0.24)),
235
to(transparent));
236
background-repeat: no-repeat;
238
background-position: $_position;
239
background-color: transparent; // reset some properties to be sure to not inherit them somehow
241
border: none; //
242
box-shadow: none; //
243
}
244
@mixin undershoot($p) {
247
//
248
// undershoot
249
//
250
// $p: position
251
//
252
// possible $p values:
253
// top, bottom, right, left
254
//
255
$_undershoot_color_dark: $track;
257
$_undershoot_color_light: rgba($base, 0.3);
258
$_gradient_dir: left;
260
$_dash_bg_size: 12px 1px;
261
$_gradient_repeat: repeat-x;
262
$_bg_pos: left $p;
263
@if ($p == left) or ($p == right) {
265
$_gradient_dir: top;
266
$_dash_bg_size: 1px 12px;
267
$_gradient_repeat: repeat-y;
268
$_bg_pos: $p top;
269
}
270
background-color: transparent; // shouldn't be needed, but better to be sure
272
background-image: linear-gradient(to $_gradient_dir, // this is the dashed line
274
$_undershoot_color_light 50%,
275
$_undershoot_color_dark 50%);
276
padding-#{$p}: 1px;
278
background-size: $_dash_bg_size;
279
background-repeat: $_gradient_repeat;
280
background-origin: content-box;
281
background-position: $_bg_pos;
282
}
283