CSS4 box-shadow variable for toolbar-background

[Spinnenzunge]

Feature Request

Please add a css4 box-shadow variable for ion-header ion-toolbar:last-child or ion-footer ion-toolbar:first-child.

Ionic version:
[x] 4.x

Describe the Feature Request
Ionic 4 has no satisfying option to add a box-shadow to the header in iOS mode. Adding a box-shadow to the ion-toolbar or ion-header does not work, because it leaves an ugly navigation animation if the header is not the same size on the parent / child pages.

Describe Preferred Solution
CSS4 box-shadow variable for ion-header ion-toolbar:last-child or ion-footer ion-toolbar:first-child. This was the fix for adding a good looking box-shadow to toolbars in Ionic 3 and is prevented with the new shadow DOM.

Additional Context
The solution given in #16895 does not fix the problem because then the navigation animation looks bad.

[lagneaucdc]

Hi Spinnenzunge, I got the same issue and I ended adding a ion-title in my ion-header, at the same level than the ion-toolbar. This is not the cleanest solution, but it works.
I give this ion-title a "shadow" attribute, that I style in the CSS (ion-title[shadow])

<ion-header no-border> <ion-toolbar> <ion-title>About</ion-title> </ion-toolbar> <ion-title shadow></ion-title> </ion-header>

As the ion-title(s) tags are animated, it fixes the problem.

Hope it helps :)

[Spinnenzunge]

Hi lagneaucdc.

This is an interesting approach and would probably also work with multiple ion-toolbar elements.
My main Problem is, that you would have to add extra markup on every page you have a header where you want the shadow in. Furthermore it would probably leave an ugly empty element for screen-readers (could be hidden with aria-hidden tough, but even more markup then).

I think i will pass on the header shadow until it is properly implementable with a css 4 variable (It was possible to get itt running really well in ionic 3 with some custom CSS)

Could look something like this:

:root[mode=ios] {
   ion-header {
      ion-toolbar {
         &:last-child {
            .toolbar-background {
               box-shadow: var(--box-shadow);
            }
         }
      }
   }
}

*edit: edited some code to not sound too cheesy