Merge remote-tracking branch 'origin/master' into 21170-cycle-analytics

10 files changed, 175 insertions, 153 deletions

diff --git a/app/assets/stylesheets/pages/awards.scss b/app/assets/stylesheets/pages/awards.scss
index 5faedfedd66..9282e0ae03b 100644
--- a/app/assets/stylesheets/pages/awards.scss
+++ b/app/assets/stylesheets/pages/awards.scss
@@ -93,11 +93,8 @@
 }
 
 .award-control {
-  margin-right: 5px;
-  margin-bottom: 5px;
-  padding-left: 5px;
-  padding-right: 5px;
-  line-height: 20px;
+  margin: 3px 5px 3px 0;
+  padding: 6px 5px;
   outline: 0;
 
   &:hover,
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index 037278bb083..9c84dceed05 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -1,3 +1,4 @@
+lex
 [v-cloak] {
   display: none;
 }
@@ -18,6 +19,10 @@
   }
 }
 
+.is-ghost {
+  opacity: 0.3;
+}
+
 .dropdown-menu-issues-board-new {
   width: 320px;
 
@@ -34,47 +39,13 @@
   > p {
     margin: 0;
     font-size: 14px;
-    color: #9c9c9c;
   }
 }
 
 .issue-boards-page {
-  .content-wrapper {
-    display: -webkit-flex;
-    display: flex;
-    -webkit-flex-direction: column;
-    flex-direction: column;
-  }
-
-  .sub-nav,
-  .issues-filters {
-    -webkit-flex: none;
-    flex: none;
-  }
-
   .page-with-sidebar {
-    display: -webkit-flex;
-    display: flex;
-    min-height: 100vh;
-    max-height: 100vh;
     padding-bottom: 0;
   }
-
-  .issue-boards-content {
-    display: -webkit-flex;
-    display: flex;
-    -webkit-flex: 1;
-    flex: 1;
-    width: 100%;
-
-    .content {
-      display: -webkit-flex;
-      display: flex;
-      -webkit-flex-direction: column;
-      flex-direction: column;
-      width: 100%;
-    }
-  }
 }
 
 .boards-app-loading {
@@ -83,46 +54,38 @@
 }
 
 .boards-list {
-  display: -webkit-flex;
-  display: flex;
-  -webkit-flex: 1;
-  flex: 1;
-  -webkit-flex-basis: 0;
-  flex-basis: 0;
-  min-height: calc(100vh - 152px);
-  max-height: calc(100vh - 152px);
+  height: calc(100vh - 152px);
+  width: 100%;
   padding-top: 25px;
+  padding-bottom: 25px;
   padding-right: ($gl-padding / 2);
   padding-left: ($gl-padding / 2);
   overflow-x: scroll;
+  white-space: nowrap;
 
   @media (min-width: $screen-sm-min) {
+    height: 475px; // Needed for PhantomJS
+    height: calc(100vh - 220px);
     min-height: 475px;
-    max-height: none;
   }
 }
 
 .board {
-  display: -webkit-flex;
-  display: flex;
-  min-width: calc(85vw - 15px);
-  max-width: calc(85vw - 15px);
-  margin-bottom: 25px;
+  display: inline-block;
+  width: calc(85vw - 15px);
+  height: 100%;
   padding-right: ($gl-padding / 2);
   padding-left: ($gl-padding / 2);
+  white-space: normal;
+  vertical-align: top;
 
   @media (min-width: $screen-sm-min) {
-    min-width: 400px;
-    max-width: 400px;
+    width: 400px;
   }
 }
 
 .board-inner {
-  display: -webkit-flex;
-  display: flex;
-  -webkit-flex-direction: column;
-  flex-direction: column;
-  width: 100%;
+  height: 100%;
   font-size: $issue-boards-font-size;
   background: $background-color;
   border: 1px solid $border-color;
@@ -193,45 +156,31 @@
 }
 
 .board-list {
-  -webkit-flex: 1;
-  flex: 1;
-  height: 400px;
+  height: calc(100% - 49px);
   margin-bottom: 0;
   padding: 5px;
+  list-style: none;
   overflow-y: scroll;
   overflow-x: hidden;
 }
 
 .board-list-loading {
   margin-top: 10px;
-  font-size: 26px;
-}
-
-.is-ghost {
-  opacity: 0.3;
+  font-size: (26px / $issue-boards-font-size) * 1em;
 }
 
 .card {
   position: relative;
-  width: 100%;
   padding: 10px $gl-padding;
   background: #fff;
   border-radius: $border-radius-default;
   box-shadow: 0 1px 2px rgba(186, 186, 186, 0.5);
   list-style: none;
 
-  &.user-can-drag {
-    padding-left: $gl-padding;
-  }
-
   &:not(:last-child) {
     margin-bottom: 5px;
   }
 
-  a {
-    cursor: pointer;
-  }
-
   .label {
     border: 0;
     outline: 0;
@@ -256,14 +205,13 @@
   line-height: 25px;
 
   .label {
-    margin-right: 4px;
+    margin-right: 5px;
     font-size: (14px / $issue-boards-font-size) * 1em;
   }
 }
 
 .card-number {
-  margin-right: 8px;
-  font-weight: 500;
+  margin-right: 5px;
 }
 
 .issue-boards-search {
diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss
index 614405aa5c1..c879074c7fe 100644
--- a/app/assets/stylesheets/pages/builds.scss
+++ b/app/assets/stylesheets/pages/builds.scss
@@ -48,12 +48,6 @@
       margin-bottom: 10px;
     }
   }
