ionic-team / ionic-team/ionic-framework

CSS4 box-shadow variable for toolbar-background

Aberta
#17,544 2 comentários 2 reações 0 responsáveis Ver no GitHub
package: core type: feature request
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.

![ionic4-shadow-problem](https://user-images.githubusercontent.com/11189008/53091077-4cc1db80-3511-11e9-84c8-f511a6d37c23.gif)

**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

Abrir o 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

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.