transition bg color (very hard)

ppy-sb · Jul 18, 2023 · d132993 · d132993
1 parent ae01621
commit d132993
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 14 deletions.
diff --git a/src/app.vue b/src/app.vue
@@ -36,8 +36,8 @@ onMounted(() => {
 
 <style lang="scss">
 @import "~/assets/styles/modal.scss";
-$zoom-content-stage1: opacity(0.4) saturate(0.7);
-$zoom-content-stage2: opacity(0.2) saturate(0.3);
+$zoom-content-stage1: saturate(0.4);
+$zoom-content-stage2: saturate(0.4) opacity(0.2);
 
 $scale: scale(0.98);
 $scale2: scale(0.96);

diff --git a/src/components/T/modal.client.vue b/src/components/T/modal.client.vue
@@ -82,20 +82,14 @@ onMounted(() => {
 
 $in: blur(0.5em) opacity(0) saturate(0.5);
 .t-modal {
-  // @apply max-h-[100dvh] overflow-scroll;
-  &::backdrop {
-    @apply transition-all;
 
-    &[status="show"] {
-      @apply bg-gbase-200/25 dark:bg-gbase-800/30;
-      @apply backdrop-blur-lg;
-      // @apply backdrop-saturate-[0.6] backdrop-contrast-[1.02] backdrop-brightness-[1.02];
-      // @apply dark:backdrop-contrast-[1.05] dark:backdrop-brightness-[0.9];
-    }
-  }
-  // &[status="hidden"] {
-  // }
   &[status="show"] {
+
+    &::backdrop {
+
+      animation: backdrop-fade-in calc($duration / 1.4) $animate-function forwards;
+    }
+
     animation: zoomIn $duration $animate-function forwards;
     > [response-modal] {
       animation: slideFromBottom calc($duration / 1.4) $animate-function forwards;
@@ -106,6 +100,11 @@ $in: blur(0.5em) opacity(0) saturate(0.5);
   }
 
   &[status="closing"] {
+
+     &::backdrop {
+      animation: backdrop-fade-out calc($duration / 1.2) $animate-function forwards;
+    }
+
     animation: zoomOut $duration $animate-function forwards;
     > [response-modal] {
       animation: slideToBottom calc($duration / 1.2) $animate-function forwards;
@@ -141,4 +140,44 @@ $in: blur(0.5em) opacity(0) saturate(0.5);
     transform: translateY(5%) scale(0.98);
   }
 }
+
+@keyframes backdrop-fade-in {
+  from {
+    background-color: transparent;
+  }
+  to{
+    @apply bg-gbase-200/30;
+    @apply backdrop-blur-lg;
+  }
+}
+@keyframes backdrop-fade-out {
+  from {
+    @apply bg-gbase-200/30;
+    @apply backdrop-blur-lg;
+  }
+  to {
+     background-color: transparent;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  @keyframes backdrop-fade-in {
+    from {
+      background-color: transparent;
+    }
+    to{
+      @apply bg-gbase-900/80;
+      @apply backdrop-blur-lg;
+    }
+  }
+  @keyframes backdrop-fade-out {
+    from {
+      @apply bg-gbase-900/80;
+      @apply backdrop-blur-lg;
+    }
+    to {
+      background-color: transparent;
+    }
+  }
+}
 </style>