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
box-shadow: inset 0 0 0 9999px transparent, $shadow-z2;
117
&:drop(active),
119
&:hover {
120
box-shadow: inset 0 0 0 9999px transparent, $shadow-z4;
121
}
122
&:focus {
124
box-shadow: inset 0 0 0 9999px rgba($color, $overlay-focus-opacity + $opacity-modifier), $shadow-z4;
125
}
126
&:active {
128
box-shadow: inset 0 0 0 9999px rgba($color, $overlay-hover-opacity + $opacity-modifier), $shadow-z8;
129
background-image: radial-gradient(circle, rgba($color, $overlay-active-opacity + $opacity-modifier) 10%, transparent 0%);
130
}
131
}
132
@mixin ink-color($color, $opacity-modifier: 0, $fg: true, $activated: false) {
134
@if saturation($color) > 50% {
135
$opacity-modifier: .04;
136
}
137
@if $fg {
139
color: $color;
140
}
141
@if $activated {
143
background-color: rgba($color, $overlay-checked-opacity + $opacity-modifier);
144
}
145
box-shadow: inset 0 0 0 9999px transparent;
147
&:drop(active),
149
&:hover {
150
box-shadow: inset 0 0 0 9999px rgba($color, $overlay-hover-opacity + $opacity-modifier);
151
}
152
&:focus {
154
box-shadow: inset 0 0 0 9999px rgba($color, $overlay-focus-opacity + $opacity-modifier);
155
}
156
&:active {
158
background-image: radial-gradient(circle, rgba($color, $overlay-active-opacity + $opacity-modifier) 10%, transparent 0%);
159
}
160
}
161
@mixin list-item {
163
&:drop(active):not(:active),
164
&:hover:not(:active) {
165
transition-property: $ripple-transition-property, box-shadow;
166
transition-duration: $ripple-transition-duration, 0ms;
167
}
168
}
169
@mixin overshoot($side) {
172
$valid-sides: top, bottom, left, right;
173
@if not index($valid-sides, $side) {
175
@error "#{$side} is not a valid side. Expected one of #{$valid-sides}.";
176
}
177
$_position: center $side;
179
@if $side == left or $side == right {
181
$_position: $side center;
182
}
183
background-image: -gtk-gradient(radial,
185
$_position, 0,
186
$_position, 0.75,
187
to(rgba($primary, 0.24)),
188
to(transparent));
189
background-repeat: no-repeat;
191
background-position: $_position;
192
background-color: transparent; // reset some properties to be sure to not inherit them somehow
194
border: none; //
195
box-shadow: none; //
196
}
197
@mixin undershoot($side) {
200
$valid-sides: top, bottom, left, right;
201
@if not index($valid-sides, $side) {
203
@error "#{$side} is not a valid side. Expected one of #{$valid-sides}.";
204
}
205
$_undershoot_color_dark: $stroke;
207
$_undershoot_color_light: transparent;
208
$_gradient_dir: left;
210
$_dash_bg_size: 12px 1px;
211
$_gradient_repeat: repeat-x;
212
$_bg_pos: left $side;
213
@if $side == left or $side == right {
215
$_gradient_dir: top;
216
$_dash_bg_size: 1px 12px;
217
$_gradient_repeat: repeat-y;
218
$_bg_pos: $side top;
219
}
220
background-color: transparent; // shouldn't be needed, but better to be sure
222
background-image: linear-gradient(to $_gradient_dir, // this is the dashed line
224
$_undershoot_color_light 50%,
225
$_undershoot_color_dark 50%);
226
padding-#{$side}: 1px;
228
background-size: $_dash_bg_size;
229
background-repeat: $_gradient_repeat;
230
background-origin: content-box;
231
background-position: $_bg_pos;
232
}
233