Merge remote-tracking branch 'origin/master' into send-incremental-build-log

6 files changed, 108 insertions, 9 deletions

diff --git a/app/assets/stylesheets/framework/gitlab-theme.scss b/app/assets/stylesheets/framework/gitlab-theme.scss
index c83cf881596..dc4668877f2 100644
--- a/app/assets/stylesheets/framework/gitlab-theme.scss
+++ b/app/assets/stylesheets/framework/gitlab-theme.scss
@@ -24,6 +24,10 @@
         background-color: $color-darker;
         a {
           color: #fff;
+
+          h3 {
+            color: #fff;
+          }
         }
       }
     }
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 97f9d582007..8190a97ed58 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -8,7 +8,7 @@ header {
   &.navbar-empty {
     height: 58px;
     background: #fff;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid $btn-gray-hover;
 
     .center-logo {
       margin: 11px 0;
@@ -22,14 +22,18 @@ header {
   }
 
   &.navbar-gitlab {
-    padding: 0 20px;
+    padding: 0 16px;
     z-index: 100;
     margin-bottom: 0;
-    min-height: $header-height;
+    height: $header-height;
     background-color: $background-color;
     border: none;
     border-bottom: 1px solid $border-color;
 
+    @media (max-width: $screen-xs-min) {
+      padding: 0 16px;
+    }
+
     &.with-horizontal-nav {
       border-bottom: none;
     }
@@ -60,16 +64,44 @@ 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: $gl-icon-color;
         }
       }
     }
+
+    &.header-collapsed {
+      padding: 0 16px;
+    }
+
+    .side-nav-toggle {
+      display: none;
+      position: absolute;
+      left: -10px;
+      margin: 6px 0;
+      padding: 6px 10px;
+      border: none;
+      background-color: $background-color;
+
+      &:hover {
+        background-color: $btn-gray-hover;
+      }
+
+      &:focus {
+        outline: none;
+      }
+
+      @media (max-width: $screen-xs-min) {
+        display: block;
+      }
+    }
   }
 
   .header-content {
@@ -77,6 +109,10 @@ header {
     height: $header-height;
     padding-right: 40px;
 
+    @media (max-width: $screen-xs-min) {
+      padding-left: 40px;
+    }
+
     @media (min-width: $screen-sm-min) {
       padding-right: 0;
     }
@@ -145,6 +181,10 @@ header {
   @media (min-width: $screen-md-min) {
     @include collapsed-header;
   }
+
+  @media (max-width: $screen-xs-min) {
+    margin-left: 0;
+  }
 }
 
 .header-expanded {
@@ -153,6 +193,10 @@ header {
   @media (min-width: $screen-md-min) {
     margin-left: $sidebar_width;
   }
+
+  @media (max-width: $screen-xs-min) {
+    margin-left: 0;
+  }
 }
 
 @media (max-width: $screen-xs-max) {
diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index 7c18e93a261..f2d7dc625e0 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -201,9 +201,13 @@
   border-bottom: 1px solid $border-color;
   transition-duration: .3s;
 
+  .container-fluid {
+    position: relative;
+  }
+
   .controls {
     float: right;
-    padding: 7px 5px 0 0;
+    padding: 7px 0 0;
 
     i {
       color: $layout-link-gray;
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index e940fd7286e..bd91f51708c 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -98,7 +98,7 @@
   }
 
   .sidebar-user {
-    padding: 9px 22px;
+    padding: 7px 22px;
     position: fixed;
     bottom: 40px;
     width: $sidebar_width;
@@ -210,15 +210,33 @@
   }
 }
 
+.sidebar-wrapper {
+  &.hidden-nav {
+    width: 0;
+  }
+}
+
 .page-sidebar-collapsed {
   padding-left: $sidebar_collapsed_width;
 
+  @media (max-width: $screen-xs-min) {
+    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;
 
@@ -244,12 +262,22 @@
 
     .collapse-nav a {
       width: $sidebar_collapsed_width;
+
+      @media (max-width: $screen-xs-min) {
+        width: 0;
+      }
     }
 
     .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;
+      }
+
       .username {
         display: none;
       }
@@ -258,6 +286,10 @@
 
   .layout-nav {
     padding-right: $sidebar_collapsed_width;
+
+    @media (max-width: $screen-xs-min) {
+      padding-right: 0;;
+    }
   }
 }
 
@@ -268,6 +300,10 @@
     padding-left: $sidebar_width;
   }
 
+  @media (max-width: $screen-xs-min) {
+    padding-left: 0;
+  }
+
   .sidebar-wrapper {
     width: $sidebar_width;
 
@@ -287,7 +323,17 @@
   }
 
   .layout-nav {
-    padding-right: $sidebar_width;
+    @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;
+    }
   }
 }
 
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index ccb4e5381b7..84e74db06b0 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -215,6 +215,7 @@ $dropdown-toggle-hover-icon-color: $dropdown-toggle-hover-border-color;
 $btn-active-gray: #ececec;
 $btn-placeholder-gray: #c7c7c7;
 $btn-white-active: #848484;
+$btn-gray-hover: #eee;
 
 /*
  *  Award emoji
diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss
index abc5a0e9877..843379a3f54 100644
--- a/app/assets/stylesheets/pages/profile.scss
+++ b/app/assets/stylesheets/pages/profile.scss
@@ -218,7 +218,7 @@
 
       .btn {
         display: inline-block;
-        width: 48%;
+        width: 46%;
       }
     }
   }