<div class="value-banner" id="valueBanner">
<div class="value-banner__main">
<div class="value-banner__label">
<div class="value-banner__label-text">
<h3 class="
title-m
">Puedes comprar una casa de hasta</h3>
</div>
<button class="value-banner__label-trigger" type="button">
<svg class="icon icon-info-purple ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#info-purple"></use>
</svg>
</button>
</div>
<div class="value-banner__chosen">
<input class="value-banner__chosen-value" value="170.000" readonly>
<div class="value-banner__chosen-label">
<div class="
number-m
"><span>€</span></div>
</div>
</div>
<div class="value-banner__slider"></div>
<div class="value-banner__legend">
<div class="value-banner__legend-start">
<div class="
number-xs
"><span></span></div>
</div>
<div class="value-banner__legend-end">
<div class="
number-xs
"><span></span></div>
</div>
</div>
</div>
<div class="value-banner__additional">
<div class="lightbox " value="isDefault">
<div class="lightbox__trigger">
<button class="link
link_simple
link_has-icon link_has-icon_after
" type="button">
<span>Lightbox trigger</span>
<svg class="icon icon-plus icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#plus"></use>
</svg>
</button>
</div>
<div class="lightbox__overlay" id="">
<div class="lightbox__wrapper">
<div class="container">
<div class="row">
<div class="col-xs-12 col-ms-10 col-ms-mr-ml col-sm-10 col-lg-10">
<div class="lightbox__close-container">
<button class="lightbox__close" type="button" title="Close">
<svg class="icon icon-close ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#close"></use>
</svg>
</button>
</div>
<div class="lightbox__window">
<div class="row">
<div class="col-xs-12 col-ms-10 col-ms-mr-ml col-sm-10 col-lg-9_5">
<div class="lightbox__head">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-6 col-lg-6">
<div class="lightbox__title">
<h2 class="
title-l
">
The Title
</h2>
</div>
<div class="lightbox__description">
<div class="
bodycopy-m
">
<p>The description</p>
</div>
</div>
</div>
</div>
</div>
<div class="lightbox__content">
<div class="isContactonHeader isDefault">
Content placeholder
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="value-banner" {{#if id}} id="{{ id }}" {{/if}}>
<div class="value-banner__main">
{{#if icon}}
<div class="icon-wrap">
{{> @icon icon }}
</div>
{{/if}}
<div class="value-banner__label">
<div class="value-banner__label-text">
{{#if isJustText}}
{{> @title title }}
{{else}}
{{> @title-m label }}
{{/if}}
</div>
{{#if tooltip}}
<button class="value-banner__label-trigger" type="button">
{{ render '@icon--info-purple' }}
</button>
{{/if}}
</div>
<div class="value-banner__chosen">
{{#if isJustText}}
{{> @title result }}
{{else}}
<input class="value-banner__chosen-value" {{#if value}} value="{{ value }}" {{/if}} {{#if min}}
min="{{ min }}" {{/if}} {{#if max}} max="{{ max }}" {{/if}} {{#if default}} data-default="{{ default }}"
{{/if}} readonly>
<div class="value-banner__chosen-label">
{{> @number-m chosen-label }}
</div>
{{/if}}
</div>
{{#if legend-start}}
<div class="value-banner__slider"></div>
<div class="value-banner__legend">
<div class="value-banner__legend-start">
{{> @number-xs legend-start }}
</div>
<div class="value-banner__legend-end">
{{> @number-xs legend-end }}
</div>
</div>
{{/if}}
</div>
{{#if lightbox}}
<div class="value-banner__additional">
{{> @lightbox lightbox }}
</div>
{{/if}}
</div>
{
"id": "valueBanner",
"label": {
"text": "Puedes comprar una casa de hasta"
},
"tooltip": true,
"value": "170.000",
"chosen-label": {
"number": "€"
},
"legend-start": {
"text": "200.000€"
},
"legend-end": {
"text": "500.000€"
},
"lightbox": {
"trigger": {
"icon-after": {
"name": "plus",
"isAfter": true
},
"btnType": "button",
"text": "Lightbox trigger"
},
"btntrigger": {
"isBtn": true,
"btnType": "button",
"text": "Btn Trigger"
},
"title": {
"text": "The Title"
},
"description": {
"text": "<p>The description</p>"
}
}
}
.value-banner {
width: 100%;
height: 100%;
padding: 30px 20px;
background-color: var(--color-quaternary);
.icon-wrap{
display: flex;
width: 100%;
justify-content: center;
margin-bottom: 24px;
}
&__label {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 24px;
&-trigger {
margin-left: 8px;
transition: all 0.3s;
&:hover,
&:focus {
opacity: 0.6;
}
}
}
&__chosen {
display: flex;
justify-content: center;
align-items: center;
span.title-l{
text-align: center;
color: var(--color-txt);
}
&-value {
font-family: 'Jornada News Book';
font-size: 26px;
font-weight: normal;
line-height: 1.2;
letter-spacing: 0;
color: var(--color-txt-cuaternary);
text-align: right;
padding-right: 5px;
@media (--viewport-sm-min) {
font-size: 30px;
}
@media (--viewport-md-min) {
font-size: 40px;
}
}
&-label{
.number-m {
color: var(--color-txt-cuaternary);
}
}
}
&__slider {
margin-top: 27px;
height: 4px;
@media (--viewport-sm-min) {
margin-top: 28px;
}
.noUi {
&-connects {
border: none;
background-color: var(--color-secondary-light);
cursor: pointer;
}
&-connect {
background-color: var(--color-accent);
}
&-handle {
top: -9px;
width: 20px;
height: 20px;
border: 6px solid var(--color-white);
border-radius: 50%;
box-shadow: none;
outline: none;
background-color: var(--color-accent-dark);
cursor: ew-resize;
transition: all 0.3s;
&::before,
&::after {
content: none;
}
&:hover,
&:focus {
border-color: var(--color-accent);
background-color: var(--color-primary);
}
}
}
}
&__legend {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 17px;
@media (--viewport-sm-min) {
margin-top: 15px;
}
}
&__additional {
margin-top: 20px;
}
}
No notes defined.