96 lines
3.2 KiB
SCSS
96 lines
3.2 KiB
SCSS
|
@use '../core/tokens/m2/mdc/icon-button' as tokens-mdc-icon-button;
|
||
|
|
@use '../core/tokens/m2/mat/icon-button' as tokens-mat-icon-button;
|
||
|
|
|
||
|
|
@use './button-base';
|
||
|
|
@use '../core/style/private';
|
||
|
|
@use '../core/style/vendor-prefixes';
|
||
|
|
@use '../core/tokens/token-utils';
|
||
|
|
|
||
|
|
|
||
|
|
.mat-mdc-icon-button {
|
||
|
|
@include vendor-prefixes.user-select(none);
|
||
|
|
display: inline-block;
|
||
|
|
position: relative;
|
||
|
|
box-sizing: border-box;
|
||
|
|
border: none;
|
||
|
|
outline: none;
|
||
|
|
background-color: transparent;
|
||
|
|
fill: currentColor;
|
||
|
|
color: inherit;
|
||
|
|
text-decoration: none;
|
||
|
|
cursor: pointer;
|
||
|
|
z-index: 0;
|
||
|
|
overflow: visible;
|
||
|
|
|
||
|
|
// 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;
|
||
|
|
|
||
|
|
// Ensure the icons are centered.
|
||
|
|
text-align: center;
|
||
|
|
|
||
|
|
@include token-utils.use-tokens(
|
||
|
|
tokens-mdc-icon-button.$prefix, tokens-mdc-icon-button.get-token-slots()) {
|
||
|
|
$button-size: token-utils.get-token-variable(state-layer-size, $fallback: 48px);
|
||
|
|
$icon-size: token-utils.get-token-variable(icon-size, $fallback: 24px);
|
||
|
|
|
||
|
|
// We emit these tokens ourselves here so we can provide a default value.
|
||
|
|
// This avoids a lot internal breakages in apps that didn't include the icon button theme.
|
||
|
|
width: $button-size;
|
||
|
|
height: $button-size;
|
||
|
|
|
||
|
|
// Note: this is wrapped in an interpolation, because of an internal lint rule that bans
|
||
|
|
// interpolations in `calc`, even though this is the only way to achieve what we're looking for.
|
||
|
|
padding: #{calc(#{calc(#{$button-size} - #{$icon-size})} / 2)};
|
||
|
|
|
||
|
|
// Icon size used to be placed on the host element. Now, in `theme-styles` it is placed on
|
||
|
|
// the unused `.mdc-button__icon` class. Explicitly set the font-size here.
|
||
|
|
@include token-utils.create-token-slot(font-size, icon-size);
|
||
|
|
@include token-utils.create-token-slot(color, icon-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
@include button-base.mat-private-button-interactive();
|
||
|
|
@include button-base.mat-private-button-ripple(tokens-mat-icon-button.$prefix,
|
||
|
|
tokens-mat-icon-button.get-token-slots());
|
||
|
|
@include button-base.mat-private-button-touch-target(true, tokens-mat-icon-button.$prefix,
|
||
|
|
tokens-mat-icon-button.get-token-slots());
|
||
|
|
@include private.private-animation-noop();
|
||
|
|
|
||
|
|
@include token-utils.use-tokens(
|
||
|
|
tokens-mdc-icon-button.$prefix, tokens-mdc-icon-button.get-token-slots()) {
|
||
|
|
@include button-base.mat-private-button-disabled {
|
||
|
|
@include token-utils.create-token-slot(color, disabled-icon-color);
|
||
|
|
};
|
||
|
|
|
||
|
|
img,
|
||
|
|
svg {
|
||
|
|
@include token-utils.create-token-slot(width, icon-size);
|
||
|
|
@include token-utils.create-token-slot(height, icon-size);
|
||
|
|
vertical-align: baseline;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-mdc-button-persistent-ripple {
|
||
|
|
border-radius: 50%;
|
||
|
|
}
|
||
|
|
|
||
|
|
// MDC used to include this and it seems like a lot of apps depend on it.
|
||
|
|
&[hidden] {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 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;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|