Merge branch 'master' into ide

* master: (177 commits)
  Add changelog
  Bump gitlab-shell version to 5.8.0 to fix Git for Windows 2.14
  Make contextual sidebar collapsible
  Fixed sidebar context header hover colors
  Use correct `Environment`-class within `Gitlab` namespace
  Remove gl.Activities from Commits page
  Move `let` calls inside the `describe` block using them
  Add `/assign me` alias support for assigning issuables to oneself
  GRPC::Unavailable (< GRPC::BadStatus) is wrapped in a CommandError
  Use `broken_storage` in the fs_shards_spec.
  Eager load project creators for project dashboards
  Memoize a user's personal projects count
  Remove redundant query from User#recent_push
  Improve checking if projects would be returned
  Change spelling of gitlab-shell
  Remove unused #tree-holder
  Add custom linter for inline JavaScript to haml_lint
  Rename user_can_admin? because it's more accurate
  Synchronous zanata community contribution translation
  Add Korean translation to i18n
  ...

8 files changed, 216 insertions, 255 deletions

diff --git a/app/assets/stylesheets/pages/cycle_analytics.scss b/app/assets/stylesheets/pages/cycle_analytics.scss
index 87b50c7687e..6753eb08285 100644
--- a/app/assets/stylesheets/pages/cycle_analytics.scss
+++ b/app/assets/stylesheets/pages/cycle_analytics.scss
@@ -1,4 +1,6 @@
 #cycle-analytics {
+  @include new-style-dropdown;
+
   max-width: 1000px;
   margin: 24px auto 0;
   position: relative;
@@ -110,10 +112,6 @@
 
   .js-ca-dropdown {
     top: $gl-padding-top;
-
-    .dropdown-menu-align-right {
-      margin-top: 2px;
-    }
   }
 
   .content-list {
@@ -446,24 +444,6 @@
       margin-bottom: 20px;
     }
   }
-
-  // TODO: fallback to global style
-  .dropdown-menu {
-    li {
-      padding: 0 1px;
-
-      a {
-        border-radius: 0;
-        padding: 8px 16px;
-
-        &:hover,
-        &:active,
-        &:focus {
-          background-color: $gray-darker;
-        }
-      }
-    }
-  }
 }
 
 .cycle-analytics-overview {
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index 398fd4444ea..da77346d8b2 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -395,12 +395,11 @@
   background-color: transparent;
   border: 0;
   color: $gl-link-color;
-  transition: color 0.1s linear;
+  font-weight: 600;
 
   &:hover,
   &:focus {
     outline: none;
-    text-decoration: underline;
     color: $gl-link-hover-color;
   }
 }
@@ -559,3 +558,68 @@
     outline: 0;
   }
 }
+
+.diff-files-changed {
+  .commit-stat-summary {
+    @include new-style-dropdown;
+    z-index: -1;
+
+    @media (min-width: $screen-sm-min) {
+      margin-left: -$gl-padding;
+      padding-left: $gl-padding;
+      background-color: $white-light;
+    }
+  }
+
+  @media (min-width: $screen-sm-min) {
+    position: -webkit-sticky;
+    position: sticky;
+    top: 84px;
+    background-color: $white-light;
+    z-index: 190;
+
+    + .files,
+    + .alert {
+      margin-top: 1px;
+    }
+
+    &:not(.is-stuck) .diff-stats-additions-deletions-collapsed {
+      display: none;
+    }
+
+    &.is-stuck {
+      padding-top: 0;
+      padding-bottom: 0;
+      border-bottom: 1px solid $white-dark;
+      transform: translateY(16px);
+
+      .diff-stats-additions-deletions-expanded,
+      .inline-parallel-buttons {
+        display: none;
+      }
+
+      + .files,
+      + .alert {
+        margin-top: 30px;
+      }
+    }
+  }
+}
+
+.diff-file-changes {
+  width: 450px;
+  z-index: 150;
+
+  @media (min-width: $screen-sm-min) {
+    left: $gl-padding;
+  }
+
+  a {
+    padding-top: 8px;
+    padding-bottom: 8px;
+  }
+}
+
+.diff-file-changes-path {
+  @include str-truncated(78%);
+}
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 6da14320914..88343bd0113 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -328,9 +328,17 @@
       margin-bottom: 10px;
       color: $issuable-sidebar-color;
 
