
import CssTable from '../../components/CssTable'
import Demo from '../../components/demo/steps/index.mdx'

## Default Class Table
  
<CssTable name="steps" />
  
## Demo
  
<Demo></Demo>
  
## Css Schema


### Base

<div className="collapse">
<input type="checkbox" /> 
<div class="collapse-title px-0">
<span class="btn">Click to Show Base Schema</span>
</div>
<div class="collapse-content"> 

```css
.steps {
  @apply inline-grid grid-flow-col overflow-hidden overflow-x-auto;
  counter-reset: step;
  grid-auto-columns: 1fr;
}
.steps .step {
  @apply grid grid-cols-1 grid-rows-2 place-items-center text-center;
}

```

</div>
</div>



### Styled

<div className="collapse">
<input type="checkbox" /> 
<div class="collapse-title px-0">
<span class="btn">Click to Show Styled Schema</span>
</div>
<div class="collapse-content"> 

```css
.steps .step {
  grid-template-rows: 2.5rem 1fr;
  grid-template-columns: auto;
  min-width: 4rem;
}
.steps .step:before {
  @apply bg-base-300 text-base-content top-0 col-start-1 row-start-1 h-2 w-full transform;
  content: "";
  margin-inline-start: -100%;
}
.steps .step:after {
  content: counter(step);
  counter-increment: step;
  z-index: 1;
  @apply bg-base-300 text-base-content relative col-start-1 row-start-1 grid h-8 w-8 place-items-center place-self-center rounded-full;
}
.steps .step:first-child:before {
  content: none;
}
.steps .step[data-content]:after {
  content: attr(data-content);
}
.steps .step-primary + .step-primary:before,
.steps .step-primary:after {
  @apply bg-primary text-primary-content;
  @apply bg-primary text-primary-content;
}
.steps .step-success + .step-success:before,
.steps .step-success:after {
  @apply bg-success text-success-content;
  @apply bg-success text-success-content;
}
.steps .step-warning + .step-warning:before,
.steps .step-warning:after {
  @apply bg-warning text-warning-content;
  @apply bg-warning text-warning-content;
}
.steps .step-error + .step-error:before,
.steps .step-error:after {
  @apply bg-error text-error-content;
  @apply bg-error text-error-content;
}
.steps .step-neutral + .step-neutral:before,
.steps .step-neutral:after {
  @apply bg-neutral text-neutral-content;
  @apply bg-neutral text-neutral-content;
}

```

</div>
</div>



### Utils

<div className="collapse">
<input type="checkbox" /> 
<div class="collapse-title px-0">
<span class="btn">Click to Show Utils Schema</span>
</div>
<div class="collapse-content"> 

```css
.steps-horizontal {
  grid-auto-columns: 1fr;
  @apply inline-grid grid-flow-col overflow-hidden overflow-x-auto;
}
.steps-horizontal .step {
  grid-template-rows: 2.5rem 1fr;
  grid-template-columns: auto;
  min-width: 4rem;
  @apply grid grid-cols-1 grid-rows-2 place-items-center text-center;
}
.steps-horizontal .step:before {
  @apply h-2 w-full translate-x-0 translate-y-0 rtl:translate-x-0;
  @apply h-2 w-full translate-x-0 translate-y-0;
  content: "";
  margin-inline-start: -100%;
  margin-left: -100%;
}
.steps-vertical {
  grid-auto-rows: 1fr;
  @apply grid-flow-row;
}
.steps-vertical .step {
  gap: 0.5rem;
  grid-template-columns: 2.5rem 1fr;
  grid-template-rows: auto;
  min-height: 4rem;
  justify-items: start;
  @apply grid grid-cols-2 grid-rows-1;
}
.steps-vertical .step:before {
  @apply h-full w-2 -translate-x-1/2 -translate-y-1/2 rtl:translate-x-1/2;
  @apply h-full w-2 -translate-x-1/2 -translate-y-1/2;
  margin-inline-start: 50%;
  margin-left: 50%;
}
[dir="rtl"] .steps-vertical .step:before {
  margin-right: auto;
}

```

</div>
</div>



