refactor(header): removed border from last toolbar when using collapsible large title (#22891)

resolves #22777

BREAKING CHANGE: The last toolbar in the header with a collapsible large title no longer has a border.
This commit is contained in:
Liam DeBeasi
2021-02-08 10:34:08 -05:00
committed by GitHub
parent 9b786899e5
commit c72bc5dbd7
2 changed files with 19 additions and 2 deletions

View File

@ -13,6 +13,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver
## Version 6.x
- [Components](#components)
* [Header](#header)
* [Toast](#toast)
- [Config](#config)
* [Transition Shadow](#transition-shadow)
@ -21,6 +22,18 @@ This is a comprehensive list of the breaking changes introduced in the major ver
### Components
#### Header
When using a collapsible large title, the last toolbar in the header with `collapse="condense"` no longer has a border. This does not affect the toolbar when the large title is collapsed.
To get the old style back, add the following CSS to your global stylesheet:
```css
ion-header.header-collapse-condense ion-toolbar:last-of-type {
--border-width: 0 0 0.55px;
}
```
#### Toast
The `--white-space` CSS variable now defaults to `normal` instead of `pre-wrap`.

View File

@ -19,7 +19,7 @@
.header-translucent-ios ion-toolbar {
--opacity: .8;
}
/**
* Disable the saturation otherwise it distorts the content
* background color when large header is not collapsed
@ -56,10 +56,14 @@
*/
.header-collapse-condense ion-toolbar {
--background: var(--ion-background-color, #fff);
z-index: 0;
}
.header-collapse-condense ion-toolbar:last-of-type {
--border-width: 0px;
}
.header-collapse-condense ion-toolbar ion-searchbar {
height: 48px;