1 files changed, 111 insertions, 46 deletions

diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 71a7ecab8ef..a7bcb456560 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -2,16 +2,27 @@
  *  Application Header
  *
  */
+@mixin tanuki-logo-colors($path-color) {
+  fill: $path-color;
+  transition: all 0.8s;
+
+  &:hover,
+  &.highlight {
+    fill: lighten($path-color, 25%);
+    transition: all 0.1s;
+  }
+}
+
 header {
-  transition-duration: .3s;
+  transition: padding $sidebar-transition-duration;
 
   &.navbar-empty {
-    height: 58px;
+    height: $header-height;
     background: #fff;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid $btn-gray-hover;
 
     .center-logo {
-      margin: 11px 0;
+      margin: 8px 0;
       text-align: center;
 
       #tanuki-logo, img {
@@ -22,13 +33,21 @@ header {
   }
 
   &.navbar-gitlab {
-    padding: 0 20px;
+    padding: 0 16px;
     z-index: 100;
     margin-bottom: 0;
-    min-height: $header-height;
-    background-color: #fff;
+    height: $header-height;
+    background-color: $background-color;
     border: none;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid $border-color;
+
+    @media (max-width: $screen-xs-min) {
+      padding: 0 16px;
+    }
+
+    &.with-horizontal-nav {
+      border-bottom: none;
+    }
 
     .container-fluid {
       width: 100% !important;
@@ -36,7 +55,7 @@ header {
       padding: 0;
 
       .nav > li > a {
-        color: #7f8fa4;
+        color: $gl-icon-color;
         font-size: 18px;
         padding: 0;
         margin: ($header-height - 28) / 2 0;
@@ -47,7 +66,7 @@ header {
         text-align: center;
 
         &:hover, &:focus, &:active {
-          background-color: #fff;
+          background-color: $background-color;
         }
       }
 
@@ -56,34 +75,92 @@ header {
         margin: 6px 0;
         border-radius: 0;
         position: absolute;
-        right: 2px;
+        right: -10px;
+        padding: 6px 10px;
 
         &:hover {
-          background-color: #eee;
+          background-color: $btn-gray-hover;
         }
+
         &.active {
-          color: #7f8fa4;
+          color: $gl-icon-color;
         }
       }
     }
+
+    &.header-collapsed {
+      padding: 0 16px;
+    }
+
+    .side-nav-toggle {
+      position: absolute;
+      left: -10px;
+      margin: 6px 0;
+      font-size: 18px;
+      padding: 6px 10px;
+      border: none;
+      background-color: $background-color;
+
+      &:hover {
+        background-color: $btn-gray-hover;
+      }
+
+      &:focus {
+        outline: none;
+      }
+    }
   }
 
   .header-content {
+    position: relative;
     height: $header-height;
+    padding-left: 30px;
+
+    @media (min-width: $screen-sm-min) {
+      padding-right: 0;
+    }
+
+    .dropdown-menu {
+      margin-top: -5px;
+    }
+
+    .header-logo {
+      position: absolute;
+      left: 50%;
+      margin-left: -18px;
+      top: 7px;
+      transition-duration: .3s;
+      z-index: 999;
+
+      &:hover {
+        cursor: pointer;
+      }
+
+      @media (max-width: $screen-xs-max) {
+        right: 25px;
+        left: auto;
+      }
+    }
 
     .title {
       margin: 0;
       font-size: 19px;
+      max-width: 400px;
+      display: inline-block;
       line-height: $header-height;
       font-weight: normal;
-      color: #4c4e54;
+      color: $gl-text-color;
       overflow: hidden;
       text-overflow: ellipsis;
       vertical-align: top;
       white-space: nowrap;
 
+      @media (max-width: $screen-sm-max) {
+        max-width: 190px;
+      }
+
       a {
-        color: #4c4e54;
+        color: $gl-text-color;
         &:hover {
           text-decoration: underline;
         }
@@ -109,52 +186,40 @@ header {
     .navbar-collapse {
       float: right;
       border-top: none;
-    }
-  }
-
-  .search {
-    margin-right: 10px;
-    margin-left: 10px;
-    margin-top: ($header-height - 36) / 2;
-
-    form {
-      margin: 0;
-      padding: 0;
-    }
-
-    .search-input {
-      width: 220px;
 
-      &:focus {
-        @include box-shadow(none);
-        outline: none;
+      @media (max-width: $screen-xs-max) {
+        float: none;
       }
     }
   }
 
+  .project-item-select-holder {
+    display: inline;
+  }
+
   .impersonation i {
     color: $red-normal;
   }
 }
 
-@mixin collapsed-header {
-  margin-left: $sidebar_collapsed_width;
-}
-
-.header-collapsed {
-  margin-left: $sidebar_collapsed_width;
+#tanuki-logo {
 
-  @media (min-width: $screen-md-min) {
-    @include collapsed-header;
+  #tanuki-left-ear,
+  #tanuki-right-ear,
+  #tanuki-nose {
+    @include tanuki-logo-colors($tanuki-red);
   }
-}
 
-.header-expanded {
-  margin-left: $sidebar_collapsed_width;
+  #tanuki-left-eye,
+  #tanuki-right-eye {
+    @include tanuki-logo-colors($tanuki-orange);
+  }
 
-  @media (min-width: $screen-md-min) {
-    margin-left: $sidebar_width;
+  #tanuki-left-cheek,
+  #tanuki-right-cheek {
+    @include tanuki-logo-colors($tanuki-yellow);
   }
+
 }
 
 @media (max-width: $screen-xs-max) {