Elements depth with Polymer - Material Design

Question

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.

Answer 1

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)