/
fab.scss
58 lines (50 loc) · 1.96 KB
/
fab.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
@use '@material/fab' as mdc-fab;
@use '../../material/core/style/private';
@use '../mdc-helpers/mdc-helpers';
@use 'button-base';
@include mdc-fab.without-ripple($query: mdc-helpers.$mat-base-styles-query);
.mat-mdc-fab, .mat-mdc-mini-fab {
@include button-base.mat-private-button-interactive();
@include button-base.mat-private-button-disabled();
@include button-base.mat-private-button-touch-target(true);
@include private.private-animation-noop();
// Prevent the button from shrinking since it's always supposed to be a circle.
flex-shrink: 0;
// MDC adds some styles to fab and mini-fab that conflict with some of our focus indicator
// styles and don't actually do anything. This undoes those conflicting styles.
&:not(.mdc-ripple-upgraded):focus::before {
background: transparent;
opacity: 1;
}
// MDC expects the fab icon to contain this HTML content:
// ```html
// <span class="mdc-fab__icon material-icons">favorite</span>
// ```
// However, Angular Material expects a `mat-icon` instead. The following
// mixin will style the icons appropriately.
// stylelint-disable-next-line selector-class-pattern
.mat-icon, .material-icons {
@include mdc-fab.icon_();
}
}
.mat-mdc-extended-fab {
@include mdc-fab.extended_($query: mdc-helpers.$mat-base-styles-query);
// stylelint-disable-next-line selector-class-pattern
.mat-icon, .material-icons {
@include mdc-fab.extended-icon-padding(
mdc-fab.$extended-icon-padding,
mdc-fab.$extended-label-padding
);
}
// For Extended FAB with text label followed by icon.
// We are checking for the a button class because white this is a FAB it
// uses the same template as button.
// stylelint-disable-next-line selector-class-pattern
.mdc-button__label + .mat-icon, .mdc-button__label + .material-icons {
@include mdc-fab.extended-icon-padding(
mdc-fab.$extended-icon-padding,
mdc-fab.$extended-label-padding,
$is-icon-at-end: true
);
}
}