<div class="description-list">
<h3>
<div class="text-label-m">Gastos compraventa</div>
</h3> <!-- en los cambios propuestos en 05/2023 el átomo pasa de ser s a m -->
<dl>
<dt class="" id=""><span class="bodycopy-m">Notaría</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dt>
<dd class="" id=""><span class="bodycopy-m">1.151 €</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dd>
<dt class="" id=""><span class="bodycopy-m">Registro</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dt>
<dd class="" id=""><span class="bodycopy-m">574 €</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dd>
<dt class="" id=""><span class="bodycopy-m">Gestoría</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dt>
<dd class="" id=""><span class="bodycopy-m">391 €</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dd>
<dt class="" id=""><span class="bodycopy-m">Tasación</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dt>
<dd class="" id=""><span class="bodycopy-m">- €</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dd>
<dt class="" id=""><span class="bodycopy-l">Total</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dt>
<dd class="" id=""><span class="bodycopy-l">2.115 €</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dd>
</dl>
</div>
{{#if splitter}}
{{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}
<div class="description-list{{#if isTextList}} text-list{{/if}}">
{{#if title}}
{{> @title title }}
{{else if titulo}}
<h3>{{> @text-label-m titulo }}</h3> <!-- en los cambios propuestos en 05/2023 el átomo pasa de ser s a m -->
{{/if}}
{{#if description}}<div class="description">{{> @bodycopy description}}</div>{{/if}}
<dl>
{{#each row}}
{{#if isTextList}}<div class="wrap">{{/if}}
<dt class="{{ extra-classes-dt }}" id="{{ id-dt }}">{{#if icon}}{{> @icon icon }}{{/if}}{{> @bodycopy item }}</dt>
<dd class="{{ extra-classes-dd }}" id="{{ id-dd }}">{{> @bodycopy description }}</dd>
{{#if isTextList}}
</div>{{/if}}
{{/each}}
</dl>
</div>
{{/content}}
{{/extend}}
{{else}}
<div class="description-list{{#if isTextList}} text-list{{/if}}">
{{#if title}}
{{> @title title }}
{{else if titulo}}
<h3>{{> @text-label-m titulo }}</h3> <!-- en los cambios propuestos en 05/2023 el átomo pasa de ser s a m -->
{{/if}}
{{#if description}}<div class="description">{{> @bodycopy description}}</div>{{/if}}
<dl>
{{#each row}}
{{#if isTextList}}<div class="wrap">{{/if}}
<dt class="{{ extra-classes-dt }}" id="{{ id-dt }}">{{#if icon}}{{> @icon icon }}{{/if}}{{> @bodycopy item }}</dt>
<dd class="{{ extra-classes-dd }}" id="{{ id-dd }}">{{> @bodycopy description }}</dd>
{{#if isTextList}}
</div>{{/if}}
{{/each}}
</dl>
</div>
{{/if}}
{
"titulo": {
"text": "Gastos compraventa"
},
"row": [
{
"item": {
"text": "Notaría",
"type": "-m"
},
"description": {
"text": "1.151 €",
"type": "-m"
}
},
{
"item": {
"text": "Registro",
"type": "-m"
},
"description": {
"text": "574 €",
"type": "-m"
}
},
{
"item": {
"text": "Gestoría",
"type": "-m"
},
"description": {
"text": "391 €",
"type": "-m"
}
},
{
"item": {
"text": "Tasación",
"type": "-m"
},
"description": {
"text": "- €",
"type": "-m"
}
},
{
"extra-classes": "total",
"item": {
"text": "Total",
"strong": true,
"type": "-l"
},
"description": {
"text": "2.115 €",
"strong": true,
"type": "-l"
}
}
],
"isHipotecas": true
}
.description-list {
.text-label-m{text-align: left;padding:0 10px;}
dl{display: flex; flex-direction:row; width: 100%; flex-wrap:wrap;margin-top: 0;
dt{border-bottom: solid 1px var(--color-border-accent-bold); width: 70%;padding: 15px 10px 7px 20px; text-align: left;
.bodycopy-m{color: var(--color-text);overflow-wrap: break-word;}
.bodycopy-l{color: var(--color-text);overflow-wrap: break-word; font-weight: bold;}
&.total{border-bottom: 0;background-color: var(--color-background-accent);}
@media (--viewport-sm-max){width: 60%;}
}
dd{border-bottom: solid 1px var(--color-border-accent-bold); width: 30%; margin: 0;padding: 15px 20px 7px 10px; text-align: right;
.bodycopy-m{color: var(--color-text); font-weight: bold;}
.bodycopy-l{color: var(--color-text); font-weight: bold;}
&.total{border-bottom: 0;background-color: var(--color-background-accent);}
@media (--viewport-sm-max){width: 40%;}
&.grey{color: var(--color-grey2);
.bodycopy-m{color: var(--color-grey2);}
}
}
}
@media (--viewport-sm-max){
&:nth-of-type(1n) {
margin-top: 30px;
}
}
&.text-list{
.description{
margin: 32px 0;
}
dl{
.wrap{display: flex; width: 100%; align-items: flex-start;column-gap:16px; margin-bottom: 24px;
dt{border-bottom: none; width:fit-content;padding: 0; text-align: left;float:left; clear: left;white-space:nowrap;
.bodycopy-m{color: var(--color-text);overflow-wrap:normal;font-weight: bold; white-space:nowrap;}
&.ok{
.icon{
fill:var(--color-icon-success);
margin-right: 16px;
}
}
&.ko{
.icon{
fill:var(--color-icon-error);
margin-right: 16px;
}
}
}
dd{border-bottom: none; width: auto; margin: 0;text-align: left;padding: 0;float:left;
.bodycopy-m{color: var(--color-text); font-weight: normal;color: var(--color-text-subtle);}
}
@media (--viewport-xs-max){
display: block;
dt, dd{width: 100%;}
}
}
}
}
}
No notes defined.