mirror of
https://github.com/material-components/material-web.git
synced 2024-09-11 13:46:10 +03:00
fix(navigationdrawer): tonal surface update
PiperOrigin-RevId: 522235172
This commit is contained in:
parent
3934f51e1d
commit
4f9df513dd
@ -21,17 +21,16 @@ $_delay: 0s;
|
||||
$_transition-duration: 0.25s;
|
||||
|
||||
$_reference: (
|
||||
container-color: #fff,
|
||||
container-height: 100%,
|
||||
container-shape: 0 16px 16px 0,
|
||||
container-surface-tint-layer-color: null,
|
||||
container-width: 360px,
|
||||
'container-color': #fff,
|
||||
'container-height': 100%,
|
||||
'container-shape': 0 16px 16px 0,
|
||||
'container-width': 360px,
|
||||
// TODO(b/216384393): Temporary existing token to use for shadow color
|
||||
divider-color: #000,
|
||||
modal-container-elevation: 1,
|
||||
scrim-color: null,
|
||||
scrim-opacity: 0.04,
|
||||
standard-container-elevation: 0,
|
||||
'divider-color': #000,
|
||||
'modal-container-elevation': 1,
|
||||
'scrim-color': null,
|
||||
'scrim-opacity': 0.04,
|
||||
'standard-container-elevation': 0,
|
||||
);
|
||||
|
||||
$_custom-property-prefix: 'navigation-drawer-modal';
|
||||
@ -56,7 +55,7 @@ $_custom-property-prefix: 'navigation-drawer-modal';
|
||||
|
||||
@include elevation.theme(
|
||||
(
|
||||
level: var(--_modal-container-elevation),
|
||||
'level': var(--_modal-container-elevation),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
@ -19,15 +19,14 @@ $delay: 0s;
|
||||
$transition-duration: 0.25s;
|
||||
|
||||
$_reference: (
|
||||
container-color: #fff,
|
||||
container-height: 100%,
|
||||
container-shape: 0 16px 16px 0,
|
||||
container-surface-tint-layer-color: null,
|
||||
container-width: 360px,
|
||||
'container-color': #fff,
|
||||
'container-height': 100%,
|
||||
'container-shape': 0 16px 16px 0,
|
||||
'container-width': 360px,
|
||||
// TODO(b/216384393): Temporary existing token to use for shadow color
|
||||
divider-color: #000,
|
||||
modal-container-elevation: 1,
|
||||
standard-container-elevation: 0,
|
||||
'divider-color': #000,
|
||||
'modal-container-elevation': 1,
|
||||
'standard-container-elevation': 0,
|
||||
);
|
||||
|
||||
$_custom-property-prefix: 'navigation-drawer';
|
||||
@ -52,9 +51,8 @@ $_custom-property-prefix: 'navigation-drawer';
|
||||
|
||||
@include elevation.theme(
|
||||
(
|
||||
level: var(--_standard-container-elevation),
|
||||
shadow-color: var(--_divider-color),
|
||||
surface-tint: var(--_container-surface-tint-layer-color),
|
||||
'level': var(--_standard-container-elevation),
|
||||
'shadow-color': var(--_divider-color),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
@ -4,7 +4,7 @@
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*/
|
||||
|
||||
import '../../elevation/elevation-surface.js';
|
||||
import '../../elevation/elevation.js';
|
||||
|
||||
import {html, LitElement, PropertyValues, TemplateResult} from 'lit';
|
||||
import {property} from 'lit/decorators.js';
|
||||
@ -56,7 +56,7 @@ export class NavigationDrawer extends LitElement {
|
||||
aria-modal="${this.ariaModal}"
|
||||
class="md3-navigation-drawer ${this.getRenderClasses()}"
|
||||
role="dialog">
|
||||
<md-elevation-surface shadow></md-elevation-surface>
|
||||
<md-elevation></md-elevation>
|
||||
<div class="md3-navigation-drawer__slot-content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
|
@ -9,8 +9,7 @@
|
||||
@use './md-sys-shape';
|
||||
@use './md-sys-state';
|
||||
@use './md-sys-typescale';
|
||||
// TODO(b/272526637): tonal surface update
|
||||
@use './v0_161/md-comp-navigation-drawer';
|
||||
@use './v0_172/md-comp-navigation-drawer';
|
||||
// go/keep-sorted end
|
||||
|
||||
$_default: (
|
||||
|
Loading…
Reference in New Issue
Block a user