Depth of elements using polymer - material
In the Material Specification, the depth of the paper elements goes from z=0 (dp)
to z=24 (dp)
, but Polymeric elements only use 5 different pixel depths.
Is there a way to use the official depth values from the Material Design spec and do some kind of conversion from the polymer element definition?
One way is to repeat all the CSS
shadow tags , but I was hoping for a cleaner solution.
source to share
There are only 5 predefined styles that are selectable by attribute z
( https://github.com/Polymer/paper-shadow/blob/master/paper-shadow.css ) This is an example forz=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 use a custom suffix instead of 1-5, then use that suffix as depth. (didn't check myself though)
source to share