javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-17 18:54:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(modal): add additional padding to toolbars in iOS modal (#23262)

Browse Source 
Resolves #22778
This commit is contained in:
William Martin
2021-05-03 16:43:11 -04:00
committed by GitHub
parent 308fa1c0dd
commit a037b65aad
1 changed files with 29 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
core/src/css/core.scss
View File

@ -32,11 +32,35 @@ body.backdrop-no-scroll {
// Modal - Card Style // Modal - Card Style
// -------------------------------------------------- // --------------------------------------------------
// The card style does not reach all the way to /**
// the top of the screen, so there does not need * Card style modal needs additional padding on the
// to be any safe area padding added * top of the header. We accomplish this by targeting
html.ios ion-modal.modal-card .ion-page > ion-header > ion-toolbar:first-of-type { * the first toolbar in the header.
padding-top: 0px; * Footer also needs this. We do not adjust the bottom
* padding though because of the safe area.
*/
html.ios ion-modal.modal-card ion-header ion-toolbar:first-of-type,
html.ios ion-modal ion-footer ion-toolbar:first-of-type {
padding-top: 6px;
}
/**
* Card style modal needs additional padding on the
* bottom of the header. We accomplish this by targeting
* the last toolbar in the header.
*/
html.ios ion-modal.modal-card ion-header ion-toolbar:last-of-type {
padding-bottom: 6px;
}
/**
* Add padding on the left and right
* of toolbars while accounting for
* safe area values when in landscape.
*/
html.ios ion-modal ion-toolbar {
padding-right: calc(var(--ion-safe-area-right) + 8px);
padding-left: calc(var(--ion-safe-area-left) + 8px);
} }
// .ion-page needs to explicitly inherit // .ion-page needs to explicitly inherit