mirror of
https://github.com/material-components/material-web.git
synced 2024-11-13 00:29:03 +03:00
chore(ripple): merge static/theme-styles
PiperOrigin-RevId: 482549484
This commit is contained in:
Elizabeth Mitchell
Copybara-Service
parent
2e1816e817
commit
7f50847bbd
@ -1,6 +1,15 @@
|
||||
//
|
||||
// Copyright 2021 Google LLC
|
||||
// Copyright 2022 Google LLC
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
//
|
||||
|
||||
@forward './lib/ripple-theme' show values, theme;
|
||||
@use 'sass:map';
|
||||
@use '../sass/theme';
|
||||
@use './lib/md-comp-ripple';
|
||||
|
||||
@mixin theme($theme) {
|
||||
$theme: theme.validate-theme(md-comp-ripple.values(), $theme);
|
||||
$theme: theme.create-theme-vars($theme, ripple);
|
||||
|
||||
@include theme.emit-theme-vars($theme);
|
||||
}
|
||||
|
||||
29
ripple/lib/_md-comp-ripple.scss
Normal file
29
ripple/lib/_md-comp-ripple.scss
Normal file
@ -0,0 +1,29 @@
|
||||
//
|
||||
// Copyright 2022 Google LLC
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
//
|
||||
|
||||
@use 'sass:map';
|
||||
@use '../../tokens';
|
||||
|
||||
@function values($exclude-hardcoded-values: false) {
|
||||
$state-values: tokens.md-sys-state-values($exclude-hardcoded-values);
|
||||
$default-shape: map.get(
|
||||
tokens.md-sys-shape-values($exclude-hardcoded-values),
|
||||
corner-none
|
||||
);
|
||||
$default-color: if($exclude-hardcoded-values, null, black);
|
||||
// add missing tokens
|
||||
$values: map.merge(
|
||||
$state-values,
|
||||
(
|
||||
state-layer-shape: $default-shape,
|
||||
focus-state-layer-color: $default-color,
|
||||
hover-state-layer-color: $default-color,
|
||||
pressed-state-layer-color: $default-color,
|
||||
dragged-state-layer-color: $default-color,
|
||||
)
|
||||
);
|
||||
|
||||
@return $values;
|
||||
}
|
||||
@ -1,95 +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 '../../sass/theme';
|
||||
@use '../../tokens';
|
||||
|
||||
@function values($exclude-hardcoded-values: false) {
|
||||
$state-values: tokens.md-sys-state-values($exclude-hardcoded-values);
|
||||
$default-shape: map.get(
|
||||
tokens.md-sys-shape-values($exclude-hardcoded-values),
|
||||
corner-none
|
||||
);
|
||||
$default-color: if($exclude-hardcoded-values, null, black);
|
||||
// add missing tokens
|
||||
$values: map.merge(
|
||||
$state-values,
|
||||
(
|
||||
state-layer-shape: $default-shape,
|
||||
focus-state-layer-color: $default-color,
|
||||
hover-state-layer-color: $default-color,
|
||||
pressed-state-layer-color: $default-color,
|
||||
dragged-state-layer-color: $default-color,
|
||||
)
|
||||
);
|
||||
|
||||
@return $values;
|
||||
}
|
||||
|
||||
@mixin theme($theme) {
|
||||
$theme: theme.validate-theme(values(), $theme);
|
||||
$theme: theme.create-theme-vars($theme, ripple);
|
||||
|
||||
@include theme.emit-theme-vars($theme);
|
||||
}
|
||||
|
||||
@mixin theme-styles($theme) {
|
||||
$theme: theme.validate-theme-styles(values(), $theme);
|
||||
$theme: theme.create-theme-vars($theme, ripple);
|
||||
|
||||
& {
|
||||
@each $token, $value in $theme {
|
||||
--_#{$token}: #{$value};
|
||||
}
|
||||
}
|
||||
|
||||
&.md3-ripple--unbounded {
|
||||
$unbounded: (
|
||||
state-layer-shape: map.get(tokens.md-sys-shape-values(), 'corner-full'),
|
||||
);
|
||||
$unbounded: theme.create-theme-vars($unbounded, ripple);
|
||||
|
||||
--_state-layer-shape: #{map.get($unbounded, 'state-layer-shape')};
|
||||
}
|
||||
|
||||
& {
|
||||
border-radius: var(--_state-layer-shape);
|
||||
}
|
||||
|
||||
&::before {
|
||||
background-color: var(--_hover-state-layer-color);
|
||||
}
|
||||
|
||||
&::after {
|
||||
background: radial-gradient(
|
||||
closest-side,
|
||||
#{var(--_pressed-state-layer-color)} max(calc(100% - 70px), 65%),
|
||||
transparent 100%
|
||||
);
|
||||
}
|
||||
|
||||
&.md3-ripple--hovered::before {
|
||||
background-color: var(--_hover-state-layer-color);
|
||||
opacity: var(--_hover-state-layer-opacity);
|
||||
}
|
||||
|
||||
&.md3-ripple--focused::before {
|
||||
background-color: var(--_focus-state-layer-color);
|
||||
opacity: var(--_focus-state-layer-opacity);
|
||||
}
|
||||
|
||||
&.md3-ripple--pressed::after {
|
||||
opacity: var(--_pressed-state-layer-opacity);
|
||||
}
|
||||
|
||||
// TODO(b/230630968): create a forced-colors-mode mixin
|
||||
@media screen and (forced-colors: active) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@ -6,7 +6,28 @@
|
||||
// stylelint-disable selector-class-pattern --
|
||||
// Selector '.md3-*' should only be used in this project.
|
||||
|
||||
@mixin static-styles() {
|
||||
@use 'sass:map';
|
||||
@use '../../sass/theme';
|
||||
@use '../../tokens';
|
||||
@use './md-comp-ripple';
|
||||
|
||||
@mixin theme($tokens) {
|
||||
$tokens: theme.validate-theme(md-comp-ripple.values(), $tokens);
|
||||
$tokens: theme.create-theme-vars($tokens, ripple);
|
||||
|
||||
@include theme.emit-theme-vars($tokens);
|
||||
}
|
||||
|
||||
@mixin styles() {
|
||||
$tokens: md-comp-ripple.values();
|
||||
$tokens: theme.create-theme-vars($tokens, ripple);
|
||||
|
||||
* {
|
||||
@each $token, $value in $tokens {
|
||||
--_#{$token}: #{$value};
|
||||
}
|
||||
}
|
||||
|
||||
:host {
|
||||
display: flex;
|
||||
}
|
||||
@ -24,6 +45,7 @@
|
||||
}
|
||||
|
||||
.md3-ripple-surface {
|
||||
border-radius: var(--_state-layer-shape);
|
||||
outline: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
|
||||
@ -37,27 +59,53 @@
|
||||
}
|
||||
|
||||
&::before {
|
||||
background-color: var(--_hover-state-layer-color);
|
||||
transition: opacity 15ms linear, background-color 15ms linear;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
// press ripple fade-out
|
||||
background: radial-gradient(
|
||||
closest-side,
|
||||
var(--_pressed-state-layer-color) max(calc(100% - 70px), 65%),
|
||||
transparent 100%
|
||||
);
|
||||
transition: opacity 375ms linear;
|
||||
transform-origin: center center;
|
||||
}
|
||||
}
|
||||
|
||||
.md3-ripple--focused {
|
||||
&::before {
|
||||
transition-duration: 75ms;
|
||||
}
|
||||
.md3-ripple--hovered::before {
|
||||
background-color: var(--_hover-state-layer-color);
|
||||
opacity: var(--_hover-state-layer-opacity);
|
||||
}
|
||||
|
||||
.md3-ripple--pressed {
|
||||
&::after {
|
||||
// press ripple fade-in
|
||||
transition-duration: 105ms;
|
||||
.md3-ripple--focused::before {
|
||||
background-color: var(--_focus-state-layer-color);
|
||||
opacity: var(--_focus-state-layer-opacity);
|
||||
transition-duration: 75ms;
|
||||
}
|
||||
|
||||
.md3-ripple--pressed::after {
|
||||
// press ripple fade-in
|
||||
opacity: var(--_pressed-state-layer-opacity);
|
||||
transition-duration: 105ms;
|
||||
}
|
||||
|
||||
.md3-ripple--unbounded {
|
||||
$unbounded: (
|
||||
state-layer-shape: map.get(tokens.md-sys-shape-values(), 'corner-full'),
|
||||
);
|
||||
$unbounded: theme.create-theme-vars($unbounded, ripple);
|
||||
|
||||
--_state-layer-shape: #{map.get($unbounded, 'state-layer-shape')};
|
||||
}
|
||||
|
||||
// TODO(b/230630968): create a forced-colors-mode mixin
|
||||
@media screen and (forced-colors: active) {
|
||||
:host {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,14 +3,6 @@
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
//
|
||||
|
||||
// stylelint-disable selector-class-pattern --
|
||||
// Selector '.md3-*' should only be used in this project.
|
||||
|
||||
@use './ripple';
|
||||
@use './ripple-theme';
|
||||
|
||||
@include ripple.static-styles();
|
||||
|
||||
.md3-ripple-surface {
|
||||
@include ripple-theme.theme-styles(ripple-theme.values());
|
||||
}
|
||||
@include ripple.styles;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user