spur-tailwind/css/components/worker-card.css

Spur web UI

.worker-card {
  @apply relative flex flex-col flex-1 p-6 max-w-sm min-w-60 border-2 border-filter-grey shadow-md rounded-lg;
  transition: border-color 300ms ease-in-out;

  &.is-selected {
    @apply border-blue-jeans;

    & .worker-card-check {
      @apply border-blue-jeans bg-blue-jeans;
    }

    & .worker-card-check-icon {
      @apply text-white;
    }
  }
}

.worker-card-check {
  @apply absolute top-0 left-0 flex justify-center items-center w-10 h-10 bg-white border-2 border-filter-grey rounded-full cursor-pointer pointer-events-none;
  transform: translate(-0.5rem, -0.5rem);
  transition: border-color 300ms ease-in-out, background-color 300ms ease-in-out;
}

.worker-card-check-icon {
  @apply w-6 h-6 text-filter-grey fill-current;
  transition: color 300ms ease-in-out;
}

.worker-card-check-label {
  @apply absolute inset-0 cursor-pointer;
}

.worker-card-check-input {
  @apply hidden;
}

.max-w-xxs {
  max-width: 15rem;
}

.rota-card:hover::after {
  @apply absolute inset-0 bg-spur-black opacity-30 pointer-events-none;
  content: '';
}