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:
