Customization: Added parent tag classes

[bookstack] / resources / sass / _animations.scss

diff --git a/resources/sass/_animations.scss b/resources/sass/_animations.scss
index 85fd96206393a64581c08b829587d01cc09b3e06..ccbe36161b67c0a4d0781b16283fc6d50f0f94ca 100644 (file)
--- a/resources/sass/_animations.scss
+++ b/resources/sass/_animations.scss
@@ -2,7 +2,7 @@
 .anim.fadeIn {
   opacity: 0;
   animation-name: fadeIn;
 .anim.fadeIn {
   opacity: 0;
   animation-name: fadeIn;

-  animation-duration: 180ms;
+  animation-duration: 120ms;

   animation-timing-function: ease-in-out;
   animation-fill-mode: forwards;
 }
   animation-timing-function: ease-in-out;
   animation-fill-mode: forwards;
 }


@@ -16,23 +16,21 @@
   }
 }
 
   }
 }
 

-.anim.searchResult {
-  opacity: 0;
-  transform: translate3d(580px, 0, 0);
-  animation-name: searchResult;
-  animation-duration: 220ms;
+.search-suggestions-animation{
+  animation-name: searchSuggestions;
+  animation-duration: 120ms;

   animation-fill-mode: forwards;
   animation-timing-function: cubic-bezier(.62, .28, .23, .99);
 }
 
   animation-fill-mode: forwards;
   animation-timing-function: cubic-bezier(.62, .28, .23, .99);
 }
 

-@keyframes searchResult {
+@keyframes searchSuggestions {

   0% {
   0% {

-    opacity: 0;
-    transform: translate3d(400px, 0, 0);
+    opacity: .5;
+    transform: scale(0.9);

   }
   100% {
     opacity: 1;
   }
   100% {
     opacity: 1;

-    transform: translate3d(0, 0, 0);
+    transform: scale(1);

   }
 }
 
   }
 }
 


@@ -69,4 +67,26 @@
   animation-duration: 180ms;
   animation-delay: 0s;
   animation-timing-function: cubic-bezier(.62, .28, .23, .99);
   animation-duration: 180ms;
   animation-delay: 0s;
   animation-timing-function: cubic-bezier(.62, .28, .23, .99);

+}
+
+@keyframes highlight {
+  0% {
+    background-color: var(--color-primary-light);
+  }
+  33% {
+    background-color: transparent;
+  }
+  66% {
+    background-color: var(--color-primary-light);
+  }
+  100% {
+    background-color: transparent;
+  }
+}
+
+.anim-highlight {
+  animation-name: highlight;
+  animation-duration: 2s;
+  animation-delay: 0s;
+  animation-timing-function: linear;

 }
\ No newline at end of file
 }
\ No newline at end of file