spur-tailwind/css/components/dispute-history.css

Spur web UI

.dispute-history > :last-child {
  @apply .mb-0;
}

.dispute-history-item {
  @apply .flex .items-start .mb-8;
}

@screen xl {
  .dispute-history-item {
    @apply .mr-16;
  }
}

.dispute-history-avatar {
  @apply .mr-4;
}

.dispute-history-message.has-no-bubble {
  @apply .self-center;
}

.dispute-history-bubble {
  @apply .flex .flex-col .mb-3 .p-4 .bg-background-grey .rounded-md;
}

.dispute-history-details {
  @apply .flex .mb-4 .items-center;
}

/* reversed item state */
.dispute-history-item.is-reversed {
  @apply .flex-row-reverse;
}

@screen xl {
  .dispute-history-item.is-reversed {
    @apply .mr-0 ml-16;
  }
}

.dispute-history-item.is-reversed .dispute-history-avatar {
  @apply .mr-0 .ml-4;
}

.dispute-history-item.is-reversed .dispute-history-message {
  @apply .text-right;
}

.dispute-history-item.is-reversed .dispute-history-bubble {
  @apply .bg-blue-jeans .text-white;
}

.dispute-history-item.is-reversed .dispute-history-details {
  @apply .justify-end;
}