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>

Requires

@function use-color()

.c-number-stepper

scss

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

  @include element('number-wrapper') {
    @include use-font('title', 'semibold');
    align-items: center;
    border: 3px solid use-color('complementary', 'base');
    border-radius: 50%;
    color: use-color('grey', 'light');
    display: flex;
    height: 34px;
    justify-content: center;
    margin: 0 auto;
    margin-bottom: 12px;
    opacity: 0.3;
    width: 34px;
  }

  @include element('line') {
    background-color: use-color('complementary', 'base');
    height: 4px;
    opacity: 0.3;
    width: 100%;
  }

  @include modifier('active') {
    * {
      opacity: 1;
    }
  }
  
  li {
    margin-right: 12px;
    max-width: 80px;
    text-align: center;
    width: 100%;

    &:last-of-type {
      margin-right: 0;
    }
  }
}

Stepper con numeros.

Usado para el flujo del onborading. En el

se necesita la clase .c-number-stepper--active para activar cada step por separado.

Example

html

<ul class="c-number-stepper">
  <li class="c-number-stepper--active">
    <div class="c-number-stepper__number-wrapper">
      <span>1</span>
    </div>
    <div class="c-number-stepper__line"></div>
  </li>
  <li>
    <div class="c-number-stepper__number-wrapper">
      <span>2</span>
    </div>
    <div class="c-number-stepper__line"></div>
  </li>
  <li>
    <div class="c-number-stepper__number-wrapper">
      <span>3</span>
    </div>
    <div class="c-number-stepper__line"></div>
  </li>
</ul>