-
-  .page-sidebar-collapsed {
-    .scroll-controls {
-      left: 70px;
-    }
-  }
 }
 
 .build-header {
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index 21cee2e3a70..b8ef76cc74e 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -68,6 +68,11 @@
       border-collapse: separate;
       margin: 0;
       padding: 0;
+      table-layout: fixed;
+
+      .diff-line-num {
+        width: 50px;
+      }
 
       .line_holder td {
         line-height: $code_line_height;
@@ -98,10 +103,6 @@
     }
 
     tr.line_holder.parallel {
-      .old_line, .new_line {
-        min-width: 50px;
-      }
-
       td.line_content.parallel {
         width: 46%;
       }
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 46c4a11aa2e..41079b6eeb5 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -206,7 +206,7 @@
     padding-top: 0;
 
     .block {
-      width: $sidebar_collapsed_width - 1px;
+      width: $sidebar_collapsed_width - 2px;
       margin-left: -19px;
       padding: 15px 0 0;
       border-bottom: none;
@@ -404,3 +404,18 @@
     margin-bottom: $gl-padding;
   }
 }
+
+.issuable-list {
+  li {
+    .issue-check {
+      float: left;
+      padding-right: $gl-padding;
+      margin-bottom: 10px;
+      min-width: 15px;
+
+      .selected_issue {
+        vertical-align: text-top;
+      }
+    }
+  }
+}
diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index d14224ed00f..3ac34cbc829 100644
--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -7,24 +7,9 @@
       margin-bottom: 2px;
     }
 
-    .issue-check {
-      float: left;
-      padding-right: 16px;
-      margin-bottom: 10px;
-      min-width: 15px;
-
-      .selected_issue {
-        vertical-align: text-top;
-      }
-    }
-
     .issue-labels {
       display: inline-block;
     }
-
-    .issue-no-comments {
-      opacity: 0.5;
-    }
   }
 }
 
@@ -48,6 +33,15 @@ form.edit-issue {
   margin: 0;
 }
 
+ul.related-merge-requests > li {
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  .merge-request-id {
+    flex-shrink: 0;
+  }
+}
+
 .merge-requests-title, .related-branches-title {
   font-size: 16px;
   font-weight: 600;
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 7fdd79fa8b9..96c06086867 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -231,10 +231,6 @@
   .merge-request-labels {
     display: inline-block;
   }
-
-  .merge-request-no-comments {
-    opacity: 0.5;
-  }
 }
 
 .merge-request-angle {
@@ -375,7 +371,7 @@
   }
 }
 
