spur-tailwind/css/components/kiosk-timeline.css

Spur web UI

.kiosk-timeline {
  @apply relative flex flex-col flex-grow pr-10 pb-10;

  &::before {
    @apply absolute block inset-y-0 left-0 w-36;
    content: '';
    background-image: linear-gradient(to bottom, #ffffff, #f8f9fd);
  }
}

.kiosk-timeline-item {
  @apply relative ml-36 pb-5 pl-5 border-l border-filter-grey;
  min-height: 2rem;

  &.is-break-pair {
    @apply pb-10;
    min-height: 5.75rem;

    &::before {
      @apply absolute z-10 w-px h-8 bg-white;
      top: 0.75rem;
      left: -1px;
      content: '';
    }
  }

  &:first-child::before,
  &:last-child::before {
    @apply absolute z-10 w-px h-2 bg-white;
    left: -1px;
    content: '';
  }

  &:first-child::before {
    @apply top-0;
  }

  &:last-child::before {
    @apply bottom-0;
  }

  &:nth-last-child(2) {
    @apply flex-grow;
  }
}

.timestamp {
  @apply absolute pr-5 w-36 text-right leading-normal text-spur-grey;
  left: -9rem;

  &:nth-child(2) {
    top: 2rem;
  }

  &::before,
  &::after {
    @apply absolute z-10 block bg-filter-grey rounded-full;
    width: calc(0.5rem + 1px);
    height: calc(0.5rem + 1px);
    top: 50%;
    right: 0;
    transform: translate(50%, -50%);
    content: '';
  }

  &::before {
    @apply hidden;
  }

  &.is-large {
    @apply text-xl;

    &::before {
      @apply block;
      width: calc(1.25rem + 2px);
      height: calc(1.25rem + 2px);
    }

    &::after {
      @apply border-2 border-white;
      width: calc(1rem + 3px);
      height: calc(1rem + 3px);
    }
  }
}

.shift-info {
  @apply leading-normal;
}

.shift-info-title {
  @apply text-xl font-semibold;
}

.total {
  @apply leading-normal;
}

.total-title {
  @apply text-xl font-normal;
}

.total-hours {
  @apply text-4xl;
}

/* States */
.has-status::before {
  @apply inline-block mr-4 w-3 h-3 rounded-full bg-filter-grey;
  content: '';
}

.timestamp.is-warning::before,
.timestamp.is-warning::after,
.has-status.is-warning::before {
  @apply bg-warning-gold;
}

.timestamp.is-successful::before,
.timestamp.is-successful::after,
.has-status.is-successful::before {
  @apply bg-deep-aquamarine;
}