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

ionic-team · Feb 24, 2020 · b5310ef · b5310ef
1 parent 0224bed
commit b5310ef
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 5 deletions.
diff --git a/core/src/components/modal/animations/ios.enter.ts b/core/src/components/modal/animations/ios.enter.ts
@@ -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);

diff --git a/core/src/components/modal/animations/ios.leave.ts b/core/src/components/modal/animations/ios.leave.ts
@@ -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);

diff --git a/core/src/components/modal/modal.ios.scss b/core/src/components/modal/modal.ios.scss
@@ -20,7 +20,7 @@
 }
 
 :host(.modal-card) {
-  --backdrop-opacity: 0.15;
+  --backdrop-opacity: 0;
   --width: 100%;
 
   align-items: flex-end;