/
icon-button.scss
36 lines (30 loc) · 1.06 KB
/
icon-button.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
@use '@material/icon-button/icon-button' as mdc-icon-button;
@use '../../material/core/style/private';
@use '../mdc-helpers/mdc-helpers';
@use 'button-base';
@include mdc-icon-button.without-ripple(
$query: mdc-helpers.$mat-base-styles-query
);
.mat-mdc-icon-button {
@include button-base.mat-private-button-interactive() {
border-radius: 50%;
}
// Border radius is inherited by ripple to know its shape. Set to 50% so the ripple is round.
border-radius: 50%;
// Prevent the button from shrinking since it's always supposed to be a circle.
flex-shrink: 0;
@include button-base.mat-private-button-disabled();
@include button-base.mat-private-button-touch-target(true);
@include private.private-animation-noop();
// MDC adds some styles to icon buttons that conflict with some of our focus indicator styles
// and don't actually do anything. This undoes those conflicting styles.
&.mat-unthemed,
&.mat-primary,
&.mat-accent,
&.mat-warn {
&:not(.mdc-ripple-upgraded):focus::before {
background: transparent;
opacity: 1;
}
}
}