diff --git a/BREAKING.md b/BREAKING.md index 2d071c53f1..47fac2256c 100644 --- a/BREAKING.md +++ b/BREAKING.md @@ -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`. diff --git a/core/src/components/header/header.ios.scss b/core/src/components/header/header.ios.scss index d722f67c74..a0bdee4b43 100644 --- a/core/src/components/header/header.ios.scss +++ b/core/src/components/header/header.ios.scss @@ -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;