Merge remote-tracking branch 'upstream/master' into show-status-from-branch

* upstream/master: (74 commits)
  Clarify the author field for the changelog documentation
  Add and update .gitignore & .gitlab-ci.yml templates for 8.14
  Update "Installation from source" guide for 8.14.0
  Add CHANGELOG entries for latest patches
  Merge branch 'fix/import-export-symlink-vulnerability' into 'security'
  Merge branch 'fix/import-projectmember-security' into 'security'
  Use stubs instead of modifying global states
  Add changelog instructions to CHANGELOG.md
  Try not to include anything globally!
  Update help banner for bin/changelog
  Add a `--force` option to bin/changelog
  Update examples in changelog docs to use single quotes around title
  Use the server's base URL without relative URL part when creating links in JIRA
  Update docs and test description
  Update docs and unexpose token
  Make ESLint ignore instrumented files for coverage analysis (!7236)
  Initialize form validation on new group form.
  Check that JavaScript file names match convention (!7238)
  Unchange username_validator.
  Move snake_case to camelCase.
  ...

7 files changed, 195 insertions, 64 deletions

diff --git a/app/assets/stylesheets/framework/avatar.scss b/app/assets/stylesheets/framework/avatar.scss
index 98e301d3799..ce117c3fba5 100644
--- a/app/assets/stylesheets/framework/avatar.scss
+++ b/app/assets/stylesheets/framework/avatar.scss
@@ -1,11 +1,36 @@
-.avatar {
+@mixin avatar-size($size, $margin-right) {
+  width: $size;
+  height: $size;
+  margin-right: $margin-right;
+}
+
+.avatar-container {
   float: left;
-  margin-right: 12px;
+  margin-right: 15px;
+  border-radius: $avatar_radius;
+  border: 1px solid rgba(0, 0, 0, .1);
+  &.s16 { @include avatar-size(16px, 6px); }
+  &.s20 { @include avatar-size(20px, 7px); }
+  &.s24 { @include avatar-size(24px, 8px); }
+  &.s26 { @include avatar-size(26px, 8px); }
+  &.s32 { @include avatar-size(32px, 10px); }
+  &.s36 { @include avatar-size(36px, 10px); }
+  &.s40 { @include avatar-size(40px, 10px); }
+  &.s46 { @include avatar-size(46px, 15px); }
+  &.s48 { @include avatar-size(48px, 10px); }
+  &.s60 { @include avatar-size(60px, 12px); }
+  &.s70 { @include avatar-size(70px, 14px); }
+  &.s90 { @include avatar-size(90px, 15px); }
+  &.s110 { @include avatar-size(110px, 15px); }
+  &.s140 { @include avatar-size(140px, 15px); }
+  &.s160 { @include avatar-size(160px, 20px); }
+}
+
+.avatar {
+  @extend .avatar-container;
   width: 40px;
   height: 40px;
   padding: 0;
-  border-radius: $avatar_radius;
-  border: 1px solid rgba(0, 0, 0, .1);
 
   &.avatar-inline {
     float: none;
@@ -20,22 +45,6 @@
     border-radius: 0;
     border: none;
   }
-
-  &.s16 { width: 16px; height: 16px; margin-right: 6px; }
-  &.s20 { width: 20px; height: 20px; margin-right: 7px; }
-  &.s24 { width: 24px; height: 24px; margin-right: 8px; }
-  &.s26 { width: 26px; height: 26px; margin-right: 8px; }
-  &.s32 { width: 32px; height: 32px; margin-right: 10px; }
-  &.s36 { width: 36px; height: 36px; margin-right: 10px; }
-  &.s40 { width: 40px; height: 40px; margin-right: 10px; }
-  &.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; }
-  &.s160 { width: 160px; height: 160px; margin-right: 20px; }
 }
 
 .identicon {
@@ -54,3 +63,17 @@
   &.s140 { font-size: 72px; line-height: 138px; }
   &.s160 { font-size: 96px; line-height: 158px; }
 }
+
+.image-container {
+  @extend .avatar-container;
+  overflow: hidden;
+  display: flex;
+
+  .avatar {
+    border-radius: 0;
+    border: none;
+    height: auto;
+    margin: 0;
+    align-self: center;
+  }
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss
index 761c07384f4..f0727e9688a 100644
--- a/app/assets/stylesheets/framework/forms.scss
+++ b/app/assets/stylesheets/framework/forms.scss
@@ -136,3 +136,35 @@ label {
   color: $red-normal;
 }
 
+.gl-show-field-errors {
+  .gl-field-success-outline {
+    border: 1px solid $green-normal;
+
+    &:focus {
+      box-shadow: 0 0 0 1px $green-normal inset, 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 4px 0 $green-normal;
+      border: 0 none;
+    }
+  }
+
+  .gl-field-error-outline {
+    border: 1px solid $red-normal;
+
+    &:focus {
+      box-shadow: 0 0 0 1px $red-normal inset, 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 4px 0 rgba(210, 40, 82, 0.6);
+      border: 0 none;
+    }
+  }
+
+  .gl-field-success-message {
+    color: $green-normal;
+  }
+
+  .gl-field-error-message {
+    color: $red-normal;
+  }
+
+  .gl-field-hint {
+    color: $gl-text-color;
+  }
+}
+
diff --git a/app/assets/stylesheets/framework/gitlab-theme.scss b/app/assets/stylesheets/framework/gitlab-theme.scss
index 3f877d86a26..91ab1503439 100644
--- a/app/assets/stylesheets/framework/gitlab-theme.scss
+++ b/app/assets/stylesheets/framework/gitlab-theme.scss
@@ -21,57 +21,66 @@
       background: $color-darker;
     }
 
