103 lines
2.5 KiB
CSS
103 lines
2.5 KiB
CSS
.p-steplist {
|
|
@apply relative flex justify-between items-center m-0 p-0 list-none overflow-x-auto
|
|
}
|
|
|
|
.p-step {
|
|
@apply relative flex flex-auto items-center gap-4 p-2 last-of-type:flex-initial
|
|
}
|
|
|
|
.p-step-header {
|
|
@apply border-none inline-flex items-center no-underline cursor-pointer
|
|
transition-colors duration-200 rounded-md bg-transparent p-0 gap-2
|
|
focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
|
|
}
|
|
|
|
.p-step.p-disabled .p-step-header {
|
|
@apply cursor-default
|
|
}
|
|
|
|
|
|
.p-stepper.p-stepper-readonly .p-step {
|
|
@apply cursor-auto
|
|
}
|
|
|
|
.p-step-title {
|
|
@apply block whitespace-nowrap overflow-hidden text-ellipsis max-w-full
|
|
text-surface-500 dark:text-surface-400 font-medium transition-colors duration-200
|
|
}
|
|
|
|
.p-step-number {
|
|
@apply flex items-center justify-center text-surface-500 dark:text-surface-400
|
|
bg-surface-0 dark:bg-surface-900 border-2 border-surface-200 dark:border-surface-700
|
|
min-w-8 h-8 leading-8 text-lg font-medium rounded-full z-10 relative
|
|
after:absolute after:w-full after:h-full after:rounded-full after:shadow-[0px_0.5px_0px_0px_rgba(0,0,0,0.06),0px_1px_1px_0px_rgba(0,0,0,0.12)]
|
|
}
|
|
|
|
.p-step-active .p-step-header {
|
|
@apply cursor-default
|
|
}
|
|
|
|
.p-step-active .p-step-number {
|
|
@apply bg-surface-0 dark:bg-surface-900 text-primary border-surface-200 dark:border-surface-700
|
|
}
|
|
|
|
.p-step-active .p-step-title {
|
|
@apply text-primary
|
|
}
|
|
|
|
.p-step:not(.p-disabled):focus-visible {
|
|
@apply outline outline-1 outline-offset-2 outline-primary
|
|
}
|
|
|
|
.p-step:has(~ .p-step-active) .p-stepper-separator {
|
|
@apply bg-primary
|
|
}
|
|
|
|
.p-stepper-separator {
|
|
@apply flex-1 bg-surface-200 dark:bg-surface-700 w-full h-[2px] transition-colors duration-200
|
|
}
|
|
|
|
.p-steppanels {
|
|
@apply pt-[0.875rem] pb-[1.125rem] px-2
|
|
}
|
|
|
|
.p-steppanel {
|
|
@apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0
|
|
}
|
|
|
|
.p-stepper:has(.p-stepitem) {
|
|
@apply flex flex-col
|
|
}
|
|
|
|
.p-stepitem {
|
|
@apply flex flex-col flex-initial
|
|
}
|
|
|
|
.p-stepitem.p-stepitem-active {
|
|
@apply flex-auto
|
|
}
|
|
|
|
.p-stepitem .p-step {
|
|
@apply flex-initial
|
|
}
|
|
|
|
.p-stepitem .p-steppanel-content {
|
|
@apply w-full ps-4
|
|
}
|
|
|
|
.p-stepitem .p-steppanel {
|
|
@apply flex flex-auto
|
|
}
|
|
|
|
.p-stepitem .p-stepper-separator {
|
|
@apply flex-grow-0 flex-shrink-0 basis-auto w-[2px] h-auto ms-[1.625rem] relative start-[-2.5px]
|
|
}
|
|
|
|
.p-stepitem:has(~ .p-stepitem-active) .p-stepper-separator {
|
|
@apply bg-primary
|
|
}
|
|
|
|
.p-stepitem:last-of-type .p-steppanel {
|
|
@apply ps-8
|
|
}
|