javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-15 01:03:03 +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

7
core/src/components/modal/modal.ios.scss
View File

@ -68,10 +68,3 @@
box-shadow: var(--box-shadow);
}
}
:host(.overlay-datetime) {
--width: 316px;
--height: 296px;
--background: transparent;
--border-radius: #{$modal-ios-border-radius};
}

2
core/src/components/modal/modal.ios.vars.scss
View File

@ -8,5 +8,3 @@ $modal-ios-background-color: $background-color !default;
/// @prop - Border radius for the modal
$modal-ios-border-radius: 10px !default;
$modal-ios-card-border-radius: 10px !default;

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;
}
/**