mirror of
https://github.com/material-components/material-web.git
synced 2024-09-19 17:47:46 +03:00
38b1b69a9c
BREAKING CHANGE: Rename `@material/web/iconbutton/lib` to `@material/web/iconbutton/internal`. Prefer not using internal files. PiperOrigin-RevId: 550579461
172 lines
3.9 KiB
SCSS
172 lines
3.9 KiB
SCSS
//
|
|
// Copyright 2022 Google LLC
|
|
// SPDX-License-Identifier: Apache-2.0
|
|
//
|
|
|
|
// go/keep-sorted start
|
|
@use 'sass:list';
|
|
@use 'sass:map';
|
|
// go/keep-sorted end
|
|
// go/keep-sorted start
|
|
@use '../../ripple/ripple';
|
|
@use '../../tokens';
|
|
// go/keep-sorted end
|
|
|
|
$_custom-property-prefix: 'filled-tonal-icon-button';
|
|
|
|
@mixin theme($tokens) {
|
|
$supported-tokens: list.join(
|
|
tokens.$md-comp-filled-tonal-icon-button-supported-tokens,
|
|
(
|
|
'container-shape-start-start',
|
|
'container-shape-start-end',
|
|
'container-shape-end-end',
|
|
'container-shape-end-start'
|
|
)
|
|
);
|
|
|
|
@each $token, $value in $tokens {
|
|
@if list.index($supported-tokens, $token) == null {
|
|
@error 'Token `#{$token}` is not a supported token.';
|
|
}
|
|
|
|
@if $value {
|
|
--md-filled-tonal-icon-button-#{$token}: #{$value};
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin styles() {
|
|
$tokens: tokens.md-comp-filled-tonal-icon-button-values();
|
|
|
|
:host {
|
|
@each $token, $value in $tokens {
|
|
--_#{$token}: var(--md-filled-tonal-icon-button-#{$token}, #{$value});
|
|
}
|
|
|
|
// Support logical shape properties
|
|
--_container-shape-start-start: var(
|
|
--md-filled-tonal-icon-button-container-shape-start-start,
|
|
var(--_container-shape)
|
|
);
|
|
--_container-shape-start-end: var(
|
|
--md-filled-tonal-icon-button-container-shape-start-end,
|
|
var(--_container-shape)
|
|
);
|
|
--_container-shape-end-end: var(
|
|
--md-filled-tonal-icon-button-container-shape-end-end,
|
|
var(--_container-shape)
|
|
);
|
|
--_container-shape-end-start: var(
|
|
--md-filled-tonal-icon-button-container-shape-end-start,
|
|
var(--_container-shape)
|
|
);
|
|
}
|
|
|
|
.icon-button {
|
|
color: var(--_icon-color);
|
|
|
|
&:hover {
|
|
color: var(--_hover-icon-color);
|
|
}
|
|
|
|
&:focus {
|
|
color: var(--_focus-icon-color);
|
|
}
|
|
|
|
&:active {
|
|
color: var(--_pressed-icon-color);
|
|
}
|
|
|
|
&:disabled {
|
|
color: var(--_disabled-icon-color);
|
|
}
|
|
|
|
@include ripple.theme(
|
|
(
|
|
hover-color: var(--_hover-state-layer-color),
|
|
hover-opacity: var(--_hover-state-layer-opacity),
|
|
pressed-color: var(--_pressed-state-layer-color),
|
|
pressed-opacity: var(--_pressed-state-layer-opacity),
|
|
)
|
|
);
|
|
}
|
|
|
|
.icon-button::before {
|
|
// Background color, separate node for opacity changes
|
|
background-color: var(--_container-color);
|
|
border-radius: inherit;
|
|
content: '';
|
|
inset: 0;
|
|
position: absolute;
|
|
z-index: -1; // place behind content
|
|
}
|
|
|
|
.icon-button:disabled::before {
|
|
background-color: var(--_disabled-container-color);
|
|
opacity: var(--_disabled-container-opacity);
|
|
}
|
|
|
|
.icon-button:disabled .icon {
|
|
opacity: var(--_disabled-icon-opacity);
|
|
}
|
|
|
|
.toggle-filled-tonal {
|
|
&:not(:disabled) {
|
|
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(
|
|
(
|
|
hover-color: var(--_toggle-unselected-hover-state-layer-color),
|
|
pressed-color: var(--_toggle-unselected-pressed-state-layer-color),
|
|
)
|
|
);
|
|
}
|
|
|
|
.toggle-filled-tonal:not(:disabled)::before {
|
|
background-color: var(--_unselected-container-color);
|
|
}
|
|
|
|
.selected {
|
|
&:not(:disabled) {
|
|
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(
|
|
(
|
|
hover-color: var(--_toggle-selected-hover-state-layer-color),
|
|
pressed-color: var(--_toggle-selected-pressed-state-layer-color),
|
|
)
|
|
);
|
|
}
|
|
|
|
.selected:not(:disabled)::before {
|
|
background-color: var(--_selected-container-color);
|
|
}
|
|
}
|