Add a hitbox when a checkbox is hovered

jot-it · Jan 24, 2024 · 4ee62cd · 4ee62cd
1 parent 5f36719
commit 4ee62cd
Showing 1 changed file with 15 additions and 4 deletions.
diff --git a/apps/front-end/src/app/[workspace]/note/[id]/theme.ts b/apps/front-end/src/app/[workspace]/note/[id]/theme.ts
@@ -11,13 +11,24 @@ const theme: EditorThemeClasses = {
   },
   code: "block rounded-md border border-slate-700 p-4 pt-10 bg-neutral-900",
   list: {
+    checklist: "pl-0",
     listitemChecked:
-      "list-none line-through relative mx-2 px-6 outline-none before:absolute before:top-1.5 before:left-0 before:border " +
+      "list-none line-through relative mx-2 px-6 outline-none " +
+      // Checkbox
+      "before:absolute before:top-1.5 before:left-0 before:border " +
       "before:border-transparent before:rounded before:w-4 before:h-4 before:cursor-pointer before:bg-cyan-600 " +
-      "before:bg-[url('/assets/check.svg')]",
+      "before:bg-[url('/assets/check.svg')] " +
+      // Aura (hitbox)
+      "after:absolute after:-top-0.5 after:-left-2 after:rounded-full after:w-8 after:h-8 " +
+      "after:rounded after:bg-transparent after:hover:bg-neutral-400/30 after:cursor-pointer",
     listitemUnchecked:
-      "list-none relative mx-2 px-6 outline-none before:absolute before:top-1.5 before:left-0 before:border " +
-      "before:border-slate-600 before:rounded before:w-4 before:h-4 before:cursor-pointer",
+      "list-none relative mx-2 px-6 outline-none " +
+      // Checkbox
+      "before:absolute before:top-1.5 before:left-0 before:border " +
+      "before:border-slate-600 before:rounded before:w-4 before:h-4 " +
+      // Aura(hitbox)
+      "after:absolute after:-top-0.5 after:-left-2 after:rounded-full after:w-8 after:h-8 " +
+      "after:rounded after:bg-transparent after:hover:bg-neutral-400/30 after:cursor-pointer",
     nested: {
       listitem: "list-none",
     },