trying some tricky hover effects on the tree

calcit-lang · Oct 7, 2023 · ac5ce53 · ac5ce53
1 parent 23134f1
commit ac5ce53
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 4 deletions.
diff --git a/calcit.cirru b/calcit.cirru
diff --git a/compact.cirru b/compact.cirru
@@ -843,7 +843,7 @@
                   sorted-children $ -> (:data expr) (.to-list) (.sort-by first)
                 list->
                   {} (:tab-index 0)
-                    :class-name $ str-spaced (base-style-expr theme) (if focused? |cirru-focused |)
+                    :class-name $ str-spaced "\"comp-expr" (base-style-expr theme) (if focused? |cirru-focused |)
                     :style $ decide-expr-theme expr (includes? others coord) focused? focus-in? tail? layout-mode (count coord) depth theme
                     :on $ if readonly?
                       {} $ :click
@@ -1118,7 +1118,7 @@
                     , "\""
                   focused? $ = focus coord
                 textarea $ {} (:value text) (:spellcheck false)
-                  :class-name $ str-spaced (base-style-leaf theme)
+                  :class-name $ str-spaced "\"comp-leaf" (base-style-leaf theme)
                     if (= focus coord) "\"cirru-focused" "\""
                   :read-only readonly?
                   :style $ decide-leaf-theme text focused? first? by-other? theme

diff --git a/entry/main.css b/entry/main.css
@@ -63,5 +63,43 @@ body * {
 }
 
 .copy-commands:active {
-  background-color: hsla(0,0%,100%,0.3)
-}
+  background-color: hsla(0,0%,100%,0.3);
+}
+
+.comp-leaf:hover {
+  background-color: hsla(0,0%,100%,0.14);
+}
+
+.comp-expr:hover {
+  border-color: hsla(0,0%,100%,0.8);
+}
+
+/** tricky selector to reset parent hover color */
+div.comp-expr:has(.comp-expr:hover):hover,
+div.comp-expr:has(.comp-leaf:hover):hover {
+  border-color: hsl(200,100%,76%,0.5);
+}
+
+.comp-expr.cirru-focused {
+  animation: expr-breathing 2.4s ease-out infinite normal;
+}
+.comp-leaf.cirru-focused {
+  animation: leaf-breathing 2.4s ease-out infinite normal;
+}
+
+
+@keyframes expr-breathing {
+  0% { background-color: hsla(0, 100%, 100%, 0.1); }
+  10% { background-color: hsla(0, 100%, 100%, 0.1); }
+  50% { background-color: hsla(0, 100%, 100%, 0.0); }
+  90% { background-color: hsla(0, 100%, 100%, 0.1); }
+  100% { background-color: hsla(0, 100%, 100%, 0.1); }
+}
+
+@keyframes leaf-breathing {
+  0% { background-color: hsla(0, 100%, 100%, 0.3); }
+  10% { background-color: hsla(0, 100%, 100%, 0.3); }
+  50% { background-color: hsla(0, 100%, 100%, 0.1); }
+  10% { background-color: hsla(0, 100%, 100%, 0.3); }
+  100% { background-color: hsla(0, 100%, 100%, 0.3); }
+}