1 files changed, 98 insertions, 88 deletions

diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index 81cda68b94c..458af76cb75 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -1,5 +1,6 @@
 .page-with-sidebar {
   padding-top: $header-height;
+  transition-duration: .3s;
 
   .sidebar-wrapper {
     position: fixed;
@@ -16,7 +17,6 @@
 .sidebar-wrapper {
   z-index: 99;
   background: $background-color;
-  transition-duration: .3s;
 }
 
 .content-wrapper {
@@ -35,6 +35,83 @@
   }
 }
 
+.sidebar-wrapper {
+  .header-logo {
+    border-bottom: 1px solid transparent;
+    float: left;
+    height: $header-height;
+    width: $sidebar_width;
+    position: fixed;
+    z-index: 999;
+    overflow: hidden;
+    transition-duration: .3s;
+
+    a {
+      float: left;
+      height: $header-height;
+      width: 100%;
+      padding: 11px 0 11px 22px;
+      overflow: hidden;
+      outline: none;
+      transition-duration: .3s;
+
+      img {
+        width: 36px;
+        height: 36px;
+      }
+
+      #tanuki-logo, img {
+        float: left;
+      }
+
+      .gitlab-text-container {
+        width: 230px;
+
+        h3 {
+          width: 158px;
+          float: left;
+          margin: 0;
+          margin-left: 14px;
+          font-size: 19px;
+          line-height: 41px;
+          font-weight: normal;
+        }
+      }
+    }
+
+    &:hover {
+      background-color: #EEE;
+    }
+  }
+
+  .sidebar-user {
+    padding: 9px 22px;
+    position: fixed;
+    bottom: 40px;
+    width: $sidebar_width;
+    overflow: hidden;
+    transition-duration: .3s;
+
+    .username {
+      margin-left: 10px;
+      width: $sidebar_width - 2 * 10px;
+      font-size: 16px;
+      line-height: 34px;
+    }
+  }
+}
+
+
+.tanuki-shape {
+  transition: all 0.8s;
+
+  &:hover {
+    fill: rgb(255, 255, 255);
+    transition: all 0.1s;
+  }
+}
+
+
 .nav-sidebar {
   margin-top: 14 + $header-height;
   margin-bottom: 100px;
@@ -61,7 +138,7 @@
       color: $gray;
       display: block;
       text-decoration: none;
-      padding-left: 22px;
+      padding-left: 23px;
       font-weight: normal;
       outline: none;
 
@@ -85,6 +162,10 @@
         padding: 0px 8px;
         @include border-radius(6px);
       }
+
+      &.back-link i {
+        transition-duration: .3s;
+      }
     }
   }
 }
@@ -100,7 +181,6 @@
 
 @mixin expanded-sidebar {
   padding-left: $sidebar_width;
-  transition-duration: .3s;
 
   .sidebar-wrapper {
     width: $sidebar_width;
@@ -114,16 +194,15 @@
 
       &.back-link {
         i {
-          visibility: hidden;
+          opacity: 0;
         }
       }
     }
   }
 }
 
-@mixin folded-sidebar {
-  padding-left: 60px;
-  transition-duration: .3s;
+@mixin collapsed-sidebar {
+  padding-left: $sidebar_collapsed_width;
 
   .sidebar-wrapper {
     width: $sidebar_collapsed_width;
@@ -132,7 +211,7 @@
       width: $sidebar_collapsed_width;
 
       a {
-        padding-left: 12px;
+        padding-left: ($sidebar_collapsed_width - 36) / 2;
 
         .gitlab-text-container {
           display: none;
@@ -143,9 +222,13 @@
     .nav-sidebar {
       width: $sidebar_collapsed_width;
 
-      li a {
-        span {
-          display: none;
+      li {
+        width: auto;
+
+        a {
+          span {
+            display: none;
+          }
         }
       }
     }
@@ -155,7 +238,7 @@
     }
 
     .sidebar-user {
-      padding-left: 12px;
+      padding-left: ($sidebar_collapsed_width - 36) / 2;
       width: $sidebar_collapsed_width;
 
       .username {
@@ -186,11 +269,11 @@
 
 @media (max-width: $screen-md-max) {
   .page-sidebar-collapsed {
-    @include folded-sidebar;
+    @include collapsed-sidebar;
   }
 
   .page-sidebar-expanded {
-    @include folded-sidebar;
+    @include collapsed-sidebar;
   }
 
   .collapse-nav {
@@ -200,83 +283,10 @@
 
 @media(min-width: $screen-md-max) {
   .page-sidebar-collapsed {
-    @include folded-sidebar;
+    @include collapsed-sidebar;
   }
 
   .page-sidebar-expanded {
     @include expanded-sidebar;
   }
 }
-
-.sidebar-user {
-  padding: 9px 22px;
-  position: fixed;
-  bottom: 40px;
-  width: $sidebar_width;
-  overflow: hidden;
-  transition-duration: .3s;
-
-  .username {
-    margin-left: 10px;
-    width: $sidebar_width - 2 * 10px;
-    font-size: 16px;
-    line-height: 34px;
-  }
-}
-
-.sidebar-wrapper {
-  .header-logo {
-    border-bottom: 1px solid transparent;
-    float: left;
-    height: $header-height;
-    width: $sidebar_width;
-    overflow: hidden;
-    transition-duration: .3s;
-
-    a {
-      float: left;
-      height: $header-height;
-      width: 100%;
-      padding: 10px 22px;
-      overflow: hidden;
-      outline: none;
-
-      img {
-        width: 36px;
-        height: 36px;
-      }
-
-      #tanuki-logo, img {
-        float: left;
-      }
-
-      .gitlab-text-container {
-        width: 230px;
-
-        h3 {
-          width: 158px;
-          float: left;
-          margin: 0;
-          margin-left: 14px;
-          font-size: 19px;
-          line-height: 41px;
-          font-weight: normal;
-        }
-      }
-    }
-
-    &:hover {
-      background-color: #EEE;
-    }
-  }
-}
-
-
-.tanuki-shape {
-  transition: all 0.8s;
-
-  &:hover {
-    fill: rgb(255, 255, 255);
-    transition: all 0.1s;
-  }
-}