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): border radius is correctly set on card style modal (#23461)

Browse Source
This commit is contained in:
Liam DeBeasi
2021-06-17 13:36:30 -04:00
committed by GitHub
parent 0a700f9f6f
commit bccb8ad5fb
3 changed files with 10 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -33,7 +33,7 @@ body.backdrop-no-scroll {
// Modal - Card Style
// --------------------------------------------------
/**
* Card style modal needs additional padding on the
* Card style modal needs additional padding on the
* top of the header. We accomplish this by targeting
* the first toolbar in the header.
* Footer also needs this. We do not adjust the bottom
@ -45,7 +45,7 @@ html.ios ion-modal ion-footer ion-toolbar:first-of-type {
}
/**
* Card style modal needs additional padding on the
* Card style modal needs additional padding on the
* bottom of the header. We accomplish this by targeting
* the last toolbar in the header.
*/
@ -63,11 +63,15 @@ html.ios ion-modal ion-toolbar {
padding-left: calc(var(--ion-safe-area-left) + 8px);
}
// .ion-page needs to explicitly inherit
// the border radius in safari otherwise
// modals will not show border radius properly
/**
* .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: inherit;
border-radius: 10px 10px 0 0;
}
/**