spur-tailwind/css/components/report-step.css

Spur web UI

.report-steps {
  @apply;
}

.report-step {
  @apply relative flex mb-12;
}

/* Step counters */
.report-step-counter {
  @apply flex items-center justify-center w-12 h-12 bg-blue-jeans text-white text-2xl font-semibold rounded-full;
  background-clip: padding-box;
}

.is-active .report-step-counter {
  @apply w-14 h-14 -mx-1 border-4 border-blue-jeans-half;
}

.is-disbaled .report-step-counter {
  @apply bg-dead-state-purple;
}

/* Step counter dashed lines */
.report-step-counter::after {
  @apply block border border-border-line-purple border-dashed;
  content: '';
  width: 1px;
  height: 100%;
  position: absolute;
  top: 3rem;
  bottom: 0;
  left: 1.5rem;
  transform: translateX(-50%);
}

.is-active .report-step-counter::after {
  top: calc(3rem + 8px);
}

.report-steps > :last-child .report-step-counter::after {
  @apply hidden;
}