Material Design shadows


#1

How would I go about adding in the shadows required on the tab-bar for a proper material design look?

I want to do the following:

ion-tabbar-section {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

ion-page > ion-navbar {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

Which works for the ion-navbar when displaying a tab sub-page, however for the tabbar-section on the main tabs view the shadow is clobbered by the ion-content-section that follows. I’ve tried messing around with z-index in various places but this doesn’t work consistently as the ion-page that is being shown on the main tabs view seems to have z-index: 10 applied to it if it is the first tab but not otherwise.

This is what I want it to look like:


#2

@ctcampbell did you have any luck? I’m also working on this. I’ll update this thread if I get anywhere…


#3

Unfortunately no, I couldn’t work around the z-index issues. Hoping you can!