From 6fff36fa155fa8aa236e502333834c8515a1f113 Mon Sep 17 00:00:00 2001
From: Ben Klein <robobenklein@gmail.com>
Date: Tue, 13 Apr 2021 00:41:41 +0000
Subject: [PATCH] client/css: animate compact-tags updates

---
 client/css/tag-input-control.styl | 27 ++++++++++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

diff --git a/client/css/tag-input-control.styl b/client/css/tag-input-control.styl
index bc34cb9c..8ededb98 100644
--- a/client/css/tag-input-control.styl
+++ b/client/css/tag-input-control.styl
@@ -86,6 +86,18 @@ div.tag-input
             font-size: 90%
             unselectable()
 
+@keyframes tag-background-updated
+    from
+        background-position: 200% 0%
+    to
+        background-position: 0% 0%
+
+@keyframes new-tag-added
+    from
+        max-height: 0
+    to
+        max-height: 5em
+
 ul.compact-tags
     width: 100%
     margin: 0.5em 0 0 0
@@ -104,14 +116,23 @@ ul.compact-tags
             outline: 0
             box-shadow: inset 0 0 0 2px $main-color
         &.implication
-            background: $implied-tag-background-color
+            // background: $implied-tag-background-color
             color: $implied-tag-text-color
+            background: linear-gradient(90deg, transparent, transparent, $implied-tag-background-color)
+            background-size: 200%
+            animation: tag-background-updated 2s ease forwards
         &.new
-            background: $new-tag-background-color
+            // background: $new-tag-background-color
             color: $new-tag-text-color
+            background: linear-gradient(90deg, transparent, transparent, $new-tag-background-color)
+            background-size: 200%;
+            animation: new-tag-added 1s ease forwards, tag-background-updated 2s ease forwards
         &.duplicate
-            background: $duplicate-tag-background-color
+            // background: $duplicate-tag-background-color
             color: $duplicate-tag-text-color
+            background: linear-gradient(90deg, transparent, transparent, $duplicate-tag-background-color)
+            background-size: 200%
+            animation: tag-background-updated 2s ease forwards
     i
         padding-right: 0.4em