From 0801ce943124f4f33110e3443ad35e840e8455a8 Mon Sep 17 00:00:00 2001
From: Joel Glovier <jglovier@github.com>
Date: Sat, 19 Mar 2016 19:30:25 -0700
Subject: [PATCH 1/3] reduce vertical size of sub items; extract to own scss
 file

---
 app/styles/app.scss                           |  2 +-
 app/styles/{ => components}/_sidebar_nav.scss | 15 ++++++++++-----
 2 files changed, 11 insertions(+), 6 deletions(-)
 rename app/styles/{ => components}/_sidebar_nav.scss (95%)

diff --git a/app/styles/app.scss b/app/styles/app.scss
index 3b00250c5a..90236c3639 100644
--- 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 b/app/styles/components/_sidebar_nav.scss
similarity index 95%
rename from app/styles/_sidebar_nav.scss
rename to app/styles/components/_sidebar_nav.scss
index 819a553def..002fec05d5 100644
--- a/app/styles/_sidebar_nav.scss
+++ b/app/styles/components/_sidebar_nav.scss
@@ -175,15 +175,20 @@
   }
 
   // sub section link
+  .category-sub-items {
+    border-bottom: 1px solid $navy_drkest;
+    background: #3a4d63;
+    padding: 5px 0;
+  }
+
   .category-sub-item {
     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;
       .octicon { color: $white; }
@@ -194,7 +199,7 @@
       margin-right: 6px;
       margin-left: 6px;
       width: 24px;
-      line-height: 42px;
+      line-height: 36px;
     }
   }
 

From a3fc972102be457ab5fab4fb557b8ccaa5762e2b Mon Sep 17 00:00:00 2001
From: Joel Glovier <jglovier@github.com>
Date: Sat, 19 Mar 2016 19:38:31 -0700
Subject: [PATCH 2/3] add transition for nav hover effects

---
 app/styles/_variables_mixins.scss       |  6 ++++++
 app/styles/components/_sidebar_nav.scss | 15 +++++++++++++--
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/app/styles/_variables_mixins.scss b/app/styles/_variables_mixins.scss
index e0d835b3ab..7896b413e5 100644
--- a/app/styles/_variables_mixins.scss
+++ b/app/styles/_variables_mixins.scss
@@ -69,5 +69,11 @@ $view_sub_nav:          #6784a2;
   padding: 0 15px;
 }
 
+// animation and transitions
+
+@mixin transition_all {
+  transition: all 200ms ease;
+}
+
 
 // end mixins ------------/
diff --git a/app/styles/components/_sidebar_nav.scss b/app/styles/components/_sidebar_nav.scss
index 002fec05d5..dc1520e8d6 100644
--- a/app/styles/components/_sidebar_nav.scss
+++ b/app/styles/components/_sidebar_nav.scss
@@ -152,6 +152,7 @@
 
   // main section link
   .primary-section-link {
+    @include transition_all;
     display: block;
     border-bottom: 1px solid $navy_drkest;
     background: $navy_mid2;
@@ -162,6 +163,7 @@
     font-size: 18px;
 
     .mega-octicon {
+      @include transition_all;
       float: left;
       margin-right: 12px;
       width: 24px;
@@ -182,6 +184,7 @@
   }
 
   .category-sub-item {
+    @include transition_all;
     display: block;
     background: $navy_mid3;
     padding: 0 15px;
@@ -190,11 +193,19 @@
     color: $sidebar_sublink_text;
     font-size: 15px;
 
-    &:hover { background: $navy_mid;
-      .octicon { color: $white; }
+    &:hover {
+      background: $navy_mid;
+      color: $white;
+
+      .octicon {
+        margin-right: 2px;
+        margin-left: 10px;
+        color: $white;
+      }
     }
 
     .octicon {
+      @include transition_all;
       float: left;
       margin-right: 6px;
       margin-left: 6px;

From 5bc4f0e8fdf035b488dd0246b8d3450943b20f59 Mon Sep 17 00:00:00 2001
From: Joel Glovier <jglovier@github.com>
Date: Sat, 19 Mar 2016 19:40:53 -0700
Subject: [PATCH 3/3] add hover effect to logo

---
 app/styles/_variables_mixins.scss       | 4 ++++
 app/styles/components/_sidebar_nav.scss | 6 ++++++
 2 files changed, 10 insertions(+)

diff --git a/app/styles/_variables_mixins.scss b/app/styles/_variables_mixins.scss
index 7896b413e5..fbd70c90f3 100644
--- a/app/styles/_variables_mixins.scss
+++ b/app/styles/_variables_mixins.scss
@@ -75,5 +75,9 @@ $view_sub_nav:          #6784a2;
   transition: all 200ms ease;
 }
 
+@mixin transition_opacity {
+  transition: opacity 200ms ease;
+}
+
 
 // end mixins ------------/
diff --git a/app/styles/components/_sidebar_nav.scss b/app/styles/components/_sidebar_nav.scss
index dc1520e8d6..ba22142657 100644
--- a/app/styles/components/_sidebar_nav.scss
+++ b/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 {