<div class="form-checkbox-group inline" id="moreInfo">
<div class="field-top fieldset form-list__tooltip-label_default">
<!-- para los radio y checkbox group -->
<fieldset class="label-m " for="">Field Text</fieldset>
<div class="field-top__wrap">
<a class="link
link_inline
" href="#">
<span>Link</span>
</a>
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip flex">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<p class="
title-s
">Títulilllo</p>
<div class="
bodycopy-s
">
Este es el texto.
</div> <a class="link
" href="#">
<span>Enlacillo</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="checkbox-group" id="">
<ul>
<li class="checkbox-group__item">
<div class="checkbox">
<input class="checkbox-input" id="moreInfoReform" type="checkbox" name="House needs a reform" title="House needs a reform">
<svg class="icon icon-icon-check ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#icon-check"></use>
</svg>
<label class="checkbox-label" for="moreInfoReform">
<span class="caption-placeholder-m">LA VIVIENDA NECESITA UNA REFORMA</span>
</label>
</div>
</li>
<li class="checkbox-group__item">
<div class="checkbox">
<input class="checkbox-input" id="moreInfoNotYetBuilt" type="checkbox" name="House is not yet built" title="House is not yet built">
<svg class="icon icon-icon-check ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#icon-check"></use>
</svg>
<label class="checkbox-label" for="moreInfoNotYetBuilt">
<span class="caption-placeholder-m">LA CASA QUE QUIERO COMPRAR NO HA EMPEZADO A CONSTRUIRSE</span>
</label>
</div>
</li>
<li class="checkbox-group__item">
<div class="checkbox">
<input class="checkbox-input" id="moreInfoSwitchHouseActiveMortgage" type="checkbox" name="I want to switch the house, but I have an active mortgage" title="I want to switch the house, but I have an active mortgage">
<svg class="icon icon-icon-check ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#icon-check"></use>
</svg>
<label class="checkbox-label" for="moreInfoSwitchHouseActiveMortgage">
<span class="caption-placeholder-m">QUIERO CAMBIAR DE CASA Y YA TENGO UNA HIPOTECA ACTIVA</span>
</label>
</div>
</li>
</ul>
</div>
<div class="field-bottom">
</div>
</div>
<div class="form-checkbox-group{{#if inLine}} inline{{/if}}{{#if isError}} error{{/if}}{{#if isBGTransparent}} bgtransparent{{/if}}{{#if isBGAccentLight}} bgaccentlight{{/if}}" id="{{ id }}">
{{> @field-top field-top }}
{{> @checkbox-group checkbox-group }}
{{> @field-bottom field-bottom }}
</div>
{
"field-top": {
"fieldset": true,
"label": {
"text": "Field Text",
"fieldset": true
},
"link": {
"isInline": true,
"href": "#",
"text": "Link"
},
"tooltip": {
"isFlex": true,
"title": {
"text": "Títulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
},
"id": "moreInfo",
"checkbox-group": {
"checkbox-group": [
{
"id": "moreInfoReform",
"title": "House needs a reform",
"name": "More info",
"label": {
"text": "LA VIVIENDA NECESITA UNA REFORMA",
"type": "-placeholder-m"
}
},
{
"id": "moreInfoNotYetBuilt",
"title": "House is not yet built",
"name": "More info",
"label": {
"text": "LA CASA QUE QUIERO COMPRAR NO HA EMPEZADO A CONSTRUIRSE",
"type": "-placeholder-m"
}
},
{
"id": "moreInfoSwitchHouseActiveMortgage",
"title": "I want to switch the house, but I have an active mortgage",
"name": "More info",
"label": {
"text": "QUIERO CAMBIAR DE CASA Y YA TENGO UNA HIPOTECA ACTIVA",
"type": "-placeholder-m"
}
}
]
},
"inLine": true
}
.form-checkbox-group {
margin-bottom: 20px;
position: relative;
.checkbox-group{
padding:12px 0;
li{
.checkbox-label{
padding-top: 0;
display:flex;
align-items: center;
.text-label-m{padding-top: 4px;}
}
}
}
&.inline{
.checkbox-group{
display: flex;
flex-direction: row;
li{margin-right: 20px;margin-bottom: 0;
.checkbox-label{
padding-top: 6px;
}
}
}
}
&.bgtransparent {
.checkbox-group{
li{
.checkbox-label{
&:before{
background-color:transparent;
}
}
}
}
}
&.bgaccentlight {
.checkbox-group{
li{
.checkbox-label{
&:before{
background-color: var(--color-accent-light);
border-color: var(--color-accent-light);
}
&:hover,
&:focus {
&:before{
border-color: var(--color-secondary);
}
}
}
}
}
}
.form-list {
&__helper-text{padding-top:10px;}
}
&.error {
.checkbox .checkbox-label:before {
border-color: var(--color-danger);
color: var(--color-danger);
&:focus {
color: var(--color-text);
}
}
.field-bottom {
&__error-message {
display: block;
position: relative;
}
&__helper-text{display:none;}
}
}
/*.form-list__tooltip-label{
display: flex; align-items: flex-end; height: 36px;
}*/
}
No notes defined.