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 0%);
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 0 0 9999px transparent, inset 0 -1px if($fc == $primary, $stroke, $fc);
47
background-color: $entry-fill;
48
color: $text;
49
}
50
@if $t == hover {
52
box-shadow: inset 0 0 0 9999px $overlay-hover, inset 0 -1px if($fc == $primary, $stroke, $fc);
53
}
54
@if $t == focus {
56
box-shadow: inset 0 0 0 9999px $overlay-focus, inset 0 -1px if($fc == $primary, $stroke, $fc);
57
}
58
@if $t == checked {
60
border-image:
61
radial-gradient(
62
circle closest-corner at center calc(100% - 1px),
63
$fc 100%,
64
transparent 0%
65
) 2 / 0 0 2px;
66
}
67
@if $t == disabled {
69
box-shadow: inset 0 0 0 9999px transparent, inset 0 -1px $stroke-disabled;
70
background-color: $entry-fill;
71
color: $text-disabled;
72
}
73
@if $t == raised-normal {
75
transition: $transition;
76
border-image: none;
77
box-shadow: $shadow-z1;
78
background-color: if($fc == $primary, $surface, $fc);
79
color: if($fc == $primary, $text, on($fc));
80
}
81
@if $t == raised-hover {
83
box-shadow: $shadow-z3;
84
}
85
@if $t == raised-focus {
87
border-image: none;
88
box-shadow: $shadow-z3;
89
}
90
@if $t == raised-disabled {
92
box-shadow: $shadow-z1;
93
background-color: $base-alt;
94
color: $text-disabled;
95
}
96
}
97
$ripple-transition-property: all, border-image, background-size, background-image;
100
$ripple-transition-duration: $duration, $ripple-fade-in-duration, $ripple-fade-out-duration, $ripple-fade-out-opacity-duration;
101
$ripple-active-transition-duration: $duration, $ripple-fade-in-duration, 0ms, 0ms;
102
%ripple {
104
transition-property: $ripple-transition-property;
105
transition-duration: $ripple-transition-duration;
106
transition-timing-function: $ease-out;
107
outline: none;
108
background-image: radial-gradient(circle, transparent 10%, transparent 0%);
109
background-repeat: no-repeat;
110
background-position: center;
111
background-size: 1000% 1000%;
112
&:active {
114
transition-duration: $ripple-active-transition-duration;
115
animation: ripple $ripple-fade-in-duration $ease-out forwards;
116
background-size: 0% 0%;
117
}
118
}
119
@mixin raised-ink-color($color, $opacity-modifier: 0) {
121
@if saturation($color) > 50% {
122
$opacity-modifier: .04;
123
}
124
$overlay-hover-opacity: .04;
126
box-shadow: inset 0 0 0 9999px transparent, $shadow-z2;
128
&:drop(active),
130
&:hover {
131
box-shadow: inset 0 0 0 9999px rgba($color, $overlay-hover-opacity + $opacity-modifier), $shadow-z4;
132
}
133
&:focus {
135
box-shadow: inset 0 0 0 9999px rgba($color, $overlay-focus-opacity + $opacity-modifier), $shadow-z4;
136
}
137
&:active {
139
box-shadow: inset 0 0 0 9999px rgba($color, $overlay-focus-opacity + $opacity-modifier), $shadow-z8;
140
background-image: radial-gradient(circle, rgba($color, $overlay-active-opacity + $opacity-modifier) 10%, transparent 0%);
141
}
142
}
143
@mixin ink-color($color, $opacity-modifier: 0, $fg: true, $activated: false) {
145
@if saturation($color) > 50% {
146
$opacity-modifier: .04;
147
}
148
@if $fg {
150
color: $color;
151
}
152
@if $activated {
154
background-color: rgba($color, $overlay-checked-opacity + $opacity-modifier);
155
}
156
box-shadow: inset 0 0 0 9999px transparent;
158
&:drop(active),
160
&:hover {
161
box-shadow: inset 0 0 0 9999px rgba($color, $overlay-hover-opacity + $opacity-modifier);
162
}
163
&:focus {
165
box-shadow: inset 0 0 0 9999px rgba($color, $overlay-focus-opacity + $opacity-modifier);
166
}
167
&:active {
169
background-image: radial-gradient(circle, rgba($color, $overlay-active-opacity + $opacity-modifier) 10%, transparent 0%);
170
}
171
}
172
@mixin list-item {
174
&:drop(active):not(:active),
175
&:hover:not(:active) {
176
transition-property: $ripple-transition-property, box-shadow;
177
transition-duration: $ripple-transition-duration, 0ms;
178
}
179
}
180
@mixin overshoot($side) {
183
$valid-sides: top, bottom, left, right;
184
@if not index($valid-sides, $side) {
186
@error "#{$side} is not a valid side. Expected one of #{$valid-sides}.";
187
}
188
$_position: center $side;
190
@if $side == left or $side == right {
192
$_position: $side center;
193
}
194
background-image: -gtk-gradient(radial,
196
$_position, 0,
197
$_position, 0.75,
198
to(rgba($primary, 0.24)),
199
to(transparent));
200
background-repeat: no-repeat;
202
background-position: $_position;
203
background-color: transparent; // reset some properties to be sure to not inherit them somehow
205
border: none; //
206
box-shadow: none; //
207
}
208
@mixin undershoot($side) {
211
$valid-sides: top, bottom, left, right;
212
@if not index($valid-sides, $side) {
214
@error "#{$side} is not a valid side. Expected one of #{$valid-sides}.";
215
}
216
$_undershoot_color_dark: $stroke;
218
$_undershoot_color_light: transparent;
219
$_gradient_dir: left;
221
$_dash_bg_size: 12px 1px;
222
$_gradient_repeat: repeat-x;
223
$_bg_pos: left $side;
224
@if $side == left or $side == right {
226
$_gradient_dir: top;
227
$_dash_bg_size: 1px 12px;
228
$_gradient_repeat: repeat-y;
229
$_bg_pos: $side top;
230
}
231
background-color: transparent; // shouldn't be needed, but better to be sure
233
background-image: linear-gradient(to $_gradient_dir, // this is the dashed line
235
$_undershoot_color_light 50%,
236
$_undershoot_color_dark 50%);
237
padding-#{$side}: 1px;
239
background-size: $_dash_bg_size;
240
background-repeat: $_gradient_repeat;
241
background-origin: content-box;
242
background-position: $_bg_pos;
243
}
244