spur-tailwind/css/components/checkbox.css

Spur web UI

$checkbox-size: 20px;
$check-width: 14px;
$check-height: 14px;
$check: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDQ0OCA1MTIiPjxzdHlsZT4uc3Qwe2ZpbGw6I2ZmZmZmZjt9PC9zdHlsZT48cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDEzLjUwNSA5MS45NTFMMTMzLjQ5IDM3MS45NjZsLTk4Ljk5NS05OC45OTVjLTQuNjg2LTQuNjg2LTEyLjI4NC00LjY4Ni0xNi45NzEgMEw2LjIxMSAyODQuMjg0Yy00LjY4NiA0LjY4Ni00LjY4NiAxMi4yODQgMCAxNi45NzFsMTE4Ljc5NCAxMTguNzk0YzQuNjg2IDQuNjg2IDEyLjI4NCA0LjY4NiAxNi45NzEgMGwyOTkuODEzLTI5OS44MTNjNC42ODYtNC42ODYgNC42ODYtMTIuMjg0IDAtMTYuOTcxbC0xMS4zMTQtMTEuMzE0Yy00LjY4Ni00LjY4Ni0xMi4yODQtNC42ODYtMTYuOTcgMHoiLz48L3N2Zz4=';

.check {
  @apply relative flex;
}

.check:hover {
  cursor: pointer;
}

.check-text {
  @apply block;
  padding-left: ($checkbox-size * 1.75);
  line-height: $checkbox-size;
  min-height: $checkbox-size;
}

.check-text::before,
.check-text::after {
  content: '';
}

.check-text::before {
  @apply absolute top-0 left-0 block rounded border border-border-line-purple;
  width: $checkbox-size;
  height: $checkbox-size;
}

.check-text::after {
  @apply absolute block opacity-0;
  top: (($checkbox-size - $check-height) / 2);
  left: (($checkbox-size - $check-width) / 2);
  width: $check-width;
  height: $check-height;
  transition: background-color 150ms ease-in-out, opacity 150ms ease-in-out;
  background: url($check) center no-repeat;
}

.check-input:checked ~ .check-text::after {
  opacity: 1;
}

.check-input:checked ~ .check-text::before {
  @apply bg-support-purple border-support-purple;
}

.check-input {
  position: absolute;
  left: -999em;
}

/* Disabled checkbox */
.check-input[disabled] ~ .check-text::before {
  @apply bg-dead-state-purple border-dead-state-purple;
}

.check-input[disabled] ~ .check-text {
  @apply text-dead-state-purple;
}