fix radio input

temporalio · Oct 10, 2023 · 788957e · 788957e
1 parent bfbb789
commit 788957e
Showing 1 changed file with 10 additions and 15 deletions.
diff --git a/src/lib/holocene/radio-input/radio-input.svelte b/src/lib/holocene/radio-input/radio-input.svelte
@@ -38,34 +38,29 @@
     {id}
     {...$$restProps}
   />
-  <span class="checkmark" />
   <span class="label" class:hidden={labelHidden}>
     {label}
   </span>
 </label>
 
 <style lang="postcss">
   label {
-    @apply relative flex grow cursor-pointer flex-row items-center gap-1 text-sm focus:outline-none;
+    @apply flex grow cursor-pointer flex-row items-center gap-1 text-sm focus:outline-none;
   }
 
   input[type='radio'] {
-    @apply sr-only;
-  }
-
-  input[type='radio']:checked + .checkmark {
-    @apply border-indigo-600 bg-indigo-600 after:block;
-  }
+    @apply relative box-content h-4 w-4 cursor-pointer appearance-none rounded-full border border-gray-300 bg-white;
 
-  .label {
-    @apply ml-6;
+    &::after {
+      @apply absolute top-1 left-1 h-0 w-0 scale-0 rounded-full bg-white transition-transform content-[''];
+    }
   }
 
-  .checkmark {
-    @apply absolute left-0 box-content h-4 w-4 rounded-full border border-gray-300 bg-white;
-  }
+  input[type='radio']:checked {
+    @apply border-indigo-600 bg-indigo-600;
 
-  .checkmark::after {
-    @apply absolute top-1 left-1 hidden h-2 w-2 rounded-full bg-white content-[''];
+    &::after {
+      @apply h-2 w-2 scale-100;
+    }
   }
 </style>