1 files changed, 30 insertions, 17 deletions

diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 4993ca7572a..971940773f7 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -8,8 +8,8 @@ header {
 
   &.navbar-empty {
     height: $header-height;
-    background: #fff;
-    border-bottom: 1px solid $btn-gray-hover;
+    background: $white-light;
+    border-bottom: 1px solid $white-normal;
 
     .center-logo {
       margin: 8px 0;
@@ -27,7 +27,7 @@ header {
     z-index: 100;
     margin-bottom: 0;
     height: $header-height;
-    background-color: $background-color;
+    background-color: $gray-light;
     border: none;
     border-bottom: 1px solid $border-color;
 
@@ -45,7 +45,7 @@ header {
       padding: 0;
 
       .nav > li > a {
-        color: $gl-icon-color;
+        color: $gl-gray-light;
         font-size: 18px;
         padding: 0;
         margin: ($header-height - 28) / 2 0;
@@ -62,16 +62,21 @@ header {
         &:hover,
         &:focus,
         &:active {
-          background-color: $background-color;
+          background-color: $gray-light;
+          color: darken($gl-gray-light, 30%);
+
+          .todos-pending-count {
+            background: darken($todo-alert-blue, 10%);
+          }
         }
 
         .fa-caret-down {
-          font-size: 15px;
+          font-size: 14px;
         }
       }
 
       .navbar-toggle {
-        color: #666;
+        color: $nav-toggle-gray;
         margin: 6px 0;
         border-radius: 0;
         position: absolute;
@@ -79,11 +84,11 @@ header {
         padding: 6px 10px;
 
         &:hover {
-          background-color: $btn-gray-hover;
+          background-color: $white-normal;
         }
 
         &.active {
-          color: $gl-icon-color;
+          color: $gl-gray-light;
         }
       }
     }
@@ -95,14 +100,10 @@ header {
       font-size: 18px;
       padding: 6px 10px;
       border: none;
-      background-color: $background-color;
+      background-color: $gray-light;
 
       &:hover {
-        background-color: $btn-gray-hover;
-      }
-
-      &:focus {
-        outline: none;
+        background-color: $white-normal;
       }
     }
   }
@@ -155,8 +156,8 @@ header {
       position: relative;
       padding-right: 20px;
       margin: 0;
-      font-size: 19px;
-      max-width: 400px;
+      font-size: 18px;
+      max-width: 385px;
       display: inline-block;
       line-height: $header-height;
       font-weight: normal;
@@ -195,6 +196,10 @@ header {
         font-size: 10px;
         text-align: center;
         cursor: pointer;
+
+        &:hover {
+          color: darken($color: $gl-text-color, $amount: 30%);
+        }
       }
 
       .project-item-select {
@@ -222,6 +227,14 @@ header {
   }
 }
 
+.page-sidebar-pinned.right-sidebar-expanded {
+  @media (max-width: $screen-md-max) {
+    .header-content .title {
+      width: 300px;
+    }
+  }
+}
+
 @media (max-width: $screen-xs-max) {
   header .container-fluid {
     font-size: 18px;