javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(header): do not apply safe area padding to collapsible large title toolbar (#28143)

Browse Source
This commit is contained in:
Liam DeBeasi
2023-09-07 16:12:27 -04:00
committed by GitHub
parent 921faac009
commit 128617512c
5 changed files with 15 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
core/src/components/header/header.ios.scss
View File

@@ -51,6 +51,12 @@
}
.header-collapse-condense ion-toolbar:first-of-type {
/**
* The toolbar that contains the collapsible
* large title should not have safe area padding applied.
*/
padding-top: 0px;
z-index: 1;
}

BIN
core/src/components/header/test/condense/header.e2e.ts-snapshots/header-condense-large-title-collapsed-diff-ios-ltr-Mobile-Chrome-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.2 KiB

After

Width:  |  Height:  |  Size: 18 KiB

BIN
core/src/components/header/test/condense/header.e2e.ts-snapshots/header-condense-large-title-collapsed-diff-ios-ltr-Mobile-Firefox-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.8 KiB

After

Width:  |  Height:  |  Size: 25 KiB

BIN
core/src/components/header/test/condense/header.e2e.ts-snapshots/header-condense-large-title-collapsed-diff-ios-ltr-Mobile-Safari-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.1 KiB

After

Width:  |  Height:  |  Size: 14 KiB

9
core/src/components/header/test/condense/index.html
View File

@@ -12,6 +12,15 @@
<script src="../../../../../scripts/testing/scripts.js"></script>
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
<style>
/**
* The large title should not have safe
* are applied since it is in the content.
*/
:root {
--ion-safe-area-top: 40px;
}
</style>
</head>
<body>