Merge branch 'navigation-redesign' into 'master'

Grey header and fluid profile navigation

Based on https://gitlab.com/gitlab-org/gitlab-ce/issues/14838#note_5083863 

cc @skyruler

See merge request !3968

app/assets/stylesheets/framework/header.scss

@@ -26,9 +26,9 @@ header {
     z-index: 100;
     margin-bottom: 0;
     min-height: $header-height;
-    background-color: #fff;
+    background-color: $background-color;
     border: none;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid $border-color;
 
     .container-fluid {
       width: 100% !important;
@@ -47,7 +47,7 @@ header {
         text-align: center;
 
         &:hover, &:focus, &:active {
-          background-color: #fff;
+          background-color: $background-color;
         }
       }
 

app/assets/stylesheets/framework/nav.scss

@@ -185,3 +185,22 @@
     }
   }
 }
+
+.layout-nav {
+  background: $background-color;
+  border-bottom: 1px solid $border-color;
+
+  .controls {
+    float: right;
+    position: relative;
+    top: 10px;
+
+    .dropdown {
+      margin-left: 7px;
+    }
+  }
+
+  .nav-links {
+    border-bottom: none;
+  }
+}

app/views/layouts/_page.html.haml

@@ -22,13 +22,13 @@
         = image_tag avatar_icon(current_user, 60), alt: 'Profile', class: 'avatar avatar s36'
         .username
           = current_user.username
-  .content-wrapper
-    = render "layouts/flash"
-    = yield :flash_message
   - if defined?(nav) && nav
     .layout-nav
-        %div{ class: container_class }
+      .container-fluid
         = render "layouts/nav/#{nav}"
+  .content-wrapper
+    = render "layouts/flash"
+    = yield :flash_message
     %div{ class: (container_class unless @no_container) }
       .content
         .clearfix