javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 04:14:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(modal): card style modal now adds appropriate contrast (#20604)

Browse Source
This commit is contained in:
Liam DeBeasi
2020-02-24 15:30:56 -05:00
committed by GitHub
parent 0224bed0c9
commit b5310effe3
3 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
core/src/components/modal/animations/ios.enter.ts
View File

@ -44,8 +44,8 @@ export const iosEnterAnimation = (
.beforeAddWrite(() => bodyEl.style.setProperty('background-color', 'black'))
.addElement(presentingEl)
.keyframes([
{ offset: 0, transform: 'translateY(0px) scale(1)', borderRadius: '0px' },
{ offset: 1, transform: finalTransform, borderRadius: '10px 10px 0 0' }
{ offset: 0, filter: 'contrast(1)', transform: 'translateY(0px) scale(1)', borderRadius: '0px' },
{ offset: 1, filter: 'contrast(0.85)', transform: finalTransform, borderRadius: '10px 10px 0 0' }
]);
baseAnimation.addAnimation(presentingAnimation);

4
core/src/components/modal/animations/ios.leave.ts
View File

@ -46,8 +46,8 @@ export const iosLeaveAnimation = (
}
})
.keyframes([
{ offset: 0, transform: `translateY(${modalTransform}) scale(${currentPresentingScale})`, borderRadius: '10px 10px 0 0' },
{ offset: 1, transform: 'translateY(0px) scale(1)', borderRadius: '0px' }
{ offset: 0, filter: 'contrast(0.85)', transform: `translateY(${modalTransform}) scale(${currentPresentingScale})`, borderRadius: '10px 10px 0 0' },
{ offset: 1, filter: 'contrast(1)', transform: 'translateY(0px) scale(1)', borderRadius: '0px' }
]);
baseAnimation.addAnimation(presentingAnimation);

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

@ -20,7 +20,7 @@
}
:host(.modal-card) {
--backdrop-opacity: 0.15;
--backdrop-opacity: 0;
--width: 100%;
align-items: flex-end;