CODEWITHSUNDEEP
polymermaterial-designdart-polymer
tomasyany
tomasyany

Reputation: 1242

Elements depth with Polymer - Material Design

In the Material Design spec the depth of the paper items goes from z=0 (dp) to z=24 (dp), but Polymer Elements only use 5 different depths, in pixels.

Is there a way to use the official depth values from the Material Design spec, and do some kind of transformation from the polymer element definition?

One way would be to do again all the CSS for the shadows, but I was hoping for a cleaner solution.

Upvotes: 3

Views: 174

Answers (1)

Günter Zöchbauer
Günter Zöchbauer

Reputation: 657268

There are just 5 predefined styles which are selected by the z attribute (https://github.com/Polymer/paper-shadow/blob/master/paper-shadow.css) This is the example for z=5

html /deep/ .paper-shadow-top-z-5 {
  box-shadow: 0 17px 17px 0 rgba(0, 0, 0, 0.15);
}

html /deep/ .paper-shadow-bottom-z-5 {
  box-shadow: 0 27px 55px 0 rgba(0, 0, 0, 0.3);
}

add a similar style to your page and with a custom suffix instead of 1-5 and then use this suffix as depth. (not tested myself though)

Upvotes: 2

Related Questions