From b5310effe3f9b47459f22221da1853a55dbb0279 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Mon, 24 Feb 2020 15:30:56 -0500
Subject: [PATCH] fix(modal): card style modal now adds appropriate contrast
 (#20604)

---
 core/src/components/modal/animations/ios.enter.ts | 4 ++--
 core/src/components/modal/animations/ios.leave.ts | 4 ++--
 core/src/components/modal/modal.ios.scss          | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/core/src/components/modal/animations/ios.enter.ts b/core/src/components/modal/animations/ios.enter.ts
index 58e6d9e102..884c0d4858 100644
--- 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
index f5ff92181b..09056d3d03 100644
--- 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
index 5639d72f98..a92867c32b 100644
--- 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;