+      svg {
+        fill: $issuable-sidebar-color;
+      }
+
       &:hover,
       &:hover .todo-undone {
         color: $gl-text-color;
+
+        svg {
+          fill: $gl-text-color;
+        }
       }
 
       span {
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 4693b2434c7..6bb013cca85 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -2,10 +2,35 @@
  * MR -> show: Automerge widget
  *
  */
+
+.space-children {
+  @include clearfix;
+
+  > * {
+    float: left;
+  }
+
+  > *:not(:last-child) {
+    margin-right: 10px;
+  }
+}
+
 .mr-state-widget {
   color: $gl-text-color;
   border: 1px solid $border-color;
   border-radius: 2px;
+  line-height: 28px;
+
+  .mr-widget-heading,
+  .mr-widget-section,
+  .mr-widget-footer {
+    padding: $gl-padding;
+    border-top: solid 1px $border-color;
+  }
+
+  .mr-widget-footer {
+    padding: 0;
+  }
 
   form {
     margin-bottom: 0;
@@ -15,15 +40,35 @@
     }
   }
 
+  label {
+    margin-bottom: 0;
+  }
+
+  .btn {
+    font-size: $gl-font-size;
+
+    &[disabled] {
+      opacity: 0.3;
+    }
+
+    &.btn-xs {
+      line-height: 1;
+      padding: 5px 10px;
+      margin-top: 1px;
+    }
+
+    &.dropdown-toggle {
+      .fa {
+        color: inherit;
+      }
+    }
+  }
+
   .accept-merge-holder {
     .accept-action {
       display: inline-block;
       float: left;
 
-      .btn-success.dropdown-toggle .fa {
-        color: inherit;
-      }
-
       .accept-merge-request {
         &.ci-pending,
         &.ci-running {
@@ -84,77 +129,64 @@
 
   .ci-widget {
     color: $gl-text-color;
-    display: -webkit-flex;
     display: flex;
-    -webkit-align-items: center;
-    align-items: center;
-    padding: $gl-padding-top $gl-padding 0;
-
-    svg {
-      position: relative;
-      top: 1px;
-      overflow: visible;
-    }
-
-    > span {
-      padding-right: 4px;
-    }
 
     @media (max-width: $screen-xs-max) {
       flex-wrap: wrap;
     }
+  }
 
-    .icon-link > .ci-status-icon > svg {
-      width: 22px;
-      height: 22px;
-      margin-right: 8px;
-    }
+  .mr-widget-icon {
+    font-size: 22px;
+    margin-right: $status-icon-margin;
+  }
 
-    .ci-error {
-      margin-right: $btn-side-margin;
-    }
+  .ci-status-icon svg {
+    width: $status-icon-size;
+    height: $status-icon-size;
+    margin: 3px 0;
+    position: relative;
+    overflow: visible;
+    display: block;
   }
 
-  .mr-widget-body,
-  .mr-widget-footer {
-    margin: 16px;
+  .mr-widget-body {
+    @include clearfix;
+
+    &.media > *:first-child {
+      margin-right: 10px;
+    }
   }
 
   .mr-widget-pipeline-graph {
-    flex-shrink: 0;
+    padding: 0 4px;
 
     .dropdown-menu {
-      margin-top: 11px;
       z-index: 300;
     }
 
     .ci-action-icon-wrapper {
       line-height: 16px;
     }
+  }
 
-    @media (max-width: $screen-xs-max) {
-      order: 1;
-      margin-top: $gl-padding-top;
-      border-radius: 3px;
-      background-color: $white-light;
-      border: 1px solid $gray-darker;
-      width: 100%;
-      text-align: center;
+  .mini-pipeline-graph-dropdown-toggle {
+    vertical-align: top;
+  }
 
-      .dropdown-menu {
-        margin-left: -97.5px;
-      }
+  .mini-pipeline-graph-dropdown-menu .mini-pipeline-graph-dropdown-item {
+    display: flex;
+    align-items: center;
 
-      .arrow-up::before,
-      .arrow-up::after, {
-        margin-left: 97.5px;
-      }
+    .ci-status-text,
+    .ci-status-icon {
+      top: 0;
+      margin-right: 10px;
     }
   }
 
   .normal {
-    color: $gl-text-color;
-    font-size: 15px;
+    line-height: 28px;
   }
 
   .capitalize {
@@ -165,9 +197,8 @@
     @extend .ref-name;
 
     color: $gl-text-color;
-    font-weight: bold;
+    font-weight: 600;
     overflow: hidden;
-    margin: 0 3px;
     word-break: break-all;
 
     &.label-truncated {
@@ -189,52 +220,19 @@
     }
   }
 
-  .js-deployment-link {
-    display: inline-block;
-  }
-
   .mr-widget-help {
-    margin: $gl-padding;
-    color: $ci-skipped-color;
-  }
-
-  .mr-info-list {
-
-    &.mr-links {
-      margin-left: 28px;
-    }
-
-    &.mr-memory-usage {
-      margin: 5px 0 10px 25px;
-    }
-  }
-
-  .mr-widget-heading {
-    .btn-default.btn-xs {
-      margin-left: 5px;
-    }
-  }
-
-  .mr-widget-body {
-    .btn {
-      font-size: 15px;
-    }
-
-    .btn-group .btn {
-      padding: 5px 10px;
-
-      &.dropdown-toggle {
-        padding: 5px 7px;
-      }
-    }
+    padding: 10px 16px 10px 48px;
+    font-style: italic;
   }
 
   .mr-widget-body {
     h4 {
-      font-weight: bold;
-      font-size: 15px;
-      margin: 5px 0;
-      color: $gl-text-color;
+      float: left;
+      font-weight: 600;
+      font-size: 14px;
+      line-height: inherit;
+      margin-top: 0;
+      margin-bottom: 0;
 
       &.has-conflicts .fa-exclamation-triangle {
         color: $gl-warning;
@@ -255,18 +253,16 @@
     }
 
     .spacing {
-      margin: 0 $gl-padding;
+      margin: 0 0 0 10px;
     }
 
     .bold {
-      font-weight: bold;
-      font-size: 15px;
+      font-weight: 600;
       color: $gl-gray-light;
     }
 
     .state-label {
-      font-size: 16px;
-      font-weight: bold;
+      font-weight: 600;
       padding-right: 10px;
     }
 
@@ -274,16 +270,6 @@
       color: $gl-danger;
     }
 
-    .mr-widget-help {
-      margin: $gl-padding 0;
-    }
-
-    .with-button {
-      position: relative;
-      top: 6px;
-      margin-bottom: 24px;
-    }
-
     .spacing,
     .bold {
       vertical-align: middle;
@@ -294,15 +280,8 @@
         padding: 5px;
       }
 
-      .merge-opt-icon,
-      .merge-opt-title {
-        display: inline-block;
-        float: left;
-      }
-
-      .merge-opt-icon svg {
-        height: 15px;
-        width: 15px;
+      .merge-opt-icon {
+        line-height: 1.5;
       }
 
       .merge-opt-title {
@@ -316,34 +295,15 @@
       }
     }
 
-    .has-error-message + .has-custom-error {
-      margin-left: 0;
-    }
-
     .has-custom-error {
       display: inline-block;
-      margin-left: 70px;
-    }
-
-    .merge-error-text {
-      margin-left: 70px;
     }
 
     @media (max-width: $screen-xs-max) {
-      h4 {
-        font-size: 14px;
-      }
-
       p {
         font-size: 13px;
       }
 
-      .btn,
-      .btn-group,
-      .accept-action {
-        margin-bottom: 4px;
-      }
-
       .btn-grouped {
         float: none;
         margin-right: 0;
@@ -367,19 +327,16 @@
       }
     }
 
-    &.mr-state-locked .mr-info-list {
-      margin-top: 10px;
-      margin-left: 12px;
-    }
+    &.mr-widget-empty-state {
+      line-height: 20px;
 
-    &.empty-state {
       .artwork {
         margin-bottom: $gl-padding;
       }
 
       .text {
         span {
-          font-weight: bold;
+          font-weight: 600;
         }
 
         p {
@@ -389,10 +346,6 @@
     }
   }
 
-  .mr-widget-footer {
-    border-top: 1px solid $gray-darker;
-  }
-
   .ci-coverage {
     float: right;
   }
@@ -497,8 +450,6 @@
   }
 
   .btn-clipboard {
-    @extend .pull-right;
-
     margin-right: 20px;
     margin-top: 5px;
     position: absolute;
@@ -506,56 +457,29 @@
   }
 }
 
+.mr-links {
+  padding-left: $status-icon-size + $status-icon-margin;
+}
+
 .mr-info-list {
+  clear: left;
   position: relative;
-  margin: 10px 0 $gl-padding 12px;
+  padding-top: 4px;
 
   p {
-    margin: 6px 0;
+    margin: 0;
     position: relative;
-    padding-left: 15px;
-
-    &::before {
-      content: '';
-      position: absolute;
-      border-top: 2px solid $border-color;
-      height: 1px;
-      top: 9px;
-      width: 8px;
-      left: 0;
-    }
+    padding: 4px 0;
 
     &:last-child {
-      margin-bottom: 0;
+      padding-bottom: 0;
     }
   }
-
-  .legend {
-    height: 100%;
-    width: 2px;
-    background: $border-color;
-    position: absolute;
-    top: -9px;
-  }
 }
 
 .mr-info-list.mr-memory-usage {
-  .legend {
-    height: 65%;
-    top: 0;
-
-    @media (max-width: $screen-xs-max) {
-      height: 20px;
-    }
-  }
-
   p {
     float: left;
-    padding-left: 21px;
-
-    &::before {
-      top: 13px;
-    }
   }
 
   .memory-graph-container {
@@ -565,12 +489,13 @@
 }
 
 .mr-source-target {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
   background-color: $gray-light;
-  border-radius: 3px 3px 0 0;
-  border-bottom: 1px solid $border-color;
-  padding: 0 $gl-padding;
-  margin-bottom: 6px;
-  line-height: 44px;
+  border-radius: $border-radius-default $border-radius-default 0 0;
+  padding: $gl-padding / 2 $gl-padding;
 
   .dropdown-toggle .fa {
     color: $gl-text-color;
@@ -679,20 +604,16 @@
 }
 
 .merged-buttons {
-  margin-top: 20px;
-
   .btn {
     float: left;
-
-    &:not(:last-child) {
-      margin-right: 10px;
-    }
   }
 }
 
 .mr-version-controls {
+  position: relative;
   background: $gray-light;
   color: $gl-text-color;
+  z-index: 199;
 
   .mr-version-menus-container {
     display: -webkit-flex;
@@ -801,20 +722,8 @@
 }
 
 .mr-memory-usage {
-  p.usage-info-loading,
-  p.usage-info-unavailable,
-  p.usage-info-failed {
-    margin-bottom: 5px;
-  }
-
   p.usage-info-loading .usage-info-load-spinner {
     margin-right: 10px;
     font-size: 16px;
   }
-
-  @media (max-width: $screen-md-min) {
-    .mr-info-list.mr-memory-usage .legend {
-      height: 80%;
-    }
-  }
 }
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index d3862df20d3..6185342b495 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -220,7 +220,11 @@
     position: relative;
     vertical-align: middle;
     height: 22px;
-    margin: 3px 6px 3px 0;
+    margin: 3px 0;
+
+    + .stage-container {
+      margin-left: 6px;
+    }
 
     // Hack to show a button tooltip inline
     button.has-tooltip + .tooltip {
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index b3a90dff89a..73603f20ef6 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -36,7 +36,6 @@
   }
 
   select {
-    background: transparent;
     transition: background 2s ease-out;
 
     &.highlight-changes {
@@ -282,6 +281,8 @@
 }
 
 .project-repo-buttons {
+  @include new-style-dropdown;
+
   .project-action-button .dropdown-menu {
     max-height: 250px;
     overflow-y: auto;
diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss
index d69a8e0995c..15df51e9c69 100644
--- a/app/assets/stylesheets/pages/settings.scss
+++ b/app/assets/stylesheets/pages/settings.scss
@@ -54,8 +54,7 @@
 .settings-content {
   max-height: 1px;
   overflow-y: scroll;
-  margin-right: -20px;
-  padding-right: 130px;
+  padding-right: 110px;
   animation: collapseMaxHeight 300ms ease-out;
 
   &.expanded {
@@ -87,6 +86,23 @@
     overflow: hidden;
     margin-top: 20px;
   }
+
+  .sub-section {
+    margin-bottom: 32px;
+    padding: 16px;
+    border: 1px solid $border-color;
+    background-color: $gray-light;
+  }
+
+  .bs-callout,
+  .checkbox:first-child,
+  .help-block {
+    margin-top: 0;
+  }
+
+  .label-light {
+    margin-bottom: 0;
+  }
 }
 
 .settings-list-icon {
diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss
index c557aecc01b..a8e0f251cd3 100644
--- a/app/assets/stylesheets/pages/tree.scss
+++ b/app/assets/stylesheets/pages/tree.scss
@@ -1,4 +1,5 @@
 .tree-holder {
+  @include new-style-dropdown;
 
   .nav-block {
     margin: 10px 0;
@@ -202,28 +203,6 @@
       }
     }
   }
-
-  // TODO: fallback to global style
-  .dropdown-menu:not(.dropdown-menu-selectable) {
-    li {
-      padding: 0 1px;
-
-      &.dropdown-header {
-        padding: 8px 16px;
-      }
-
-      a {
-        border-radius: 0;
-        padding: 8px 16px;
-
-        &:hover,
-        &:active,
-        &:focus {
-          background-color: $gray-darker;
-        }
-      }
-    }
-  }
 }
 
 .blob-commit-info {