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

fix(modal): border radius is now correctly applied to card modals (#24204)

Browse Source
This commit is contained in:
Liam DeBeasi
2021-11-11 10:01:53 -05:00
committed by GitHub
parent 009dff5584
commit 1f4f8eb6ca
4 changed files with 125 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -65,17 +65,6 @@ html.ios ion-modal ion-toolbar {
padding-left: calc(var(--ion-safe-area-left) + 8px);
}
/**
* .ion-page needs to explicitly set
* the border radius in WebKit otherwise
* modals will not show border radius properly.
* Do not use inherit as that will not
* work with shadow dom in this case.
*/
html.ios ion-modal .ion-page {
border-radius: 10px 10px 0 0;
}
/**
* Card style modal on iPadOS
* should only have backdrop on first instance.
@ -110,6 +99,20 @@ ion-modal:not(.overlay-hidden) ~ ion-modal {
--box-shadow: none;
}
/**
* This works around a bug in WebKit where the
* content will overflow outside of the bottom border
* radius when re-painting. As long as a single
* border radius value is set on .ion-page, this
* issue does not happen. We set the top left radius
* here because the top left corner will always have a
* radius no matter the platform.
* This behavior only applies to card modals.
*/
html.ios ion-modal.modal-card .ion-page {
border-top-left-radius: var(--border-radius);
}
// Ionic Colors
// --------------------------------------------------
// Generates the color classes and variables based on the