From 1699536af9f9121a496339bc9da3d4f8cba2d5a7 Mon Sep 17 00:00:00 2001
From: Eduard Kuzmenko <thanwords24@gmail.com>
Date: Fri, 11 Dec 2020 06:21:03 +0200
Subject: [PATCH] Highlight one document item from many

---
 src/scss/partials/_chatBubble.scss | 40 ++++++++++++++++++++----------
 1 file changed, 27 insertions(+), 13 deletions(-)

diff --git a/src/scss/partials/_chatBubble.scss b/src/scss/partials/_chatBubble.scss
index 372d4f2d..bc8bd579 100644
--- a/src/scss/partials/_chatBubble.scss
+++ b/src/scss/partials/_chatBubble.scss
@@ -1067,18 +1067,7 @@ $bubble-margin: .25rem;
         left: -75vw;
       }
 
-      &.is-selected {
-        .document-selection {
-          background-color: rgba(77, 142, 80, .4);
-          animation: fade-in-opacity .2s linear forwards;
-        }
-
-        &.backwards {
-          .document-selection, .document-wrapper:before {
-            animation: fade-in-backwards-opacity .2s linear forwards;
-          }
-        } 
-
+      &.is-highlighted, &.is-selected {
         .document-wrapper {
           &:before {
             content: " ";
@@ -1088,12 +1077,37 @@ $bubble-margin: .25rem;
             bottom: 0;
             left: 0;
             background-color: rgba(0, 0, 0, .06);
-            animation: fade-in-opacity .2s linear forwards;
             border-radius: inherit;
           }
         }
       }
 
+      &.is-highlighted {
+        .document-selection {
+          background-color: rgba(0, 132, 255, .3);
+        }
+
+        .document-selection, .document-wrapper:before {
+          animation: bubbleSelected 2s linear;
+        }
+      }
+
+      &.is-selected {
+        .document-selection {
+          background-color: rgba(77, 142, 80, .4);
+        }
+
+        .document-selection, .document-wrapper:before {
+          animation: fade-in-opacity .2s linear forwards;
+        }
+
+        &.backwards {
+          .document-selection, .document-wrapper:before {
+            animation: fade-in-backwards-opacity .2s linear forwards;
+          }
+        }
+      }
+
       .bubble-select-checkbox {
         left: 2rem;
         top: 2rem;