ionic-team / ionic-team/ionic-framework
CSS4 box-shadow variable for toolbar-background
- Linguagem predominante
- TypeScript
- Estrelas
- 52.7k
- Forks
- 13.3k
- Merge médio
- 1d 15h
- PRs com merge (30d)
- 51
Descrição
# 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 https://github.com/ionic-team/ionic/issues/16895 does not fix the problem because then the navigation animation looks bad.
Guia de contribuição
Direção de pesquisa
Start by locating the iOS-mode styles for ion-header, ion-footer, and ion-toolbar, then review how existing toolbar CSS variables are defined. Verify the change against the reported navigation animation case and confirm that the requested box-shadow variable can style the relevant first or last toolbar without altering layout.
Escrita pelo modelo de indexação a partir do texto da issue.
Avaliação
- Stack de tecnologia
- css, typescript
- Domínio
- design, frontend
- Tipo de issue
- Funcionalidade
- Dificuldade
- 3/5
- Tempo estimado
- 1-2 dias
- Status de atividade
- Estagnada
- Clareza
- Razoavelmente clara
- Facilidade para iniciantes
- 35/100