checkbox.css 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. .checkbox-label {
  2. @apply grid;
  3. @apply justify-start;
  4. @apply cols-auto;
  5. @apply gap-2;
  6. @apply min-h-0;
  7. @apply cursor-pointer;
  8. @apply text-gray-800;
  9. }
  10. .checkbox {
  11. width: 1.5em;
  12. height: 1.5em;
  13. @apply border-none;
  14. @apply appearance-none;
  15. }
  16. .checkbox:before {
  17. @apply absolute;
  18. width: 1.5em;
  19. height: 1.5em;
  20. @apply border;
  21. @apply border-tint-200;
  22. @apply bg-gray-50;
  23. @apply shadow-input;
  24. @apply rounded-sm;
  25. @apply overflow-hidden;
  26. content: '';
  27. }
  28. .checkbox:after {
  29. @apply absolute;
  30. top: 50%;
  31. left: 50%;
  32. @apply text-purple-500;
  33. font-size: 1.2em;
  34. font-weight: 900;
  35. line-height: 1;
  36. content: '✓';
  37. transition: transform 0.1s;
  38. transform: translate(-50%, -50%) scale(0);
  39. }
  40. .checkbox:focus,
  41. .checkbox:hover {
  42. @apply outline-none;
  43. }
  44. .checkbox:focus:before {
  45. @apply border-tint-300;
  46. @apply bg-white;
  47. }
  48. .checkbox:hover:before {
  49. @apply border-tint-300;
  50. }
  51. .checkbox:checked:after {
  52. transform: translate(-50%, -50%) scale(1);
  53. }
  54. .checkbox:disabled {
  55. @apply opacity-50;
  56. }