1 files changed, 39 insertions, 146 deletions

diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index f90d7a806d3..4668e7e911b 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -1,11 +1,3 @@
-#logo {
-  z-index: 2;
-  position: absolute;
-  width: 58px;
-  cursor: pointer;
-  margin-top: 8px;
-}
-
 .page-with-sidebar {
   padding-top: $header-height;
   transition-duration: .3s;
@@ -20,12 +12,6 @@
     height: 100%;
     transition-duration: .3s;
   }
-
-  .gitlab-text-container-link {
-    z-index: 1;
-    position: absolute;
-    left: 0;
-  }
 }
 
 .sidebar-wrapper {
@@ -49,58 +35,11 @@
 }
 
 .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-left: 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: 50px;
-          font-size: 19px;
-          line-height: 50px;
-          font-weight: normal;
-        }
-      }
-    }
-
-    &:hover {
-      background-color: #eee;
-    }
-  }
 
   .sidebar-user {
-    padding: 7px 22px;
+    padding: 15px 22px;
     position: fixed;
-    bottom: 40px;
+    bottom: 0;
     width: $sidebar_width;
     overflow: hidden;
     transition-duration: .3s;
@@ -126,8 +65,8 @@
 
 
 .nav-sidebar {
-  margin-top: 14 + $header-height;
-  margin-bottom: 100px;
+  margin-top: 22 + $header-height;
+  margin-bottom: 116px;
   transition-duration: .3s;
   list-style: none;
   overflow: hidden;
@@ -144,14 +83,19 @@
       margin-top: 10px;
     }
 
+    .icon-container {
+      width: 34px;
+      display: inline-block;
+      text-align: center;
+    }
+
     a {
-      padding: 7px 15px;
+      width: $sidebar_width;
+      padding: 7px 15px 7px 23px;
       font-size: $gl-font-size;
       line-height: 24px;
-      color: $gray;
       display: block;
       text-decoration: none;
-      padding-left: 23px;
       font-weight: normal;
       outline: none;
 
@@ -164,16 +108,12 @@
       }
 
       i {
-        width: 16px;
-        color: $gray-light;
-        margin-right: 13px;
+        font-size: 16px;
       }
 
-      .count {
-        float: right;
-        background: #eee;
-        padding: 0 8px;
-        @include border-radius(6px);
+      i,
+      svg {
+        margin-right: 13px;
       }
 
       &.back-link i {
@@ -181,6 +121,12 @@
       }
     }
   }
+
+  .count {
+    float: right;
+    padding: 0 8px;
+    @include border-radius(6px);
+  }
 }
 
 .sidebar-subnav {
@@ -195,11 +141,12 @@
 .collapse-nav a {
   width: $sidebar_width;
   position: fixed;
-  bottom: 0;
+  top: 0;
   left: 0;
-  font-size: 13px;
+  padding: 5px 0;
+  font-size: 18px;
   background: transparent;
-  height: 40px;
+  height: 50px;
   text-align: center;
   line-height: 40px;
   transition-duration: .3s;
@@ -217,37 +164,13 @@
 }
 
 .page-sidebar-collapsed {
-  padding-left: $sidebar_collapsed_width;
-
-  @media (max-width: $screen-xs-min) {
-    padding-left: 0;
-  }
+  padding-left: 0;
 
   .sidebar-wrapper {
-    width: $sidebar_collapsed_width;
-
-    @media (max-width: $screen-xs-min) {
-      width: 0;
-    }
-
-    .header-logo {
-      width: $sidebar_collapsed_width;
-
-      @media (max-width: $screen-xs-min) {
-        width: 0;
-      }
-
-      a {
-        padding-left: ($sidebar_collapsed_width - 36) / 2;
-
-        .gitlab-text-container {
-          display: none;
-        }
-      }
-    }
+    width: 0;
 
     .nav-sidebar {
-      width: $sidebar_collapsed_width;
+      width: 0;
 
       li {
         width: auto;
@@ -261,46 +184,28 @@
     }
 
     .collapse-nav a {
-      width: $sidebar_collapsed_width;
+      width: 0;
 
-      @media (max-width: $screen-xs-min) {
-        width: 0;
+      i {
+        display: none;
       }
     }
 
     .sidebar-user {
-      padding-left: ($sidebar_collapsed_width - 36) / 2;
-      width: $sidebar_collapsed_width;
-
-      @media (max-width: $screen-xs-min) {
-        width: 0;
-        padding-left: 0;
-        padding-right: 0;
-      }
+      width: 0;
+      padding-left: 0;
+      padding-right: 0;
 
       .username {
         display: none;
       }
     }
   }
-
-  .layout-nav {
-    padding-right: $sidebar_collapsed_width;
-
-    @media (max-width: $screen-xs-min) {
-      padding-right: 0;;
-    }
-  }
 }
 
 .page-sidebar-expanded {
-  padding-left: $sidebar_collapsed_width;
 
-  @media (min-width: $screen-md-min) {
-    padding-left: $sidebar_width;
-  }
-
-  @media (max-width: $screen-xs-min) {
+  @media (max-width: $screen-sm-max) {
     padding-left: 0;
   }
 
@@ -321,20 +226,6 @@
       }
     }
   }
-
-  .layout-nav {
-    @media (max-width: $screen-xs-min) {
-      padding-right: 0;;
-    }
-
-    @media (min-width: $screen-xs-min) and (max-width: $screen-md-min) {
-      padding-right: 62px;
-    }
-
-    @media (min-width: $screen-md-min) {
-      padding-right: $sidebar_width;
-    }
-  }
 }
 
 .right-sidebar-collapsed {
@@ -353,7 +244,9 @@
   padding-right: 0;
 
   @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
-    padding-right: $sidebar_collapsed_width;
+    &:not(.build-sidebar) {
+      padding-right: $sidebar_collapsed_width;
+    }
   }
 
   @media (min-width: $screen-md-min) {