Creating events to spin and stop spinning the logo.

Logo will spin when user selects another tag on the left bar and stops
when the list of mails is rendered.

Issue #238

1 files changed, 28 insertions, 24 deletions

diff --git a/web-ui/app/scss/_mixins.scss b/web-ui/app/scss/_mixins.scss
index 4360b886..6d0bb1a3 100644
--- a/web-ui/app/scss/_mixins.scss
+++ b/web-ui/app/scss/_mixins.scss
@@ -310,33 +310,37 @@
 
 @mixin logo {
   @keyframes hideshow {
-  0% { fill: lighten($logo_color, 30); }
-  25% { opacity: 1; }
-  100% { opacity: 0; }
-} 
-
-.logo-part {
-  animation: hideshow 0.6s ease infinite;
-  opacity: 1;
-
-  &:nth-child(2) {
-    opacity: 0;
-    animation-delay: 0.1s;
-  }
+    0% { fill: lighten($logo_color, 30); }
+    25% { opacity: 1; }
+    100% { opacity: 0; }
+  } 
 
-  &:nth-child(3) {
-    animation-delay: 0.2s;
-  }
-  &:nth-child(4) {
-    animation-delay: 0.3s;
-  }
-  &:nth-child(5) {
-    animation-delay: 0.4s;
+  .logo-part-animation-off {
+      animation: none;
   }
-  &:nth-child(6) {
-    animation-delay: 0.5s;
+
+  .logo-part-animation-on {
+      animation: hideshow 0.6s ease infinite;
+      opacity: 1;
+
+      &:nth-child(2) {
+        opacity: 0;
+        animation-delay: 0.1s;
+      }
+
+      &:nth-child(3) {
+        animation-delay: 0.2s;
+      }
+      &:nth-child(4) {
+        animation-delay: 0.3s;
+      }
+      &:nth-child(5) {
+        animation-delay: 0.4s;
+      }
+      &:nth-child(6) {
+        animation-delay: 0.5s;
+      }
   }
 }
-}
 
 @include tt-hint;