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, $stroke, $fc);
40
background-color: $entry-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, $stroke, $fc);
46
}
47
@if $t == focus {
49
box-shadow: inset 0 0 0 9999px $overlay-focus, inset 0 -1px if($fc == $primary, $stroke, $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 $stroke-disabled;
61
background-color: $entry-fill;
62
color: $text-disabled;
63
}
64
@if $t == raised-normal {
66
transition: $transition;
67
border-image: none;
68
box-shadow: $shadow-z1;
69
background-color: if($fc == $primary, $surface, $fc);
70
color: if($fc == $primary, $text, on($fc));
71
}
72
@if $t == raised-hover {
74
box-shadow: $shadow-z3;
75
}
76
@if $t == raised-focus {
78
border-image: none;
79
box-shadow: $shadow-z3;
80
}
81
@if $t == raised-disabled {
83
box-shadow: $shadow-z1;
84
background-color: $base-alt;
85
color: $text-disabled;
86
}
87
}
88
$ripple-transition-property: all, border-image, background-size, background-image;
91
$ripple-transition-duration: $duration, $ripple-fade-in-duration, $ripple-fade-out-duration, $ripple-fade-out-opacity-duration;
92
$ripple-active-transition-duration: $duration, $ripple-fade-in-duration, 0ms, 0ms;
93
%ripple {
95
transition-property: $ripple-transition-property;
96
transition-duration: $ripple-transition-duration;
97
transition-timing-function: $ease-out;
98
outline: none;
99
background-image: radial-gradient(circle, transparent 10%, transparent 0%);
100
background-repeat: no-repeat;
101
background-position: center;
102
background-size: 1000% 1000%;
103
&:active {
105
transition-duration: $ripple-active-transition-duration;
106
animation: ripple $ripple-fade-in-duration $ease-out forwards;
107
background-size: 0% 0%;
108
}
109
}
110
@mixin raised-ink-color($color, $opacity-modifier: 0) {
112
@if saturation($color) > 50% {
113
$opacity-modifier: .04;
114
}
115
$overlay-hover-opacity: .04;
117
box-shadow: inset 0 0 0 9999px transparent, $shadow-z2;
119
&:drop(active),
121
&:hover {
122
box-shadow: inset 0 0 0 9999px rgba($color, $overlay-hover-opacity + $opacity-modifier), $shadow-z4;
123
}
124
&:focus {
126
box-shadow: inset 0 0 0 9999px rgba($color, $overlay-focus-opacity + $opacity-modifier), $shadow-z4;
127
}
128
&:active {
130
box-shadow: inset 0 0 0 9999px rgba($color, $overlay-focus-opacity + $opacity-modifier), $shadow-z8;
131
background-image: radial-gradient(circle, rgba($color, $overlay-active-opacity + $opacity-modifier) 10%, transparent 0%);
132
}
133
}
134
@mixin ink-color($color, $opacity-modifier: 0, $fg: true, $activated: false) {
136
@if saturation($color) > 50% {
137
$opacity-modifier: .04;
138
}
139
@if $fg {
141
color: $color;
142
}
143
@if $activated {
145
background-color: rgba($color, $overlay-checked-opacity + $opacity-modifier);
146
}
147
box-shadow: inset 0 0 0 9999px transparent;
149
&:drop(active),
151
&:hover {
152
box-shadow: inset 0 0 0 9999px rgba($color, $overlay-hover-opacity + $opacity-modifier);
153
}
154
&:focus {
156
box-shadow: inset 0 0 0 9999px rgba($color, $overlay-focus-opacity + $opacity-modifier);
157
}
158
&:active {
160
background-image: radial-gradient(circle, rgba($color, $overlay-active-opacity + $opacity-modifier) 10%, transparent 0%);
161
}
162
}
163
@mixin list-item {
165
&:drop(active):not(:active),
166
&:hover:not(:active) {
167
transition-property: $ripple-transition-property, box-shadow;
168
transition-duration: $ripple-transition-duration, 0ms;
169
}
170
}
171
@mixin overshoot($side) {
174
$valid-sides: top, bottom, left, right;
175
@if not index($valid-sides, $side) {
177
@error "#{$side} is not a valid side. Expected one of #{$valid-sides}.";
178
}
179
$_position: center $side;
181
@if $side == left or $side == right {
183
$_position: $side center;
184
}
185
background-image: -gtk-gradient(radial,
187
$_position, 0,
188
$_position, 0.75,
189
to(rgba($primary, 0.24)),
190
to(transparent));
191
background-repeat: no-repeat;
193
background-position: $_position;
194
background-color: transparent; // reset some properties to be sure to not inherit them somehow
196
border: none; //
197
box-shadow: none; //
198
}
199
@mixin undershoot($side) {
202
$valid-sides: top, bottom, left, right;
203
@if not index($valid-sides, $side) {
205
@error "#{$side} is not a valid side. Expected one of #{$valid-sides}.";
206
}
207
$_undershoot_color_dark: $stroke;
209
$_undershoot_color_light: transparent;
210
$_gradient_dir: left;
212
$_dash_bg_size: 12px 1px;
213
$_gradient_repeat: repeat-x;
214
$_bg_pos: left $side;
215
@if $side == left or $side == right {
217
$_gradient_dir: top;
218
$_dash_bg_size: 1px 12px;
219
$_gradient_repeat: repeat-y;
220
$_bg_pos: $side top;
221
}
222
background-color: transparent; // shouldn't be needed, but better to be sure
224
background-image: linear-gradient(to $_gradient_dir, // this is the dashed line
226
$_undershoot_color_light 50%,
227
$_undershoot_color_dark 50%);
228
padding-#{$side}: 1px;
230
background-size: $_dash_bg_size;
231
background-repeat: $_gradient_repeat;
232
background-origin: content-box;
233
background-position: $_bg_pos;
234
}
235