Add latest changes from gitlab-org/gitlab@master

1 files changed, 125 insertions, 8 deletions

diff --git a/app/assets/stylesheets/components/related_items_list.scss b/app/assets/stylesheets/components/related_items_list.scss
index 59224d37744..6820bdca2fa 100644
--- a/app/assets/stylesheets/components/related_items_list.scss
+++ b/app/assets/stylesheets/components/related_items_list.scss
@@ -15,6 +15,14 @@ $item-weight-max-width: 48px;
   max-width: 85%;
 }
 
+.related-items-tree {
+  .card-header {
+    .gl-label {
+      line-height: $gl-line-height;
+    }
+  }
+}
+
 .item-body {
   position: relative;
   line-height: $gl-line-height;
@@ -49,6 +57,10 @@ $item-weight-max-width: 48px;
     color: $orange-600;
   }
 
+  .item-title-wrapper {
+    max-width: 100%;
+  }
+
   .item-title {
     flex-basis: 100%;
     font-size: $gl-font-size-small;
@@ -72,15 +84,62 @@ $item-weight-max-width: 48px;
     overflow: hidden;
     white-space: nowrap;
   }
+
+  @include media-breakpoint-down(lg) {
+    .issue-count-badge {
+      padding-left: 0;
+    }
+  }
+}
+
+.item-body,
+.card-header {
+  .health-label-short {
+    display: initial;
+    max-width: 0;
+  }
+
+  .health-label-long {
+    display: none;
+  }
+
+  .status {
+    &-at-risk {
+      color: $red-500;
+      background-color: $red-100;
+    }
+
+    &-needs-attention {
+      color: $orange-700;
+      background-color: $orange-100;
+    }
+
+    &-on-track {
+      color: $green-600;
+      background-color: $green-100;
+    }
+  }
+
+  .gl-label-text {
+    font-weight: $gl-font-weight-bold;
+  }
+
+  .bullet-separator {
+    font-size: 9px;
+    color: $gray-400;
+  }
 }
 
 .item-meta {
   flex-basis: 100%;
-  font-size: $gl-font-size-small;
+  font-size: $gl-font-size;
   color: $gl-text-color-secondary;
 
-  .item-meta-child {
-    flex-basis: 100%;
+  .item-due-date,
+  .board-card-weight {
+    &.board-card-info {
+      margin-right: 0;
+    }
   }
 
   .item-attributes-area {
@@ -88,10 +147,6 @@ $item-weight-max-width: 48px;
       margin-left: 8px;
     }
 
-    .board-card-info {
-      margin-right: 0;
-    }
-
     @include media-breakpoint-down(sm) {
       margin-left: -8px;
     }
@@ -107,13 +162,21 @@ $item-weight-max-width: 48px;
     max-width: $item-milestone-max-width;
 
     .ic-clock {
-      color: $gl-text-color-tertiary;
+      color: $gl-text-color-secondary;
       margin-right: $gl-padding-4;
     }
   }
 
   .item-weight {
     max-width: $item-weight-max-width;
+
+    .ic-weight {
+      color: $gl-text-color-secondary;
+    }
+  }
+
+  .item-due-date .ic-calendar {
+    color: $gl-text-color-secondary;
   }
 }
 
@@ -194,6 +257,13 @@ $item-weight-max-width: 48px;
   .sortable-link {
     max-width: 90%;
   }
+
+  .item-body,
+  .card-header {
+    .health-label-short {
+      max-width: 30px;
+    }
+  }
 }
 
 /* Small devices (landscape phones, 768px and up) */
@@ -232,6 +302,13 @@ $item-weight-max-width: 48px;
       }
     }
   }
+
+  .item-body,
+  .card-header {
+    .health-label-short {
+      max-width: 60px;
+    }
+  }
 }
 
 /* Medium devices (desktops, 992px and up) */
@@ -245,6 +322,17 @@ $item-weight-max-width: 48px;
       font-size: inherit; // Base size given to `item-meta` is `$gl-font-size-small`
     }
   }
+
+  .item-body,
+  .card-header {
+    .health-label-short {
+      max-width: 100px;
+    }
+  }
+
+  .health-label-long {
+    display: none;
+  }
 }
 
 /* Large devices (large desktops, 1200px and up) */
@@ -264,11 +352,23 @@ $item-weight-max-width: 48px;
       }
     }
 
+    .item-title-wrapper {
+      max-width: calc(100% - 440px);
+    }
+
     .item-info-area {
       flex-basis: auto;
     }
   }
 
+  .health-label-short {
+    display: initial;
+  }
+
+  .health-label-long {
+    display: none;
+  }
+
   .item-contents {
     overflow: hidden;
   }
@@ -306,3 +406,20 @@ $item-weight-max-width: 48px;
     line-height: 1.3;
   }
 }
+
+@media only screen and (min-width: 1400px) {
+  .card-header,
+  .item-body {
+    .health-label-short {
+      display: none;
+    }
+
+    .health-label-long {
+      display: initial;
+    }
+  }
+
+  .item-body .item-title-wrapper {
+    max-width: calc(100% - 570px);
+  }
+}