1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
|
19 |
|
20 |
|
21 |
|
22 |
|
23 |
|
24 | @use '@material/animation/functions' as animation-functions;
|
25 | @use '@material/elevation/elevation-theme';
|
26 | @use '@material/elevation/elevation';
|
27 | @use '@material/feature-targeting/feature-targeting';
|
28 | @use '@material/focus-ring/focus-ring';
|
29 | @use '@material/dom/mixins' as dom-mixins;
|
30 | @use '@material/ripple/ripple';
|
31 | @use '@material/ripple/ripple-theme';
|
32 | @use '@material/shape/mixins' as shape-mixins;
|
33 | @use '@material/shape/functions' as shape-functions;
|
34 | @use '@material/theme/css';
|
35 | @use '@material/theme/custom-properties';
|
36 | @use '@material/theme/replace';
|
37 | @use '@material/theme/state';
|
38 | @use '@material/theme/theme-color';
|
39 | @use '@material/theme/theme';
|
40 | @use '@material/touch-target/mixins' as touch-target-mixins;
|
41 | @use '@material/typography/typography';
|
42 | @use './fab-custom-properties';
|
43 | @use './extended-fab-theme';
|
44 | @use './fab-theme';
|
45 | @use 'sass:math';
|
46 | @use 'sass:list';
|
47 |
|
48 | @mixin core-styles($query: feature-targeting.all()) {
|
49 | @include without-ripple($query);
|
50 | @include ripple($query);
|
51 | }
|
52 |
|
53 | @mixin static-styles($query: feature-targeting.all()) {
|
54 |
|
55 |
|
56 | @include touch-target-mixins.wrapper($query);
|
57 |
|
58 | @include elevation.overlay-common($query);
|
59 |
|
60 | .mdc-fab {
|
61 | @include base_($query: $query);
|
62 | }
|
63 |
|
64 | .mdc-fab--mini {
|
65 | @include mini_($query: $query);
|
66 | }
|
67 |
|
68 | .mdc-fab--extended {
|
69 | @include extended_($query: $query);
|
70 | }
|
71 |
|
72 | .mdc-fab--touch {
|
73 | @include touch-target-mixins.margin(
|
74 | $component-height: fab-theme.$mini-height,
|
75 | $component-width: fab-theme.$mini-height,
|
76 | $query: $query
|
77 | );
|
78 |
|
79 | .mdc-fab__touch {
|
80 | @include touch-target-mixins.touch-target(
|
81 | $set-width: true,
|
82 | $query: $query
|
83 | );
|
84 | }
|
85 | }
|
86 |
|
87 | .mdc-fab::before {
|
88 | @include dom-mixins.transparent-border($query: $query);
|
89 | }
|
90 |
|
91 | .mdc-fab__label {
|
92 | @include label_($query: $query);
|
93 | }
|
94 |
|
95 | .mdc-fab__icon {
|
96 | @include icon_($query: $query);
|
97 | }
|
98 |
|
99 |
|
100 |
|
101 | .mdc-fab .mdc-fab__icon {
|
102 | @include icon-overrides_($query: $query);
|
103 | }
|
104 |
|
105 | .mdc-fab--exited {
|
106 | @include exited_($query: $query);
|
107 | }
|
108 |
|
109 | }
|
110 |
|
111 | @mixin without-ripple($query: feature-targeting.all()) {
|
112 | @include static-styles($query: $query);
|
113 |
|
114 | .mdc-fab {
|
115 | @include fab-theme.container-color(secondary, $query: $query);
|
116 | @include fab-theme.icon-size(24px, $query: $query);
|
117 | @include fab-theme.ink-color(on-secondary, $query: $query);
|
118 | @include fab-theme.shape-radius(fab-theme.$shape-radius, $query: $query);
|
119 | @include elevation-theme.elevation(6, $query: $query);
|
120 | }
|
121 | }
|
122 |
|
123 | @mixin ripple($query: feature-targeting.all()) {
|
124 | $feat-structure: feature-targeting.create-target($query, structure);
|
125 |
|
126 | @include ripple.common($query);
|
127 |
|
128 | .mdc-fab {
|
129 | @include ripple.surface(
|
130 | $query: $query,
|
131 | $ripple-target: fab-theme.$ripple-target
|
132 | );
|
133 | @include ripple.radius-bounded(
|
134 | $query: $query,
|
135 | $ripple-target: fab-theme.$ripple-target
|
136 | );
|
137 |
|
138 | @include fab-theme.ripple-color(
|
139 | on-secondary,
|
140 | $opacity-map: null,
|
141 | $query: $query
|
142 | );
|
143 |
|
144 | #{fab-theme.$ripple-target} {
|
145 | @include ripple.target-common($query: $query);
|
146 |
|
147 | @include feature-targeting.targets($feat-structure) {
|
148 | overflow: hidden;
|
149 | }
|
150 | }
|
151 | @include ripple-theme.behind-content(
|
152 | fab-theme.$ripple-target,
|
153 | $query: $query
|
154 | );
|
155 | }
|
156 | }
|
157 |
|
158 | $icon-enter-delay_: 90ms;
|
159 | $icon-enter-duration_: 180ms;
|
160 |
|
161 | @mixin base_($query: feature-targeting.all()) {
|
162 | @include elevation-theme.overlay-surface-position($query: $query);
|
163 | @include elevation-theme.overlay-dimensions(100%, $query: $query);
|
164 |
|
165 | $feat-animation: feature-targeting.create-target($query, animation);
|
166 | $feat-structure: feature-targeting.create-target($query, structure);
|
167 |
|
168 | @include feature-targeting.targets($feat-structure) {
|
169 | display: inline-flex;
|
170 | position: relative;
|
171 | align-items: center;
|
172 | justify-content: center;
|
173 | box-sizing: border-box;
|
174 | width: fab-theme.$height;
|
175 | height: fab-theme.$height;
|
176 | padding: 0;
|
177 | border: none;
|
178 | fill: currentColor;
|
179 | text-decoration: none;
|
180 | cursor: pointer;
|
181 | user-select: none;
|
182 | -moz-appearance: none;
|
183 | -webkit-appearance: none;
|
184 |
|
185 |
|
186 | overflow: visible;
|
187 | }
|
188 |
|
189 | @include feature-targeting.targets($feat-animation) {
|
190 | transition: box-shadow elevation-theme.$transition-duration
|
191 | elevation-theme.$transition-timing-function,
|
192 | opacity 15ms linear 30ms,
|
193 | animation-functions.enter(
|
194 | transform,
|
195 | $icon-enter-duration_ + $icon-enter-delay_
|
196 | );
|
197 | }
|
198 |
|
199 | &::-moz-focus-inner {
|
200 | @include feature-targeting.targets($feat-structure) {
|
201 | padding: 0;
|
202 | border: 0;
|
203 | }
|
204 | }
|
205 |
|
206 | &:hover {
|
207 | @include elevation-theme.elevation(8, $query: $query);
|
208 | }
|
209 |
|
210 | @include ripple-theme.focus() {
|
211 | @include elevation-theme.elevation(8, $query: $query);
|
212 | }
|
213 |
|
214 | .mdc-fab__focus-ring {
|
215 | @include feature-targeting.targets($feat-structure) {
|
216 | position: absolute;
|
217 | }
|
218 | }
|
219 |
|
220 | @include ripple-theme.focus() {
|
221 | .mdc-fab__focus-ring {
|
222 | @include focus-ring.focus-ring($query: $query);
|
223 | }
|
224 | }
|
225 |
|
226 |
|
227 | &:active,
|
228 | &:focus:active {
|
229 | @include elevation-theme.elevation(12, $query: $query);
|
230 | }
|
231 |
|
232 | &:active,
|
233 | &:focus {
|
234 |
|
235 |
|
236 |
|
237 |
|
238 | @include feature-targeting.targets($feat-structure) {
|
239 | outline: none;
|
240 | }
|
241 | }
|
242 |
|
243 | &:hover {
|
244 | @include feature-targeting.targets($feat-structure) {
|
245 | cursor: pointer;
|
246 | }
|
247 | }
|
248 |
|
249 |
|
250 |
|
251 |
|
252 |
|
253 |
|
254 | > svg {
|
255 | @include feature-targeting.targets($feat-structure) {
|
256 | width: 100%;
|
257 | }
|
258 | }
|
259 |
|
260 | }
|
261 |
|
262 | @mixin mini_($query: feature-targeting.all()) {
|
263 | $feat-structure: feature-targeting.create-target($query, structure);
|
264 |
|
265 | @include feature-targeting.targets($feat-structure) {
|
266 | width: fab-theme.$mini-height;
|
267 | height: fab-theme.$mini-height;
|
268 | }
|
269 | }
|
270 |
|
271 | @mixin extended_($query: feature-targeting.all()) {
|
272 | @include typography.typography(button, $query: $query);
|
273 | @include extended-fab-theme.extended-shape-radius(
|
274 | fab-theme.$shape-radius,
|
275 | $query: $query
|
276 | );
|
277 | $extended-icon-padding: custom-properties.create(
|
278 | fab-custom-properties.$extended-icon-padding,
|
279 | extended-fab-theme.$extended-icon-padding
|
280 | );
|
281 | $extended-label-padding: custom-properties.create(
|
282 | fab-custom-properties.$extended-label-padding,
|
283 | extended-fab-theme.$extended-label-padding
|
284 | );
|
285 | @include extended-fab-theme.extended-padding(
|
286 | extended-fab-theme.$extended-icon-padding,
|
287 | extended-fab-theme.$extended-label-padding,
|
288 | $query: $query
|
289 | );
|
290 |
|
291 | $feat-structure: feature-targeting.create-target($query, structure);
|
292 |
|
293 | @include feature-targeting.targets($feat-structure) {
|
294 | width: auto;
|
295 | max-width: 100%;
|
296 | height: extended-fab-theme.$extended-height;
|
297 |
|
298 |
|
299 | line-height: normal;
|
300 | }
|
301 | }
|
302 |
|
303 | @mixin icon_($query: feature-targeting.all()) {
|
304 | $feat-animation: feature-targeting.create-target($query, animation);
|
305 | $feat-structure: feature-targeting.create-target($query, structure);
|
306 |
|
307 | @include feature-targeting.targets($feat-animation) {
|
308 | transition: animation-functions.enter(
|
309 | transform,
|
310 | $icon-enter-duration_,
|
311 | $icon-enter-delay_
|
312 | );
|
313 | }
|
314 |
|
315 | @include feature-targeting.targets($feat-structure) {
|
316 | fill: currentColor;
|
317 | will-change: transform;
|
318 | }
|
319 | }
|
320 |
|
321 | @mixin label_($query: feature-targeting.all()) {
|
322 | $feat-structure: feature-targeting.create-target($query, structure);
|
323 |
|
324 | @include feature-targeting.targets($feat-structure) {
|
325 | justify-content: flex-start;
|
326 | text-overflow: ellipsis;
|
327 | white-space: nowrap;
|
328 | overflow-x: hidden;
|
329 | overflow-y: visible;
|
330 | }
|
331 | }
|
332 |
|
333 | @mixin icon-overrides_($query: feature-targeting.all()) {
|
334 | $feat-structure: feature-targeting.create-target($query, structure);
|
335 |
|
336 | @include feature-targeting.targets($feat-structure) {
|
337 | display: inline-flex;
|
338 | align-items: center;
|
339 | justify-content: center;
|
340 | }
|
341 | }
|
342 |
|
343 | @mixin exited_($query: feature-targeting.all()) {
|
344 | $feat-animation: feature-targeting.create-target($query, animation);
|
345 | $feat-structure: feature-targeting.create-target($query, structure);
|
346 |
|
347 | @include feature-targeting.targets($feat-structure) {
|
348 | transform: scale(0);
|
349 | opacity: 0;
|
350 | }
|
351 |
|
352 | @include feature-targeting.targets($feat-animation) {
|
353 | transition: opacity 15ms linear 150ms,
|
354 | animation-functions.exit-permanent(transform, 180ms);
|
355 | }
|
356 |
|
357 | .mdc-fab__icon {
|
358 | @include feature-targeting.targets($feat-structure) {
|
359 | transform: scale(0);
|
360 | }
|
361 |
|
362 | @include feature-targeting.targets($feat-animation) {
|
363 | transition: animation-functions.exit-permanent(transform, 135ms);
|
364 | }
|
365 | }
|
366 | }
|