<div class="lightbox " value="calculatorLightbox">
<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-12 col-lg-12">
<div class="lightbox__title calculatorLightbox">
<h2 class="
title-l
">
Desglose de financiación
</h2>
</div>
</div>
</div>
</div>
<div class="lightbox__content">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<div class="lightbox__content-main calculatorLightbox">
<div class="row">
<div class="col-xs-12 col-ms-9 col-sm-6 col-lg-6 col-ms-mr-ml">
<div class="description-list">
<dl>
<dt class="" id=""><span class="bodycopy">Importe del préstamo</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dt>
<dd class="" id=""><span class="bodycopy">150.000 €</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dd>
<dt class="" id=""><span class="bodycopy">Importe reforma</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dt>
<dd class="" id=""><span class="bodycopy">20.000 €</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dd>
<dt class="" id=""><span class="bodycopy">Total</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dt>
<dd class="" id=""><span class="bodycopy">170.000 €</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dd>
</dl>
</div>
</div>
</div>
<div class="clarification">
<h3>
<div class="
text-label-s
"><span>¿Qué calculos hemos hecho?</span></div>
</h3>
<div class="text">
<div class="
bodycopy-m
">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut maximus vitae leo vel consequat. Aenean vitae libero accumsan, ultricies sem vitae, egestas nunc. In non neque nec odio venenatis eleifend ac ac quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi nec hendrerit ligula, sed efficitur tortor. Mauris bibendum quam ut nisl euismod imperdiet. Sed vehicula, quam id rutrum placerat, diam dolor tincidunt sem, non placerat risus ex nec nunc. Aliquam id arcu vel quam efficitur tempus. Integer nec interdum ligula. Ut interdum tellus eu tellus dapibus, quis aliquet risus sollicitudin.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div {{#if hasID}}id="{{idComponent}}"{{/if}} class="lightbox {{#if isContactonHeader}}header__cta hidden-xs-ms{{/if}}"
value="{{#if stepsform}}steps-form{{else if isContactonHeader}}isContactonHeader{{else if contactForm}}contactForm{{else if contactFormClientNoClient}}contactFormClientNoClient{{else if contactFormAndRTE}}contactFormAndRTE{{else if table}}whitTable{{else if calculatorLightbox}}calculatorLightbox{{else if calculatorLightbox2}}calculatorLightbox2{{else if calculatorLightbox3}}calculatorLightbox3{{else}}isDefault{{/if}}">
<div class="lightbox__trigger{{#if isContactonHeader}} header__cta-btn{{/if}}{{#if isContactonFooter}} footer__lightbox-link{{/if}}">
{{#if stepsform}}
{{> @link btntrigger }}
{{else}}
{{> @link trigger }}
{{/if}}
</div>
<div class="lightbox__overlay" id="{{ 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" {{#if id-close}} id="{{ id-close }}"{{/if}}>
{{ render '@icon--close' }}
</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">
{{#if contactForm}}
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
{{#if title}}
<div class="lightbox__title">
{{> @title-l title }}
</div>
{{/if}}
<ul class="row">
<li class="col-xs-12 col-ms-6 col-sm-4 col-lg-4">{{> @link telefono }}{{> @bodycopy-s info }}</li>
<li class="col-xs-12 col-ms-6 col-sm-4 col-lg-4">{{> @link enlace }}</li>
<li class="col-xs-12 col-ms-6 col-sm-4 col-lg-4">{{> @link oficinas }}</li>
</ul>
{{#if description}}
<div class="lightbox__description">
{{> @bodycopy-m description }}
</div>
{{/if}}
</div>
{{else if contactFormClientNoClient}}
{{ render '@contact-cards' }}
{{else if calculatorLightbox}}
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<div class="lightbox__title calculatorLightbox">
{{> @title-l title }}
</div>
</div>
{{else if calculatorLightbox2}}
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<div class="lightbox__title calculatorLightbox2">
{{> @title-l title }}
</div>
</div>
{{else if calculatorLightbox3}}
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<div class="lightbox__title calculatorLightbox3">
{{> @title-l title }}
</div>
</div>
{{else if stepsform}}
{{else}}
<div class="col-xs-12 col-ms-12 col-sm-6 col-lg-6">
{{#if title}}
<div class="lightbox__title">
{{> @title-l title }}
</div>
{{/if}}
{{#if description}}
<div class="lightbox__description">
{{> @bodycopy-m description }}
</div>
{{/if}}
</div>
{{/if}}
</div>
</div>
<div class="lightbox__content">
{{#if contactForm}}
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<div class="lightbox__content-main contactForm">
{{#if isInsideTheMobileMenu}}
{{ render '@contact-form--mobile-menu' }}
{{else if isInsideTheHeader}}
{{ render '@contact-form--header' }}
{{else if isInsideTheFooter}}
{{ render '@contact-form--footer' }}
{{else}}
{{ render '@contact-form' }}
{{/if}}
</div>
</div>
</div>
{{else if contactFormClientNoClient}}
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<div class="lightbox__content-main contactFormClientNoClient">
{{#if isInsideTheMobileMenu}}
{{ render '@contact-form--mobile-menu' }}
{{else if isInsideTheHeader}}
{{ render '@contact-form--header' }}
{{else if isInsideTheFooter}}
{{ render '@contact-form--footer' }}
{{else}}
{{ render '@contact-form' }}
{{/if}}
</div>
</div>
</div>
{{else if contactFormAndRTE}}
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-6 col-lg-6">
<div class="lightbox__content-main contactFormAndRTE">
{{#if isInsideTheMobileMenu}}
{{ render '@contact-form--mobile-menu' }}
{{else if isInsideTheHeader}}
{{ render '@contact-form--header' }}
{{else if isInsideTheFooter}}
{{ render '@contact-form--footer' }}
{{else}}
{{ render '@contact-form' }}
{{/if}}
</div>
</div>
<div class="col-xs-12 col-ms-12 col-sm-4_5 col-sm-ml col-lg-4_5">
<div class="lightbox__content-additional lightbox__content-additional_col_2">
RTE placeholder RTE placeholder RTE placeholder<br/>
RTE placeholder RTE placeholder RTE placeholder<br/>
RTE placeholder RTE placeholder RTE placeholder<br/>
RTE placeholder RTE placeholder RTE placeholder<br/>
RTE placeholder RTE placeholder RTE placeholder<br/>
</div>
</div>
</div>
{{else if calculatorLightbox}}
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<div class="lightbox__content-main calculatorLightbox">
<div class="row">
<div class="col-xs-12 col-ms-9 col-sm-6 col-lg-6 col-ms-mr-ml">
{{> @description-list list1 }}
</div>
</div>
{{> @clarification clarification }}
</div>
</div>
</div>
{{else if calculatorLightbox2}}
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<div class="lightbox__content-main calculatorLightbox2">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-6 col-lg-6">
{{> @description-list list1 }}
</div>
<div class="col-xs-12 col-ms-12 col-sm-6 col-lg-6">
{{> @description-list list2 }}
</div>
</div>
{{> @box-result result }}
{{> @clarification clarification }}
</div>
</div>
</div>
{{else if calculatorLightbox3}}
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<div class="lightbox__content-main calculatorLightbox3">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-9 col-lg-9 col-ms-mr-ml">
{{> @description-list list1 }}
</div>
</div>
{{> @clarification clarification }}
</div>
</div>
</div>
{{else if stepsform}}
{{ render '@steps-form' }}
{{else if table}}
<div class="lightbox__content-main whitTable">
{{> @table table }}
</div>
<div class="lightbox__content-additional">
RTE placeholder RTE placeholder RTE placeholder<br/>
RTE placeholder RTE placeholder RTE placeholder<br/>
RTE placeholder RTE placeholder RTE placeholder<br/>
RTE placeholder RTE placeholder RTE placeholder<br/>
RTE placeholder RTE placeholder RTE placeholder<br/>
</div>
{{else if rte}}
RTE placeholder RTE placeholder RTE placeholder<br/>
RTE placeholder RTE placeholder RTE placeholder<br/>
RTE placeholder RTE placeholder RTE placeholder<br/>
RTE placeholder RTE placeholder RTE placeholder<br/>
RTE placeholder RTE placeholder RTE placeholder<br/>
{{else}}
<div class="isContactonHeader isDefault">
Content placeholder
</div>
{{/if}}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{
"hasID": false,
"trigger": {
"icon-after": {
"name": "plus",
"isAfter": true
},
"btnType": "button",
"text": "Lightbox trigger"
},
"btntrigger": {
"isBtn": true,
"btnType": "button",
"text": "Btn Trigger"
},
"title": {
"text": "Desglose de financiación"
},
"description": {
"text": "<p>The description</p>"
},
"list1": {
"row": [
{
"item": {
"text": "Importe del préstamo"
},
"description": {
"text": "150.000 €"
}
},
{
"item": {
"text": "Importe reforma"
},
"description": {
"text": "20.000 €"
}
},
{
"extra-classes": "total",
"item": {
"text": "Total",
"strong": true
},
"description": {
"text": "170.000 €",
"strong": true
}
}
]
},
"clarification": {
"titulo": {
"text": "¿Qué calculos hemos hecho?"
},
"texto": {
"text": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut maximus vitae leo vel consequat. Aenean vitae libero accumsan, ultricies sem vitae, egestas nunc. In non neque nec odio venenatis eleifend ac ac quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi nec hendrerit ligula, sed efficitur tortor. Mauris bibendum quam ut nisl euismod imperdiet. Sed vehicula, quam id rutrum placerat, diam dolor tincidunt sem, non placerat risus ex nec nunc. Aliquam id arcu vel quam efficitur tempus. Integer nec interdum ligula. Ut interdum tellus eu tellus dapibus, quis aliquet risus sollicitudin.</p>"
}
},
"calculatorLightbox": true
}
.lightbox {
&__overlay {
display: none;
position: fixed;
z-index: 12;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.3);
cursor: pointer;
}
&__wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
.container {
@media (--viewport-xs-max) {
padding-right: 0;
padding-left: 0;
}
& > div > div{
background-color: var(--color-primary);
}
}
}
&__close-container {
position: relative;
overflow: hidden;
width: 100%;
height: 60px;
padding: 0;
background-color: var(--color-primary);
cursor: auto;
}
&__window {
position: relative;
overflow: hidden auto;
width: 100%;
max-height: calc(100vh - 140px);
padding: 0 20px 60px 20px;
background-color: var(--color-primary);
cursor: auto;
scroll-behavior: smooth !important;
@media (--viewport-xs-max) {
max-height: calc(100vh - 60px);
}
@media (--viewport-sm-min) {
padding: 0 0 60px 0;
}
}
&__head {
margin-bottom: 40px;
text-align: left;
ul{/*margin-top: 30px;margin-bottom: 20px;*/
li{
&:first-child{flex-wrap: wrap;flex-direction: row;
a.link{display:inline-flex;width:auto;
span{display:inline;padding-left: 5px;padding-right:0;}
&:first-child span{padding-right: 5px;}
}
div{clear:left;}
}
}
}
.contact-cards ul li:first-child{flex-direction:column;} /* Excepción para que no interfiera con el contact cards */
.lightbox__title{margin-bottom:20px;
&.calculatorLightbox{ margin-bottom: 0;}
}
}
&__description {
margin-top: 20px;
}
&__content {
&-additional {
margin-top: 40px;
&_col {
&_2 {
@media (--viewport-sm-min) {
margin-top: 0;
}
}
}
}
&-main{
&.calculatorLightbox{
.row{
.col-sm-6, .col-lg-6{position: relative;
.description-list{
/*@media (--viewport-ms-min) {
margin-bottom: 32px;
dt.total{position: absolute; bottom:0;}
dd.total{position: absolute; bottom:0;right: 0;margin-right: var(--half-gutter-width-ms-min);}
}*/
@media (--viewport-sm-min) {margin-bottom: 32px;
dl{
dt.total{position: absolute; bottom:0;}
dd.total{position: absolute; bottom:0;right: 0;margin-right: var(--half-gutter-width-ms-min);}
}
}
@media (--viewport-lg-min) {margin-bottom: 30px;
dl{
dt.total{position: absolute; bottom:0;}
dd.total{position: absolute; bottom:0;right: 0;margin-right: var(--half-gutter-width-lg-min);}
}
}
}
}
}
}
}
}
&__close {
position: absolute;
top: 23px;
right: 30px;
display: flex;
&::before {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 45px;
height: 45px;
content: '';
}
&:hover,
&:focus {
.icon {
fill: var(--color-accent);
}
}
.icon {
width: 16px;
height: 16px;
}
}
}
body, html, .lightbox__window {
scroll-behavior: smooth !important;
}
Variantes: Default, Steps form, Contact on header, With contact form, With Contact form and RTE, Lightbox for calculator in Hipotecas, Lightbox for calculator 2 in Hipotecas, Lightbox for calculator 3 in Hipotecas, Steps form, With a table