mirror of
https://github.com/material-components/material-web.git
synced 2026-03-09 00:09:23 +08:00
chore(iconbutton): merge static/theme-styles
PiperOrigin-RevId: 486156646
This commit is contained in:
Elizabeth Mitchell
Copybara-Service
parent
443b24a009
commit
d3fa2c2ba4
@ -3,5 +3,4 @@
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
//
|
||||
|
||||
@forward './lib/filled-icon-button-theme' show
|
||||
theme;
|
||||
@forward './lib/filled-icon-button' show theme;
|
||||
|
||||
@ -3,5 +3,4 @@
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
//
|
||||
|
||||
@forward './lib/filled-tonal-icon-button-theme' show
|
||||
theme;
|
||||
@forward './lib/filled-tonal-icon-button' show theme;
|
||||
|
||||
@ -3,5 +3,4 @@
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
//
|
||||
|
||||
@forward './lib/outlined-icon-button-theme' show
|
||||
theme;
|
||||
@forward './lib/outlined-icon-button' show theme;
|
||||
|
||||
@ -3,5 +3,4 @@
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
//
|
||||
|
||||
@forward './lib/standard-icon-button-theme' show
|
||||
theme;
|
||||
@forward './lib/standard-icon-button' show theme;
|
||||
|
||||
@ -10,8 +10,8 @@ import {customElement} from 'lit/decorators.js';
|
||||
import {ClassInfo} from 'lit/directives/class-map.js';
|
||||
|
||||
import {styles} from './lib/filled-styles.css.js';
|
||||
import {styles as sharedStyles} from './lib/icon-button-styles.css.js';
|
||||
import {IconButtonToggle} from './lib/icon-button-toggle.js';
|
||||
import {styles as sharedStyles} from './lib/shared-styles.css.js';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
|
||||
@ -11,7 +11,7 @@ import {ClassInfo} from 'lit/directives/class-map.js';
|
||||
|
||||
import {styles} from './lib/filled-styles.css.js';
|
||||
import {IconButton} from './lib/icon-button.js';
|
||||
import {styles as sharedStyles} from './lib/icon-button-styles.css.js';
|
||||
import {styles as sharedStyles} from './lib/shared-styles.css.js';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
|
||||
@ -11,7 +11,7 @@ import {ClassInfo} from 'lit/directives/class-map.js';
|
||||
|
||||
import {styles} from './lib/filled-styles.css.js';
|
||||
import {LinkIconButton} from './lib/link-icon-button.js';
|
||||
import {styles as sharedStyles} from './lib/icon-button-styles.css.js';
|
||||
import {styles as sharedStyles} from './lib/shared-styles.css.js';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
|
||||
@ -10,8 +10,8 @@ import {customElement} from 'lit/decorators.js';
|
||||
import {ClassInfo} from 'lit/directives/class-map.js';
|
||||
|
||||
import {styles} from './lib/filled-tonal-styles.css.js';
|
||||
import {styles as sharedStyles} from './lib/icon-button-styles.css.js';
|
||||
import {IconButtonToggle} from './lib/icon-button-toggle.js';
|
||||
import {styles as sharedStyles} from './lib/shared-styles.css.js';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
|
||||
@ -11,7 +11,7 @@ import {ClassInfo} from 'lit/directives/class-map.js';
|
||||
|
||||
import {styles} from './lib/filled-tonal-styles.css.js';
|
||||
import {IconButton} from './lib/icon-button.js';
|
||||
import {styles as sharedStyles} from './lib/icon-button-styles.css.js';
|
||||
import {styles as sharedStyles} from './lib/shared-styles.css.js';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
|
||||
@ -10,8 +10,8 @@ import {customElement} from 'lit/decorators.js';
|
||||
import {ClassInfo} from 'lit/directives/class-map.js';
|
||||
|
||||
import {styles} from './lib/filled-tonal-styles.css.js';
|
||||
import {styles as sharedStyles} from './lib/icon-button-styles.css.js';
|
||||
import {LinkIconButton} from './lib/link-icon-button.js';
|
||||
import {styles as sharedStyles} from './lib/shared-styles.css.js';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
|
||||
@ -1,136 +0,0 @@
|
||||
//
|
||||
// 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/color';
|
||||
@use '../../sass/resolvers';
|
||||
@use '../../sass/theme';
|
||||
@use '../../tokens';
|
||||
|
||||
@use './icon-button-theme';
|
||||
|
||||
$_custom-property-prefix: 'filled-icon-button';
|
||||
|
||||
$light-theme: tokens.md-comp-filled-icon-button-values();
|
||||
$dark-theme: tokens.md-comp-filled-icon-button-values(
|
||||
(
|
||||
md-sys-color: tokens.md-sys-color-values-dark-dynamic(),
|
||||
),
|
||||
$exclude-hardcoded-values: true
|
||||
);
|
||||
|
||||
@mixin theme($theme) {
|
||||
$theme: theme.validate-theme($light-theme, $theme);
|
||||
$theme: icon-button-theme.flatten-disabled-colors($theme, $variant: 'filled');
|
||||
$theme: theme.create-theme-vars($theme, $_custom-property-prefix);
|
||||
|
||||
@include theme.emit-theme-vars($theme);
|
||||
}
|
||||
|
||||
@mixin theme-styles($theme, $resolvers: resolvers.$material) {
|
||||
$theme: theme.validate-theme-styles($light-theme, $theme);
|
||||
$theme: icon-button-theme.flatten-disabled-colors($theme, $variant: 'filled');
|
||||
$theme: theme.create-theme-vars($theme, $_custom-property-prefix);
|
||||
|
||||
& {
|
||||
@each $token, $value in $theme {
|
||||
--_#{$token}: #{$value};
|
||||
}
|
||||
}
|
||||
|
||||
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 {
|
||||
&: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),
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -3,6 +3,127 @@
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
//
|
||||
|
||||
@mixin static-styles() {
|
||||
// Intentionally blank for future-proofing.
|
||||
// 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-icon-button';
|
||||
|
||||
@mixin theme($tokens) {
|
||||
$tokens: theme.validate-theme(
|
||||
tokens.md-comp-filled-icon-button-values(),
|
||||
$tokens
|
||||
);
|
||||
$tokens: shared.flatten-disabled-colors($tokens, $variant: 'filled');
|
||||
$tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
|
||||
|
||||
@include theme.emit-theme-vars($tokens);
|
||||
}
|
||||
|
||||
@mixin styles() {
|
||||
$tokens: tokens.md-comp-filled-icon-button-values();
|
||||
$tokens: shared.flatten-disabled-colors($tokens, $variant: 'filled');
|
||||
$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 {
|
||||
&: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),
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,142 +0,0 @@
|
||||
//
|
||||
// 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/color';
|
||||
@use '../../sass/resolvers';
|
||||
@use '../../sass/theme';
|
||||
@use '../../tokens';
|
||||
|
||||
@use './icon-button-theme';
|
||||
|
||||
$_custom-property-prefix: 'filled-tonal-icon-button';
|
||||
|
||||
$light-theme: tokens.md-comp-filled-tonal-icon-button-values();
|
||||
$dark-theme: tokens.md-comp-filled-tonal-icon-button-values(
|
||||
(
|
||||
md-sys-color: tokens.md-sys-color-values-dark-dynamic(),
|
||||
),
|
||||
$exclude-hardcoded-values: true
|
||||
);
|
||||
|
||||
@mixin theme($theme) {
|
||||
$theme: theme.validate-theme($light-theme, $theme);
|
||||
$theme: icon-button-theme.flatten-disabled-colors(
|
||||
$theme,
|
||||
$variant: 'filled-tonal'
|
||||
);
|
||||
$theme: theme.create-theme-vars($theme, $_custom-property-prefix);
|
||||
|
||||
@include theme.emit-theme-vars($theme);
|
||||
}
|
||||
|
||||
@mixin theme-styles($theme, $resolvers: resolvers.$material) {
|
||||
$theme: theme.validate-theme-styles($light-theme, $theme);
|
||||
$theme: icon-button-theme.flatten-disabled-colors(
|
||||
$theme,
|
||||
$variant: 'filled-tonal'
|
||||
);
|
||||
$theme: theme.create-theme-vars($theme, $_custom-property-prefix);
|
||||
|
||||
& {
|
||||
@each $token, $value in $theme {
|
||||
--_#{$token}: #{$value};
|
||||
}
|
||||
}
|
||||
|
||||
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),
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -3,6 +3,127 @@
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
//
|
||||
|
||||
@mixin static-styles() {
|
||||
// Intentionally blank for future-proofing.
|
||||
// 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),
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,86 +0,0 @@
|
||||
//
|
||||
// Copyright 2022 Google LLC
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
//
|
||||
|
||||
// This file contains common static styles that are shared across icon button
|
||||
// variants.
|
||||
|
||||
// stylelint-disable selector-class-pattern --
|
||||
// Selector '.md3-*' should only be used in this project.
|
||||
|
||||
@use '../../focus/focus-ring';
|
||||
@use '../../sass/touch-target';
|
||||
|
||||
@mixin static-styles() {
|
||||
:host {
|
||||
display: inline-flex;
|
||||
outline: none;
|
||||
|
||||
@include focus-ring.theme(
|
||||
(
|
||||
container-outer-padding-vertical: 0px,
|
||||
container-outer-padding-horizontal: 0px,
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
:host([disabled]) {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.md3-icon-button {
|
||||
align-items: center;
|
||||
border: none;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
fill: currentColor;
|
||||
justify-content: center;
|
||||
outline: none;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
user-select: none;
|
||||
z-index: 0;
|
||||
|
||||
i,
|
||||
svg,
|
||||
img,
|
||||
::slotted(*) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.md3-icon-button--flip-icon .md3-icon-button__icon {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
.md3-icon-button__icon {
|
||||
display: inline-flex;
|
||||
|
||||
&.md3-icon-button__icon--on {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.md3-icon-button--on {
|
||||
.md3-icon-button__icon {
|
||||
display: none;
|
||||
|
||||
&.md3-icon-button__icon--on {
|
||||
display: inline-flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.md3-icon-button__link {
|
||||
height: 100%;
|
||||
outline: none;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.md3-icon-button__touch {
|
||||
@include touch-target.touch-target;
|
||||
}
|
||||
}
|
||||
@ -1,156 +0,0 @@
|
||||
//
|
||||
// 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/resolvers';
|
||||
@use '../../sass/color';
|
||||
@use '../../sass/theme';
|
||||
@use '../../tokens';
|
||||
@use './icon-button-theme';
|
||||
|
||||
$_custom-property-prefix: 'outlined-icon-button';
|
||||
|
||||
// TODO(b/233323674): Remove when missing tokens have been added.
|
||||
$_missing-light-theme-tokens: (
|
||||
disabled-selected-container-color:
|
||||
map.get(tokens.md-sys-color-values-light-dynamic(), on-surface),
|
||||
disabled-selected-container-opacity: 0.12,
|
||||
);
|
||||
// TODO(b/233323674): Remove when missing tokens have been added.
|
||||
$_missing-dark-theme-tokens: (
|
||||
disabled-selected-container-color:
|
||||
map.get(tokens.md-sys-color-values-dark-dynamic(), on-surface),
|
||||
disabled-selected-container-opacity: 0.12,
|
||||
);
|
||||
$light-theme: map.merge(
|
||||
tokens.md-comp-outlined-icon-button-values(),
|
||||
$_missing-light-theme-tokens
|
||||
);
|
||||
$dark-theme: map.merge(
|
||||
tokens.md-comp-outlined-icon-button-values(
|
||||
(
|
||||
md-sys-color: tokens.md-sys-color-values-dark-dynamic(),
|
||||
),
|
||||
$exclude-hardcoded-values: true
|
||||
),
|
||||
$_missing-dark-theme-tokens
|
||||
);
|
||||
|
||||
@mixin theme($theme) {
|
||||
$theme: theme.validate-theme($light-theme, $theme);
|
||||
$theme: icon-button-theme.flatten-disabled-colors(
|
||||
$theme,
|
||||
$variant: 'outlined'
|
||||
);
|
||||
$theme: theme.create-theme-vars($theme, $_custom-property-prefix);
|
||||
|
||||
@include theme.emit-theme-vars($theme);
|
||||
}
|
||||
|
||||
@mixin theme-styles($theme, $resolvers: resolvers.$material) {
|
||||
$theme: theme.validate-theme-styles($light-theme, $theme);
|
||||
$theme: icon-button-theme.flatten-disabled-colors(
|
||||
$theme,
|
||||
$variant: 'outlined'
|
||||
);
|
||||
$theme: theme.create-theme-vars($theme, $_custom-property-prefix);
|
||||
|
||||
& {
|
||||
@each $token, $value in $theme {
|
||||
--_#{$token}: #{$value};
|
||||
}
|
||||
}
|
||||
|
||||
color: var(--_unselected-icon-color);
|
||||
|
||||
@include ripple-theme.theme(
|
||||
(
|
||||
focus-state-layer-color: var(--_unselected-focus-state-layer-color),
|
||||
focus-state-layer-opacity: var(--_focus-state-layer-opacity),
|
||||
hover-state-layer-color: var(--_unselected-hover-state-layer-color),
|
||||
hover-state-layer-opacity: var(--_over-state-layer-opacity),
|
||||
pressed-state-layer-color: var(--_unselected-pressed-state-layer-color),
|
||||
pressed-state-layer-opacity: var(--_pressed-state-layer-opacity),
|
||||
)
|
||||
);
|
||||
|
||||
&::before {
|
||||
border-color: var(--_unselected-outline-color);
|
||||
border-width: var(--_unselected-outline-width);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--_unselected-hover-icon-color);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
color: var(--_unselected-focus-icon-color);
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: var(--_unselected-pressed-icon-color);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
color: var(--_disabled-icon-color);
|
||||
|
||||
&::before {
|
||||
border-color: var(--_disabled-outline-color);
|
||||
}
|
||||
}
|
||||
|
||||
// Selected icon button toggle.
|
||||
&.md3-icon-button--on {
|
||||
&:not(:disabled) {
|
||||
background-color: var(--_selected-container-color);
|
||||
color: var(--_selected-icon-color);
|
||||
|
||||
&:hover {
|
||||
color: var(--_selected-hover-icon-color);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
color: var(--_selected-focus-icon-color);
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: var(--_selected-pressed-icon-color);
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: var(--_disabled-selected-container-color);
|
||||
}
|
||||
|
||||
@include ripple-theme.theme(
|
||||
(
|
||||
focus-state-layer-color: var(--_selected-focus-state-layer-color),
|
||||
focus-state-layer-opacity: var(--_focus-state-layer-opacity),
|
||||
hover-state-layer-color: var(--_selected-hover-state-layer-color),
|
||||
hover-state-layer-opacity: var(--_hover-state-layer-opacity),
|
||||
pressed-state-layer-color: var(--_selected-pressed-state-layer-color),
|
||||
pressed-state-layer-opacity: var(--_pressed-state-layer-opacity),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
// Selected button in HCM has an outline.
|
||||
&.md3-icon-button--on {
|
||||
&::before {
|
||||
border-color: var(--_unselected-outline-color);
|
||||
border-width: var(--_unselected-outline-width);
|
||||
}
|
||||
|
||||
&:disabled::before {
|
||||
border-color: var(--_disabled-outline-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -6,9 +6,92 @@
|
||||
// stylelint-disable selector-class-pattern --
|
||||
// Selector '.md3-*' should only be used in this project.
|
||||
|
||||
@mixin static-styles() {
|
||||
@use 'sass:map';
|
||||
@use '../../ripple/ripple-theme';
|
||||
@use '../../sass/resolvers';
|
||||
@use '../../sass/color';
|
||||
@use '../../sass/theme';
|
||||
@use '../../tokens';
|
||||
@use './shared';
|
||||
|
||||
$_custom-property-prefix: 'outlined-icon-button';
|
||||
|
||||
@mixin theme($tokens) {
|
||||
// TODO(b/233323674): Remove when missing tokens have been added.
|
||||
$reference: map.merge(
|
||||
tokens.md-comp-outlined-icon-button-values(),
|
||||
(
|
||||
disabled-selected-container-color:
|
||||
map.get(tokens.md-sys-color-values-light-dynamic(), on-surface),
|
||||
disabled-selected-container-opacity: 0.12,
|
||||
)
|
||||
);
|
||||
$tokens: theme.validate-theme($reference, $tokens);
|
||||
$tokens: shared.flatten-disabled-colors($tokens, $variant: 'outlined');
|
||||
$tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
|
||||
|
||||
@include theme.emit-theme-vars($tokens);
|
||||
}
|
||||
|
||||
@mixin styles() {
|
||||
$tokens: tokens.md-comp-outlined-icon-button-values();
|
||||
// TODO(b/233323674): Remove when missing tokens have been added.
|
||||
$tokens: map.merge(
|
||||
$tokens,
|
||||
(
|
||||
disabled-selected-container-color:
|
||||
map.get(tokens.md-sys-color-values-light-dynamic(), on-surface),
|
||||
disabled-selected-container-opacity: 0.12,
|
||||
)
|
||||
);
|
||||
$tokens: shared.flatten-disabled-colors($tokens, $variant: 'outlined');
|
||||
$tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
|
||||
|
||||
* {
|
||||
@each $token, $value in $tokens {
|
||||
--_#{$token}: #{$value};
|
||||
}
|
||||
}
|
||||
|
||||
.md3-icon-button--outlined {
|
||||
background-color: transparent;
|
||||
color: var(--_unselected-icon-color);
|
||||
|
||||
@include ripple-theme.theme(
|
||||
(
|
||||
focus-state-layer-color: var(--_unselected-focus-state-layer-color),
|
||||
focus-state-layer-opacity: var(--_focus-state-layer-opacity),
|
||||
hover-state-layer-color: var(--_unselected-hover-state-layer-color),
|
||||
hover-state-layer-opacity: var(--_hover-state-layer-opacity),
|
||||
pressed-state-layer-color: var(--_unselected-pressed-state-layer-color),
|
||||
pressed-state-layer-opacity: var(--_pressed-state-layer-opacity),
|
||||
)
|
||||
);
|
||||
|
||||
&::before {
|
||||
border-color: var(--_unselected-outline-color);
|
||||
border-width: var(--_unselected-outline-width);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--_unselected-hover-icon-color);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
color: var(--_unselected-focus-icon-color);
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: var(--_unselected-pressed-icon-color);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
color: var(--_disabled-icon-color);
|
||||
|
||||
&::before {
|
||||
border-color: var(--_disabled-outline-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.md3-icon-button--outlined::before {
|
||||
@ -27,4 +110,53 @@
|
||||
.md3-icon-button--outlined.md3-icon-button--on::before {
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
// Selected icon button toggle.
|
||||
.md3-icon-button--on {
|
||||
&:not(:disabled) {
|
||||
background-color: var(--_selected-container-color);
|
||||
color: var(--_selected-icon-color);
|
||||
|
||||
&:hover {
|
||||
color: var(--_selected-hover-icon-color);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
color: var(--_selected-focus-icon-color);
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: var(--_selected-pressed-icon-color);
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: var(--_disabled-selected-container-color);
|
||||
}
|
||||
|
||||
@include ripple-theme.theme(
|
||||
(
|
||||
focus-state-layer-color: var(--_selected-focus-state-layer-color),
|
||||
focus-state-layer-opacity: var(--_focus-state-layer-opacity),
|
||||
hover-state-layer-color: var(--_selected-hover-state-layer-color),
|
||||
hover-state-layer-opacity: var(--_hover-state-layer-opacity),
|
||||
pressed-state-layer-color: var(--_selected-pressed-state-layer-color),
|
||||
pressed-state-layer-opacity: var(--_pressed-state-layer-opacity),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
// Selected button in HCM has an outline.
|
||||
.md3-icon-button--on {
|
||||
&::before {
|
||||
border-color: var(--_unselected-outline-color);
|
||||
border-width: var(--_unselected-outline-width);
|
||||
}
|
||||
|
||||
&:disabled::before {
|
||||
border-color: var(--_disabled-outline-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,33 +3,105 @@
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
//
|
||||
|
||||
// This file contains common theme mixins that are shared across icon button
|
||||
// This file contains common static styles that are shared across icon button
|
||||
// variants.
|
||||
|
||||
@use 'sass:map';
|
||||
// stylelint-disable selector-class-pattern --
|
||||
// Selector '.md3-*' should only be used in this project.
|
||||
|
||||
@use '../../ripple/ripple-theme';
|
||||
@use 'sass:map';
|
||||
@use '../../focus/focus-ring';
|
||||
@use '../../sass/color';
|
||||
@use '../../sass/theme';
|
||||
@use '../../sass/touch-target';
|
||||
@use '../../tokens';
|
||||
|
||||
@mixin theme-styles() {
|
||||
$touch-target-height: 48px;
|
||||
@mixin styles() {
|
||||
:host {
|
||||
display: inline-flex;
|
||||
outline: none;
|
||||
|
||||
height: var(--_container-size);
|
||||
width: var(--_container-size);
|
||||
font-size: var(--_icon-size);
|
||||
margin: max(
|
||||
0px,
|
||||
calc((#{$touch-target-height} - var(--_container-size)) / 2)
|
||||
);
|
||||
border-radius: var(--_container-shape);
|
||||
@include focus-ring.theme(
|
||||
(
|
||||
container-outer-padding-vertical: 0px,
|
||||
container-outer-padding-horizontal: 0px,
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
i,
|
||||
svg,
|
||||
img {
|
||||
height: var(--_icon-size);
|
||||
width: var(--_icon-size);
|
||||
:host([disabled]) {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.md3-icon-button {
|
||||
$touch-target-height: 48px;
|
||||
|
||||
align-items: center;
|
||||
border: none;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
fill: currentColor;
|
||||
justify-content: center;
|
||||
outline: none;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
user-select: none;
|
||||
z-index: 0;
|
||||
height: var(--_container-size);
|
||||
width: var(--_container-size);
|
||||
font-size: var(--_icon-size);
|
||||
margin: max(
|
||||
0px,
|
||||
calc((#{$touch-target-height} - var(--_container-size)) / 2)
|
||||
);
|
||||
border-radius: var(--_container-shape);
|
||||
|
||||
i,
|
||||
svg,
|
||||
img {
|
||||
height: var(--_icon-size);
|
||||
width: var(--_icon-size);
|
||||
}
|
||||
|
||||
i,
|
||||
svg,
|
||||
img,
|
||||
::slotted(*) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.md3-icon-button--flip-icon .md3-icon-button__icon {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
.md3-icon-button__icon {
|
||||
display: inline-flex;
|
||||
|
||||
&.md3-icon-button__icon--on {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.md3-icon-button--on {
|
||||
.md3-icon-button__icon {
|
||||
display: none;
|
||||
|
||||
&.md3-icon-button__icon--on {
|
||||
display: inline-flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.md3-icon-button__link {
|
||||
height: 100%;
|
||||
outline: none;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.md3-icon-button__touch {
|
||||
@include touch-target.touch-target;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,115 +0,0 @@
|
||||
//
|
||||
// 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 './icon-button-theme';
|
||||
|
||||
$_custom-property-prefix: 'icon-button';
|
||||
|
||||
$light-theme: tokens.md-comp-icon-button-values();
|
||||
$dark-theme: tokens.md-comp-icon-button-values(
|
||||
(
|
||||
md-sys-color: tokens.md-sys-color-values-dark-dynamic(),
|
||||
),
|
||||
$exclude-hardcoded-values: true
|
||||
);
|
||||
|
||||
@mixin theme($theme) {
|
||||
$theme: theme.validate-theme($light-theme, $theme);
|
||||
$theme: icon-button-theme.flatten-disabled-colors($theme);
|
||||
$theme: theme.create-theme-vars($theme, $_custom-property-prefix);
|
||||
|
||||
@include theme.emit-theme-vars($theme);
|
||||
}
|
||||
|
||||
@mixin theme-styles($theme) {
|
||||
$theme: theme.validate-theme-styles(
|
||||
$light-theme,
|
||||
$theme,
|
||||
$require-all: false
|
||||
);
|
||||
$theme: icon-button-theme.flatten-disabled-colors($theme);
|
||||
$theme: theme.create-theme-vars($theme, $_custom-property-prefix);
|
||||
|
||||
& {
|
||||
@each $token, $value in $theme {
|
||||
--_#{$token}: #{$value};
|
||||
}
|
||||
}
|
||||
|
||||
$touch-target-height: 48px;
|
||||
color: var(--_unselected-icon-color);
|
||||
height: var(--_state-layer-size);
|
||||
width: var(--_state-layer-size);
|
||||
margin: max(
|
||||
0px,
|
||||
calc((#{$touch-target-height} - #{var(--_state-layer-size)}) / 2)
|
||||
);
|
||||
@include ripple-theme.theme(
|
||||
(
|
||||
focus-state-layer-color: var(--_unselected-focus-state-layer-color),
|
||||
focus-state-layer-opacity: var(--_unselected-focus-state-layer-opacity),
|
||||
hover-state-layer-color: var(--_unselected-hover-state-layer-color),
|
||||
hover-state-layer-opacity: var(--_unselected-hover-state-layer-opacity),
|
||||
pressed-state-layer-color: var(--_unselected-pressed-state-layer-color),
|
||||
pressed-state-layer-opacity:
|
||||
var(--_unselected-pressed-state-layer-opacity),
|
||||
)
|
||||
);
|
||||
|
||||
&:hover {
|
||||
color: var(--_unselected-hover-icon-color);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
color: var(--_unselected-focus-icon-color);
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: var(--_unselected-pressed-icon-color);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
color: var(--_disabled-icon-color);
|
||||
}
|
||||
|
||||
&.md3-icon-button--on {
|
||||
&:not(:disabled) {
|
||||
color: var(--_selected-icon-color);
|
||||
|
||||
&:hover {
|
||||
color: var(--_selected-hover-icon-color);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
color: var(--_selected-focus-icon-color);
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: var(--_selected-pressed-icon-color);
|
||||
}
|
||||
}
|
||||
|
||||
@include ripple-theme.theme(
|
||||
(
|
||||
focus-state-layer-color: var(--_selected-focus-state-layer-color),
|
||||
focus-state-layer-opacity: var(--_selected-focus-state-layer-opacity),
|
||||
hover-state-layer-color: var(--_selected-hover-state-layer-color),
|
||||
hover-state-layer-opacity: var(--_selected-hover-state-layer-opacity),
|
||||
pressed-state-layer-color: var(--_selected-pressed-state-layer-color),
|
||||
pressed-state-layer-opacity:
|
||||
var(--_selected-pressed-state-layer-opacity),
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,13 +1,105 @@
|
||||
//
|
||||
// Copyright 2021 Google LLC
|
||||
// Copyright 2022 Google LLC
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
//
|
||||
|
||||
// stylelint-disable selector-class-pattern --
|
||||
// Selector '.md3-*' should only be used in this project.
|
||||
|
||||
@mixin static-styles() {
|
||||
@use 'sass:map';
|
||||
@use '../../ripple/ripple-theme';
|
||||
@use '../../sass/theme';
|
||||
@use '../../tokens';
|
||||
@use './shared';
|
||||
|
||||
$_custom-property-prefix: 'icon-button';
|
||||
|
||||
@mixin theme($tokens) {
|
||||
$tokens: theme.validate-theme(tokens.md-comp-icon-button-values(), $tokens);
|
||||
$tokens: shared.flatten-disabled-colors($tokens);
|
||||
$tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
|
||||
|
||||
@include theme.emit-theme-vars($tokens);
|
||||
}
|
||||
|
||||
@mixin styles() {
|
||||
$tokens: tokens.md-comp-icon-button-values();
|
||||
$tokens: shared.flatten-disabled-colors($tokens);
|
||||
$tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
|
||||
|
||||
* {
|
||||
@each $token, $value in $tokens {
|
||||
--_#{$token}: #{$value};
|
||||
}
|
||||
}
|
||||
|
||||
.md3-icon-button--standard {
|
||||
$touch-target-height: 48px;
|
||||
background-color: transparent;
|
||||
color: var(--_unselected-icon-color);
|
||||
height: var(--_state-layer-size);
|
||||
width: var(--_state-layer-size);
|
||||
margin: max(
|
||||
0px,
|
||||
calc((#{$touch-target-height} - #{var(--_state-layer-size)}) / 2)
|
||||
);
|
||||
|
||||
@include ripple-theme.theme(
|
||||
(
|
||||
focus-state-layer-color: var(--_unselected-focus-state-layer-color),
|
||||
focus-state-layer-opacity: var(--_unselected-focus-state-layer-opacity),
|
||||
hover-state-layer-color: var(--_unselected-hover-state-layer-color),
|
||||
hover-state-layer-opacity: var(--_unselected-hover-state-layer-opacity),
|
||||
pressed-state-layer-color: var(--_unselected-pressed-state-layer-color),
|
||||
pressed-state-layer-opacity:
|
||||
var(--_unselected-pressed-state-layer-opacity),
|
||||
)
|
||||
);
|
||||
|
||||
&:hover {
|
||||
color: var(--_unselected-hover-icon-color);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
color: var(--_unselected-focus-icon-color);
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: var(--_unselected-pressed-icon-color);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
color: var(--_disabled-icon-color);
|
||||
}
|
||||
}
|
||||
|
||||
.md3-icon-button--on {
|
||||
&:not(:disabled) {
|
||||
color: var(--_selected-icon-color);
|
||||
|
||||
&:hover {
|
||||
color: var(--_selected-hover-icon-color);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
color: var(--_selected-focus-icon-color);
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: var(--_selected-pressed-icon-color);
|
||||
}
|
||||
}
|
||||
|
||||
@include ripple-theme.theme(
|
||||
(
|
||||
focus-state-layer-color: var(--_selected-focus-state-layer-color),
|
||||
focus-state-layer-opacity: var(--_selected-focus-state-layer-opacity),
|
||||
hover-state-layer-color: var(--_selected-hover-state-layer-color),
|
||||
hover-state-layer-opacity: var(--_selected-hover-state-layer-opacity),
|
||||
pressed-state-layer-color: var(--_selected-pressed-state-layer-color),
|
||||
pressed-state-layer-opacity:
|
||||
var(--_selected-pressed-state-layer-opacity),
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,16 +3,6 @@
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
//
|
||||
|
||||
// stylelint-disable selector-class-pattern --
|
||||
// Selector '.md3-*' should only be used in this project.
|
||||
|
||||
@use './filled-icon-button';
|
||||
@use './filled-icon-button-theme';
|
||||
|
||||
@include filled-icon-button.static-styles();
|
||||
|
||||
.md3-icon-button--filled {
|
||||
@include filled-icon-button-theme.theme-styles(
|
||||
filled-icon-button-theme.$light-theme
|
||||
);
|
||||
}
|
||||
@include filled-icon-button.styles;
|
||||
|
||||
@ -3,16 +3,6 @@
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
//
|
||||
|
||||
// stylelint-disable selector-class-pattern --
|
||||
// Selector '.md3-*' should only be used in this project.
|
||||
|
||||
@use './filled-tonal-icon-button';
|
||||
@use './filled-tonal-icon-button-theme';
|
||||
|
||||
@include filled-tonal-icon-button.static-styles();
|
||||
|
||||
.md3-icon-button--filled-tonal {
|
||||
@include filled-tonal-icon-button-theme.theme-styles(
|
||||
filled-tonal-icon-button-theme.$light-theme
|
||||
);
|
||||
}
|
||||
@include filled-tonal-icon-button.styles;
|
||||
|
||||
@ -1,16 +0,0 @@
|
||||
//
|
||||
// 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 './icon-button';
|
||||
@use './icon-button-theme';
|
||||
|
||||
@include icon-button.static-styles;
|
||||
|
||||
.md3-icon-button {
|
||||
@include icon-button-theme.theme-styles;
|
||||
}
|
||||
@ -3,16 +3,6 @@
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
//
|
||||
|
||||
// stylelint-disable selector-class-pattern --
|
||||
// Selector '.md3-*' should only be used in this project.
|
||||
|
||||
@use './outlined-icon-button';
|
||||
@use './outlined-icon-button-theme';
|
||||
|
||||
@include outlined-icon-button.static-styles();
|
||||
|
||||
.md3-icon-button--outlined {
|
||||
@include outlined-icon-button-theme.theme-styles(
|
||||
outlined-icon-button-theme.$light-theme
|
||||
);
|
||||
}
|
||||
@include outlined-icon-button.styles;
|
||||
|
||||
8
iconbutton/lib/shared-styles.scss
Normal file
8
iconbutton/lib/shared-styles.scss
Normal file
@ -0,0 +1,8 @@
|
||||
//
|
||||
// Copyright 2022 Google LLC
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
//
|
||||
|
||||
@use './shared';
|
||||
|
||||
@include shared.styles;
|
||||
@ -3,16 +3,6 @@
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
//
|
||||
|
||||
// stylelint-disable selector-class-pattern --
|
||||
// Selector '.md3-*' should only be used in this project.
|
||||
|
||||
@use './standard-icon-button';
|
||||
@use './standard-icon-button-theme';
|
||||
|
||||
@include standard-icon-button.static-styles();
|
||||
|
||||
.md3-icon-button--standard {
|
||||
@include standard-icon-button-theme.theme-styles(
|
||||
standard-icon-button-theme.$light-theme
|
||||
);
|
||||
}
|
||||
@include standard-icon-button.styles;
|
||||
|
||||
@ -9,9 +9,9 @@ import '../icon/icon.js';
|
||||
import {customElement} from 'lit/decorators.js';
|
||||
import {ClassInfo} from 'lit/directives/class-map.js';
|
||||
|
||||
import {styles as sharedStyles} from './lib/icon-button-styles.css.js';
|
||||
import {IconButtonToggle} from './lib/icon-button-toggle.js';
|
||||
import {styles} from './lib/outlined-styles.css.js';
|
||||
import {styles as sharedStyles} from './lib/shared-styles.css.js';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
|
||||
@ -10,8 +10,8 @@ import {customElement} from 'lit/decorators.js';
|
||||
import {ClassInfo} from 'lit/directives/class-map.js';
|
||||
|
||||
import {IconButton} from './lib/icon-button.js';
|
||||
import {styles as sharedStyles} from './lib/icon-button-styles.css.js';
|
||||
import {styles} from './lib/outlined-styles.css.js';
|
||||
import {styles as sharedStyles} from './lib/shared-styles.css.js';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
|
||||
@ -9,9 +9,9 @@ import '../icon/icon.js';
|
||||
import {customElement} from 'lit/decorators.js';
|
||||
import {ClassInfo} from 'lit/directives/class-map.js';
|
||||
|
||||
import {styles as sharedStyles} from './lib/icon-button-styles.css.js';
|
||||
import {LinkIconButton} from './lib/link-icon-button.js';
|
||||
import {styles} from './lib/outlined-styles.css.js';
|
||||
import {styles as sharedStyles} from './lib/shared-styles.css.js';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
|
||||
@ -9,8 +9,8 @@ import '../icon/icon.js';
|
||||
import {customElement} from 'lit/decorators.js';
|
||||
import {ClassInfo} from 'lit/directives/class-map.js';
|
||||
|
||||
import {styles as sharedStyles} from './lib/icon-button-styles.css.js';
|
||||
import {IconButtonToggle} from './lib/icon-button-toggle.js';
|
||||
import {styles as sharedStyles} from './lib/shared-styles.css.js';
|
||||
import {styles} from './lib/standard-styles.css.js';
|
||||
|
||||
declare global {
|
||||
|
||||
@ -10,7 +10,7 @@ import {customElement} from 'lit/decorators.js';
|
||||
import {ClassInfo} from 'lit/directives/class-map.js';
|
||||
|
||||
import {IconButton} from './lib/icon-button.js';
|
||||
import {styles as sharedStyles} from './lib/icon-button-styles.css.js';
|
||||
import {styles as sharedStyles} from './lib/shared-styles.css.js';
|
||||
import {styles} from './lib/standard-styles.css.js';
|
||||
|
||||
declare global {
|
||||
|
||||
@ -9,8 +9,8 @@ import '../icon/icon.js';
|
||||
import {customElement} from 'lit/decorators.js';
|
||||
import {ClassInfo} from 'lit/directives/class-map.js';
|
||||
|
||||
import {styles as sharedStyles} from './lib/icon-button-styles.css.js';
|
||||
import {LinkIconButton} from './lib/link-icon-button.js';
|
||||
import {styles as sharedStyles} from './lib/shared-styles.css.js';
|
||||
import {styles} from './lib/standard-styles.css.js';
|
||||
|
||||
declare global {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user