7 files changed, 113 insertions, 8 deletions

diff --git a/app/assets/stylesheets/framework/avatar.scss b/app/assets/stylesheets/framework/avatar.scss
index 5aa425dab6c..f5ce70b606b 100644
--- a/app/assets/stylesheets/framework/avatar.scss
+++ b/app/assets/stylesheets/framework/avatar.scss
@@ -28,6 +28,7 @@
   &.s46 { width: 46px; height: 46px; margin-right: 15px; }
   &.s48 { width: 48px; height: 48px; margin-right: 10px; }
   &.s60 { width: 60px; height: 60px; margin-right: 12px; }
+  &.s70 { width: 70px; height: 70px; margin-right: 14px; }
   &.s90 { width: 90px; height: 90px; margin-right: 15px; }
   &.s110 { width: 110px; height: 110px; margin-right: 15px; }
   &.s140 { width: 140px; height: 140px; margin-right: 20px; }
diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss
index af6f22da281..434a26d57c6 100644
--- a/app/assets/stylesheets/framework/blocks.scss
+++ b/app/assets/stylesheets/framework/blocks.scss
@@ -155,6 +155,41 @@
       right: auto;
     }
   }
+
+  &.groups-cover-block {
+    background: $white-light;
+    border-bottom: 1px solid $border-color;
+    text-align: left;
+    padding: 24px 0;
+
+    .group-info {
+      .cover-title {
+        margin-top: 9px;
+      }
+
+      p {
+        margin-bottom: 0;
+      }
+    }
+
+    @media (max-width: $screen-xs-max) {
+      text-align: center;
+
+      .avatar {
+        float: none;
+      }
+    }
+  }
+
+  .group-info {
+
+    h1 {
+      display: inline;
+      font-weight: normal;
+      font-size: 24px;
+      color: $gl-title-color;
+    }
+  }
 }
 
 .block-connector {
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 5fa10d29a87..97f9d582007 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -30,6 +30,10 @@ header {
     border: none;
     border-bottom: 1px solid $border-color;
 
+    &.with-horizontal-nav {
+      border-bottom: none;
+    }
+
     .container-fluid {
       width: 100% !important;
       filter: none;
diff --git a/app/assets/stylesheets/framework/mobile.scss b/app/assets/stylesheets/framework/mobile.scss
index 7eb451c124e..33cbee85987 100644
--- a/app/assets/stylesheets/framework/mobile.scss
+++ b/app/assets/stylesheets/framework/mobile.scss
@@ -30,7 +30,7 @@
   }
 
   .rss-btn {
-    display: none !important;
+    display: none;
   }
 
   .project-home-links {
diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index 5fe687dcec3..7c18e93a261 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -26,8 +26,8 @@
     }
 
     &.active a {
-      color: #000;
-      border-bottom: 2px solid #4688f1;
+      border-bottom: 2px solid $link-underline-blue;
+      color: $black;
     }
 
     .badge {
@@ -140,6 +140,12 @@
       }
     }
 
+    .project-filter-form {
+      input {
+        background-color: $background-color;
+      }
+    }
+
     @media (max-width: $screen-xs-max) {
       padding-bottom: 0;
 
@@ -187,13 +193,31 @@
 }
 
 .layout-nav {
+  position: fixed;
+  top: $header-height;
+  width: 100%;
+  z-index: 1;
   background: $background-color;
   border-bottom: 1px solid $border-color;
+  transition-duration: .3s;
 
   .controls {
     float: right;
-    position: relative;
-    top: 10px;
+    padding: 7px 5px 0 0;
+
+    i {
+      color: $layout-link-gray;
+    }
+
+    .fa-rss,
+    .fa-cog {
+      font-size: 16px;
+    }
+
+    .fa-caret-down {
+      margin-left: 5px;
+      color: $gl-icon-color;
+    }
 
     .dropdown {
       margin-left: 7px;
@@ -202,5 +226,34 @@
 
   .nav-links {
     border-bottom: none;
+    height: 51px;
+    white-space: nowrap;
+    overflow-x: auto;
+
+    li {
+
+      a {
+        padding-top: 10px;
+      }
+
+      a, i {
+        color: $layout-link-gray;
+      }
+
+      &.active {
+        a, i {
+          color: $black;
+        }
+      }
+
+      .badge {
+        color: $gl-icon-color;
+      }
+    }
   }
+
+}
+
+.page-with-layout-nav {
+  margin-top: 50px;
 }
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index 18189e985c4..e940fd7286e 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -3,6 +3,7 @@
   position: absolute;
   width: 58px;
   cursor: pointer;
+  margin-top: 8px;
 }
 
 .page-with-sidebar {
@@ -62,7 +63,7 @@
       float: left;
       height: $header-height;
       width: 100%;
-      padding: 11px 0 11px 22px;
+      padding-left: 22px;
       overflow: hidden;
       outline: none;
       transition-duration: .3s;
@@ -85,7 +86,7 @@
           margin: 0;
           margin-left: 50px;
           font-size: 19px;
-          line-height: 41px;
+          line-height: 50px;
           font-weight: normal;
         }
       }
@@ -254,6 +255,10 @@
       }
     }
   }
+
+  .layout-nav {
+    padding-right: $sidebar_collapsed_width;
+  }
 }
 
 .page-sidebar-expanded {
@@ -280,6 +285,10 @@
       }
     }
   }
+
+  .layout-nav {
+    padding-right: $sidebar_width;
+  }
 }
 
 .right-sidebar-collapsed {
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 4227839eed3..e4a7339491a 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -66,7 +66,7 @@ $gl-padding-top: 10px;
 $row-hover: #f4f8fe;
 $progress-color: #c0392b;
 $avatar_radius: 50%;
-$header-height: 58px;
+$header-height: 50px;
 $fixed-layout-width: 1280px;
 $gl-avatar-size: 40px;
 $error-exclamation-point: #e62958;
@@ -75,6 +75,8 @@ $btn-transparent-color: #8f8f8f;
 $settings-icon-size: 18px;
 $provider-btn-group-border: #e5e5e5;
 $provider-btn-not-active-color: #4688f1;
+$link-underline-blue: #4a8bee;
+$layout-link-gray: #7e7c7c;
 
 /*
  * Color schema
@@ -109,6 +111,7 @@ $red-light: #e52c5a;
 $red-normal: #d22852;
 $red-dark: darken($red-normal, 5%);
 
+$black: #000;
 $black-transparent: rgba(0, 0, 0, 0.3);
 
 $border-white-light: #f1f2f4;