svelte-toolkit/sui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

state machine: move progress bar styles out of CSS

Browse Source
This commit is contained in:
Elijah Duffy
2025-09-05 11:23:11 -07:00
parent 43f68cf184
commit 8157012642
1 changed files with 30 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/lib/StateMachine.svelte
View File

@@ -347,23 +347,31 @@
<!-- Form progress bar -->
{#snippet progress()}
{#each { length: pages.length - 2 } as _, i (i)}
<div
class="relative flex h-6 w-7 items-center justify-center rounded-3xl bg-white
text-sm dark:bg-slate-600 {index === i
? 'bg-sui-accent-500! text-sui-background dark:bg-sui-accent-700!'
: ''} {i < index ? 'text-sui-background bg-green-600!' : ''} {i > index
? 'scale-[0.85] opacity-80'
: ''}
transition-[transform,background-color,color]"
>
{#if i >= index}
<span class="mb-[0.0625rem]">{i + 1}</span>
{:else}
<CheckFat size="0.9rem" weight="fill" />
{/if}
</div>
{/each}
<div
class={[
'flex cursor-default items-center justify-center gap-3 overflow-hidden rounded-3xl px-3 py-2',
'dark:bg-sui-text-800 bg-gray-200/80 dark:lg:bg-slate-800',
'text-sui-text/60 dark:text-sui-background/60 font-semibold'
]}
>
{#each { length: pages.length - 2 } as _, i (i)}
<div
class={[
'relative flex h-6 w-7 items-center justify-center rounded-3xl bg-white text-sm dark:bg-slate-600',
index === i && 'bg-sui-accent-500! text-sui-background dark:bg-sui-accent-700!',
i < index && 'text-sui-background bg-green-600!',
i > index && 'scale-[0.85] opacity-80',
'transition-[transform,background-color,color]'
]}
>
{#if i >= index}
<span class="mb-[0.0625rem]">{i + 1}</span>
{:else}
<CheckFat size="0.9rem" weight="fill" />
{/if}
</div>
{/each}
</div>
{/snippet}
<div
@@ -386,9 +394,10 @@
<!-- Progress bar (mobile only, above form) -->
<div
class="progress absolute transition-transform duration-500 lg:!hidden {backButtonVisible
? 'right-0'
: 'left-1/2 -translate-x-1/2'}"
class={[
'absolute transition-transform duration-500 lg:!hidden',
backButtonVisible ? 'right-0' : 'left-1/2 -translate-x-1/2'
]}
>
{@render progress()}
</div>
@@ -400,7 +409,7 @@
lg:max-h-[60rem] lg:min-h-[30rem] lg:flex-row lg:items-center dark:sm:bg-gray-900"
>
<!-- Progress bar (desktop only, in form space) -->
<div class="progress absolute top-8 left-[70%] hidden! -translate-x-1/2 lg:flex!">
<div class="absolute top-8 left-[70%] hidden! -translate-x-1/2 lg:flex!">
{@render progress()}
</div>
@@ -486,10 +495,4 @@
:global(.circle-final) {
opacity: 1;
}
.progress {
@apply flex cursor-default items-center justify-center gap-3 overflow-hidden rounded-3xl px-3 py-2;
@apply dark:bg-sui-text-800 bg-gray-200/80 dark:lg:bg-slate-800;
@apply text-sui-text/60 dark:text-sui-background/60 font-semibold;
}
</style>