mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-06 22:29:44 +08:00
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:
13
BREAKING.md
13
BREAKING.md
@ -13,6 +13,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver
|
|||||||
## Version 6.x
|
## Version 6.x
|
||||||
|
|
||||||
- [Components](#components)
|
- [Components](#components)
|
||||||
|
* [Header](#header)
|
||||||
* [Toast](#toast)
|
* [Toast](#toast)
|
||||||
- [Config](#config)
|
- [Config](#config)
|
||||||
* [Transition Shadow](#transition-shadow)
|
* [Transition Shadow](#transition-shadow)
|
||||||
@ -21,6 +22,18 @@ This is a comprehensive list of the breaking changes introduced in the major ver
|
|||||||
|
|
||||||
### Components
|
### 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
|
#### Toast
|
||||||
|
|
||||||
The `--white-space` CSS variable now defaults to `normal` instead of `pre-wrap`.
|
The `--white-space` CSS variable now defaults to `normal` instead of `pre-wrap`.
|
||||||
|
|||||||
@ -19,7 +19,7 @@
|
|||||||
.header-translucent-ios ion-toolbar {
|
.header-translucent-ios ion-toolbar {
|
||||||
--opacity: .8;
|
--opacity: .8;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Disable the saturation otherwise it distorts the content
|
* Disable the saturation otherwise it distorts the content
|
||||||
* background color when large header is not collapsed
|
* background color when large header is not collapsed
|
||||||
@ -56,10 +56,14 @@
|
|||||||
*/
|
*/
|
||||||
.header-collapse-condense ion-toolbar {
|
.header-collapse-condense ion-toolbar {
|
||||||
--background: var(--ion-background-color, #fff);
|
--background: var(--ion-background-color, #fff);
|
||||||
|
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.header-collapse-condense ion-toolbar:last-of-type {
|
||||||
|
--border-width: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
.header-collapse-condense ion-toolbar ion-searchbar {
|
.header-collapse-condense ion-toolbar ion-searchbar {
|
||||||
height: 48px;
|
height: 48px;
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user