-    .nav-sidebar li {
-      a {
-        color: $color-light;
-
-        &:hover,
-        &:focus,
-        &:active {
-          background: $color-dark;
-        }
+    .sidebar-header,
+    .sidebar-action-buttons {
+      color: $color-light;
+      background-color: lighten($color-darker, 5%);
+    }
 
-        i {
+    .nav-sidebar {
+      li {
+        a {
           color: $color-light;
-        }
-
-        path,
-        polygon {
-          fill: $color-light;
-        }
 
-        .count {
-          color: $color-light;
-          background: $color-dark;
+          &:hover,
+          &:focus,
+          &:active {
+            background: $color-dark;
+          }
+
+          i {
+            color: $color-light;
+          }
+
+          path,
+          polygon {
+            fill: $color-light;
+          }
+
+          .count {
+            color: $color-light;
+            background: $color-dark;
+          }
+
+          svg {
+            position: relative;
+            top: 3px;
+          }
         }
 
-        svg {
-          position: relative;
-          top: 3px;
+        &.separate-item {
+          border-top: 1px solid $color;
         }
-      }
-
-      &.separate-item {
-        border-top: 1px solid $color;
-      }
 
-      &.active a {
-        color: $white-light;
-        background: $color-dark;
+        &.active a {
+          color: $white-light;
+          background: $color-dark;
 
-        &.no-highlight {
-          border: none;
-        }
+          &.no-highlight {
+            border: none;
+          }
 
-        i {
-          color: $white-light;
-        }
+          i {
+            color: $white-light;
+          }
 
-        path,
-        polygon {
-          fill: $white-light;
+          path,
+          polygon {
+            fill: $white-light;
+          }
         }
       }
+
     }
   }
 }
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 53ee1ed309e..4993ca7572a 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -49,12 +49,16 @@ header {
         font-size: 18px;
         padding: 0;
         margin: ($header-height - 28) / 2 0;
-        margin-left: 10px;
+        margin-left: 8px;
         height: 28px;
         min-width: 28px;
         line-height: 28px;
         text-align: center;
 
+        &.header-user-dropdown-toggle {
+          margin-left: 14px;
+        }
+
         &:hover,
         &:focus,
         &:active {
diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss
index 78464af94bd..bc0610cc417 100644
--- a/app/assets/stylesheets/framework/lists.scss
+++ b/app/assets/stylesheets/framework/lists.scss
@@ -142,10 +142,6 @@ ul.content-list {
       }
     }
 
-    .avatar {
-      margin-right: 15px;
-    }
-
     .controls {
       float: right;
 
diff --git a/app/assets/stylesheets/framework/pagination.scss b/app/assets/stylesheets/framework/pagination.scss
index b6f21fd8c91..cb2c351c368 100644
--- a/app/assets/stylesheets/framework/pagination.scss
+++ b/app/assets/stylesheets/framework/pagination.scss
@@ -7,8 +7,70 @@
   .pagination {
     padding: 0;
   }
+
+  .gap,
+  .gap:hover {
+    background-color: $gray-light;
+    padding: $gl-vert-padding;
+    cursor: default;
+  }
 }
 
 .panel > .gl-pagination {
   margin: 0;
 }
+
+/**
+ * Extra-small screen pagination.
+ */
+@media (max-width: 320px) {
+  .gl-pagination {
+    .first,
+    .last {
+      display: none;
+    }
+
+    .page {
+      display: none;
+
+      &.active {
+        display: inline;
+      }
+    }
+  }
+}
+
+/**
+ * Small screen pagination
+ */
+@media (max-width: $screen-xs) {
+  .gl-pagination {
+    .pagination li a {
+      padding: 6px 10px;
+    }
+
+    .page {
+      display: none;
+
+      &.active {
+        display: inline;
+      }
+    }
+  }
+}
+
+/**
+ * Medium screen pagination
+ */
+@media (min-width: $screen-xs) and (max-width: $screen-md-max) {
+  .gl-pagination {
+    .page {
+      display: none;
+
+      &.active,
+      &.sibling {
+        display: inline;
+      }
+    }
+  }
+}
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index c54f7b27575..d74c14ee2a4 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -59,6 +59,11 @@
     padding: 0 !important;
   }
 
+  .sidebar-header {
+    padding: 11px 22px 12px;
+    font-size: 20px;
+  }
+
   li {
     &.separate-item {
       padding-top: 10px;