spur-tailwind/css/components/switch.css

Spur web UI

.switch {
  @apply relative h-8;
}

.switch-input {
  @apply absolute block opacity-0;
}

.switch-controls {
  @apply relative z-10 flex-shrink-0 mr-3 w-16 h-8 bg-dead-state-purple rounded-full cursor-pointer;
  text-indent: -999em;
  transition: background-color 300ms ease-in-out;
}

.switch-controls::before,
.switch-controls::after {
  @apply absolute;
  content: '';
}

.switch-controls::before {
  @apply block w-5 h-5 bg-no-repeat bg-center;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="%23ffffff"><path d="M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zM103.265 408.735c-80.622-80.622-84.149-208.957-10.9-293.743l304.644 304.643c-84.804 73.264-213.138 69.706-293.744-10.9zm316.37-11.727L114.992 92.365c84.804-73.263 213.137-69.705 293.743 10.9 80.622 80.621 84.149 208.957 10.9 293.743z"/></svg>');
  margin: 0.375rem 0.5rem;
  left: auto;
  right: 0;
}

.switch-controls::after {
  @apply bg-white rounded-full;
  width: 1.625rem;
  height: 1.625rem;
  left: 0;
  right: auto;
  margin: 0.1875rem;
  transition: transform 150ms ease-in-out;
}

.switch-label {
  @apply flex items-center;
}

/* Toggled State */
.switch-input:checked + .switch-controls {
  @apply bg-support-purple;
}

.switch-input:checked + .switch-controls::before {
  background-image: url('data:image/svg+xml;utf8,  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="%23ffffff"><path d="M413.505 91.951L133.49 371.966l-98.995-98.995c-4.686-4.686-12.284-4.686-16.971 0L6.211 284.284c-4.686 4.686-4.686 12.284 0 16.971l118.794 118.794c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-11.314-11.314c-4.686-4.686-12.284-4.686-16.97 0z"/></svg>');
  left: 0;
  right: auto;
}

.switch-input:checked + .switch-controls::after {
  transform: translateX(2rem);
}

/* Switch States */
.switch.is-disabled .switch-controls {
  @apply bg-filter-grey;
}