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-on-slider {
11
to { background-size: auto, 1000% 1000%; }
12
}
13
@keyframes ripple-on-headerbar {
15
from {
16
background-image: radial-gradient(circle, $primary 0%, transparent 0%);
17
}
18
to {
20
background-image: radial-gradient(circle, $primary 100%, transparent 0%);
21
}
22
}
23
@mixin entry($t, $fc: $primary) {
26
//
27
// entry
28
//
29
// $t: entry type
30
// $fc: focus color
31
//
32
@if $t == normal {
34
transition: $transition, border-image $ripple-fade-in-duration $ease-out;
35
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
36
$fc 0%,
37
transparent 0%)
38
0 0 0 / 0 0 0px;
39
box-shadow: inset 0 0 0 9999px transparent, inset 0 -1px if($fc == $primary, $track, $fc);
40
background-color: $fill;
41
color: $text;
42
}
43
@if $t == hover {
45
box-shadow: inset 0 0 0 9999px $overlay-hover, inset 0 -1px if($fc == $primary, $track, $fc);
46
}
47
@if $t == focus {
49
box-shadow: inset 0 0 0 9999px $overlay-focus, inset 0 -1px if($fc == $primary, $track, $fc);
50
}
51
@if $t == checked {
53
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
54
$fc 100%,
55
transparent 0%)
56
0 0 2 / 0 0 2px;
57
}
58
@if $t == disabled {
60
box-shadow: inset 0 0 0 9999px transparent, inset 0 -1px $divider;
61
background-color: $fill;
62
color: $text-disabled;
63
}
64
@if $t == raised-normal {
66
transition: $transition;
67
border-image: none;
68
box-shadow: $shadow-1;
69
background-color: if($fc == $primary, $base, $fc);
70
color: if($fc == $primary, $text, on($fc));
71
}
72
@if $t == raised-hover {
74
box-shadow: $shadow-2;
75
}
76
@if $t == raised-focus {
78
border-image: none;
79
box-shadow: $shadow-2;
80
}
81
@if $t == raised-disabled {
83
box-shadow: $shadow-1;
84
background-color: $base-alt;
85
color: $text-disabled;
86
}
87
}
88
@mixin button($t) {
91
//
92
// button
93
//
94
// $t: button type
95
//
96
@if $t == normal {
98
transition: $transition,
99
background-size $ripple-fade-out-duration $ease-out,
100
background-image $ripple-fade-out-opacity-duration $ease-out;
101
outline: none;
102
box-shadow: $shadow-1, inset 0 0 0 9999px transparent;
103
background-color: $surface;
104
background-image: radial-gradient(circle, transparent 10%, transparent 0%);
105
background-repeat: no-repeat;
106
background-position: center;
107
background-size: 1000% 1000%;
108
color: $text;
109
}
110
@if $t == hover {
112
box-shadow: $shadow-2, inset 0 0 0 9999px transparent;
113
color: $text;
114
}
115
@if $t == focus {
117
box-shadow: $shadow-2, inset 0 0 0 9999px transparent;
118
color: $text;
119
}
120
@if $t == active {
122
transition: $transition,
123
background-size 0ms,
124
background-image 0ms;
125
animation: ripple $ripple-fade-in-duration $ease-out forwards;
126
box-shadow: $shadow-2, inset 0 0 0 9999px $overlay-hover;
127
background-image: radial-gradient(circle, $overlay-active 10%, transparent 0%);
128
background-size: 0% 0%;
129
color: $text;
130
}
131
@if $t == disabled {
133
box-shadow: none;
134
background-color: $fill;
135
color: $text-disabled;
136
}
137
@if $t == checked {
139
background-color: $primary;
140
color: on($primary);
141
}
142
@if $t == checked-disabled {
144
background-color: $divider;
145
color: $text-disabled;
146
}
147
@if $t == flat-normal {
149
transition: $transition,
150
border-image $ripple-fade-in-duration $ease-out,
151
background-size $ripple-fade-out-duration $ease-out,
152
background-image $ripple-fade-out-opacity-duration $ease-out;
153
outline: none;
154
box-shadow: inset 0 0 0 9999px transparent;
155
background-color: transparent;
156
background-image: radial-gradient(circle, transparent 10%, transparent 0%);
157
background-repeat: no-repeat;
158
background-position: center;
159
background-size: 1000% 1000%;
160
color: $text-secondary;
161
}
162
@if $t == flat-hover {
164
box-shadow: inset 0 0 0 9999px $overlay-hover;
165
color: $text;
166
}
167
@if $t == flat-focus {
169
box-shadow: inset 0 0 0 9999px $overlay-focus;
170
color: $text;
171
}
172
@if $t == flat-active {
174
transition: $transition,
175
border-image $ripple-fade-in-duration $ease-out,
176
background-size 0ms,
177
background-image 0ms;
178
animation: ripple $ripple-fade-in-duration $ease-out forwards;
179
box-shadow: inset 0 0 0 9999px $overlay-hover;
180
background-image: radial-gradient(circle, $overlay-active 10%, transparent 0%);
181
background-size: 0% 0%;
182
color: $text;
183
}
184
@if $t == flat-disabled {
186
box-shadow: none;
187
background-color: transparent;
188
color: $text-secondary-disabled;
189
}
190
@if $t == flat-checked {
192
background-color: $overlay-checked;
193
color: $text;
194
}
195
@if $t == flat-checked-disabled {
197
background-color: $divider;
198
color: $text-disabled;
199
}
200
}
201
@mixin overshoot($p) {
204
//
205
// overshoot
206
//
207
// $p: position
208
//
209
// possible $p values:
210
// top, bottom, right, left
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(rgba($primary, 0.24)),
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: $track;
245
$_undershoot_color_light: rgba($base, 0.3);
246
$_gradient_dir: left;
248
$_dash_bg_size: 12px 1px;
249
$_gradient_repeat: repeat-x;
250
$_bg_pos: left $p;
251
@if ($p == left) or ($p == right) {
253
$_gradient_dir: top;
254
$_dash_bg_size: 1px 12px;
255
$_gradient_repeat: repeat-y;
256
$_bg_pos: $p top;
257
}
258
background-color: transparent; // shouldn't be needed, but better to be sure
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