spur-tailwind/css/components/timeline.css

Spur web UI

/* Containing elements */
.timeline-wrapper {
  @apply p-8;
}

.timeline-container {
  @apply relative max-w-sm;
}

/* Timeline collapse toggle */
.timeline-toggle {
  @apply absolute z-20 inset-x-0 bottom-0 py-5 font-semibold text-buzz-purple text-center;

  & span {
    @apply cursor-pointer;
  }
}

/* Timeline */
.timeline {
  @apply relative;

  & > :first-child {
    @apply mt-0;
  }
}

.timeline-item {
  @apply mt-8;
}

.timeline-entries {
  & > :last-child,
  & > :last-child > :last-child {
    @apply mb-0;
  }
}

.timeline-entry {
  @apply relative mb-8;
}

.timeline-date {
  @apply inline-block mb-5 pr-8 text-xl whitespace-no-wrap;
}

.timeline-time {
  @apply inline-block font-semibold pr-8;
  line-height: 1.75;

  &.is-adjusted {
    @apply text-deep-watermelon;
  }
}

.timeline-icon {
  @apply flex-shrink-0 w-5 h-5 fill-current;
}

.timeline-status {
  @apply flex items-center mb-2;

  & > .timeline-time {
    order: 2;
  }

  & > .timeline-status-icon {
    order: 1;
  }

  & > .timeline-status-text {
    order: 3;
  }
}

.timeline-status-icon {
  @apply p-1 w-7 h-7 fill-current bg-white;
}

.timeline-status-meta {
  @apply pl-4;

  & > :last-child {
    @apply mb-0;
  }
}

/* Time adjustments */
.timeline-adjustments {
  @apply table -m-2 mb-4 text-sm text-spur-grey;
  border-spacing: 0.5rem;
}

.timeline-adjustments-row {
  @apply table-row;
}

.timeline-adjustments-cell {
  @apply table-cell align-middle whitespace-no-wrap;
}

/* Updated */
.timeline-updated {
  @apply mb-6 text-sm text-spur-grey;
}

/* Timeline note */
.timeline-note {
  @apply flex mb-6 bg-background-grey p-2 pr-4 text-sm text-spur-grey leading-normal;
}

.timeline-note-text {
  @apply ml-2;
}

/* Timeline alert */
.timeline-alert {
  @apply flex mb-6 text-sm text-spur-grey leading-normal;
}

.timeline-alert-text {
  @apply ml-2;
}

.timeline-alert-punch {
  @apply font-semibold text-spur-black;
}

/* Timeline in takeover specific styles */
.timeline-takeover {
  @apply pb-24;

  &.timeline-wrapper {
    &::before {
      @apply absolute inset-0 z-20 pointer-events-none;
      content: '';
      box-shadow: inset 0 1px 8px 0 rgba(69, 69, 83, 0.25);
    }

    &.is-collapsed {
      max-height: 18rem;

      &::after {
        @apply absolute inset-x-0 bottom-0 z-10 block pointer-events-none;
        content: '';
        height: 50%;
        background-image: linear-gradient(to top, #ffffff, rgba(255, 255, 255, 0));
      }
    }
  }

  & .timeline-container {
    @apply mx-auto;
  }

  & .timeline-item.is-flush {
    @apply mt-0;
  }

  @media (min-width: 960px) {
    & .timeline {
      @apply border-l-2 border-dead-state-purple;
    }

    & .timeline-status-icon {
      /* IE bug prevents calc from being used in translate, chain here instead. */
      transform: translateX(-50%) translateX(-1px);
    }

    & .timeline-date {
      transform: translateX(-100%);
    }

    & .timeline-time {
      @apply absolute top-0;
      transform: translateX(-100%);
    }

    & .timeline-status-meta {
      @apply pl-8;
    }
  }
}

/* Timeline on rota details page specific styles */
.timeline-page {
  @apply px-0 pb-0;

  @screen md {
    & .timeline {
      @apply table;

      & > :first-child {
        @apply border-t-0;
      }
    }

    & .timeline-item {
      @apply table-row;
      border-top: 2rem solid transparent;

      &.is-flush {
        @apply border-t-0;

        & .timeline-entries {
          @apply pt-8;
        }
      }
    }

    & .timeline-date,
    & .timeline-entries {
      @apply table-cell;
    }

    & .timeline-date {
      @apply align-top text-right;
    }

    & .timeline-entries {
      @apply pt-10 border-l-2 border-dead-state-purple;
    }

    & .timeline-status-icon {
      /* IE bug prevents calc from being used in translate, chain here instead. */
      transform: translateX(-50%) translateX(-1px);
    }

    & .timeline-time {
      @apply absolute top-0;
      transform: translateX(-100%);
    }

    & .timeline-status-meta {
      @apply pl-8;
    }
  }

  & .timeline-toggle {
    @apply hidden;
  }
}

/* Slideover overrides */
.slideover .timeline-adjustments-row > :first-child {
  @apply whitespace-normal;
}