Merge branch '47007-related-merge-requests-in-issue-design-restyle' into 'master'

[EE Backport] Related merge requests in issue design - Restyle

See merge request gitlab-org/gitlab-ee!9177

ee/app/assets/stylesheets/components/related_items_list.scss

-$item-path-max-width: 160px;
-$item-milestone-max-width: 120px;
-$item-weight-max-width: 48px;
-
-.related-items-list {
-  padding: $gl-padding-4;
-
-  &,
-  .list-item:last-child {
-    margin-bottom: 0;
-  }
-}
-
-.item-body {
-  display: flex;
-  position: relative;
-  align-items: center;
-  padding: $gl-padding-8;
-  line-height: $gl-line-height;
-
-  .item-contents {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    flex-grow: 1;
-  }
-
-  .issue-token-state-icon-open,
-  .issue-token-state-icon-closed,
-  .confidential-icon,
-  .item-milestone .icon,
-  .item-weight .board-card-info-icon {
-    min-width: $gl-padding;
-    cursor: help;
-  }
-
-  .issue-token-state-icon-open,
-  .issue-token-state-icon-closed {
-    margin-right: $gl-padding-4;
-  }
-
-  .confidential-icon {
-    align-self: baseline;
-    color: $orange-600;
-    margin-right: $gl-padding-4;
-  }
-
-  .item-title {
-    flex-basis: 100%;
-    margin-bottom: $gl-padding-8;
-    font-size: $gl-font-size-small;
-
-    .sortable-link {
-      max-width: 85%;
-    }
-
-    .issue-token-state-icon-open,
-    .issue-token-state-icon-closed {
-      display: none;
-    }
-  }
-
-  .item-meta {
-    display: flex;
-    flex-wrap: wrap;
-    flex-basis: 100%;
-    font-size: $gl-font-size-small;
-    color: $gl-text-color-secondary;
-
-    .item-meta-child {
-      order: 0;
-      display: flex;
-      flex-wrap: wrap;
-      flex-basis: 100%;
-
-      .item-due-date,
-      .item-weight {
-        margin-left: $gl-padding-8;
-      }
-
-      .item-milestone,
-      .item-weight {
-        cursor: help;
-      }
-
-      .item-milestone {
-        text-decoration: none;
-        max-width: $item-milestone-max-width;
-      }
-
-      .item-due-date {
-        margin-right: 0;
-      }
-
-      .item-weight {
-        margin-right: 0;
-        max-width: $item-weight-max-width;
-      }
-    }
-
-    .item-path-id .path-id-text,
-    .item-milestone .milestone-title,
-    .item-due-date,
-    .item-weight .board-card-info-text {
-      color: $gl-text-color-secondary;
-      display: inline-block;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-    }
-
-    .item-path-id {
-      order: 1;
-      margin-top: $gl-padding-4;
-      font-size: $gl-font-size-xs;
-      white-space: nowrap;
-
-      .path-id-text {
-        font-weight: $gl-font-weight-bold;
-        max-width: $item-path-max-width;
-      }
-
-      .issue-token-state-icon-open,
-      .issue-token-state-icon-closed {
-        display: block;
-      }
-    }
-
-    .item-milestone .ic-clock {
-      color: $gl-text-color-tertiary;
-      margin-right: $gl-padding-4;
-    }
-
-    .item-assignees {
-      order: 2;
-      align-self: flex-end;
-      align-items: center;
-      margin-left: auto;
-
-      .user-avatar-link {
-        margin-right: -$gl-padding-4;
-
-        &:nth-of-type(1) {
-          z-index: 2;
-        }
-
-        &:nth-of-type(2) {
-          z-index: 1;
-        }
-
-        &:last-child {
-          margin-right: 0;
-        }
-      }
-
-      .avatar {
-        height: $gl-padding;
-        width: $gl-padding;
-        margin-right: 0;
-        vertical-align: bottom;
-      }
-
-      .avatar-counter {
-        height: $gl-padding;
-        border: 1px solid transparent;
-        background-color: $gl-text-color-tertiary;
-        font-weight: $gl-font-weight-bold;
-        padding: 0 $gl-padding-4;
-        line-height: $gl-padding;
-      }
-    }
-  }
-
-  .btn-item-remove {
-    position: absolute;
-    right: 0;
-    top: $gl-padding-4 / 2;
-    padding: $gl-padding-4;
-    margin-right: $gl-padding-4 / 2;
-    line-height: 0;
-    border-color: transparent;
-    color: $gl-text-color-secondary;
-
-    &:hover {
-      color: $gl-text-color;
-    }
-  }
-}
-
-@include media-breakpoint-up(sm) {
-  .item-body {
-    .item-contents .item-title .sortable-link {
-      max-width: 90%;
-    }
-  }
-}
-
-/* Small devices (landscape phones, 768px and up) */
-@include media-breakpoint-up(md) {
-  .item-body {
-    .item-contents {
-      min-width: 0;
-
-      .item-title {
-        flex-basis: unset;
-        // 98% because we compensate
-        // for remove button which is
-        // positioned absolutely
-        width: 95%;
-        margin-bottom: $gl-padding-4;
-
-        .sortable-link {
-          text-overflow: ellipsis;
-          overflow: hidden;
-          white-space: nowrap;
-          max-width: 100%;
-        }
-      }
-
-      .item-meta {
-        .item-path-id {
-          order: 0;
-          margin-top: 0;
-        }
-
-        .item-meta-child {
-          flex-basis: unset;
-          margin-left: auto;
-          margin-right: $gl-padding-4;
-
-          ~ .item-assignees {
-            margin-left: $gl-padding-4;
-          }
-        }
-
-        .item-assignees {
-          margin-bottom: 0;
-          margin-left: 0;
-          order: 2;
-        }
-      }
-    }
-
-    .btn-item-remove {
-      order: 1;
-    }
-  }
-}
-
-/* Medium devices (desktops, 992px and up) */
-@include media-breakpoint-up(lg) {
-  .item-body {
-    padding: $gl-padding;
-
-    .item-title {
-      font-size: $gl-font-size;
-    }
-
-    .item-meta .item-path-id {
-      font-size: inherit; // Base size given to `item-meta` is `$gl-font-size-small`
-    }
-
-    .issue-token-state-icon-open,
-    .issue-token-state-icon-closed {
-      margin-right: $gl-padding-4;
-    }
-  }
-}
-
-/* Large devices (large desktops, 1200px and up) */
-@include media-breakpoint-up(xl) {
-  .item-body {
-    padding: $gl-padding-8;
-    padding-left: $gl-padding;
-
-    .item-contents {
-      flex-wrap: nowrap;
-      overflow: hidden;
-
-      .item-title {
-        display: flex;
-        margin-bottom: 0;
-        min-width: 0;
-        width: auto;
-        flex-basis: unset;
-        font-weight: $gl-font-weight-normal;
-
-        .sortable-link {
-          display: block;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          overflow: hidden;
-        }
-
-        .issue-token-state-icon-open,
-        .issue-token-state-icon-closed {
-          display: block;
-          margin-right: $gl-padding-8;
-        }
-
-        .confidential-icon {
-          align-self: auto;
-          margin-top: 0;
-        }
-      }
-
-      .item-meta {
-        margin-top: 0;
-        justify-content: flex-end;
-        flex: 1;
-        flex-wrap: nowrap;
-
-        .item-path-id {
-          order: 0;
-          margin-top: 0;
-          margin-left: $gl-padding-8;
-          margin-right: auto;
-
-          .issue-token-state-icon-open,
-          .issue-token-state-icon-closed {
-            display: none;
-          }
-        }
-
-        .item-meta-child {
-          margin-left: $gl-padding-8;
-          flex-wrap: nowrap;
-        }
-
-        .item-assignees {
-          flex-grow: 0;
-          margin-top: 0;
-          margin-right: $gl-padding-4;
-
-          .avatar {
-            height: $gl-padding-24;
-            width: $gl-padding-24;
-          }
-
-          .avatar-counter {
-            height: $gl-padding-24;
-            min-width: $gl-padding-24;
-            line-height: $gl-padding-24;
-            border-radius: $gl-padding-24;
-          }
-        }
-      }
-    }
-
-    .btn-item-remove {
-      position: relative;
-      align-self: center;
-      top: initial;
-      right: 0;
-      margin-right: 0;
-      padding: $btn-sm-side-margin;
-
-      &:hover {
-        border-color: $border-color;
-      }
-    }
-  }
-}