Add latest changes from gitlab-org/gitlab@13-0-stable-ee

7 files changed, 222 insertions, 89 deletions

diff --git a/app/assets/stylesheets/components/dashboard_skeleton.scss b/app/assets/stylesheets/components/dashboard_skeleton.scss
index 2e2c1fefc79..ce33aa94df3 100644
--- a/app/assets/stylesheets/components/dashboard_skeleton.scss
+++ b/app/assets/stylesheets/components/dashboard_skeleton.scss
@@ -68,7 +68,7 @@
       background-size: cover;
       background-image: linear-gradient(to right,
       $gray-100 0%,
-      $gray-50 20%,
+      $gray-10 20%,
       $gray-100 40%,
       $gray-100 100%);
       border-radius: $gl-padding;
diff --git a/app/assets/stylesheets/components/design_management/design.scss b/app/assets/stylesheets/components/design_management/design.scss
new file mode 100644
index 00000000000..1061aae2bbb
--- /dev/null
+++ b/app/assets/stylesheets/components/design_management/design.scss
@@ -0,0 +1,140 @@
+.design-detail {
+  background-color: rgba($black, 0.9);
+
+  .with-performance-bar & {
+    top: 35px;
+  }
+
+  .inactive {
+    opacity: 0.5;
+  }
+}
+
+.design-presentation-wrapper {
+  top: 0;
+  left: 0;
+}
+
+.design-scaler {
+  z-index: 1;
+}
+
+.design-scaler-wrapper {
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.design-checkbox {
+  position: absolute;
+  top: $gl-padding;
+  left: 30px;
+}
+
+.image-notes {
+  overflow-y: scroll;
+  padding: $gl-padding;
+  padding-top: 50px;
+  background-color: $white;
+  flex-shrink: 0;
+  min-width: 400px;
+  flex-basis: 28%;
+
+  .badge.badge-pill {
+    margin-left: $gl-padding;
+    background-color: $blue-400;
+    color: $white;
+    border: $white 1px solid;
+    min-height: 28px;
+    padding: 7px 10px;
+    border-radius: $gl-padding;
+  }
+
+  .design-discussion {
+    margin: $gl-padding 0;
+
+    &::before {
+      content: '';
+      border-left: 1px solid $gray-200;
+      position: absolute;
+      left: 28px;
+      top: -18px;
+      height: 18px;
+    }
+
+    .design-note {
+      padding: $gl-padding;
+      list-style: none;
+
+      a {
+        color: inherit;
+      }
+
+      .note-text a {
+        color: $blue-600;
+      }
+    }
+
+    .reply-wrapper {
+      padding: $gl-padding;
+    }
+  }
+
+  .reply-wrapper {
+    border-top: 1px solid $border-color;
+  }
+
+  .new-discussion-disclaimer {
+    line-height: 20px;
+  }
+}
+
+@media (max-width: map-get($grid-breakpoints, lg)) {
+  .design-detail {
+    overflow-y: scroll;
+  }
+
+  .image-notes {
+    overflow-y: auto;
+    min-width: 100%;
+    flex-grow: 1;
+    flex-basis: auto;
+  }
+}
+
+.design-dropzone-border {
+  border: 2px dashed $gray-200;
+}
+
+.design-dropzone-card {
+  transition: border $general-hover-transition-duration $general-hover-transition-curve;
+
+  &:focus,
+  &:active {
+    outline: none;
+    border: 2px dashed $purple;
+    color: $gl-text-color;
+  }
+
+  &:hover {
+    border-color: $gray-500;
+  }
+}
+
+.design-dropzone-overlay {
+  border: 2px dashed $purple;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  opacity: 1;
+}
+
+.design-dropzone-fade-enter-active,
+.design-dropzone-fade-leave-active {
+  transition: opacity $general-hover-transition-duration $general-hover-transition-curve;
+}
+
+.design-dropzone-fade-enter,
+.design-dropzone-fade-leave-to {
+  opacity: 0;
+}
diff --git a/app/assets/stylesheets/components/design_management/design_list_item.scss b/app/assets/stylesheets/components/design_management/design_list_item.scss
new file mode 100644
index 00000000000..aacb1f91e59
--- /dev/null
+++ b/app/assets/stylesheets/components/design_management/design_list_item.scss
@@ -0,0 +1,19 @@
+.design-list-item {
+  height: 280px;
+  text-decoration: none;
+
+  .icon-version-status {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+  }
+
+  .design-event {
+    top: $gl-padding;
+    right: $gl-padding;
+  }
+
+  .card-body {
+    height: 230px;
+  }
+}
diff --git a/app/assets/stylesheets/components/design_management/design_version_dropdown.scss b/app/assets/stylesheets/components/design_management/design_version_dropdown.scss
new file mode 100644
index 00000000000..f79d672e238
--- /dev/null
+++ b/app/assets/stylesheets/components/design_management/design_version_dropdown.scss
@@ -0,0 +1,3 @@
+.design-version-dropdown > button {
+  background: inherit;
+}
diff --git a/app/assets/stylesheets/components/milestone_combobox.scss b/app/assets/stylesheets/components/milestone_combobox.scss
new file mode 100644
index 00000000000..e0637088bbb
--- /dev/null
+++ b/app/assets/stylesheets/components/milestone_combobox.scss
@@ -0,0 +1,13 @@
+.selected-item::before {
+  content: '\f00c';
+  color: $green-500;
+  position: absolute;
+  left: 16px;
+  top: 16px;
+  transform: translateY(-50%);
+  font: 14px FontAwesome;
+}
+
+.dropdown-item-space {
+  padding: 8px 12px;
+}
diff --git a/app/assets/stylesheets/components/related_items_list.scss b/app/assets/stylesheets/components/related_items_list.scss
index ce1039832d3..61f971a3185 100644
--- a/app/assets/stylesheets/components/related_items_list.scss
+++ b/app/assets/stylesheets/components/related_items_list.scss
@@ -1,9 +1,11 @@
 $item-path-max-width: 160px;
 $item-milestone-max-width: 120px;
 $item-weight-max-width: 48px;
+$item-remove-button-space: 42px;
 
 .related-items-list {
   padding: $gl-padding-4;
+  padding-right: $gl-padding-6;
 
   &,
   .list-item:last-child {
@@ -11,16 +13,16 @@ $item-weight-max-width: 48px;
   }
 }
 
-.sortable-link {
-  max-width: 85%;
-}
-
 .related-items-tree {
   .card-header {
     .gl-label {
       line-height: $gl-line-height;
     }
   }
+
+  .sortable-link {
+    white-space: normal;
+  }
 }
 
 .item-body {
@@ -48,17 +50,12 @@ $item-weight-max-width: 48px;
     cursor: help;
   }
 
-  .issue-token-state-icon-open,
-  .issue-token-state-icon-closed {
-    margin-right: $gl-padding-4;
-  }
-
   .confidential-icon {
     color: $orange-600;
   }
 
   .item-title-wrapper {
-    max-width: 100%;
+    max-width: calc(100% - #{$item-remove-button-space});
   }
 
   .item-title {
@@ -69,11 +66,6 @@ $item-weight-max-width: 48px;
       font-weight: $gl-font-weight-bold;
     }
 
-    .issue-token-state-icon-open,
-    .issue-token-state-icon-closed {
-      display: none;
-    }
-
     .sortable-link {
       color: $gray-900;
       font-weight: normal;
@@ -90,17 +82,14 @@ $item-weight-max-width: 48px;
     white-space: nowrap;
   }
 
-  @include media-breakpoint-down(lg) {
-    .issue-count-badge {
-      padding-left: 0;
-    }
+  .health-label-short {
+    display: none;
   }
 }
 
 .item-body,
 .card-header {
   .health-label-short {
-    display: initial;
     max-width: 0;
   }
 
@@ -135,6 +124,12 @@ $item-weight-max-width: 48px;
   }
 }
 
+.card-header {
+  .health-label-short {
+    display: initial;
+  }
+}
+
 .item-meta {
   flex-basis: 100%;
   font-size: $gl-font-size;
@@ -227,25 +222,28 @@ $item-weight-max-width: 48px;
     font-weight: $gl-font-weight-bold;
     max-width: $item-path-max-width;
   }
-
-  .issue-token-state-icon-open,
-  .issue-token-state-icon-closed {
-    display: block;
-  }
 }
 
 .btn-item-remove {
   position: absolute;
-  right: 0;
   top: $gl-padding-4 / 2;
+  right: 0;
   padding: $gl-padding-4;
   margin-right: $gl-padding-4 / 2;
   line-height: 0;
   border-color: transparent;
   color: $gl-text-color-secondary;
 
+  .related-items-tree & {
+    position: relative;
+    top: initial;
+    padding: $btn-sm-side-margin;
+    margin-right: initial;
+  }
+
   &:hover {
     color: $gl-text-color;
+    border-color: $border-color;
   }
 }
 
