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 0;
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
caret-color: $fc;
50
}
51
@if $t == hover {
53
box-shadow: inset 0 0 0 9999px overlay("hover", $text), inset 0 -1px if($fc == $primary, $stroke, $fc);
54
}
55
@if $t == focus {
57
box-shadow: inset 0 0 0 9999px overlay("focus", $text), inset 0 -1px if($fc == $primary, $stroke, $fc);
58
}
59
@if $t == checked {
61
border-image:
62
radial-gradient(
63
circle closest-corner at center calc(100% - 1px),
64
$fc 100%,
65
transparent 0%
66
) 2 / 0 0 2px;
67
}
68
@if $t == disabled {
70
box-shadow: inset 0 0 0 9999px transparent, inset 0 -1px $stroke-disabled;
71
background-color: $entry-fill;
72
color: $text-disabled;
73
}
74
@if $t == raised-normal {
76
transition: $transition;
77
border-image: none;
78
box-shadow: $shadow-z1;
79
background-color: if($fc == $primary, $surface, $fc);
80
color: if($fc == $primary, $text, on($fc));
81
caret-color: if($fc == $primary, $fc, on($fc));
82
}
83
@if $t == raised-hover {
85
box-shadow: $shadow-z3;
86
}
87
@if $t == raised-focus {
89
border-image: none;
90
box-shadow: $shadow-z3;
91
}
92
@if $t == raised-disabled {
94
box-shadow: $shadow-z1;
95
background-color: $base-alt;
96
color: $text-disabled;
97
}
98
}
99
$ripple-transition-property: all, border-image, background-size, background-image;
102
$ripple-transition-duration: $duration, $ripple-fade-in-duration, $ripple-fade-out-duration, $ripple-fade-out-opacity-duration;
103
$ripple-active-transition-duration: $duration, $ripple-fade-in-duration, 0ms, 0ms;
104
%ripple {
106
transition-property: $ripple-transition-property;
107
transition-duration: $ripple-transition-duration;
108
transition-timing-function: $ease-out;
109
outline: none;
110
background-image: radial-gradient(circle, transparent 10%, transparent 0%);
111
background-repeat: no-repeat;
112
background-position: center;
113
background-size: 1000% 1000%;
114
&:active {
116
transition-duration: $ripple-active-transition-duration;
117
animation: ripple $ripple-fade-in-duration $ease-out forwards;
118
background-size: 0% 0%;
119
}
120
}
121
@mixin raised-ink-color($color, $opacity-modifier: 0) {
123
@if saturation($color) > 50% {
124
$opacity-modifier: .04;
125
}
126
$overlay-hover-opacity: .04;
128
box-shadow: inset 0 0 0 9999px transparent, $shadow-z2;
130
&:drop(active),
132
&:hover {
133
box-shadow: inset 0 0 0 9999px rgba($color, $overlay-hover-opacity + $opacity-modifier), $shadow-z4;
134
}
135
&:focus {
137
box-shadow: inset 0 0 0 9999px rgba($color, $overlay-focus-opacity + $opacity-modifier), $shadow-z4;
138
}
139
&:active {
141
box-shadow: inset 0 0 0 9999px rgba($color, $overlay-focus-opacity + $opacity-modifier), $shadow-z8;
142
background-image: radial-gradient(circle, rgba($color, $overlay-active-opacity + $opacity-modifier) 10%, transparent 0%);
143
}
144
}
145
@mixin ink-color($color, $elevation: false, $opacity-modifier: 0) {
147
$hover: "hover";
148
@if $elevation {
150
$hover: "hover-alt";
151
}
152
box-shadow: inset 0 0 0 9999px transparent, if($elevation, $shadow-z2, null);
154
&:drop(active),
156
&:hover {
157
box-shadow: inset 0 0 0 9999px overlay($hover, $color, $opacity-modifier: $opacity-modifier), if($elevation, $shadow-z4, null);
158
}
159
&:focus {
161
box-shadow: inset 0 0 0 9999px overlay("focus", $color, $opacity-modifier: $opacity-modifier), if($elevation, $shadow-z4, null);
162
}
163
&:active {
165
@if $elevation {
166
box-shadow: inset 0 0 0 9999px overlay("focus", $color, $opacity-modifier: $opacity-modifier), $shadow-z8;
167
}
168
background-image: radial-gradient(circle, overlay("pressed", $color, $opacity-modifier: $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:
196
-gtk-gradient(
197
radial,
198
$_position, 0,
199
$_position, .75,
200
to(rgba($primary, .24)),
201
to(transparent)
202
);
203
background-repeat: no-repeat;
205
background-position: $_position;
206
background-color: transparent; // reset some properties to be sure to not inherit them somehow
208
border: none; //
209
box-shadow: none; //
210
}
211
@mixin undershoot($side) {
214
$valid-sides: top, bottom, left, right;
215
@if not index($valid-sides, $side) {
217
@error "#{$side} is not a valid side. Expected one of #{$valid-sides}.";
218
}
219
$_undershoot_color_dark: $stroke;
221
$_undershoot_color_light: transparent;
222
$_gradient_dir: left;
224
$_dash_bg_size: 12px 1px;
225
$_gradient_repeat: repeat-x;
226
$_bg_pos: left $side;
227
@if $side == left or $side == right {
229
$_gradient_dir: top;
230
$_dash_bg_size: 1px 12px;
231
$_gradient_repeat: repeat-y;
232
$_bg_pos: $side top;
233
}
234
background-color: transparent; // shouldn't be needed, but better to be sure
236
background-image: linear-gradient(to $_gradient_dir, // this is the dashed line
238
$_undershoot_color_light 50%,
239
$_undershoot_color_dark 50%);
240
padding-#{$side}: 1px;
242
background-size: $_dash_bg_size;
243
background-repeat: $_gradient_repeat;
244
background-origin: content-box;
245
background-position: $_bg_pos;
246
}
247