ASCII text
1
// generic drawing of more complex things
2
@use "sass:list";
4
@use "../../theme";
5
@use "../../theme-color";
6
//
8
// Ripple keyframes
9
//
10
@keyframes ripple {
12
to {
13
background-size: 1000% 1000%;
14
}
15
}
16
@keyframes ripple-on-slider {
18
to {
19
background-size: auto, 1000% 1000%;
20
}
21
}
22
@keyframes ripple-on-headerbar {
24
from {
25
background-image: radial-gradient(circle, theme-color.$primary 0%, transparent 0%);
26
}
27
to {
29
background-image: radial-gradient(circle, theme-color.$primary 100%, transparent 0%);
30
}
31
}
32
@mixin entry($t, $fc: theme-color.$primary) {
35
//
36
// entry
37
//
38
// $t: entry type
39
// $fc: focus color
40
//
41
@if $t == normal {
43
transition: theme.$transition, border-image theme.$ripple-fade-in-duration theme.$ease-out;
44
border-image:
45
radial-gradient(
46
circle closest-corner at center calc(100% - 1px),
47
$fc 0%,
48
transparent 0%
49
) 2 / 0 0 0;
50
box-shadow: inset 0 -1px if($fc == theme-color.$primary, theme-color.stroke(theme-color.$on-surface), $fc);
51
background-color: theme-color.entry-fill(theme-color.$on-surface);
52
color: theme-color.$on-surface;
53
caret-color: $fc;
54
}
55
@if $t == hover {
57
box-shadow: inset 0 -1px if($fc == theme-color.$primary, theme-color.stroke(theme-color.$on-surface), $fc);
58
background-color: theme-color.hover-overlay(theme-color.$on-surface, $on: theme-color.entry-fill(theme-color.$on-surface), $alt: true);
59
}
60
@if $t == focus {
62
box-shadow: inset 0 -1px if($fc == theme-color.$primary, theme-color.stroke(theme-color.$on-surface), $fc);
63
background-color: theme-color.focus-overlay(theme-color.$on-surface, $on: theme-color.entry-fill(theme-color.$on-surface));
64
}
65
@if $t == checked {
67
border-image:
68
radial-gradient(
69
circle closest-corner at center calc(100% - 1px),
70
$fc 100%,
71
transparent 0%
72
) 2 / 0 0 2px;
73
box-shadow: inset 0 -1px if($fc == theme-color.$primary, theme-color.stroke(theme-color.$on-surface), $fc);
74
background-color: theme-color.focus-overlay(theme-color.$on-surface, $on: theme-color.entry-fill(theme-color.$on-surface));
75
}
76
@if $t == disabled {
78
box-shadow: inset 0 -1px theme-color.disabled-stroke(theme-color.$on-surface);
79
background-color: theme-color.entry-fill(theme-color.$on-surface);
80
color: theme-color.disabled(theme-color.$on-surface);
81
}
82
@if $t == raised-normal {
84
transition: theme.$transition;
85
border-image: none;
86
box-shadow: theme.$shadow-z1;
87
background-color: if($fc == theme-color.$primary, theme-color.$surface-z8, $fc);
88
color: if($fc == theme-color.$primary, theme-color.$on-surface, theme-color.on($fc));
89
caret-color: if($fc == theme-color.$primary, $fc, theme-color.on($fc));
90
}
91
@if $t == raised-hover {
93
box-shadow: theme.$shadow-z3;
94
}
95
@if $t == raised-focus {
97
border-image: none;
98
box-shadow: theme.$shadow-z3;
99
}
100
@if $t == raised-disabled {
102
box-shadow: theme.$shadow-z1;
103
background-color: theme-color.$surface-z1;
104
color: theme-color.disabled(theme-color.$on-surface);
105
}
106
}
107
$ripple-transition-property: all, border-image, background-size, background-image;
110
$ripple-transition-duration: theme.$duration, theme.$ripple-fade-in-duration, theme.$ripple-fade-out-duration, theme.$ripple-fade-out-opacity-duration;
111
$ripple-active-transition-duration: theme.$duration, theme.$ripple-fade-in-duration, 0ms, 0ms;
112
%ripple {
114
transition-property: $ripple-transition-property;
115
transition-duration: $ripple-transition-duration;
116
transition-timing-function: theme.$ease-out;
117
outline: none;
118
background-image: radial-gradient(circle, transparent 10%, transparent 0%);
119
background-repeat: no-repeat;
120
background-position: center;
121
background-size: 1000% 1000%;
122
&:active {
124
transition-duration: $ripple-active-transition-duration;
125
animation: ripple theme.$ripple-fade-in-duration theme.$ease-out forwards;
126
background-size: 0% 0%;
127
}
128
}
129
@mixin ink-color($color, $on: transparent, $button-style: "none", $hover-alt: false, $opacity-modifier: 0) {
131
@if $button-style == "raised" {
132
$hover-alt: true;
133
}
134
@if $button-style == "flat" {
136
box-shadow: none;
137
} @else if $button-style == "outlined" {
138
box-shadow: inset 0 0 0 1px theme-color.stroke(theme-color.$on-surface);
139
} @else if $button-style == "raised" {
140
box-shadow: theme.$shadow-z2;
141
}
142
@if $button-style != "none" or $on != transparent {
144
background-color: $on;
145
}
146
&:drop(active),
148
&:hover {
149
@if $button-style == "flat" {
150
box-shadow: none;
151
} @else if $button-style == "outlined" {
152
box-shadow: inset 0 0 0 1px theme-color.stroke(theme-color.$on-surface);
153
} @else if $button-style == "raised" {
154
box-shadow: theme.$shadow-z4;
155
}
156
background-color: theme-color.hover-overlay($color, $opacity-modifier: $opacity-modifier, $on: $on, $alt: $hover-alt);
158
}
159
&:focus {
161
@if $button-style == "flat" {
162
box-shadow: none;
163
} @else if $button-style == "outlined" {
164
box-shadow: inset 0 0 0 1px theme-color.stroke(theme-color.$on-surface);
165
} @else if $button-style == "raised" {
166
box-shadow: theme.$shadow-z4;
167
}
168
background-color: theme-color.focus-overlay($color, $opacity-modifier: $opacity-modifier, $on: $on);
170
}
171
&:active {
173
@if $button-style == "flat" {
174
box-shadow: none;
175
} @else if $button-style == "outlined" {
176
box-shadow: inset 0 0 0 1px theme-color.stroke(theme-color.$on-surface);
177
} @else if $button-style == "raised" {
178
box-shadow: theme.$shadow-z8;
179
}
180
background-image: radial-gradient(circle, theme-color.pressed-overlay($color, $opacity-modifier: $opacity-modifier) 10%, transparent 0%);
182
}
183
}
184
@mixin list-item {
186
&:drop(active):not(:active),
187
&:hover:not(:active) {
188
transition-property: $ripple-transition-property, background-color;
189
transition-duration: $ripple-transition-duration, 0ms;
190
}
191
}
192
@mixin overshoot($side) {
195
$valid-sides: top, bottom, left, right;
196
@if not list.index($valid-sides, $side) {
198
@error "#{$side} is not a valid side. Expected one of #{$valid-sides}.";
199
}
200
$_position: center $side;
202
@if $side == left or $side == right {
204
$_position: $side center;
205
}
206
background-image:
208
-gtk-gradient(
209
radial,
210
$_position, 0,
211
$_position, .75,
212
to(rgba(theme-color.$primary, .24)),
213
to(transparent)
214
);
215
background-repeat: no-repeat;
217
background-position: $_position;
218
background-color: transparent; // reset some properties to be sure to not inherit them somehow
220
border: none; //
221
box-shadow: none; //
222
}
223
@mixin undershoot($side) {
226
$valid-sides: top, bottom, left, right;
227
@if not list.index($valid-sides, $side) {
229
@error "#{$side} is not a valid side. Expected one of #{$valid-sides}.";
230
}
231
$_undershoot_color_dark: theme-color.stroke(theme-color.$on-surface);
233
$_undershoot_color_light: transparent;
234
$_gradient_dir: left;
236
$_dash_bg_size: 12px 1px;
237
$_gradient_repeat: repeat-x;
238
$_bg_pos: left $side;
239
@if $side == left or $side == right {
241
$_gradient_dir: top;
242
$_dash_bg_size: 1px 12px;
243
$_gradient_repeat: repeat-y;
244
$_bg_pos: $side top;
245
}
246
background-color: transparent; // shouldn't be needed, but better to be sure
248
background-image: linear-gradient(to $_gradient_dir, // this is the dashed line
250
$_undershoot_color_light 50%,
251
$_undershoot_color_dark 50%);
252
padding-#{$side}: 1px;
254
background-size: $_dash_bg_size;
255
background-repeat: $_gradient_repeat;
256
background-origin: content-box;
257
background-position: $_bg_pos;
258
}
259