Antoine
/
interne-utils
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

plusmoins : bouton plus compact

This commit is contained in:
Antoine Pierlot-Garcin 2023-11-16 15:10:59 +01:00
parent 59568f0419
commit f0b1ecae2d
1 changed files with 27 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/routes/PlusMoins.svelte
View File

@ -13,10 +13,33 @@
</script>
<div class="flex flex-col-reverse xl:flex-row items-center justify-left gap-2">
<div class="btn-group variant-ringed shrink-0 [&>*]:btn-sm">
<button class="btn-icon" on:click={decrementer}>-</button>
<button class="btn variant-filled-surface pointer-events-none">{compteur}</button>
<button class="btn-icon" on:click={incrementer}>+</button>
<div class="inline-flex rounded-full shadow-sm" role="group">
<button
type="button"
on:click={decrementer}
class="px-3 py-1 text-surface-900 bg-white border border-surface-200 rounded-s-full
hover:bg-surface-100 dark:bg-gray-700 dark:border-gray-600
dark:text-white dark:hover:text-white dark:hover:bg-surface-600"
>
-
</button>
<button
type="button"
class="pointer-events-none px-3 py-1 text-white bg-surface-700
border-t border-b border-surface-200 dark:bg-surface-200
dark:border-surface-600 dark:text-surface-900"
>
{compteur}
</button>
<button
type="button"
on:click={incrementer}
class="px-3 py-1 text-surface-900 bg-white border border-surface-200 rounded-e-full
hover:bg-surface-100 dark:bg-gray-700 dark:border-gray-600
dark:text-white dark:hover:text-white dark:hover:bg-surface-600"
>
+
</button>
</div>
<span class="grow"><slot /></span>
</div>