ASCII text
1
// generic drawing of more complex things
2
//
4
// Ripple keyframes
5
//
6
@keyframes ripple {
8
to {
9
background-size: 1000% 1000%;
10
}
11
}
12
@keyframes ripple-on-slider {
14
to {
15
background-size: auto, 1000% 1000%;
16
}
17
}
18
@keyframes ripple-on-headerbar {
20
from {
21
background-image: radial-gradient(circle, $primary 0%, transparent 0%);
22
}
23
to {
25
background-image: radial-gradient(circle, $primary 100%, transparent 100%);
26
}
27
}
28
@mixin entry($t, $fc: $primary) {
31
//
32
// entry
33
//
34
// $t: entry type
35
// $fc: focus color
36
//
37
@if $t == normal {
39
transition: $transition, border-image $ripple-fade-in-duration $ease-out;
40
border-image:
41
radial-gradient(
42
circle closest-corner at center calc(100% - 1px),
43
$fc 0%,
44
transparent 0%
45
) 2 / 0 0 0px;
46
box-shadow: inset 0 -1px if($fc == $primary, stroke($on-surface), $fc);
47
background-color: entry-fill($on-surface);
48
color: $on-surface;
49
caret-color: $fc;
50
}
51
@if $t == hover {
53
box-shadow: inset 0 -1px if($fc == $primary, stroke($on-surface), $fc);
54
background-color: overlay("hover-alt", $on-surface, $on: entry-fill($on-surface));
55
}
56
@if $t == focus {
58
box-shadow: inset 0 -1px if($fc == $primary, stroke($on-surface), $fc);
59
background-color: overlay("focus", $on-surface, $on: entry-fill($on-surface));
60
}
61
@if $t == checked {
63
border-image:
64
radial-gradient(
65
circle closest-corner at center calc(100% - 1px),
66
$fc 100%,
67
transparent 100%
68
) 2 / 0 0 2px;
69
box-shadow: inset 0 -1px if($fc == $primary, stroke($on-surface), $fc);
70
background-color: overlay("focus", $on-surface, $on: entry-fill($on-surface));
71
}
72
@if $t == disabled {
74
box-shadow: inset 0 -1px disabled-stroke($on-surface);
75
background-color: entry-fill($on-surface);
76
color: disabled($on-surface);
77
}
78
@if $t == raised-normal {
80
transition: $transition;
81
border-image: none;
82
box-shadow: $shadow-z1;
83
background-color: if($fc == $primary, $surface-z8, $fc);
84
color: if($fc == $primary, $on-surface, on($fc));
85
caret-color: if($fc == $primary, $fc, on($fc));
86
}
87
@if $t == raised-hover {
89
box-shadow: $shadow-z3;
90
}
91
@if $t == raised-focus {
93
border-image: none;
94
box-shadow: $shadow-z3;
95
}
96
@if $t == raised-disabled {
98
box-shadow: $shadow-z1;
99
background-color: $surface-z1;
100
color: disabled($on-surface);
101
}
102
}
103
$ripple-transition-property: all, border-image, background-size, background-image;
106
$ripple-transition-duration: $duration, $ripple-fade-in-duration, $ripple-fade-out-duration, $ripple-fade-out-opacity-duration;
107
$ripple-active-transition-duration: $duration, $ripple-fade-in-duration, 0ms, 0ms;
108
%ripple {
110
transition-property: $ripple-transition-property;
111
transition-duration: $ripple-transition-duration;
112
transition-timing-function: $ease-out;
113
background-image: radial-gradient(circle, transparent 10%, transparent 10%);
114
background-repeat: no-repeat;
115
background-position: center;
116
background-size: 1000% 1000%;
117
&:active {
119
transition-duration: $ripple-active-transition-duration;
120
animation: ripple $ripple-fade-in-duration $ease-out forwards;
121
background-size: 0% 0%;
122
}
123
}
124
@mixin ink-color($color, $on: transparent, $button-style: "none", $hover-alt: false, $opacity-modifier: 0) {
126
$hover: "hover";
127
@if $hover-alt or $button-style == "raised" {
129
$hover: "hover-alt";
130
}
131
@if $button-style == "flat" {
133
box-shadow: none;
134
} @else if $button-style == "outlined" {
135
box-shadow: inset 0 0 0 1px stroke($on-surface);
136
} @else if $button-style == "raised" {
137
box-shadow: $shadow-z2;
138
}
139
@if $button-style != "none" or $on != transparent {
141
background-color: $on;
142
}
143
&:drop(active),
145
&:hover {
146
@if $button-style == "flat" {
147
box-shadow: none;
148
} @else if $button-style == "outlined" {
149
box-shadow: inset 0 0 0 1px stroke($on-surface);
150
} @else if $button-style == "raised" {
151
box-shadow: $shadow-z4;
152
}
153
background-color: overlay($hover, $color, $opacity-modifier: $opacity-modifier, $on: $on);
155
}
156
&:focus {
158
@if $button-style == "flat" {
159
box-shadow: none;
160
} @else if $button-style == "outlined" {
161
box-shadow: inset 0 0 0 1px stroke($on-surface);
162
} @else if $button-style == "raised" {
163
box-shadow: $shadow-z4;
164
}
165
background-color: overlay("focus", $color, $opacity-modifier: $opacity-modifier, $on: $on);
167
}
168
&:active {
170
@if $button-style == "flat" {
171
box-shadow: none;
172
} @else if $button-style == "outlined" {
173
box-shadow: inset 0 0 0 1px stroke($on-surface);
174
} @else if $button-style == "raised" {
175
box-shadow: $shadow-z8;
176
}
177
background-image: radial-gradient(circle, overlay("pressed", $color, $opacity-modifier: $opacity-modifier) 10%, transparent 10%);
179
}
180
}
181
@mixin list-item {
183
&:drop(active):not(:active),
184
&:hover:not(:active) {
185
transition-property: $ripple-transition-property, background-color;
186
transition-duration: $ripple-transition-duration, 0ms;
187
}
188
}
189
@mixin overshoot($position) {
192
$valid-positions: top, bottom, left, right;
193
@if not index($valid-positions, $position) {
195
@error "#{$position} is not a valid position. Expected one of #{$valid-positions}.";
196
}
197
$background-size: 200% 75%;
199
@if $position == left or $position == right {
201
$background-size: 75% 200%;
202
}
203
background-image:
205
radial-gradient(
206
farthest-side at $position,
207
rgba($primary, .24) 99%, // For better antialiasing
208
rgba($primary, 0) 100% // Don't use transparent i.e. rgba(0, 0, 0, 0)
209
);
210
background-size: $background-size;
211
background-repeat: no-repeat;
212
background-position: $position;
213
}
214
@mixin undershoot($side) {
217
$valid-sides: top, bottom, left, right;
218
@if not index($valid-sides, $side) {
220
@error "#{$side} is not a valid side. Expected one of #{$valid-sides}.";
221
}
222
$_undershoot_color_dark: stroke($on-surface);
224
$_undershoot_color_light: transparent;
225
$_gradient_dir: left;
227
$_dash_bg_size: 12px 1px;
228
$_gradient_repeat: repeat-x;
229
$_bg_pos: left $side;
230
@if $side == left or $side == right {
232
$_gradient_dir: top;
233
$_dash_bg_size: 1px 12px;
234
$_gradient_repeat: repeat-y;
235
$_bg_pos: $side top;
236
}
237
background-color: transparent; // shouldn't be needed, but better to be sure
239
background-image: linear-gradient(to $_gradient_dir, // this is the dashed line
241
$_undershoot_color_light 50%,
242
$_undershoot_color_dark 50%);
243
margin-#{$side}: 1px;
245
background-size: $_dash_bg_size;
246
background-repeat: $_gradient_repeat;
247
background-origin: content-box;
248
background-position: $_bg_pos;
249
}
250