-.mr-version-switch {
+.mr-version-controls {
   background: $background-color;
   padding: $gl-btn-padding;
   color: $gl-placeholder-color;
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 2d66ab25da6..1b4d12d3053 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -147,14 +147,37 @@
   }
 
   .stage-cell {
-    text-align: center;
+    font-size: 0;
 
     svg {
       height: 18px;
       width: 18px;
+      position: relative;
+      z-index: 2;
       vertical-align: middle;
       overflow: visible;
     }
+
+    .stage-container {
+      display: inline-block;
+      position: relative;
+      margin-right: 6px;
+
+      .tooltip {
+        white-space: nowrap;
+      }
+
+      &:not(:last-child) {
+        &::after {
+          content: '';
+          width: 8px;
+          position: absolute;;
+          right: -7px;
+          bottom: 8px;
+          border-bottom: 2px solid $border-color;
+        }
+      }
+    }
   }
 
   .duration,
@@ -318,9 +341,17 @@
 
     .build-content {
       width: 130px;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
+
+      .ci-status-text {
+        width: 110px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        vertical-align: middle;
+        display: inline-block;
+        position: relative;
+        top: -1px;
+      }
 
       a {
         color: $layout-link-gray;
@@ -331,13 +362,74 @@
             text-decoration: underline;
           }
         }
+      }
+
+      .dropdown-menu-toggle {
+        border: none;
+        width: auto;
+        padding: 0;
+        color: $layout-link-gray;
+
+        .ci-status-text {
+          width: 80px;
+        }
+      }
+
+      .grouped-pipeline-dropdown {
+        padding: 8px 0;
+        width: 200px;
+        left: auto;
+        right: -214px;
+        top: -9px;
+
+        a:hover {
+          .ci-status-text {
+            text-decoration: none;
+          }
+        }
 
+        .ci-status-text {
+          width: 145px;
+        }
+
+        .arrow {
+          &:before,
+          &:after {
+            content: '';
+            display: inline-block;
+            position: absolute;
+            width: 0;
+            height: 0;
+            border-color: transparent;
+            border-style: solid;
+            top: 18px;
+          }
+
+          &:before {
+            left: -5px;
+            margin-top: -6px;
+            border-width: 7px 5px 7px 0;
+            border-right-color: $border-color;
+          }
+
+          &:after {
+            left: -4px;
+            margin-top: -9px;
+            border-width: 10px 7px 10px 0;
+            border-right-color: $white-light;
+          }
+        }
+      }
+
+      .badge {
+        background-color: $gray-dark;
+        color: $layout-link-gray;
+        font-weight: normal;
       }
     }
 
     svg {
-      position: relative;
-      top: 2px;
+      vertical-align: middle;
       margin-right: 5px;
     }
 
@@ -442,7 +534,7 @@
       width: 21px;
       height: 25px;
       position: absolute;
-      top: -28.5px;
+      top: -29px;
       border-top: 2px solid $border-color;
     }
 
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index f2db373da52..db46d8072ce 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -334,6 +334,10 @@ a.deploy-project-label {
   a {
     color: $gl-dark-link-color;
   }
+
+  .dropdown-menu {
+    width: 240px;
+  }
 }
 
 .last-push-widget {
@@ -723,9 +727,15 @@ pre.light-well {
   }
 }
 
-.project-refs-form {
-  .dropdown-menu {
-    width: 300px;
+.project-refs-form .dropdown-menu, .dropdown-menu-projects {
+  width: 300px;
+
+  @media (min-width: $screen-sm-min) {
+    width: 500px;
+  }
+
+  a {
+    white-space: normal;
   }
 }
 
diff --git a/app/assets/stylesheets/pages/snippets.scss b/app/assets/stylesheets/pages/snippets.scss
index 2aa939b7dc3..5270aea4e79 100644
--- a/app/assets/stylesheets/pages/snippets.scss
+++ b/app/assets/stylesheets/pages/snippets.scss
@@ -2,20 +2,6 @@
   padding: 2px;
 }
 
-.snippet-holder {
-  margin-bottom: -$gl-padding;
-
-  .file-holder {
-    border-top: 0;
-  }
-
-  .file-actions {
-    .btn-clipboard {
-      @extend .btn;
-    }
-  }
-}
-
 .markdown-snippet-copy {
   position: fixed;
   top: -10px;
@@ -24,29 +10,18 @@
   max-width: 0;
 }
 
-.file-holder.snippet-file-content {
-  padding-bottom: $gl-padding;
-  border-bottom: 1px solid $border-color;
-
-  .file-title {
-    padding-top: $gl-padding;
-    padding-bottom: $gl-padding;
-  }
-
-  .file-actions {
-    top: 12px;
-  }
-
-  .file-content {
-    border-left: 1px solid $border-color;
-    border-right: 1px solid $border-color;
-    border-bottom: 1px solid $border-color;
+.snippet-file-content {
+  border-radius: 3px;
+  .btn-clipboard {
+    @extend .btn;
   }
 }
 
 .snippet-title {
   font-size: 24px;
-  font-weight: normal;
+  font-weight: 600;
+  padding: $gl-padding;
+  padding-left: 0;
 }
 
 .snippet-actions {