debian-mirror-gitlab/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;
  }
}

.sortable-link {
  max-width: 85%;
}

.item-body {
  position: relative;
  line-height: $gl-line-height;

  .issue-token-state-icon-open {
    color: $green-500;
  }

  .issue-token-state-icon-closed {
    color: $blue-500;
  }

  .merge-request-status.closed {
    color: $red-500;
  }

  .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 {
    color: $orange-600;
  }

  .item-title {
    flex-basis: 100%;
    font-size: $gl-font-size-small;

    &.mr-title {
      font-weight: $gl-font-weight-bold;
    }

    .issue-token-state-icon-open,
    .issue-token-state-icon-closed {
      display: none;
    }
  }

  .item-path-id .path-id-text,
  .item-milestone .milestone-title,
  .item-due-date,
  .item-weight .board-card-info-text {
    color: $gl-text-color-secondary;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
}

.item-meta {
  flex-basis: 100%;
  font-size: $gl-font-size-small;
  color: $gl-text-color-secondary;

  .item-meta-child {
    flex-basis: 100%;
  }

  .item-milestone,
  .item-weight {
    cursor: help;
  }

  .item-milestone {
    text-decoration: none;
    max-width: $item-milestone-max-width;

    .ic-clock {
      color: $gl-text-color-tertiary;
      margin-right: $gl-padding-4;
    }
  }

  .item-weight {
    max-width: $item-weight-max-width;
  }

  .item-assignees {
    .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;
    }
  }
}

.item-path-id {
  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;
  }

  @include media-breakpoint-down(sm) {
    &:not(.mr-item-path) {
      order: 1;
    }
  }
}

.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;
  }
}

.mr-status-wrapper,
.mr-ci-status {
  line-height: 0;
}

@include media-breakpoint-up(sm) {
  .sortable-link {
    max-width: 90%;
  }
}

/* Small devices (landscape phones, 768px and up) */
@include media-breakpoint-up(md) {
  .sortable-link {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 100%;
  }

  .item-body {
    .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-assignees {
        margin-left: $gl-padding-4;
      }
    }
  }
}

/* Medium devices (desktops, 992px and up) */
@include media-breakpoint-up(lg) {
  .item-body {
    .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`
    }
  }
}

/* Large devices (large desktops, 1200px and up) */
@include media-breakpoint-up(xl) {
  .item-body {
    .item-title {
      min-width: 0;
      width: auto;
      flex-basis: unset;
      font-weight: $gl-font-weight-normal;

      .issue-token-state-icon-open,
      .issue-token-state-icon-closed {
        display: block;
        margin-right: $gl-padding-8;
      }
    }
  }

  .item-contents {
    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;
      line-height: $gl-padding-24;
      border-radius: $gl-padding-24;
    }
  }

  .btn-item-remove {
    position: relative;
    top: initial;
    right: 0;
    padding: $btn-sm-side-margin;

    &:hover {
      border-color: $border-color;
    }
  }

  .sortable-link {
    line-height: 1.3;
  }
}