make checkbox smaller, allow toggling with Enter

TeemuKoivisto · Mar 28, 2024 · e01cf34 · e01cf34
1 parent 2847db5
commit e01cf34
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 8 deletions.
diff --git a/packages/client/src/elements/Checkbox.svelte b/packages/client/src/elements/Checkbox.svelte
@@ -6,9 +6,25 @@
     change: Event & { currentTarget: EventTarget & HTMLInputElement }
     input: Event & { currentTarget: EventTarget & HTMLInputElement }
   }
+
+  let inputEl: HTMLInputElement
+
+  function handleKeyDown(ev: KeyboardEvent) {
+    if (ev.key === 'Enter') {
+      inputEl.click()
+    }
+  }
 </script>
 
-<input class={`${$$props.class || ''}`} type="checkbox" on:change on:input {...$$props} />
+<input
+  bind:this={inputEl}
+  class={`${$$props.class || ''}`}
+  type="checkbox"
+  on:change
+  on:input
+  on:keydown={handleKeyDown}
+  {...$$props}
+/>
 
 <style lang="scss">
   /** https://moderncss.dev/pure-css-custom-checkbox-style/ */
@@ -18,12 +34,12 @@
     /* Remove most all native input styles */
     appearance: none;
     /* For iOS < 15 */
-    background-color: var(--form-background);
+    background-color: transparent;
     transform: translateY(-0.075em);
     display: grid;
     place-content: center;
     position: relative;
-    @apply w-[1.15rem] h-[1.15rem] m-0 rounded border border-gray-500;
+    @apply w-4 h-4 m-0 rounded-sm border border-gray-500;
 
     &:checked {
       @apply bg-blue-500 border-blue-500;
@@ -32,23 +48,25 @@
       }
     }
     &:before {
-      content: '';
       clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+      content: '';
       transform: scale(0);
       transform-origin: bottom left;
       transition: 120ms transform ease-in-out;
       // box-shadow: inset 1em 1em rgba(0, 0, 0, 0.06);
       /* Windows High Contrast Mode */
       background-color: CanvasText;
-      @apply w-[0.75rem] h-[0.75rem] bg-white;
+      @apply w-[0.65rem] h-[0.65rem] bg-white;
     }
     &:after {
       background: transparent;
       content: '';
       opacity: 0;
       position: absolute;
       pointer-events: none;
-      @apply h-[1rem] w-[1rem] scale-0 transition-[box-shadow_0.2s,transform_0.2s] rounded-full shadow-[0px_0px_0px_11px_rgba(0,0,0,0.1)];
+      top: -1px;
+      left: -1px;
+      @apply h-4 w-4 scale-0 transition-[box-shadow_0.2s,transform_0.2s] rounded-full shadow-[0px_0px_0px_11px_rgba(0,0,0,0.1)];
     }
     &:focus-visible {
       @apply outline-none;

diff --git a/packages/client/src/elements/Toggle.svelte b/packages/client/src/elements/Toggle.svelte
@@ -1,5 +1,11 @@
 <script lang="ts">
-  export let checked: boolean
+  import type { HTMLInputAttributes } from 'svelte/elements'
+
+  interface $$Props extends HTMLInputAttributes {}
+  interface $$Events {
+    change: Event & { currentTarget: EventTarget & HTMLInputElement }
+    input: Event & { currentTarget: EventTarget & HTMLInputElement }
+  }
 
   let inputEl: HTMLInputElement
 
@@ -11,7 +17,7 @@
 </script>
 
 <label class={`${$$props.class || ''} toggle`}>
-  <input bind:this={inputEl} {checked} type="checkbox" on:change on:keydown={handleKeyDown} />
+  <input bind:this={inputEl} {...$$props} type="checkbox" on:change on:keydown={handleKeyDown} />
   <div class="slider"></div>
 </label>