From 1d320fd847c1459e6c8269431ae56a1501a27d70 Mon Sep 17 00:00:00 2001
From: pixeldesu <pixeldesu@nerdwerks.org>
Date: Thu, 11 Dec 2014 15:49:01 +0100
Subject: [PATCH] added navbar toggle animation

---
 app/assets/stylesheets/scss/navbar.scss | 58 +++++++++++++++++++++++++
 app/views/layouts/_header.html.haml     | 11 +++--
 2 files changed, 66 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/scss/navbar.scss b/app/assets/stylesheets/scss/navbar.scss
index d4ecebb9..1b2d99bd 100644
--- a/app/assets/stylesheets/scss/navbar.scss
+++ b/app/assets/stylesheets/scss/navbar.scss
@@ -6,4 +6,62 @@
 .navbar .nav .active .badge {
   padding: 3px 6px 3px;
   background-color: $navbar-inverse-bg;
+}
+
+.navbar--inbox-animation {
+  animation: animationFrames ease-in-out 1.5s;
+  animation-iteration-count: infinite;
+  -webkit-animation: animationFrames ease-in-out 1.5s;
+  -webkit-animation-iteration-count: infinite;
+  -moz-animation: animationFrames ease-in-out 1.5s;
+  -moz-animation-iteration-count: infinite;
+  -o-animation: animationFrames ease-in-out 1.5s;
+  -o-animation-iteration-count: infinite;
+  -ms-animation: animationFrames ease-in-out 1.5s;
+  -ms-animation-iteration-count: infinite;
+}
+
+@keyframes animationFrames{
+  0% {
+    background-color: #fff;
+  }
+  100% {
+    background-color: $navbar-inverse-toggle-border-color;
+  }
+}
+
+@-moz-keyframes animationFrames{
+  0% {
+    background-color: #fff;
+  }
+  100% {
+    background-color: $navbar-inverse-toggle-border-color;
+  }
+}
+
+@-webkit-keyframes animationFrames {
+  0% {
+    background-color: #fff;
+  }
+  100% {
+    background-color: $navbar-inverse-toggle-border-color;
+  }
+}
+
+@-o-keyframes animationFrames {
+  0% {
+    background-color: #fff;
+  }
+  100% {
+    background-color: $navbar-inverse-toggle-border-color;
+  }
+}
+
+@-ms-keyframes animationFrames {
+  0% {
+    background-color: #fff;
+  }
+  100% {
+    background-color: $navbar-inverse-toggle-border-color;
+  }
 }
\ No newline at end of file
diff --git a/app/views/layouts/_header.html.haml b/app/views/layouts/_header.html.haml
index 1064196c..4f226944 100644
--- a/app/views/layouts/_header.html.haml
+++ b/app/views/layouts/_header.html.haml
@@ -3,9 +3,14 @@
     .navbar-header
       %button.navbar-toggle{"data-target" => "#j2-main-navbar-collapse", "data-toggle" => "collapse", type: "button"}
         %span.sr-only Toggle navigation
-        %span.icon-bar
-        %span.icon-bar
-        %span.icon-bar
+        - if inbox_count > 0
+          %span.icon-bar.navbar--inbox-animation
+          %span.icon-bar.navbar--inbox-animation
+          %span.icon-bar.navbar--inbox-animation
+        - else
+          %span.icon-bar
+          %span.icon-bar
+          %span.icon-bar
       %a.navbar-brand{href: "/"}= APP_CONFIG['site_name']
     #j2-main-navbar-collapse.collapse.navbar-collapse
       - if user_signed_in?