Add latest changes from gitlab-org/gitlab@12-4-stable-ee

15 files changed, 234 insertions, 81 deletions

diff --git a/app/assets/stylesheets/framework/animations.scss b/app/assets/stylesheets/framework/animations.scss
index 6f5a2e561af..d222fc4aefe 100644
--- a/app/assets/stylesheets/framework/animations.scss
+++ b/app/assets/stylesheets/framework/animations.scss
@@ -11,25 +11,10 @@
   @include webkit-prefix(animation-duration, 1s);
   @include webkit-prefix(animation-fill-mode, both);
 
-  &.infinite {
-    @include webkit-prefix(animation-iteration-count, infinite);
-  }
-
   &.once {
     @include webkit-prefix(animation-iteration-count, 1);
   }
 
-  &.hinge {
-    @include webkit-prefix(animation-duration, 2s);
-  }
-
-  &.flipOutX,
-  &.flipOutY,
-  &.bounceIn,
-  &.bounceOut {
-    @include webkit-prefix(animation-duration, 0.75s);
-  }
-
   &.short {
     @include webkit-prefix(animation-duration, 321ms);
     @include webkit-prefix(animation-fill-mode, none);
diff --git a/app/assets/stylesheets/framework/blank.scss b/app/assets/stylesheets/framework/blank.scss
index cbd390e7145..7dd7ab339dd 100644
--- a/app/assets/stylesheets/framework/blank.scss
+++ b/app/assets/stylesheets/framework/blank.scss
@@ -14,13 +14,12 @@
 .blank-state-row {
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-around;
-  height: 100%;
+  justify-content: space-between;
 }
 
 .blank-state-welcome {
   text-align: center;
-  padding: 20px 0 40px;
+  padding: $gl-padding 0 ($gl-padding * 2);
 
   .blank-state-welcome-title {
     font-size: 24px;
@@ -32,23 +31,9 @@
 }
 
 .blank-state-link {
-  display: block;
   color: $gl-text-color;
-  flex: 0 0 100%;
   margin-bottom: 15px;
 
-  @include media-breakpoint-up(sm) {
-    flex: 0 0 49%;
-
-    &:nth-child(odd) {
-      margin-right: 5px;
-    }
-
-    &:nth-child(even) {
-      margin-left: 5px;
-    }
-  }
-
   &:hover {
     background-color: $gray-light;
     text-decoration: none;
@@ -63,15 +48,25 @@
 }
 
 .blank-state {
-  padding: 20px;
+  display: flex;
+  align-items: center;
+  padding: 20px 50px;
   border: 1px solid $border-color;
   border-radius: $border-radius-default;
+  min-height: 240px;
+  margin-bottom: $gl-padding;
+  width: calc(50% - #{$gl-padding-8});
+
+  @include media-breakpoint-down(sm) {
+    width: 100%;
+    flex-direction: column;
+    justify-content: center;
+    padding: 50px 20px;
+
+    .column-small & {
+      width: 100%;
+    }
 
-  @include media-breakpoint-up(sm) {
-    display: flex;
-    height: 100%;
-    align-items: center;
-    padding: 50px 30px;
   }
 }
 
@@ -90,7 +85,7 @@
   }
 
   .blank-state-body {
-    @include media-breakpoint-down(xs) {
+    @include media-breakpoint-down(sm) {
       text-align: center;
       margin-top: 20px;
     }
@@ -121,9 +116,3 @@
     }
   }
 }
-
-@include media-breakpoint-down(xs) {
-  .blank-state-icon svg {
-    width: 315px;
-  }
-}
diff --git a/app/assets/stylesheets/framework/card.scss b/app/assets/stylesheets/framework/card.scss
new file mode 100644
index 00000000000..9911b926cbb
--- /dev/null
+++ b/app/assets/stylesheets/framework/card.scss
@@ -0,0 +1,8 @@
+.card-header {
+  &:first-child {
+    // intended use case: card with only a header (for example empty related issues)
+    &:last-child {
+      @include border-radius($card-inner-border-radius);
+    }
+  }
+}
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index b95978b6966..4b89a2f2b04 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -55,6 +55,10 @@
   background-color: $gray-light;
 }
 
+.bg-line-target-blue {
+  background: $line-target-blue;
+}
+
 .text-break-word {
   word-break: break-all;
 }
@@ -210,18 +214,26 @@ li.note {
 @mixin message($background-color, $border-color, $text-color) {
   border-left: 4px solid $border-color;
   color: $text-color;
-  padding: 10px;
-  margin-bottom: 10px;
-  background: $background-color;
-  padding-left: 20px;
+  padding: $gl-padding $gl-padding-24;
+  margin-bottom: $gl-padding-12;
+  background-color: $background-color;
 
   &.centered {
     text-align: center;
   }
+
+  .close {
+    svg {
+      width: $gl-font-size-large;
+      height: $gl-font-size-large;
+    }
+
+    color: inherit;
+  }
 }
 
 .warning_message {
-  @include message($orange-100, $orange-200, $orange-700);
+  @include message($orange-100, $orange-200, $orange-800);
 }
 
 .danger_message {
@@ -387,6 +399,7 @@ img.emoji {
 .prepend-top-16 { margin-top: 16px; }
 .prepend-top-20 { margin-top: 20px; }
 .prepend-top-32 { margin-top: 32px; }
+.prepend-left-2 { margin-left: 2px; }
 .prepend-left-4 { margin-left: 4px; }
 .prepend-left-5 { margin-left: 5px; }
 .prepend-left-8 { margin-left: 8px; }
@@ -427,6 +440,7 @@ img.emoji {
 .flex-no-shrink { flex-shrink: 0; }
 .ws-initial { white-space: initial; }
 .ws-normal { white-space: normal; }
+.ws-pre-wrap { white-space: pre-wrap; }
 .overflow-auto { overflow: auto; }
 
 .d-flex-center {
@@ -439,6 +453,8 @@ img.emoji {
 .w-0 { width: 0; }
 .w-8em { width: 8em; }
 .w-3rem { width: 3rem; }
+.w-15p { width: 15%; }
+.w-70p { width: 70%; }
 
 .h-12em { height: 12em; }
 .h-32-px { height: 32px;}
@@ -544,3 +560,6 @@ img.emoji {
     }
   }
 }
+
+.gl-font-size-small { font-size: $gl-font-size-small; }
+.gl-line-height-24 { line-height: $gl-line-height-24; }
diff --git a/app/assets/stylesheets/framework/contextual_sidebar.scss b/app/assets/stylesheets/framework/contextual_sidebar.scss
index 3238b01c6c0..0e29b0b7dda 100644
--- a/app/assets/stylesheets/framework/contextual_sidebar.scss
+++ b/app/assets/stylesheets/framework/contextual_sidebar.scss
@@ -141,7 +141,7 @@
     }
 
     .sidebar-top-level-items > li > a {
-      min-height: 44px;
+      min-height: 45px;
     }
 
     .fly-out-top-item {
@@ -177,7 +177,7 @@
       transition: padding $sidebar-transition-duration;
       display: flex;
       align-items: center;
-      padding: 12px 15px;
+      padding: 12px $gl-padding;
       color: $gl-text-color-secondary;
     }
 
@@ -341,7 +341,7 @@
       > a {
         margin-left: 4px;
         // Subtract width of left border on active element
-        padding-left: 11px;
+        padding-left: $gl-padding-12;
       }
 
       .badge.badge-pill {
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 29f63e9578d..ce74aa6ed02 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -326,8 +326,9 @@
   }
 
   .dropdown-header {
-    color: $gl-text-color-secondary;
+    color: $black;
     font-size: 13px;
+    font-weight: $gl-font-weight-bold;
     line-height: $gl-line-height;
     padding: $dropdown-item-padding-y $dropdown-item-padding-x;
   }
diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss
index 536a26a6ffe..487fbf0fcff 100644
--- a/app/assets/stylesheets/framework/files.scss
+++ b/app/assets/stylesheets/framework/files.scss
@@ -108,12 +108,14 @@
     background: $white-light;
 
     &.image_file,
+    &.audio,
     &.video {
       background: $gray-darker;
       text-align: center;
       padding: 30px;
 
       img,
+      audio,
       video {
         max-width: 80%;
       }
@@ -479,3 +481,8 @@ span.idiff {
     padding: $gl-padding;
   }
 }
+
+.jupyter-notebook-scrolled {
+  overflow-y: auto;
+  max-height: 20rem;
+}
diff --git a/app/assets/stylesheets/framework/flash.scss b/app/assets/stylesheets/framework/flash.scss
index 7e7b08797b2..8fc2fd5f53b 100644
--- a/app/assets/stylesheets/framework/flash.scss
+++ b/app/assets/stylesheets/framework/flash.scss
@@ -1,7 +1,6 @@
 $notification-box-shadow-color: rgba(0, 0, 0, 0.25);
 
 .flash-container {
-  cursor: pointer;
   margin: 0;
   margin-bottom: $gl-padding;
   font-size: 14px;
@@ -12,19 +11,24 @@ $notification-box-shadow-color: rgba(0, 0, 0, 0.25);
     position: sticky;
     position: -webkit-sticky;
     top: $flash-container-top;
-    z-index: 200;
+    z-index: 251;
 
     .flash-content {
       box-shadow: 0 2px 4px 0 $notification-box-shadow-color;
     }
   }
 
-  .close-icon {
-    width: 16px;
-    height: 16px;
+  .close-icon-wrapper {
+    padding: ($gl-btn-padding + $gl-padding-4) $gl-padding $gl-btn-padding;
     position: absolute;
-    right: $gl-padding;
-    top: $gl-padding;
+    right: 0;
+    top: 0;
+    cursor: pointer;
+
+    .close-icon {
+      width: 16px;
+      height: 16px;
+    }
   }
 
   .flash-notice,
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index ca737c53318..1195e467192 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -523,6 +523,7 @@
     margin-top: 4px;
     color: $gl-text-color;
     left: auto;
+    max-height: $dropdown-max-height-lg;
 
     li.current-user {
       padding: $dropdown-item-padding-y $dropdown-item-padding-x;
diff --git a/app/assets/stylesheets/framework/icons.scss b/app/assets/stylesheets/framework/icons.scss
index 7332c4981d2..a53f5d85949 100644
--- a/app/assets/stylesheets/framework/icons.scss
+++ b/app/assets/stylesheets/framework/icons.scss
@@ -31,7 +31,16 @@
   }
 }
 
-.ci-status-icon-preparing,
+.ci-status-icon-preparing {
+  svg {
+    fill: $gray-500;
+  }
+
+  &.add-border {
+    @include borderless-status-icon($gray-500);
+  }
+}
+
 .ci-status-icon-running {
   svg {
     fill: $blue-400;
diff --git a/app/assets/stylesheets/framework/job_log.scss b/app/assets/stylesheets/framework/job_log.scss
index 074b2405217..4a57a458c50 100644
--- a/app/assets/stylesheets/framework/job_log.scss
+++ b/app/assets/stylesheets/framework/job_log.scss
@@ -12,21 +12,22 @@
 }
 
 .log-line {
-  padding: 1px $gl-padding 1px $job-log-line-padding;
+  padding: 1px $gl-padding-8 1px $job-log-line-padding;
+  min-height: $gl-line-height-20;
 }
 
 .line-number {
-  color: $gl-text-color-inverted;
+  color: $gl-gray-500;
   padding: 0 $gl-padding-8;
   min-width: $job-line-number-width;
-  margin-left: -$job-line-number-width;
+  margin-left: -$job-line-number-margin;
   padding-right: 1em;
 
   &:hover,
   &:active,
   &:visited {
     text-decoration: underline;
-    color: $gl-text-color-inverted;
+    color: $gl-gray-500;
   }
 }
 
diff --git a/app/assets/stylesheets/framework/selects.scss b/app/assets/stylesheets/framework/selects.scss
index 81ccea1e01f..2289f0a7011 100644
--- a/app/assets/stylesheets/framework/selects.scss
+++ b/app/assets/stylesheets/framework/selects.scss
@@ -245,7 +245,7 @@
 .select2-highlighted {
   .group-result {
     .group-path {
-      color: $white-light;
+      color: $gray-800;
     }
   }
 }
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index 43d0e51e4c9..b9cfcf6ce5c 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -171,7 +171,7 @@
       position: absolute;
       top: $gl-padding;
       bottom: $gl-padding;
-      left: map-get($spacers, 2) - 1px;
+      left: map-get($spacers, 2) - px-to-rem(1px);
     }
 
     &-row {
@@ -187,7 +187,7 @@
       * 2px extra is to give a little more height than needed
       * to hide timeline line before/after the element starts/ends
       */
-      height: map-get($spacers, 4) + 2px;
+      height: map-get($spacers, 4) + px-to-rem(2px);
       z-index: 1;
       position: relative;
       top: -3px;
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index ba123ff9a67..3876d1c10d4 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -69,14 +69,6 @@
 
   details {
     margin-bottom: $gl-padding;
-
-    summary {
-      margin-bottom: $gl-padding;
-    }
-
-    *:first-child:not(summary) {
-      margin-top: $gl-padding;
-    }
   }
 
   // Single code lines should wrap
@@ -198,6 +190,141 @@
         border-color: $gl-gray-200;
       }
     }
+
+    &.grid-none {
+      > thead > tr {
+        > th {
+          border-bottom-width: 0;
+          border-right-width: 0;
+          border-left-width: 0;
+
+          &:first-child {
+            border-left-width: 1px;
+          }
+
+          &:last-child {
+            border-right-width: 1px;
+          }
+        }
+      }
+
+      > tbody {
+        > tr > td {
+          border-width: 0;
+
+          &:first-child {
+            border-left-width: 1px;
+          }
+
+          &:last-child {
+            border-right-width: 1px;
+          }
+        }
+
+        > tr:last-child > td {
+          border-bottom-width: 1px;
+        }
+      }
+    }
+
+
+    &.grid-rows {
+      > thead > tr > th,
+      > tbody > tr > td {
+        border-right-width: 0;
+        border-left-width: 0;
+      }
+
+      > thead > tr {
+        > th:first-child {
+          border-left-width: 1px;
+        }
+
+        > th:last-child {
+          border-right-width: 1px;
+        }
+      }
+
+      > tbody > tr {
+        > td {
+          border-left-width: 0;
+          border-right-width: 0;
+        }
+
+        > td:first-child {
+          border-left-width: 1px;
+        }
+
+        > td:last-child {
+          border-right-width: 1px;
+        }
+      }
+    }
+
+    &.grid-cols {
+      > thead > tr > th {
+        border-bottom-width: 0;
+      }
+
+      > tbody > tr > td {
+        border-top-width: 0;
+        border-bottom-width: 0;
+      }
+
+      > tbody > tr:last-child > td {
+        border-bottom-width: 1px;
+      }
+    }
+
+    &.frame-sides {
+      > thead > tr > th {
+        border-top-width: 0;
+      }
+
+      > tbody > tr:last-child > td {
+        border-bottom-width: 0;
+      }
+    }
+
+    &.frame-topbot,
+    &.frame-ends {
+      > thead > tr > th:first-child,
+      > tbody > tr > td:first-child {
+        border-left-width: 0;
+      }
+
+      > thead > tr > th:last-child,
+      > tbody > tr > td:last-child {
+        border-right-width: 0;
+      }
+    }
+
+    &.frame-none {
+      > thead > tr > th {
+        border-top-width: 0;
+      }
+
+      > tbody > tr:last-child > td {
+        border-bottom-width: 0;
+      }
+
+      > thead > tr > th:first-child,
+      > tbody > tr > td:first-child {
+        border-left-width: 0;
+      }
+
+      > thead > tr > th:last-child,
+      > tbody > tr > td:last-child {
+        border-right-width: 0;
+      }
+    }
+
+    &.stripes-all tr,
+    &.stripes-odd tr:nth-of-type(odd),
+    &.stripes-even tr:nth-of-type(even),
+    &.stripes-hover tr:hover {
+      background: $gray-light;
+    }
   }
 
   table:dir(rtl) th {
@@ -397,7 +524,7 @@
     }
   }
 
-  .prometheus-graph-embed {
+  .metrics-embed {
     h3.popover-header {
       /** Override <h3> .popover-header
       * as embed metrics do not follow the same
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index e77527ac130..dfc39d8e03b 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -606,9 +606,10 @@ $blame-blue: #254e77;
 */
 $builds-trace-bg: #111;
 $job-log-highlight-height: 18px;
-$job-log-line-padding: 62px;
-$job-line-number-width: 40px;
-$job-arrow-margin: 50px;
+$job-log-line-padding: 55px;
+$job-line-number-width: 50px;
+$job-line-number-margin: 43px;
+$job-arrow-margin: 55px;
 
 /*
 * Commit Page
@@ -832,6 +833,7 @@ Merge Requests
 */
 $mr-tabs-height: 48px;
 $mr-version-controls-height: 56px;
+$mr-widget-margin-left: 40px;
 
 /*
 Compare Branches