Merge pull request #386 from HospitalRun/nav-tweaks

Nav design tweaks
HospitalRun · Mar 20, 2016 · 9c9fda9 · 9c9fda9
2 parents 222c16e + 5bc4f0e
commit 9c9fda9
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 8 deletions.
diff --git a/app/styles/_variables_mixins.scss b/app/styles/_variables_mixins.scss
@@ -69,5 +69,15 @@ $view_sub_nav:          #6784a2;
   padding: 0 15px;
 }
 
+// animation and transitions
+
+@mixin transition_all {
+  transition: all 200ms ease;
+}
+
+@mixin transition_opacity {
+  transition: opacity 200ms ease;
+}
+
 
 // end mixins ------------/
diff --git a/app/styles/app.scss b/app/styles/app.scss
@@ -8,10 +8,10 @@
 @import 'temp_misc';
 @import 'sign_in_screen';
 @import 'loading_notice';
-@import 'sidebar_nav';
 
 // Components
 
+@import 'components/sidebar_nav';
 @import 'components/panel';
 @import 'components/form_styles';
 @import 'components/tab_nav';

diff --git a/app/styles/_sidebar_nav.scss → app/styles/components/_sidebar_nav.scss b/app/styles/_sidebar_nav.scss → app/styles/components/_sidebar_nav.scss
@@ -43,6 +43,7 @@
 }
 
 .sidebar-nav-logo {
+  @include transition_opacity;
   display: inline-block;
   padding: 0 15px;
   height: 55px;
@@ -52,6 +53,11 @@
     top: 15px;
     width: 150px;
   }
+
+  &:hover,
+  &:focus {
+    opacity: .8;
+  }
 }
 
 .settings-trigger {
@@ -152,6 +158,7 @@
 
   // main section link
   .primary-section-link {
+    @include transition_all;
     display: block;
     border-bottom: 1px solid $navy_drkest;
     background: $navy_mid2;
@@ -162,6 +169,7 @@
     font-size: 18px;
 
     .mega-octicon {
+      @include transition_all;
       float: left;
       margin-right: 12px;
       width: 24px;
@@ -175,26 +183,40 @@
   }
 
   // sub section link
+  .category-sub-items {
+    border-bottom: 1px solid $navy_drkest;
+    background: #3a4d63;
+    padding: 5px 0;
+  }
+
   .category-sub-item {
+    @include transition_all;
     display: block;
-    border-bottom: 1px solid $navy_drkest;
     background: $navy_mid3;
     padding: 0 15px;
-    height: 42px;
-    line-height: 42px;
+    height: 36px;
+    line-height: 36px;
     color: $sidebar_sublink_text;
-    font-size: 16px;
+    font-size: 15px;
+
+    &:hover {
+      background: $navy_mid;
+      color: $white;
 
-    &:hover { background: $navy_mid;
-      .octicon { color: $white; }
+      .octicon {
+        margin-right: 2px;
+        margin-left: 10px;
+        color: $white;
+      }
     }
 
     .octicon {
+      @include transition_all;
       float: left;
       margin-right: 6px;
       margin-left: 6px;
       width: 24px;
-      line-height: 42px;
+      line-height: 36px;
     }
   }