<div class="steps-nav auto-width">
<div class="steps-nav__head">
<div class="steps-nav__list">
<ul class="auto-width">
<li class="steps-nav__list-item success " data-index="01">
<span class="steps-nav__list-item-step">
<span class="state">
<svg class="icon icon-16_feedback-success ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_feedback-success"></use>
</svg>
</span>
<span class="sequence">01</span>
<span class="text visibility">Datos de tu hipoteca</span>
</span>
</li>
<li class="steps-nav__list-item reject" data-index="02">
<span class="steps-nav__list-item-step">
<span class="state">
<svg class="icon icon-16_feedback-error ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_feedback-error"></use>
</svg>
</span>
<span class="sequence">02</span>
<span class="text visibility">Datos de contacto</span>
</span>
</li>
<li class="steps-nav__list-item active " data-index="03">
<span class="steps-nav__list-item-step">
<span class="state">
</span>
<span class="sequence">03</span>
<span class="text visibility">Documentación</span>
</span>
</li>
<li class="steps-nav__list-item " data-index="04">
<span class="steps-nav__list-item-step">
<span class="state">
</span>
<span class="sequence">04</span>
<span class="text visibility">Estado de la financiación</span>
</span>
</li>
<li class="steps-nav__list-item " data-index="05">
<span class="steps-nav__list-item-step">
<span class="state">
</span>
<span class="sequence">05</span>
<span class="text visibility">Enhorabuena</span>
</span>
</li>
</ul>
<div class="steps-nav__breadcrumb">
<div id="" class="
bodycopy-l
bodycopy--color-dark
"><span class='steps-nav__breadcrumb_step' data-step=' '>1</span> / <span class='steps-nav__breadcrumb_total' data-total=' '>2</span>: <span class='steps-nav__breadcrumb_subtitle' data-subtitle=' ' class='subtitle'>Personal information</span></div>
</div>
</div>
</div>
<div class="steps-nav__body">
<div class="content-item " id="content-1">
<div class="detail">
content 1
</div>
</div>
<div class="content-item " id="content-2">
<div class="detail">
content 2
</div>
</div>
<div class="content-item visibility" id="content-3">
<div class="detail">
content 3
</div>
</div>
<div class="content-item " id="content-4">
<div class="detail">
content 4
</div>
</div>
<div class="content-item " id="content-5">
<div class="detail">
content 5
</div>
</div>
</div>
</div>
<div class="steps-nav{{#if isAutoWidth}} auto-width{{/if}}{{#if landing-form}} steps-just-for-ms-xs{{/if}}" {{#if hasID}}id="{{idComponent}}"{{/if}}>
<div class="steps-nav__head">
{{> '@steps-nav__list' head-list}}
</div>
<div class="steps-nav__body">
{{#each content}}
<div class="content-item {{#if isVisibility}}visibility{{/if}}" id="content-{{this.sequence}}">
<div class="detail">
{{#if title}}{{this.text}}{{/if}}
{{#if columns-form}}
{{ render '@columns-form' }}
{{/if}}
</div>
</div>
{{/each}}
</div>
</div>
{
"head-list": {
"breadcrumb-steps": {
"colorDark": true,
"text": "<span class='steps-nav__breadcrumb_step' data-step=' '>1</span> / <span class='steps-nav__breadcrumb_total' data-total=' '>2</span>: <span class='steps-nav__breadcrumb_subtitle' data-subtitle=' ' class='subtitle'>Personal information</span>"
},
"steps": [
{
"isSuccess": true,
"data-index": "01",
"sequence": "01",
"visibility": "visibility",
"text": "Datos de tu hipoteca",
"icon": {
"name": "check"
}
},
{
"isReject": true,
"data-index": "02",
"sequence": "02",
"visibility": "visibility",
"text": "Datos de contacto",
"icon": {
"name": "close"
}
},
{
"isActive": true,
"data-index": "03",
"sequence": "03",
"visibility": "visibility",
"text": "Documentación",
"icon": {
"name": "check"
}
},
{
"data-index": "04",
"sequence": "04",
"visibility": "visibility",
"text": "Estado de la financiación"
},
{
"data-index": "05",
"sequence": "05",
"visibility": "visibility",
"text": "Enhorabuena"
}
],
"isAutoWidth": true
},
"content": [
{
"data-content": "01",
"sequence": "1",
"title": true,
"text": "content 1"
},
{
"data-content": "02",
"sequence": "2",
"title": true,
"text": "content 2"
},
{
"isVisibility": true,
"data-content": "03",
"sequence": "3",
"title": true,
"text": "content 3"
},
{
"data-content": "04",
"sequence": "4",
"title": true,
"text": "content 4"
},
{
"data-content": "05",
"sequence": "5",
"title": true,
"text": "content 5"
}
],
"isAutoWidth": true
}
.steps-nav {
display: flex;
flex-flow: column;
width: 100%;
max-width: 100%;
&__head {
background-color: var(--color-white);
display: flex;
flex-flow: column;
width: 100%;
max-width: 100%;
border-bottom: 1px solid var(--color-accent-dark);
}
/* &.auto-width {
.steps-nav__head {
max-width: max-content;
}
} */
&__body {
display: flex;
flex-flow: column;
width: 100%;
max-width: 100%;
justify-content: flex-start;
margin-top:var(--gutter-ms-vertical);
margin-bottom:var(--gutter-ms-vertical);
.content-item {
width: 100%;
flex-basis:100%;
color: var(--color-text);
display:none;
&.visibility {
display:flex;
}
.detail{width:100%;}
}
}
&.steps-just-for-ms-xs{ /*para forzar el formulario completo y sin pasos en resoluciones superiores a 767*/
@media (--viewport-sm-min) {
.steps-nav__body{margin-top: 0;}
.steps-nav__head{
display:none;
}
.content-item {
display:block;
&#content-1{
.landing-legal-form{
display:none;
}
.recaptcha, .form-btn{
display:none;
}
}
}
}
}
}
No notes defined.