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 $track-disabled;
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: inset 0 0 0 9999px transparent, $shadow-1;
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: inset 0 0 0 9999px transparent, $shadow-2;
113
color: $text;
114
}
115
@if $t == focus {
117
box-shadow: inset 0 0 0 9999px $overlay-focus, $shadow-2;
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: inset 0 0 0 9999px $overlay-hover, $shadow-2;
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
box-shadow: inset 0 0 0 9999px $overlay-checked;
145
background-color: $fill;
146
color: $text-disabled;
147
}
148
@if $t == flat-normal {
150
transition: $transition,
151
border-image $ripple-fade-in-duration $ease-out,
152
background-size $ripple-fade-out-duration $ease-out,
153
background-image $ripple-fade-out-opacity-duration $ease-out;
154
outline: none;
155
box-shadow: inset 0 0 0 9999px transparent;
156
background-color: transparent;
157
background-image: radial-gradient(circle, transparent 10%, transparent 0%);
158
background-repeat: no-repeat;
159
background-position: center;
160
background-size: 1000% 1000%;
161
color: $text-secondary;
162
}
163
@if $t == flat-hover {
165
box-shadow: inset 0 0 0 9999px $overlay-hover;
166
color: $text;
167
}
168
@if $t == flat-focus {
170
box-shadow: inset 0 0 0 9999px $overlay-focus;
171
color: $text;
172
}
173
@if $t == flat-active {
175
transition: $transition,
176
border-image $ripple-fade-in-duration $ease-out,
177
background-size 0ms,
178
background-image 0ms;
179
animation: ripple $ripple-fade-in-duration $ease-out forwards;
180
box-shadow: inset 0 0 0 9999px $overlay-hover;
181
background-image: radial-gradient(circle, $overlay-active 10%, transparent 0%);
182
background-size: 0% 0%;
183
color: $text;
184
}
185
@if $t == flat-disabled {
187
box-shadow: none;
188
background-color: transparent;
189
color: $text-secondary-disabled;
190
}
191
@if $t == flat-checked {
193
background-color: $overlay-checked;
194
color: $text;
195
}
196
@if $t == flat-checked-disabled {
198
background-color: $overlay-checked;
199
color: $text-disabled;
200
}
201
}
202
@mixin overshoot($p) {
205
//
206
// overshoot
207
//
208
// $p: position
209
//
210
// possible $p values:
211
// top, bottom, right, left
212
//
213
$_position: center $p;
215
@if ($p == left) or ($p == right) {
217
$_position: $p center;
218
}
219
background-image: -gtk-gradient(radial,
221
$_position, 0,
222
$_position, 0.75,
223
to(rgba($primary, 0.24)),
224
to(transparent));
225
background-repeat: no-repeat;
227
background-position: $_position;
228
background-color: transparent; // reset some properties to be sure to not inherit them somehow
230
border: none; //
231
box-shadow: none; //
232
}
233
@mixin undershoot($p) {
236
//
237
// undershoot
238
//
239
// $p: position
240
//
241
// possible $p values:
242
// top, bottom, right, left
243
//
244
$_undershoot_color_dark: $track;
246
$_undershoot_color_light: rgba($base, 0.3);
247
$_gradient_dir: left;
249
$_dash_bg_size: 12px 1px;
250
$_gradient_repeat: repeat-x;
251
$_bg_pos: left $p;
252
@if ($p == left) or ($p == right) {
254
$_gradient_dir: top;
255
$_dash_bg_size: 1px 12px;
256
$_gradient_repeat: repeat-y;
257
$_bg_pos: $p top;
258
}
259
background-color: transparent; // shouldn't be needed, but better to be sure
261
background-image: linear-gradient(to $_gradient_dir, // this is the dashed line
263
$_undershoot_color_light 50%,
264
$_undershoot_color_dark 50%);
265
padding-#{$p}: 1px;
267
background-size: $_dash_bg_size;
268
background-repeat: $_gradient_repeat;
269
background-origin: content-box;
270
background-position: $_bg_pos;
271
}
272