.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
.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>