diff options
Diffstat (limited to 'code')
| -rw-r--r-- | code/app/src/lib/components/switch.svelte | 30 |
1 files changed, 6 insertions, 24 deletions
diff --git a/code/app/src/lib/components/switch.svelte b/code/app/src/lib/components/switch.svelte index 16da23a..79f2d67 100644 --- a/code/app/src/lib/components/switch.svelte +++ b/code/app/src/lib/components/switch.svelte @@ -5,18 +5,15 @@ <script lang="ts"> import pwKey from "$actions/pwKey"; - export let enabled = false; export let type: SwitchType = "default"; export let srText = "Use setting"; export let label: string | undefined = undefined; export let description: string | undefined = undefined; export let rightAlignedLabelDescription = false; - export let _pwKey:string|undefined = undefined; + export let _pwKey: string | undefined = undefined; - $: colorClass = enabled - ? "bg-teal-600 focus:ring-teal-500" - : "bg-gray-200 focus:ring-teal-500"; + $: colorClass = enabled ? "bg-teal-600 focus:ring-teal-500" : "bg-gray-200 focus:ring-teal-500"; $: translateClass = enabled ? "translate-x-5" : "translate-x-0"; $: hasLabelOrDescription = label || description; @@ -25,11 +22,7 @@ } </script> -<div - class="{hasLabelOrDescription - ? 'flex items-center' - : ''} {rightAlignedLabelDescription ? '' : 'justify-between'}" -> +<div class="{hasLabelOrDescription ? 'flex items-center' : ''} {rightAlignedLabelDescription ? '' : 'justify-between'}"> {#if hasLabelOrDescription && !rightAlignedLabelDescription} <span class="flex flex-grow flex-col"> {#if label} @@ -50,10 +43,7 @@ on:click={toggle} > <span class="sr-only">{srText}</span> - <span - aria-hidden="true" - class="pointer-events-none absolute h-full w-full rounded-md" - /> + <span aria-hidden="true" class="pointer-events-none absolute h-full w-full rounded-md" /> <span aria-hidden="true" class="{colorClass} pointer-events-none absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out" @@ -82,11 +72,7 @@ : 'opacity-100 ease-in duration-200'} absolute inset-0 flex h-full w-full items-center justify-center transition-opacity" aria-hidden="true" > - <svg - class="h-3 w-3 text-gray-400" - fill="none" - viewBox="0 0 12 12" - > + <svg class="h-3 w-3 text-gray-400" fill="none" viewBox="0 0 12 12"> <path d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2" stroke="currentColor" @@ -102,11 +88,7 @@ : 'opacity-0 ease-out duration-100'} absolute inset-0 flex h-full w-full items-center justify-center transition-opacity" aria-hidden="true" > - <svg - class="h-3 w-3 text-indigo-600" - fill="currentColor" - viewBox="0 0 12 12" - > + <svg class="h-3 w-3 text-indigo-600" fill="currentColor" viewBox="0 0 12 12"> <path d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z" /> |