<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="steps-header">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<div class="steps-header__head">
<div class="container">
<div class="steps-header__head-wrapper">
<div class="row">
<div class="col-xs-6 col-ms-6 col-sm-6 col-lg-6">
<div class="steps-header__logo">
<a href="#" class="steps-header__logo-link" title="Homepage">
<img class="steps-header__logo-img" src=" /dist/images/logo-white.png
" alt="Logotype">
</a>
</div>
</div>
<div class="col-xs-6 center-xs bottom-xs col-ms-6 col-sm-6 col-lg-6">
<div class="steps-header__language">
<div class="popup"><!-- ==== La clase fractal es para la previsualización en Fractal. NO INTEGRAR ==== -->
<button class="popup__trigger" type="button">
<svg class="icon icon- ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#"></use>
</svg>
Language
</button>
<div class="popup__window
popup__window_right
">
<div class="popup__lang">
<ul class="popup__lang-list">
<li class="popup__lang-item">
<a class="popup__lang-link
popup__link
popup__lang-link_active
" href="#">
ES
</a>
</li>
<li class="popup__lang-item">
<a class="popup__lang-link
popup__link
" href="#">
EN
</a>
</li>
<li class="popup__lang-item">
<a class="popup__lang-link
popup__link
" href="#">
PT
</a>
</li>
<li class="popup__lang-item">
<a class="popup__lang-link
popup__link
" href="#">
CAT
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<div class="steps-header__body">
<div class="container">
<div class="steps-header__body-wrapper">
<div class="row">
<div class="col-xs-12 col-ms-4_5 col-ms-offset-1_5 center-ms col-sm-5 col-sm-offset-1 col-lg-5">
<div class="steps-header__back-link">
<a class="link
link_simple
link_has-icon link_has-icon_before
" href="#">
<svg class="icon icon-chebron-left icon-before">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#chebron-left"></use>
</svg>
<span>Volver</span>
</a>
</div>
</div>
<div class="
col-xs-12 col-ms-6 col-sm-6 col-lg-6
">
<div class="steps-header__steps">
<ul class="steps-header__steps-list">
<li class="steps-header__steps-item
active
">
<span class="steps-header__steps-step">
<span class='always-visible'>01</span> Datos de tu hipoteca
</span>
</li>
<li class="steps-header__steps-item
">
<span class="steps-header__steps-step">
<span class='always-visible'>02</span> Datos de contacto
</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{{#if isFractal}}<div class="fractal" style="min-height:400px;">{{/if}}
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div {{#if hasID}}id="{{idComponent}}" {{/if}} class="steps-header">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<div class="steps-header__head">
<div class="container">
<div class="steps-header__head-wrapper">
<div class="row">
<div class="col-xs-6 col-ms-6 col-sm-6 col-lg-6">
<div class="steps-header__logo">
<a href="{{ logo-href }}" class="steps-header__logo-link"
title="{{ logo-link-title }}">
<img class="steps-header__logo-img" src="{{#if isHipotecas}}
/dist/images/logo-hipotecas-accent.svg
{{else}}
/dist/images/logo-white.png
{{/if}}" alt="Logotype">
</a>
</div>
</div>
<div class="col-xs-6 center-xs bottom-xs col-ms-6 col-sm-6 col-lg-6">
<div class="steps-header__language">
{{> @popup language-popup }}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<div class="steps-header__body">
<div class="container">
<div class="steps-header__body-wrapper">
<div class="row">
{{#if back-link}}
<div
class="col-xs-12 col-ms-4_5 col-ms-offset-1_5 center-ms col-sm-5 col-sm-offset-1 col-lg-5">
<div class="steps-header__back-link">
{{> @link back-link }}
</div>
</div>
{{/if}}
<div class="
{{#if back-link}}
col-xs-12 col-ms-6 col-sm-6 col-lg-6
{{else}}
col-xs-12 col-ms-12 col-sm-12 col-lg-12
{{/if}}">
<div class="steps-header__steps">
<ul class="steps-header__steps-list">
{{#each step}}
<li class="steps-header__steps-item
{{#if isActive}}
active
{{/if}}">
<span class="steps-header__steps-step">
{{{ this.text }}}
</span>
</li>
{{/each}}
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{{#if isFractal}}
</div>{{/if}}
{
"hasID": false,
"logo-href": "#",
"logo-link-title": "Homepage",
"language-popup": {
"onTheRight": true,
"trigger": {
"text": "Language"
},
"language": [
{
"href": "#",
"isActive": true,
"text": "ES"
},
{
"href": "#",
"text": "EN"
},
{
"href": "#",
"text": "PT"
},
{
"href": "#",
"text": "CAT"
}
]
},
"back-link": {
"isSimple": true,
"icon-before": {
"name": "chebron-left",
"isBefore": true
},
"href": "#",
"text": "Volver"
},
"step": [
{
"isActive": true,
"text": "<span class='always-visible'>01</span> Datos de tu hipoteca"
},
{
"text": "<span class='always-visible'>02</span> Datos de contacto"
}
]
}
.steps-header {
overflow-x: clip;
margin-bottom: -102px;
overflow-x: clip;
/*@media (--viewport-lg-min) {
margin-bottom: -207px;
} Lo quito porque provoca que se solape en el simulador el ancho completo header (CA)*/
&__head {
background-color: var(--color-accent);
&-wrapper {
padding: 13px 0 12px;
}
}
&__logo {
display: flex;
&-link {
display: block;
height: 25px;
transition: all 0.3s;
&:hover,
&:focus {
opacity: 0.8;
}
}
&-img {
display: block;
width: auto;
max-height: 100%;
}
}
&__language {
position: relative;
@media (--viewport-lg-min) {
margin-right: -26px;
}
.popup {
&__trigger {
color: var(--color-text-light);
&:hover,
&:focus,
&.active {
opacity: 0.6;
}
}
&__click{
@media (--viewport-sm-max) {
left:auto;right: -5px;transform:inherit;
}
}
}
}
&__body {
&-wrapper {
@media (--viewport-xs-max) {
margin-left: -20px;
margin-right: -19px;
}
@media (--viewport-ms-min) {
margin-right: -31px;
}
@media (--viewport-sm-min) {
margin-right: -29px;
}
@media (--viewport-md-min) {
margin-right: -32px;
}
@media (--viewport-lg-min) {
margin-right: -50px;
}
}
}
&__back-link {
padding: 14px 0;
@media (--viewport-xs-max) {
display: none;
}
}
&__steps {
text-align: right;
&-list {
display: inline-flex;
@media (--viewport-xs-max) {
display: flex;
}
}
&-item {
display: flex;
align-items: center;
padding: 13px 31px;
background-color: var(--color-accent-dark);
&.active {
padding: 12px 30px;
background-color: var(--color-quaternary);
@media (--viewport-xs-max) {
flex-grow: 1;
}
.steps-header__steps-step {
font-family: 'Jornada Sans Book';
font-size: 16px;
line-height: 26px;
color: var(--color-text);
}
}
&:first-child {
@media (--viewport-xs-max) {
padding-right: 20px;
padding-left: 20px;
}
}
}
&-step {
font-family: 'Jornada Sans Medium';
font-size: 14px;
font-weight: normal;
line-height: 24px;
letter-spacing: 0;
color: var(--color-text-light);
@media (--viewport-sm-only) {
font-size: 13px;
line-height: 23px;
}
}
}
}
.landing-header{
overflow-x: clip;
}
***** Se añade una variante fractal que no se debe integrar, para visualizar el header en fractal ****