mirror of
https://github.com/material-components/material-web.git
synced 2024-10-27 14:07:17 +03:00
d3fa2c2ba4
PiperOrigin-RevId: 486156646
130 lines
3.3 KiB
SCSS
130 lines
3.3 KiB
SCSS
//
|
|
// Copyright 2022 Google LLC
|
|
// SPDX-License-Identifier: Apache-2.0
|
|
//
|
|
|
|
// stylelint-disable selector-class-pattern --
|
|
// Selector '.md3-*' should only be used in this project.
|
|
|
|
@use 'sass:map';
|
|
@use '../../ripple/ripple-theme';
|
|
@use '../../sass/theme';
|
|
@use '../../tokens';
|
|
@use './shared';
|
|
|
|
$_custom-property-prefix: 'filled-tonal-icon-button';
|
|
|
|
@mixin theme($tokens) {
|
|
$tokens: theme.validate-theme(
|
|
tokens.md-comp-filled-tonal-icon-button-values(),
|
|
$tokens
|
|
);
|
|
$tokens: shared.flatten-disabled-colors($tokens, $variant: 'filled-tonal');
|
|
$tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
|
|
|
|
@include theme.emit-theme-vars($tokens);
|
|
}
|
|
|
|
@mixin styles() {
|
|
$tokens: tokens.md-comp-filled-tonal-icon-button-values();
|
|
$tokens: shared.flatten-disabled-colors($tokens, $variant: 'filled-tonal');
|
|
$tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
|
|
|
|
* {
|
|
@each $token, $value in $tokens {
|
|
--_#{$token}: #{$value};
|
|
}
|
|
}
|
|
|
|
.md3-icon-button {
|
|
background-color: var(--_container-color);
|
|
color: var(--_icon-color);
|
|
|
|
&:hover {
|
|
color: var(--_hover-icon-color);
|
|
}
|
|
|
|
&:focus {
|
|
color: var(--_focus-icon-color);
|
|
}
|
|
|
|
&:active {
|
|
color: var(--_pressed-icon-color);
|
|
}
|
|
|
|
&:disabled {
|
|
background-color: var(--_disabled-container-color);
|
|
color: var(--_disabled-icon-color);
|
|
}
|
|
|
|
@include ripple-theme.theme(
|
|
(
|
|
focus-state-layer-color: var(--_focus-state-layer-color),
|
|
focus-state-layer-opacity: var(--_focus-state-layer-opacity),
|
|
hover-state-layer-color: var(--_hover-state-layer-color),
|
|
hover-state-layer-opacity: var(--_hover-state-layer-opacity),
|
|
pressed-state-layer-color: var(--_pressed-state-layer-color),
|
|
pressed-state-layer-opacity: var(--_pressed-state-layer-opacity),
|
|
)
|
|
);
|
|
}
|
|
|
|
.md3-icon-button--toggle-filled-tonal {
|
|
&:not(:disabled) {
|
|
background-color: var(--_unselected-container-color);
|
|
color: var(--_toggle-unselected-icon-color);
|
|
|
|
&:hover {
|
|
color: var(--_toggle-unselected-hover-icon-color);
|
|
}
|
|
|
|
&:focus {
|
|
color: var(--_toggle-unselected-focus-icon-color);
|
|
}
|
|
|
|
&:active {
|
|
color: var(--_toggle-unselected-pressed-icon-color);
|
|
}
|
|
}
|
|
|
|
@include ripple-theme.theme(
|
|
(
|
|
focus-state-layer-color:
|
|
var(--_toggle-unselected-focus-state-layer-color),
|
|
hover-state-layer-color:
|
|
var(--_toggle-unselected-hover-state-layer-color),
|
|
pressed-state-layer-color:
|
|
var(--_toggle-unselected-pressed-state-layer-color),
|
|
)
|
|
);
|
|
}
|
|
|
|
.md3-icon-button--on {
|
|
&:not(:disabled) {
|
|
background-color: var(--_selected-container-color);
|
|
color: var(--_toggle-selected-icon-color);
|
|
|
|
&:hover {
|
|
color: var(--_toggle-selected-hover-icon-color);
|
|
}
|
|
|
|
&:focus {
|
|
color: var(--_toggle-selected-focus-icon-color);
|
|
}
|
|
|
|
&:active {
|
|
color: var(--_toggle-selected-pressed-icon-color);
|
|
}
|
|
}
|
|
|
|
@include ripple-theme.theme(
|
|
(
|
|
focus-state-layer-color: var(--_toggle-selected-focus-state-layer-color),
|
|
hover-state-layer-color: var(--_toggle-selected-hover-state-layer-color),
|
|
pressed-state-layer-color:
|
|
var(--_toggle-selected-pressed-state-layer-color),
|
|
)
|
|
);
|
|
}
|
|
}
|