gitlab-org--gitlab-foss/app/assets/stylesheets/pages/milestone.scss

$status-box-line-height: 26px;

.issues-sortable-list .str-truncated {
  max-width: 90%;
}

.milestones {
  padding: $gl-padding-8;
  margin-top: $gl-padding-8;
  border-radius: $border-radius-default;
  background-color: $gray-100;

  .milestone {
    border: 0;
    padding: $gl-padding-top $gl-padding;
    border-radius: $border-radius-default;
    background-color: $white-light;

    &:not(:last-child) {
      margin-bottom: $gl-padding-4;
    }

    h4 {
      font-weight: $gl-font-weight-bold;
    }

    .progress {
      width: 100%;
      height: 6px;
      margin-bottom: $gl-padding-4;
    }

    .milestone-progress {
      a {
        color: $blue-600;
      }
    }

    .status-box {
      font-size: $tooltip-font-size;
      margin-top: 0;
      margin-right: $gl-padding-4;
      line-height: $status-box-line-height;

      @include media-breakpoint-down(xs) {
        line-height: unset;
        padding: $gl-padding-4 $gl-input-padding;
      }
    }
  }
}

.milestone-content {
  .issues-count {
    margin-right: 17px;
    float: right;
    width: 105px;
  }

  .issuable-row {
    span a {
      color: $gl-text-color;
      word-wrap: break-word;
    }
  }

  .card-header {
    line-height: $line-height-base;
    padding: 14px 16px;
    display: flex;

    .title {
      flex: 1;
      flex-grow: 2;
    }

    .counter {
      flex: 0;
      padding-left: 16px;
    }
  }
}

.milestone-sidebar {
  .milestone-progress {
    .title {
      padding-top: 5px;
    }

    .progress {
      height: 6px;
      margin: 0;
    }

    .sidebar-collapsed-icon {
      clear: both;
      padding: 15px 5px 5px;

      .progress {
        margin: 5px 0;
      }
    }
  }

  .collapsed-milestone-date {
    font-size: 12px;
  }

  .milestone-date {
    display: block;
  }

  .date-separator {
    line-height: 5px;
  }

  .remaining-days strong {
    font-weight: $gl-font-weight-normal;
  }

  .milestone-stat {
    float: left;
    margin-right: 14px;
  }

  .milestone-stat:last-child {
    margin-right: 0;
  }

  .right-sidebar-expanded & {
    .gutter-toggle {
      margin-bottom: $sidebar-milestone-toggle-bottom-margin;
    }
  }

  .right-sidebar-collapsed & {
    .milestone-progress {
      padding-top: 0;
    }

    .reference {
      border-top: 1px solid $border-gray-normal;
    }
  }
}

.milestone-issues-list,
.milestone-merge_requests-list {
  .issuable-detail {
    display: block;
    margin-top: 7px;

    .issue-link {
      display: inline-block;
    }

    .issuable-number {
      color: $gl-text-color-secondary;
      margin-right: 5px;
    }

    .avatar {
      float: none;
    }

    > a:not(:last-of-type) {
      margin-right: 5px;
    }
  }
}

.milestone-detail {
  border-bottom: 1px solid $border-color;
  padding: 20px 0;
}

@include media-breakpoint-down(xs) {
  .milestone-actions {
    @include clearfix();
    padding-top: $gl-vert-padding;

    .btn:first-child {
      margin-left: 0;
    }
  }
}

.milestone-page-header {
  display: flex;
  flex-flow: row;
  align-items: center;
  flex-wrap: wrap;

  .status-box {
    margin-top: 0;
    order: 1;
  }

  .milestone-buttons {
    margin-left: auto;
    order: 2;

    .verbose {
      display: none;
    }
  }

  .header-text-content {
    order: 3;
    width: 100%;
  }

  @include media-breakpoint-up(xs) {
    .milestone-buttons .verbose {
      display: inline;
    }

    .header-text-content {
      order: 2;
      width: auto;
    }

    .milestone-buttons {
      order: 3;
    }
  }
}

.issuable-row {
  background-color: $white-light;
}

.milestone-deprecation-message {
  .popover {
    padding: 0;
  }

  .popover-content {
    padding: 0;
  }
}

.milestone-popover-body {
  padding: $gl-padding-8;
  background-color: $gray-light;
}

.milestone-popover-footer {
  padding: $gl-padding-8 $gl-padding;
  border-top: 1px solid $white-dark;
}

.milestone-popover-instructions-list {
  padding-left: 2em;

  > li {
    padding-left: 1em;
  }
}

.milestone-range {
  color: $gl-text-color-tertiary;
}

@include media-breakpoint-down(xs) {
  .milestone-banner-text,
  .milestone-banner-link {
    display: inline;
  }
}