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