@@ -269,7 +267,6 @@ $item-weight-max-width: 48px;
     max-width: 90%;
   }
 
-  .item-body,
   .card-header {
     .health-label-short {
       max-width: 30px;
@@ -279,6 +276,15 @@ $item-weight-max-width: 48px;
 
 /* Small devices (landscape phones, 768px and up) */
 @include media-breakpoint-up(md) {
+  .item-body .item-contents {
+    max-width: 95%;
+  }
+
+  .related-items-tree .item-contents,
+  .item-body .item-title {
+    max-width: 100%;
+  }
+
   .sortable-link {
     text-overflow: ellipsis;
     overflow: hidden;
@@ -290,27 +296,8 @@ $item-weight-max-width: 48px;
     .item-contents {
       min-width: 0;
     }
-
-    .item-title {
-      flex-basis: unset;
-      // 95% because we compensate
-      // for remove button which is
-      // positioned absolutely
-      width: 95%;
-    }
-
-    .btn-item-remove {
-      order: 1;
-    }
-  }
-
-  .item-meta {
-    .item-meta-child {
-      flex-basis: unset;
-    }
   }
 
-  .item-body,
   .card-header {
     .health-label-short {
       max-width: 60px;
@@ -330,7 +317,6 @@ $item-weight-max-width: 48px;
     }
   }
 
-  .item-body,
   .card-header {
     .health-label-short {
       max-width: 100px;
@@ -346,32 +332,13 @@ $item-weight-max-width: 48px;
 @include media-breakpoint-up(xl) {
   .item-body {
     .item-title {
-      min-width: 0;
       width: auto;
       flex-basis: auto;
       flex-shrink: 1;
       font-weight: $gl-font-weight-normal;
-
-      .issue-token-state-icon-open,
-      .issue-token-state-icon-closed {
-        display: block;
-        margin-right: $gl-padding-8;
-      }
-    }
-
-    .item-title-wrapper {
-      max-width: calc(100% - 500px);
-    }
-
-    .item-info-area {
-      flex-basis: auto;
     }
   }
 
-  .health-label-short {
-    display: initial;
-  }
-
   .health-label-long {
     display: none;
   }
@@ -380,16 +347,7 @@ $item-weight-max-width: 48px;
     overflow: hidden;
   }
 
-  .item-meta {
-    flex: 1;
-  }
-
   .item-assignees {
-    .avatar {
-      height: $gl-padding-24;
-      width: $gl-padding-24;
-    }
-
     .avatar-counter {
       height: $gl-padding-24;
       min-width: $gl-padding-24;
@@ -401,12 +359,8 @@ $item-weight-max-width: 48px;
   .btn-item-remove {
     position: relative;
     top: initial;
-    right: 0;
     padding: $btn-sm-side-margin;
-
-    &:hover {
-      border-color: $border-color;
-    }
+    margin-right: $gl-padding-4 / 2;
   }
 
   .sortable-link {
@@ -415,8 +369,7 @@ $item-weight-max-width: 48px;
 }
 
 @media only screen and (min-width: 1500px) {
-  .card-header,
-  .item-body {
+  .card-header {
     .health-label-short {
       display: none;
     }
@@ -425,10 +378,4 @@ $item-weight-max-width: 48px;
       display: initial;
     }
   }
-
-  .item-body {
-    .item-title-wrapper {
-      max-width: calc(100% - 640px);
-    }
-  }
 }
diff --git a/app/assets/stylesheets/components/rich_content_editor.scss b/app/assets/stylesheets/components/rich_content_editor.scss
new file mode 100644
index 00000000000..eca0f1114af
--- /dev/null
+++ b/app/assets/stylesheets/components/rich_content_editor.scss
@@ -0,0 +1,11 @@
+// Overrides styles from ToastUI editor
+.tui-editor-defaultUI-toolbar .toolbar-button {
+  color: $gl-gray-600;
+  border: 0;
+
+  &:hover,
+  &:active {
+    color: $blue-500;
+    border: 0;
+  }
+}