Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions BREAKING.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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`.
Expand Down
8 changes: 6 additions & 2 deletions core/src/components/header/header.ios.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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;

Expand Down