mirror of
https://github.com/material-components/material-web.git
synced 2024-10-28 06:28:12 +03:00
5c94e10dcf
BREAKING CHANGE: Renamed Sass mixins `validate-keys()` to `validate-theme()` in `@material/theme` PiperOrigin-RevId: 390671152
127 lines
4.0 KiB
SCSS
127 lines
4.0 KiB
SCSS
/**
|
|
* @license
|
|
* Copyright 2021 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
|
|
@use 'sass:list';
|
|
@use 'sass:map';
|
|
@use '@material/switch/switch-theme' as mdc-switch-theme;
|
|
@use '@material/theme/keys';
|
|
@use '@material/theme/map-ext';
|
|
@use '@material/theme/state';
|
|
@use '@material/theme/theme';
|
|
@use '@material/mwc-ripple/ripple-theme';
|
|
|
|
@forward '@material/switch/switch-theme' show
|
|
$forced-colors-theme,
|
|
$light-theme,
|
|
density;
|
|
|
|
@mixin theme($theme) {
|
|
@include mdc-switch-theme.theme($theme);
|
|
}
|
|
|
|
@mixin theme-styles($theme) {
|
|
@include theme.validate-theme(mdc-switch-theme.$light-theme, $theme);
|
|
|
|
$pair: map-ext.split(
|
|
$theme,
|
|
selected-focus-state-layer-color,
|
|
selected-focus-state-layer-opacity,
|
|
selected-hover-state-layer-color,
|
|
selected-hover-state-layer-opacity,
|
|
selected-pressed-state-layer-color,
|
|
selected-pressed-state-layer-opacity,
|
|
unselected-focus-state-layer-color,
|
|
unselected-focus-state-layer-opacity,
|
|
unselected-hover-state-layer-color,
|
|
unselected-hover-state-layer-opacity,
|
|
unselected-pressed-state-layer-color,
|
|
unselected-pressed-state-layer-opacity
|
|
);
|
|
|
|
$theme-without-ripple: list.nth($pair, 1);
|
|
@include mdc-switch-theme.theme-styles($theme-without-ripple);
|
|
|
|
$ripple-theme: list.nth($pair, 2);
|
|
$ripple-theme: keys.create-theme-properties($ripple-theme, switch);
|
|
@include state.selected(mdc-switch-theme.$selectors) {
|
|
@include ripple-theme.theme(
|
|
(
|
|
focus-state-layer-color:
|
|
map.get($ripple-theme, selected-focus-state-layer-color),
|
|
focus-state-layer-opacity:
|
|
map.get($ripple-theme, selected-focus-state-layer-opacity),
|
|
hover-state-layer-color:
|
|
map.get($ripple-theme, selected-hover-state-layer-color),
|
|
hover-state-layer-opacity:
|
|
map.get($ripple-theme, selected-hover-state-layer-opacity),
|
|
pressed-state-layer-color:
|
|
map.get($ripple-theme, selected-pressed-state-layer-color),
|
|
pressed-state-layer-opacity:
|
|
map.get($ripple-theme, selected-pressed-state-layer-opacity),
|
|
)
|
|
);
|
|
|
|
// TODO(b/191298796): ripple-theme does not currently support setting
|
|
// state layer colors other than hover. Remove this section when bug is
|
|
// resolved.
|
|
@include state.focus(mdc-switch-theme.$selectors) {
|
|
@include ripple-theme.theme(
|
|
(
|
|
hover-state-layer-color:
|
|
map.get($ripple-theme, selected-focus-state-layer-color),
|
|
)
|
|
);
|
|
}
|
|
@include state.pressed(mdc-switch-theme.$selectors) {
|
|
@include ripple-theme.theme(
|
|
(
|
|
hover-state-layer-color:
|
|
map.get($ripple-theme, selected-pressed-state-layer-color),
|
|
)
|
|
);
|
|
}
|
|
}
|
|
|
|
@include state.unselected(mdc-switch-theme.$selectors) {
|
|
@include ripple-theme.theme(
|
|
(
|
|
focus-state-layer-color:
|
|
map.get($ripple-theme, unselected-focus-state-layer-color),
|
|
focus-state-layer-opacity:
|
|
map.get($ripple-theme, unselected-focus-state-layer-opacity),
|
|
hover-state-layer-color:
|
|
map.get($ripple-theme, unselected-hover-state-layer-color),
|
|
hover-state-layer-opacity:
|
|
map.get($ripple-theme, unselected-hover-state-layer-opacity),
|
|
pressed-state-layer-color:
|
|
map.get($ripple-theme, unselected-pressed-state-layer-color),
|
|
pressed-state-layer-opacity:
|
|
map.get($ripple-theme, unselected-pressed-state-layer-opacity),
|
|
)
|
|
);
|
|
|
|
// TODO(b/191298796): ripple-theme does not currently support setting
|
|
// state layer colors other than hover. Remove this section when bug is
|
|
// resolved.
|
|
@include state.focus(mdc-switch-theme.$selectors) {
|
|
@include ripple-theme.theme(
|
|
(
|
|
hover-state-layer-color:
|
|
map.get($ripple-theme, unselected-focus-state-layer-color),
|
|
)
|
|
);
|
|
}
|
|
@include state.pressed(mdc-switch-theme.$selectors) {
|
|
@include ripple-theme.theme(
|
|
(
|
|
hover-state-layer-color:
|
|
map.get($ripple-theme, unselected-pressed-state-layer-color),
|
|
)
|
|
);
|
|
}
|
|
}
|
|
}
|