From ef0330eae9b75fa79170b9f816235e793521449b Mon Sep 17 00:00:00 2001
From: Yuki <aaron.ahmed.eve@gmail.com>
Date: Wed, 22 Apr 2015 07:12:12 +0530
Subject: [PATCH] navbar mobile consistency

---
 app/assets/stylesheets/application.css.scss |  1 +
 app/assets/stylesheets/scss/navbar.scss     | 67 ++++++++++++++-------
 2 files changed, 45 insertions(+), 23 deletions(-)

diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
index f21b9c34..1f1549fd 100644
--- a/app/assets/stylesheets/application.css.scss
+++ b/app/assets/stylesheets/application.css.scss
@@ -32,6 +32,7 @@ $navbar-inverse-link-hover-color: #ffffff;
 $navbar-inverse-link-hover-bg: transparent;
 $navbar-inverse-link-active-color: #ffffff;
 $navbar-inverse-link-active-bg: transparent;
+$navbar-inverse-link-active-bg-mobile: darken(#5e35b1, 7%);
 $navbar-inverse-link-disabled-color: darken(#fff, 12.5%);
 $navbar-inverse-link-disabled-bg: transparent;
 $navbar-inverse-brand-color: $navbar-inverse-link-color;
diff --git a/app/assets/stylesheets/scss/navbar.scss b/app/assets/stylesheets/scss/navbar.scss
index aa851a3a..3efc537f 100644
--- a/app/assets/stylesheets/scss/navbar.scss
+++ b/app/assets/stylesheets/scss/navbar.scss
@@ -133,33 +133,54 @@
   border: none;
 }
 
-nav.navbar .nav > li:not(.profile--image-dropdown) {
-  -moz-osx-font-smoothing: grayscale;
-  position: relative;
+@media (min-width: 768px) {
+  nav.navbar .nav > li:not(.profile--image-dropdown) {
+    -moz-osx-font-smoothing: grayscale;
+    position: relative;
 
-  &:before {
-      content: "";
-      position: absolute;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background: $navbar-inverse-link-color;
-      height: 0px;
-      -webkit-transition-property: height;
-      transition-property: height;
-      -webkit-transition-duration: 0.3s;
-      transition-duration: 0.3s;
-      -webkit-transition-timing-function: ease-out;
-      transition-timing-function: ease-out;
-  }
-
-  &:hover, &:focus, &:active {
     &:before {
-      height: 4px
+        content: "";
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: $navbar-inverse-link-color;
+        height: 0px;
+        -webkit-transition-property: height;
+        transition-property: height;
+        -webkit-transition-duration: 0.3s;
+        transition-duration: 0.3s;
+        -webkit-transition-timing-function: ease-out;
+        transition-timing-function: ease-out;
+    }
+
+    &:hover, &:focus, &:active {
+      &:before {
+        height: 4px
+      }
+    }
+
+    &.active:before {
+      height: 4px;
     }
   }
+}
 
-  &.active:before {
-    height: 4px;
+@media (max-width: 768px) {
+  nav.navbar .nav {
+    margin-bottom: 0;
+    margin-top: 0;
+
+    & > li {
+      &.active a {
+        background-color: $navbar-inverse-link-active-bg-mobile !important;
+      }
+
+      &.dropdown.profile--image-dropdown a .visible-xs {
+        padding-left: 15px;
+        line-height: 40px;
+        margin: 0;
+      }
+    }
   }
 }