use font-mono for sliders

This commit is contained in:
Ruben Fiszel
2023-10-31 23:49:50 +01:00
parent f2758fac40
commit 3847bcf8d4
2 changed files with 14 additions and 8 deletions
@@ -101,7 +101,7 @@
<div class="flex flex-col w-full">
<div class="flex items-center w-full gap-1 px-1">
<span
class={twMerge(css?.limits?.class ?? '', 'wm-slider-limits')}
class={twMerge(css?.limits?.class ?? '', 'font-mono wm-slider-limits')}
style={css?.limits?.style ?? ''}
>
{+(resolvedConfig.min ?? 0)}
@@ -124,7 +124,7 @@
<!-- <RangeSlider {step} range min={min ?? 0} max={max ?? 1} bind:values /> -->
</div>
<span
class={twMerge(css?.limits?.class ?? '', 'wm-slider-limits')}
class={twMerge(css?.limits?.class ?? '', 'font-mono wm-slider-limits')}
style={css?.limits?.style ?? ''}
>
{+(resolvedConfig.max ?? 1)}
@@ -133,7 +133,7 @@
<div class="flex justify-between px-1">
<span
class={twMerge(
'text-center text-sm font-medium bg-blue-100 text-blue-800 rounded px-2.5 py-0.5',
'font-mono text-center text-sm font-medium bg-blue-100 text-blue-800 rounded px-2.5 py-0.5',
css?.values?.class ?? '',
'wm-slider-value'
)}
@@ -143,7 +143,7 @@
</span>
<span
class={twMerge(
'text-center text-sm font-medium bg-blue-100 text-blue-800 rounded px-2.5 py-0.5',
'font-mono text-center text-sm font-medium bg-blue-100 text-blue-800 rounded px-2.5 py-0.5',
css?.values?.class ?? '',
'wm-slider-value'
)}
@@ -133,11 +133,14 @@
<AlignWrapper {render} hFull {verticalAlignment}>
<div class="flex {vertical ? 'flex-col' : ''} items-center w-full h-full gap-1 px-1">
<span class={twMerge(css?.limits?.class, 'wm-slider-limits')} style={css?.limits?.style ?? ''}>
<span
class={twMerge(css?.limits?.class, 'font-mono wm-slider-limits')}
style={css?.limits?.style ?? ''}
>
{vertical ? +(resolvedConfig?.max ?? 0) : +(resolvedConfig?.min ?? 0)}
</span>
<div
class={twMerge('grow', css?.bar?.class, 'wm-slider-bar')}
class={twMerge('grow', css?.bar?.class, 'font-mono wm-slider-bar')}
style={css?.bar?.style}
on:pointerdown|stopPropagation={() => ($selectedComponent = [id])}
>
@@ -150,12 +153,15 @@
max={+(resolvedConfig?.max ?? 0)}
/>
</div>
<span class={twMerge(css?.limits?.class, 'wm-slider-limits')} style={css?.limits?.style ?? ''}>
<span
class={twMerge(css?.limits?.class, 'font-mono wm-slider-limits')}
style={css?.limits?.style ?? ''}
>
{vertical ? +(resolvedConfig?.min ?? 0) : +(resolvedConfig?.max ?? 1)}
</span>
<span class="mx-2">
<span
class={twMerge(spanClass, css?.value?.class ?? '', 'wm-slider-value')}
class={twMerge(spanClass, css?.value?.class ?? '', 'font-mono wm-slider-value')}
style={`${css?.value?.style ?? ''} ${width ? `width: ${width}px;` : ''}`}
>
{values[0]}