From 4ee62cd3ca8d459b0827933dff6e054674e611a4 Mon Sep 17 00:00:00 2001 From: brianuribe6 Date: Wed, 24 Jan 2024 17:33:01 -0500 Subject: [PATCH] Add a hitbox when a checkbox is hovered --- .../src/app/[workspace]/note/[id]/theme.ts | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 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 index a44493b..f13e346 100644 --- 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", },