From 316374b44a6b613dadf32211b0cd918910af735b Mon Sep 17 00:00:00 2001
From: Hsieh Chin Fan <pham@topo.tw>
Date: Thu, 19 Sep 2024 15:37:20 +0800
Subject: feat: animation for Showcase

---
 src/css/dumbymap.css | 46 ++++++++++++++++++++++++++++++++++------------
 1 file changed, 34 insertions(+), 12 deletions(-)

(limited to 'src/css/dumbymap.css')

diff --git a/src/css/dumbymap.css b/src/css/dumbymap.css
index ed5f22d..a3f1fb9 100644
--- a/src/css/dumbymap.css
+++ b/src/css/dumbymap.css
@@ -2,6 +2,20 @@
   z-index: 9999;
 }
 
+@keyframes fade-in {
+  from { opacity: 0.3; }
+  to { opacity: 1; }
+}
+
+@keyframes fade-out {
+  from { opacity: 1; }
+  to { opacity: 0.3; }
+}
+
+.map-container {
+  transform-origin: top left;
+}
+
 .with-leader-line:not(:has(> *)) {
   display: inline-block;
   padding-right: 15px;
@@ -65,10 +79,19 @@
   .Showcase {
     order: 2;
     display: none;
+    overflow: visible;
+    position: relative;
 
-    .map-container {
-      width: 100% !important;
-      height: 100% !important;
+    > * {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+    }
+
+    [data-focus="true"] {
+      z-index: 9999;
     }
   }
 
@@ -92,6 +115,7 @@
       background: white;
       margin: 2px;
       border: 3px solid transparent;
+      animation: fade-in 1s;
 
       &[data-focus="true"] {
         border: 3px solid gray;
@@ -99,10 +123,9 @@
     }
 
     [data-placeholder] {
-      box-sizing: border-box;
-      border: 5px solid white;
-      background: lightgray;
-      margin: 0;
+      animation: fade-out 1s;
+      opacity: 0.3;
+      border: 3px solid gray;
     }
   }
 }
@@ -141,7 +164,6 @@
 }
 
 .DumbyMap[data-layout="side"] {
-  .Showcase,
   .SemanticHtml {
     flex: 50%;
     overflow-y: scroll;
@@ -149,7 +171,9 @@
   }
 
   .Showcase {
+    flex: 50%;
     display: block;
+    height: 100vh;
   }
 }
 
@@ -210,7 +234,7 @@
         padding-bottom: 2em;
         text-align: center;
         z-index: 9999;
-        transition: all 0.3s ease-out;
+        transition: all 0.3s ease-in-out;
 
         &:hover {
           background: #e1e1e1;
@@ -228,10 +252,8 @@
       display: none;
     }
 
-    [data-placeholder] {
-      max-width: 50px;
-    }
   }
+
 }
 
 .bold-options {
-- 
cgit v1.2.3-70-g09d2