Fixes/minor tweaks #39
@@ -72,74 +72,76 @@ $effect(() => {
|
|||||||
|
|
||||||
{#if !hidden}
|
{#if !hidden}
|
||||||
{#if responsive.isMobileOrTablet}
|
{#if responsive.isMobileOrTablet}
|
||||||
<Popover.Root bind:open>
|
<div class={className}>
|
||||||
<Popover.Trigger>
|
<Popover.Root bind:open>
|
||||||
{#snippet child({ props })}
|
<Popover.Trigger>
|
||||||
<Button class={className} variant="primary" {...props}>
|
{#snippet child({ props })}
|
||||||
{#snippet icon()}
|
<Button variant="primary" {...props}>
|
||||||
<Settings2Icon class="size-4" />
|
{#snippet icon()}
|
||||||
{/snippet}
|
<Settings2Icon class="size-4" />
|
||||||
</Button>
|
|
||||||
{/snippet}
|
|
||||||
</Popover.Trigger>
|
|
||||||
|
|
||||||
<Popover.Portal>
|
|
||||||
<Popover.Content
|
|
||||||
side="top"
|
|
||||||
align="end"
|
|
||||||
sideOffset={8}
|
|
||||||
class={cn(
|
|
||||||
'z-50 w-72',
|
|
||||||
'bg-surface dark:bg-dark-card',
|
|
||||||
'border border-subtle',
|
|
||||||
'shadow-[0_20px_40px_-10px_rgba(0,0,0,0.15)]',
|
|
||||||
'rounded-none p-4',
|
|
||||||
'data-[state=open]:animate-in data-[state=closed]:animate-out',
|
|
||||||
'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
|
|
||||||
'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
|
|
||||||
'data-[side=top]:slide-in-from-bottom-2',
|
|
||||||
'data-[side=bottom]:slide-in-from-top-2',
|
|
||||||
)}
|
|
||||||
interactOutsideBehavior="close"
|
|
||||||
escapeKeydownBehavior="close"
|
|
||||||
>
|
|
||||||
<!-- Header -->
|
|
||||||
<div class="flex items-center justify-between mb-3 pb-3 border-b border-subtle">
|
|
||||||
<div class="flex items-center gap-1.5">
|
|
||||||
<Settings2Icon size={12} class="text-swiss-red" />
|
|
||||||
<span
|
|
||||||
class="text-3xs font-mono uppercase tracking-widest font-bold text-swiss-black dark:text-neutral-200"
|
|
||||||
>
|
|
||||||
CONTROLS
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<Popover.Close>
|
|
||||||
{#snippet child({ props })}
|
|
||||||
<button
|
|
||||||
{...props}
|
|
||||||
class="inline-flex items-center justify-center size-6 rounded-none hover:bg-black/5 dark:hover:bg-white/5 transition-colors"
|
|
||||||
aria-label="Close controls"
|
|
||||||
>
|
|
||||||
<XIcon class="size-3.5 text-neutral-500" />
|
|
||||||
</button>
|
|
||||||
{/snippet}
|
{/snippet}
|
||||||
</Popover.Close>
|
</Button>
|
||||||
</div>
|
{/snippet}
|
||||||
|
</Popover.Trigger>
|
||||||
|
|
||||||
<!-- Controls -->
|
<Popover.Portal>
|
||||||
{#each typographySettingsStore.controls as control (control.id)}
|
<Popover.Content
|
||||||
<ControlGroup label={control.controlLabel ?? ''}>
|
side="top"
|
||||||
<Slider
|
align="end"
|
||||||
bind:value={control.instance.value}
|
sideOffset={8}
|
||||||
min={control.instance.min}
|
class={cn(
|
||||||
max={control.instance.max}
|
'z-50 w-72',
|
||||||
step={control.instance.step}
|
'bg-surface dark:bg-dark-card',
|
||||||
/>
|
'border border-subtle',
|
||||||
</ControlGroup>
|
'shadow-[0_20px_40px_-10px_rgba(0,0,0,0.15)]',
|
||||||
{/each}
|
'rounded-none p-4',
|
||||||
</Popover.Content>
|
'data-[state=open]:animate-in data-[state=closed]:animate-out',
|
||||||
</Popover.Portal>
|
'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
|
||||||
</Popover.Root>
|
'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
|
||||||
|
'data-[side=top]:slide-in-from-bottom-2',
|
||||||
|
'data-[side=bottom]:slide-in-from-top-2',
|
||||||
|
)}
|
||||||
|
interactOutsideBehavior="close"
|
||||||
|
escapeKeydownBehavior="close"
|
||||||
|
>
|
||||||
|
<!-- Header -->
|
||||||
|
<div class="flex items-center justify-between mb-3 pb-3 border-b border-subtle">
|
||||||
|
<div class="flex items-center gap-1.5">
|
||||||
|
<Settings2Icon size={12} class="text-swiss-red" />
|
||||||
|
<span
|
||||||
|
class="text-3xs font-mono uppercase tracking-widest font-bold text-swiss-black dark:text-neutral-200"
|
||||||
|
>
|
||||||
|
CONTROLS
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<Popover.Close>
|
||||||
|
{#snippet child({ props })}
|
||||||
|
<button
|
||||||
|
{...props}
|
||||||
|
class="inline-flex items-center justify-center size-6 rounded-none hover:bg-black/5 dark:hover:bg-white/5 transition-colors"
|
||||||
|
aria-label="Close controls"
|
||||||
|
>
|
||||||
|
<XIcon class="size-3.5 text-neutral-500" />
|
||||||
|
</button>
|
||||||
|
{/snippet}
|
||||||
|
</Popover.Close>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Controls -->
|
||||||
|
{#each typographySettingsStore.controls as control (control.id)}
|
||||||
|
<ControlGroup label={control.controlLabel ?? ''}>
|
||||||
|
<Slider
|
||||||
|
bind:value={control.instance.value}
|
||||||
|
min={control.instance.min}
|
||||||
|
max={control.instance.max}
|
||||||
|
step={control.instance.step}
|
||||||
|
/>
|
||||||
|
</ControlGroup>
|
||||||
|
{/each}
|
||||||
|
</Popover.Content>
|
||||||
|
</Popover.Portal>
|
||||||
|
</Popover.Root>
|
||||||
|
</div>
|
||||||
{:else}
|
{:else}
|
||||||
<div
|
<div
|
||||||
class={cn('w-full md:w-auto', className)}
|
class={cn('w-full md:w-auto', className)}
|
||||||
|
|||||||
Reference in New Issue
Block a user