frutjam/dist/components/steps.css

A utility-first CSS UI Library for Tailwind CSS

/*! frutjam v2.2.1 (c) 2026 Nezanuha | Released under the MIT License | https://frutjam.com */
/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */.step{--color-step:var(--color-base-soft);--color-on-step:var(--color-on-base);--color-step-active:var(--color-primary);--color-on-step-active:var(--color-on-primary);--step--size:2rem;--step--font-size:0.875rem;display:grid;grid-template-columns:auto;grid-template-rows:auto 1fr;place-items:center;text-align:center;min-width:4rem;counter-increment:step;&:before{content:"";display:block;height:2px;width:100%;margin-inline:-50%;z-index:0;transition:background-color .2s ease-in-out}&:after,&:before{background-color:var(--color-step);grid-column:1;grid-row:1}&:after{content:counter(step);display:flex;align-items:center;justify-content:center;width:var(--step--size);height:var(--step--size);border-radius:9999px;color:var(--color-on-step);font-size:.75rem;font-weight:600;z-index:1;position:relative;transition:background-color .2s ease-in-out,color .2s ease-in-out}&:not(:empty),&>span{font-size:var(--step--font-size);margin-block-start:.5rem;color:currentColor;@supports (color:color-mix(in lab,red,red)){color:color-mix(in oklch,currentColor 70%,transparent)}grid-row:2}}.steps{display:inline-grid;overflow:hidden;overflow-x:auto;counter-reset:step;list-style:none;padding:0;margin:0}.steps,.steps-horizontal{grid-auto-columns:1fr;grid-auto-flow:column}.steps-horizontal{grid-auto-rows:unset}.steps-vertical{grid-auto-flow:row;grid-auto-columns:unset;grid-auto-rows:auto}.step-accent{--color-step:var(--color-accent);--color-on-step:var(--color-on-accent);&:after{color:var(--color-on-accent)}&:after,&:before{background-color:var(--color-accent)}}.step-error{--color-step:var(--color-error);--color-on-step:var(--color-on-error);&:after{color:var(--color-on-error)}&:after,&:before{background-color:var(--color-error)}}.step-info{--color-step:var(--color-info);--color-on-step:var(--color-on-info);&:after{color:var(--color-on-info)}&:after,&:before{background-color:var(--color-info)}}.step-neutral{--color-step:var(--color-neutral);--color-on-step:var(--color-on-neutral);&:after{color:var(--color-on-neutral)}&:after,&:before{background-color:var(--color-neutral)}}.step-primary{--color-step:var(--color-primary);--color-on-step:var(--color-on-primary);&:after{color:var(--color-on-primary)}&:after,&:before{background-color:var(--color-primary)}}.step-secondary{--color-step:var(--color-secondary);--color-on-step:var(--color-on-secondary);&:after{color:var(--color-on-secondary)}&:after,&:before{background-color:var(--color-secondary)}}.step-success{--color-step:var(--color-success);--color-on-step:var(--color-on-success);&:after{color:var(--color-on-success)}&:after,&:before{background-color:var(--color-success)}}.step-warning{--color-step:var(--color-warning);--color-on-step:var(--color-on-warning);&:after{color:var(--color-on-warning)}&:after,&:before{background-color:var(--color-warning)}}