diff --git a/packages/mdc-menu/_mixins.scss b/packages/mdc-menu/_mixins.scss index c50f8652e41..4f4b8fd32ed 100644 --- a/packages/mdc-menu/_mixins.scss +++ b/packages/mdc-menu/_mixins.scss @@ -20,6 +20,7 @@ // THE SOFTWARE. // +@import "@material/elevation/mixins"; @import "@material/feature-targeting/functions"; @import "@material/feature-targeting/mixins"; @import "@material/rtl/mixins"; @@ -33,6 +34,7 @@ $feat-structure: mdc-feature-create-target($query, structure); @include mdc-ripple-common($query); + @include mdc-elevation-overlay-common($query); // Customize the menu-surface and contained list to match the mdc-menu styles. .mdc-menu { @@ -46,6 +48,8 @@ // Include mdc-list selector to ensure list-inside-menu overrides default list styles .mdc-list { @include mdc-list-item-primary-text-ink-color($mdc-menu-ink-color, $query); + @include mdc-elevation-overlay-surface-position($query: $query); + @include mdc-elevation-overlay-size(100%, $query: $query); } .mdc-list-divider { diff --git a/packages/mdc-menu/package.json b/packages/mdc-menu/package.json index 8241917a4f1..2f5a486562f 100644 --- a/packages/mdc-menu/package.json +++ b/packages/mdc-menu/package.json @@ -20,6 +20,7 @@ "dependencies": { "@material/base": "^4.0.0", "@material/dom": "^4.0.0", + "@material/elevation": "^4.0.0", "@material/feature-targeting": "^4.0.0", "@material/list": "^4.0.0", "@material/menu-surface": "^4.0.0",