From d5851a2dfe728a5b5cd4e913df31e9b63baed99b Mon Sep 17 00:00:00 2001
From: Hsieh Chin Fan <pham@topo.tw>
Date: Thu, 10 Oct 2024 18:49:31 +0800
Subject: feat(CSS): add transition of draggable blocks

---
 src/css/dumbymap.css | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

(limited to 'src')

diff --git a/src/css/dumbymap.css b/src/css/dumbymap.css
index fe6c0d7..d810429 100644
--- a/src/css/dumbymap.css
+++ b/src/css/dumbymap.css
@@ -637,8 +637,6 @@ a[href^='http']:not(:has(img))::after,
 }
 
 .draggable-block {
-  /* TODO transition for display */
-  display: none;
   overflow: visible;
   width: fit-content;
 
@@ -650,15 +648,20 @@ a[href^='http']:not(:has(img))::after,
   background: white;
 
   font-size: 0.8rem;
+
+  transition:
+    opacity .3s linear,
+    visibility .3s linear;
+  visibility: hidden;
+  opacity: 0;
   pointer-events: auto;
 
   &:has(.dumby-block.focus) {
-    display: block;
-
-    outline: solid #505050 1px;
-    border-color: #505050;
+    visibility: visible;
+    opacity: 1;
   }
 
+  /** Hide block with map in focus, which is the only element */
   &:has(pre:only-child [data-placeholder]:only-child) {
     display: none;
   }
-- 
cgit v1.2.3-70-g09d2