MdMenu : style mat-menu-panel

[clement-hollander]

According to https://material.io/guidelines/material-design/elevation-shadows.html, Desktop resting elevation is 2dp below the listed values to accommodate mouse and non-touch environments.

For sample in the MdMenu component, we are unable to apply a mat-elevation-z6 class to the mat-menu-panel

[crisbeto]

You can set a class on the md-menu element, although the mat-elevation-z6 won't have an effect, because it's higher in the stylesheet than the mat-menu-panel. You can work around it by defining your own class that has a higher specificity. I'll see what I can do to make the overrides a little easier in the future.

That being said, you're right that the elevation seems to be wrong now. When I re-adjusted it last time, I must've been looking at the one for mobile. I'll switch it back to 8.

[clement-hollander]

thanks @crisbeto, it should be great to have a mixin for desktop use, where all elevations are minus 2.

8 is mobile menu by the way ;)

[crisbeto]

FWIW, you can generate your own elevations via the mat-elevation mixin, You can see how the default ones are defined here.

[willshowell]

@crisbeto While #5873 does make it easier to override, I think part of the original issue remains.

The spec says menu elevations should be 6dp on desktop and 8dp on mobile, but the default is currently 2dp.

EDIT: nvm, there's an inconsistency between the menu guidelines (2dp) and the elevation guidelines (6dp)

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}