Wake Creators LogoCSS - Components Squid Style
Getting Started
Content
Layout
Forms
Components
Accordion CollapseAlertBadgeBoxBreadcrumbButtonCardDropdownLoaderModalPaginationProgress BarStepsChange ColorTabsTagToastToolip
Utilities
Styleguide

Steps

Documentation for the Steps component.

<div class="steps">
  <ul>
    <li class="old">
      <span></span>
    </li>
    <li class="active">
      <span></span>
    </li>
    <li>
      <span></span>
    </li>
  </ul>
</div>

Change Color

To change the color of the steps, you can use the background-color property on the li element with old class and active class with linear-gradient.

.steps.custom-color ul li.old {
  background-color: black;
}
.steps.custom-color ul li.active {
  background: linear-gradient(90deg, black 0%, black 50%, transparent 51%);
}
.steps.custom-color {
  ul {
    li {
      &.old {
        background-color: black;
      }
      &.active {
        background: linear-gradient(
          90deg,
          black 0%,
          black 50%,
          transparent 51%
        );
      }
    }
  }
}