Stepper | chattigo-webkit Documentation

.c-stepper

scss

.c-stepper {
  align-items: flex-start;
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;

  li {
    background-color: use-color(primary, light-alt);
    height: 5px;
    margin: 1px 1px 0 0;
    width: 25px;
  }
  
  .step-complete {
    background-color: use-color(primary);
  }
}

Simple stepper

Usado en el flujo OUTBOUND de Chattigo Agente.

Example

html

<!-- first step -->
<ul class="c-stepper">
  <li class="step-complete"></li>
  <li></li>
  <li></li>
</ul>

<br/>
<!-- second step -->
<ul class="c-stepper">
  <li class="step-complete"></li>
  <li class="step-complete"></li>
  <li></li>
</ul>

<br/>
<!-- third step -->
<ul class="c-stepper">
  <li class="step-complete"></li>
  <li class="step-complete"></li>
  <li class="step-complete"></li>
</ul>

.c-stepper

Example

Requires

@function use-color()