<div class="calculator-form-result">
<div class="gastos">
<div class="gastos__fieldset">
<div class="tooltip-label">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Importe total de gastos</label>
<div class="field-top__wrap">
</div>
</div>
</div>
<span class="gastos__input" id="Gastos" type="text" name="Gastos" title="Gastos" value="888.888,88">0</span>
<label class="gastos__label" for="">
<div class="text-label-m">€</div>
</label>
</div>
</div>
<div class="cuota col-xs-12 col-ms-6 col-sm-6 col-md-6 col-lg-6" id="">
<div class="cuota__fieldset">
<div class="tooltip-label">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Tu cuota mensual sería de</label>
<div class="field-top__wrap">
</div>
</div>
</div>
<div class="wrap">
<span class="cuota__input" id="Cuota" type="text" name="Cuota" title="Cuota" value="8.888,88">0</span>
<label class="cuota__label" for="">
<div class="text-label-m">€</div>
</label>
</div>
</div>
</div>
<div class="nota">
<div class="
bodycopy-s
">
</div>
</div>
</div>
<div {{#if hasID}}id="{{idComponent}}"{{/if}} class="calculator-form-result">
{{#if isGastos}}
<div class="gastos">
<div class="gastos__fieldset">
<div class="tooltip-label">
{{> @field-top field-top-gastos }}
</div>
<span
class="gastos__input"
id="{{ id-gastos }}"
type="text"
name="{{ inputTitle-gastos }}"
title="{{ inputTitle-gastos }}"
value="{{ inputValue-gastos }}"
{{! contenteditable }}
>0</span>
<label class="gastos__label" for="{{ id }}">
{{> @text-label-m label-gastos }}
</label>
</div>
</div>
{{/if}}
<div class="cuota {{ extra-classes }}{{#if isAlert}} alert{{/if}}" id="{{ id-capa-cuota }}">
<div class="cuota__fieldset">
<div class="tooltip-label">
{{> @field-top field-top-cuota }}
</div>
<div class="wrap">
<span
class="cuota__input"
id="{{ id-cuota }}"
type="text"
name="{{ inputTitle-cuota }}"
title="{{ inputTitle-cuota }}"
value="{{ inputValue-cuota }}"
{{! contenteditable }}
>0</span>
<label class="cuota__label" for="{{ id }}">
{{> @text-label-m label-cuota }}
</label>
{{#if asterisk}}
<span class="asterisk">*</span>
{{/if}}
</div>
{{#if link-cuota}}
<div class="link-cuota">{{> @bodycopy-s link-cuota}}</div>
{{/if}}
</div>
</div>
<div class="nota">
{{> @bodycopy-s nota}}
</div>
</div>
{
"hasID": false,
"asterik": true,
"field-top-gastos": {
"label": {
"text": "Importe total de gastos"
}
},
"id-gastos": "Gastos",
"inputTitle-gastos": "Gastos",
"inputValue-gastos": "888.888,88",
"label-gastos": {
"text": "€"
},
"field-top-cuota": {
"label": {
"text": "Tu cuota mensual sería de"
}
},
"id-cuota": "Cuota",
"extra-classes": "col-xs-12 col-ms-6 col-sm-6 col-md-6 col-lg-6",
"inputTitle-cuota": "Cuota",
"inputValue-cuota": "8.888,88",
"label-cuota": {
"text": "€"
},
"isGastos": true
}
.calculator-form-result {
width: 100%;display: flex;flex-direction: column;justify-content: center;
.gastos{
&__fieldset {
display: flex;flex-direction: row;justify-content:center;align-items:flex-end;
position: relative;
@media (--viewport-xs-max) {
display:block; text-align: center; margin-bottom: 10px;
}
.tooltip-label{
@media (--viewport-xs-max) {
justify-content:center;
margin-bottom:0;
}
.link{
position: relative;
top: -4px;
padding-left: 10px;
color: var(--color-accent-dark);
span{
text-decoration: underline;
}
}
}
}
&__input {
padding: 10px 10px 14px;
text-align: right;
font-family: 'Jornada News Book';
font-size: 26px;
font-weight: normal;
line-height: 1.2;
letter-spacing: 0;
border: 0;
color: var(--color-accent);
transition: border-color 0.3s;
@media (--viewport-sm-min) {
font-size: 30px;
}
@media (--viewport-md-min) {
font-size: 40px;
}
@media (--viewport-sm-max) {
padding-bottom:17px;
}
@media (--viewport-ms-max) {
padding-bottom:19px;
}
@media (--viewport-xs-max) {
padding: 0 5px 0 10px;
}
&:hover,
&:focus {
border-color: var(--color-secondary);
}
}
&__label {
transform: translate(0, -50%);
padding-right: 10px;
padding-bottom:8px;
white-space: nowrap;
.text-label-m{font-size:26px;font-family: var(--base-font-family);}
@media (--viewport-ms-min) {
padding-bottom:9.5px;
}
@media (--viewport-sm-min) {
padding-bottom:9.5px;
}
@media (--viewport-md-min) {
padding-bottom:10px;
}
@media (--viewport-lg-min) {
padding-bottom:8px;
}
@media (--viewport-xs-max) {
display:inline-flex;
padding-bottom:0;
position: relative;
top: 10px;
}
}
}
.cuota{align-self: center;min-width: 30%;padding: 0;
@media (--viewport-xs-max) {min-width:100%;flex-basis:auto;}
&__fieldset {
display: flex;flex-direction: column;justify-content:center;align-items:center;
position: relative; padding: 10px 30px 15px;
border: 1px solid var(--color-secondary-light);
@media (--viewport-xs-max){padding-bottom: 5px;}
.tooltip-label{margin-bottom: 0; height: auto;}
.wrap{display: flex;flex-direction: row;
.cuota__input {
padding: 10px 10px 5px 10px;
text-align: right;
font-family: 'Jornada News Book';
font-size: 36px;
font-weight: normal;
/*line-height: 1.2;*/
letter-spacing: 0;
border: 0;
color: var(--color-accent);
transition: border-color 0.3s;
@media (--viewport-sm-min) {
font-size: 40px;
}
@media (--viewport-md-min) {
font-size: 50px;
}
@media (--viewport-xs-max) {
font-size: 46px;
}
&:hover,
&:focus {
border-color: var(--color-secondary);
}
}
.cuota__label {
transform: translate(0, 43%);
padding-right: 10px;
white-space: nowrap;
.text-label-m{font-size: 22px;}
@media (--viewport-sm-max) {
transform: translate(0, 34%);
}
@media (--viewport-ms-max) {
transform: translate(0, 32%);
}
@media (--viewport-xs-max) {
transform: translate(0, 44.5%);
}
}
.asterisk{
color: var(--color-accent-dark);
font-size: 60px;
line-height:1.7;
@media (--viewport-ms-max) {
line-height:1.60;
}
@media (--viewport-xs-max) {
font-size: 50px;
line-height:1.85;
}
}
}
}
.link-cuota{margin-top: -35px;
.bodycopy__link{color: var(--color-accent-dark);
span{text-decoration: underline;
&:after{display:none;}
}
}
@media (--viewport-xs-max) {margin-top: -30px;}
}
&.alert{
.cuota__fieldset{
border-color: var(--color-danger);
.wrap{
.cuota__input{
color: var(--color-danger);
}
.cuota__label{
.text-label-m{color: var(--color-danger);}
}
}
}
}
}
.nota{ text-align: center; margin-top: 20px;
.bodycopy-s{color: var(--color-secondary);}
}
}
Variantes: Default, Alert, Gastos, Asterisk and Link Cuota Permite configurar id, title, name y value de campo e id de label de gastos y de cuota, clases extra para la cuota