search

angular / material

Material design for AngularJS
https://material.angularjs.org/
MIT License
16.55k stars 3.39k forks source link

Default shadows are inconsistent with material design specs #6710

Closed drsolarcat closed 8 years ago

drsolarcat commented 8 years ago

The elevation shadows for most elements do not follow current material design specs: https://www.google.com/design/spec/what-is-material/elevation-shadows.html#elevation-shadows-shadows

For example, FAB buttons should have resting state -> pressed state as 6dp -> 12dp. Right now it looks more like 2dp -> 6dp. Sidenav should default to 16dp. Card should default to 2dp. This should be checked for all elements.

ethanmick commented 8 years ago

Just ran into this issue while building a site that puts Fab buttons on top of many layering parts. The inconsistent shadows are visually noticeable. Thanks!

drsolarcat commented 8 years ago

I think this issue is critical taking into account the purpose of the project. It violates the most basic principles of MD. So I don't understand why it was sorted into Backlog.

Todd-Werelius commented 8 years ago

+1

I agree, I have to manually adjust using the proper classes to get them to look correct, while that's acceptable for the moment it really should default to the spec.

For modal bottom sheets ( not widely used I admit ) I had to copy and modify the existing class just to get it to work at all since "top shadows" don't really exist in AMD at the moment.

Proper Z order representation seems pretty key here and I have seen way to many "Material Design" sites that look like crap because they ignore this ( probably unintentionally )