DEV/material-components_material-web
1
0
Fork 0
mirror of https://github.com/material-components/material-web.git synced 2026-03-09 00:09:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(fab): use new elevation component

Browse Source 
PiperOrigin-RevId: 495078250
This commit is contained in:
Elizabeth Mitchell 2022-12-13 11:24:51 -08:00 committed by Copybara-Service
parent 7e316b8725
commit aef3ee3d3f
2 changed files with 41 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
fab/lib/_shared.scss
View File

@ -8,12 +8,9 @@
@use 'sass:map';
@use 'sass:meta';
@use '../../elevationold/lib/elevation-theme';
@use '../../elevationold/lib/surface';
@use '../../elevation/lib/elevation';
@use '../../focus/focus-ring';
@use '../../ripple/ripple-theme';
@use '../../sass/elevation';
@use '../../sass/resolvers';
@use '../../sass/theme';
@use '../../sass/touch-target';
@ -36,7 +33,6 @@
}
.md3-fab {
@include surface.root-static-styles;
display: inline-flex;
border: none;
outline: none;
@ -47,6 +43,7 @@
align-items: center;
justify-content: center;
position: relative;
z-index: 0; // Needed for elevation and ripple
background-color: var(--_container-color);
@include focus-ring.theme(
@ -66,19 +63,20 @@
)
);
@include elevation-theme.theme-styles(
@include elevation.theme(
(
shadow: var(--_container-elevation-shadow),
overlay-opacity: var(--_container-elevation-overlay-opacity),
surface-tint-layer-color: var(--_container-surface-tint-layer-color),
// TODO: replace duration with animation tokens
duration: 280ms,
level: var(--_container-elevation),
shadow-color: var(--_container-shadow-color),
surface-tint-color: var(--_container-surface-tint-layer-color)
)
);
&.md3-fab--lowered {
@include elevation-theme.theme-styles(
@include elevation.theme(
(
shadow: var(--_lowered-container-elevation-shadow),
overlay-opacity: var(--_lowered-container-elevation-overlay-opacity),
level: var(--_lowered-container-elevation),
)
);
}
@ -86,38 +84,32 @@
&:hover {
cursor: pointer;
@include elevation-theme.theme-styles(
@include elevation.theme(
(
shadow: var(--_hover-container-elevation-shadow),
overlay-opacity: var(--_hover-container-elevation-overlay-opacity),
level: var(--_hover-container-elevation),
)
);
&.md3-fab--lowered {
@include elevation-theme.theme-styles(
@include elevation.theme(
(
shadow: var(--_lowered-hover-container-elevation-shadow),
overlay-opacity:
var(--_lowered-hover-container-elevation-overlay-opacity),
level: var(--_lowered-hover-container-elevation),
)
);
}
}
&:focus {
@include elevation-theme.theme-styles(
@include elevation.theme(
(
shadow: var(--_focus-container-elevation-shadow),
overlay-opacity: var(--_focus-container-elevation-overlay-opacity),
level: var(--_focus-container-elevation),
)
);
&.md3-fab--lowered {
@include elevation-theme.theme-styles(
@include elevation.theme(
(
shadow: var(--_lowered-focus-container-elevation-shadow),
overlay-opacity:
var(--_lowered-focus-container-elevation-overlay-opacity),
level: var(--_lowered-focus-container-elevation),
)
);
}
@ -126,25 +118,28 @@
&:active {
outline: none;
@include elevation-theme.theme-styles(
@include elevation.theme(
(
shadow: var(--_pressed-container-elevation-shadow),
overlay-opacity: var(--_pressed-container-elevation-overlay-opacity),
level: var(--_pressed-container-elevation),
)
);
&.md3-fab--lowered {
@include elevation-theme.theme-styles(
@include elevation.theme(
(
shadow: var(--_lowered-pressed-container-elevation-shadow),
overlay-opacity:
var(--_lowered-pressed-container-elevation-overlay-opacity),
level: var(--_lowered-pressed-container-elevation),
)
);
}
}
}
md-elevation {
inset: 0;
position: absolute;
z-index: -1; // Place behind content
}
.md3-fab__ripple {
overflow: hidden;
z-index: -1; // Place behind content
@ -198,20 +193,16 @@
}
@function resolve-tokens($tokens) {
$tokens: elevation-theme.resolve-theme(
$tokens: elevation.resolve-tokens(
$tokens,
map.get(resolvers.$material, elevation),
$shadow-color-token: container-shadow-color,
$elevation-tokens: (
container-elevation,
focus-container-elevation,
hover-container-elevation,
pressed-container-elevation,
lowered-container-elevation,
lowered-focus-container-elevation,
lowered-hover-container-elevation,
lowered-pressed-container-elevation
)
'container-elevation',
'focus-container-elevation',
'hover-container-elevation',
'pressed-container-elevation',
'lowered-container-elevation',
'lowered-focus-container-elevation',
'lowered-hover-container-elevation',
'lowered-pressed-container-elevation'
);
@return $tokens;

7
fab/lib/fab-shared.ts
View File

@ -4,6 +4,7 @@
* SPDX-License-Identifier: Apache-2.0
*/
import '../../elevation/elevation.js';
import '../../focus/focus-ring.js';
import '../../ripple/ripple.js';
@ -57,7 +58,7 @@ export abstract class FabShared extends ActionElement {
@pointerenter="${this.handlePointerEnter}"
@click="${this.handleClick}"
@contextmenu="${this.handleContextMenu}">
${this.renderElevationOverlay()}
${this.renderElevation()}
${this.renderFocusRing()}
${this.renderRipple()}
<span class="md3-fab__icon">
@ -88,8 +89,8 @@ export abstract class FabShared extends ActionElement {
}
/** @soyTemplate */
protected renderElevationOverlay(): TemplateResult {
return html`<div class="md3-elevation-overlay"></div>`;
protected renderElevation(): TemplateResult {
return html`<md-elevation shadow surface></md-elevation>`;
}
/** @soyTemplate */