<ul class="form-list">
<li class="form-list__item ">
<div class="row">
<div class="col-xs-5 col-ms-5 col-sm-5 col-md-6 col-lg-6">
<div class="form-list__field required">
<div class="form-fieldset" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Prefix</label>
<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> <input class="input
input-distinguisher_prefix
" id="randomInputId3" type="text" name="" title="Phone prefix" autocomplete="" value="+34" minlength='3' />
<div class="form-fieldset__valid-indicator">
<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>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-7 col-ms-7 col-sm-7 col-md-6 col-lg-6">
<div class="form-list__field required">
<div class="form-fieldset" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Telefono</label>
<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> <input class="input
input-distinguisher_phone-number
" id="randomInputId4" type="text" name="" title="Phone number" autocomplete="" minlength='11' />
<div class="form-fieldset__valid-indicator">
<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>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
<ul class="form-list">
{{#each this.form-list}}
<li class="form-list__item {{#if this.extraClasses}} {{ this.extraClasses }}{{/if}}">
{{#if this.isThreeColumn}}
<div class="row">
<div class="{{ this.col-1 }}">
<div class="form-list__field {{#if this.distinguisher-1}}form-list__field_{{ distinguisher-1 }}{{/if}} {{#if this.extraClassnames-1}}{{ this.extraClassnames-1 }}{{/if}} {{#if this.isHidden-1}}hidden{{/if}} {{#if this.isRequired-1}}required{{/if}}"
{{#if this.id-1}} id="{{ id-1 }}" {{/if}}>
{{#if this.form-fieldset-1}}
{{> @form-fieldset this.form-fieldset-1 }}
{{/if}}
{{#if this.form-radio-group-1}}
{{> @form-radio-group this.form-radio-group-1 }}
{{/if}}
{{#if this.form-checkbox-group-1}}
{{> @form-checkbox-group this.form-checkbox-group-1 }}
{{/if}}
{{#if this.form-select-1}}
{{> @form-select this.form-select-1 }}
{{/if}}
{{#if this.form-input-1}}
{{> @form-input this.form-input-1 }}
{{/if}}
{{#if this.form-range-slider-1}}
{{> @form-range-slider this.form-range-slider-1 }}
{{/if}}
{{#if this.form-switch-1}}
{{> @form-switch this.form-switch-1 }}
{{/if}}
{{#if this.form-textarea-1}}
{{> @form-textarea this.form-textarea-1 }}
{{/if}}
</div>
</div>
<div class="{{ this.col-2 }}">
<div class="form-list__field {{#if this.distinguisher-2}}form-list__field-distinguisher_{{ distinguisher-2 }}{{/if}} {{#if this.extraClassnames-2}}{{ this.extraClassnames-2 }}{{/if}} {{#if this.isHidden-2}}hidden{{/if}} {{#if this.isRequired-2}}required{{/if}}"
{{#if this.id-2}}id="{{ id-2 }}" {{/if}}>
{{#if this.form-fieldset-2}}
{{> @form-fieldset this.form-fieldset-2 }}
{{/if}}
{{#if this.form-radio-group-2}}
{{> @form-radio-group this.form-radio-group-2 }}
{{/if}}
{{#if this.form-checkbox-group-2}}
{{> @form-checkbox-group this.form-checkbox-group-2 }}
{{/if}}
{{#if this.form-select-2}}
{{> @form-select this.form-select-2 }}
{{/if}}
{{#if this.form-input-2}}
{{> @form-input this.form-input-2 }}
{{/if}}
{{#if this.form-range-slider-2}}
{{> @form-range-slider this.form-range-slider-2 }}
{{/if}}
{{#if this.form-switch-2}}
{{> @form-switch this.form-switch-2 }}
{{/if}}
{{#if this.form-textarea-2}}
{{> @form-textarea this.form-textarea-2 }}
{{/if}}
</div>
</div>
<div class="{{ this.col-3 }}">
<div class="form-list__field
{{#if this.distinguisher-3}}form-list__field-distinguisher_{{ distinguisher-3 }}{{/if}}
{{#if this.extraClassnames-3}}{{ this.extraClassnames-3 }}{{/if}}
{{#if this.isHidden-3}}hidden{{/if}}
{{#if this.isRequired-3}}required{{/if}}" {{#if this.id-3}} id="{{ id-3 }}" {{/if}}>
{{#if this.form-fieldset-3}}
{{> @form-fieldset this.form-fieldset-3 }}
{{/if}}
{{#if this.form-radio-group-3}}
{{> @form-radio-group this.form-radio-group-3 }}
{{/if}}
{{#if this.form-checkbox-group-3}}
{{> @form-checkbox-group this.form-checkbox-group-3 }}
{{/if}}
{{#if this.form-select-3}}
{{> @form-select this.form-select-3 }}
{{/if}}
{{#if this.form-input-3}}
{{> @form-input this.form-input-3 }}
{{/if}}
{{#if this.form-range-slider-3}}
{{> @form-range-slider this.form-range-slider-3 }}
{{/if}}
{{#if this.form-switch-3}}
{{> @form-switch this.form-switch-3 }}
{{/if}}
{{#if this.form-textarea-3}}
{{> @form-textarea this.form-textarea-3 }}
{{/if}}
</div>
</div>
</div>
{{else if this.isTwoColumn}}
<div class="row">
<div class="{{ this.col-1 }}">
<div class="form-list__field {{#if this.distinguisher-1}}form-list__field_{{ distinguisher-1 }}{{/if}} {{#if this.extraClassnames-1}}{{ this.extraClassnames-1 }}{{/if}} {{#if this.isHidden-1}}hidden{{/if}} {{#if this.isRequired-1}}required{{/if}}"
{{#if this.id-1}} id="{{ id-1 }}" {{/if}}>
{{#if this.form-fieldset-1}}
{{> @form-fieldset this.form-fieldset-1 }}
{{/if}}
{{#if this.form-radio-group-1}}
{{> @form-radio-group this.form-radio-group-1 }}
{{/if}}
{{#if this.form-checkbox-group-1}}
{{> @form-checkbox-group this.form-checkbox-group-1 }}
{{/if}}
{{#if this.form-select-1}}
{{> @form-select this.form-select-1 }}
{{/if}}
{{#if this.form-input-1}}
{{> @form-input this.form-input-1 }}
{{/if}}
{{#if this.form-range-slider-1}}
{{> @form-range-slider this.form-range-slider-1 }}
{{/if}}
{{#if this.form-switch-1}}
{{> @form-switch this.form-switch-1 }}
{{/if}}
{{#if this.form-textarea-1}}
{{> @form-textarea this.form-textarea-1 }}
{{/if}}
</div>
</div>
<div class="{{ this.col-2 }}">
<div class="form-list__field{{#if this.distinguisher-2}}form-list__field-distinguisher_{{ distinguisher-2 }}{{/if}} {{#if this.extraClassnames-2}}{{ this.extraClassnames-2 }}{{/if}} {{#if this.isHidden-2}}hidden{{/if}} {{#if this.isRequired-2}}required{{/if}}"
{{#if this.id-2}}id="{{ id-2 }}" {{/if}}>
{{#if this.form-fieldset-2}}
{{> @form-fieldset this.form-fieldset-2 }}
{{/if}}
{{#if this.form-radio-group-2}}
{{> @form-radio-group this.form-radio-group-2 }}
{{/if}}
{{#if this.form-checkbox-group-2}}
{{> @form-checkbox-group this.form-checkbox-group-2 }}
{{/if}}
{{#if this.form-select-2}}
{{> @form-select this.form-select-2 }}
{{/if}}
{{#if this.form-input-2}}
{{> @form-input this.form-input-2 }}
{{/if}}
{{#if this.form-range-slider-2}}
{{> @form-range-slider this.form-range-slider-2 }}
{{/if}}
{{#if this.form-switch-2}}
{{> @form-switch this.form-switch-2 }}
{{/if}}
{{#if this.form-textarea-2}}
{{> @form-textarea this.form-textarea-2 }}
{{/if}}
</div>
</div>
</div>
{{else if this.isOneColumn}}
<div class="row">
<div class="{{ col }}">
<div class="form-list__field {{#if this.distinguisher}}form-list__field_{{ distinguisher }}{{/if}}{{#if this.extraClassnames}}{{ this.extraClassnames }}{{/if}} {{#if this.isHidden}}hidden{{/if}} {{#if this.isRequired}}required{{/if}}"
{{#if this.id}} id="{{ id }}" {{/if}}>
{{#if this.form-fieldset}}
{{> @form-fieldset this.form-fieldset }}
{{/if}}
{{#if this.form-radio-group}}
{{> @form-radio-group this.form-radio-group }}
{{/if}}
{{#if this.form-checkbox-group}}
{{> @form-checkbox-group this.form-checkbox-group }}
{{/if}}
{{#if this.form-select}}
{{> @form-select this.form-select }}
{{/if}}
{{#if this.form-input}}
{{> @form-input this.form-input }}
{{/if}}
{{#if this.form-range-slider}}
{{> @form-range-slider this.form-range-slider }}
{{/if}}
{{#if this.form-switch}}
{{> @form-switch this.form-switch }}
{{/if}}
{{#if this.form-textarea}}
{{> @form-textarea this.form-textarea }}
{{/if}}
</div>
</div>
</div>
{{else if this.hasTwoFields}}
{{#each this.field}}
<div class="form-list__field {{#if this.distinguisher}}form-list__field_{{ distinguisher }}{{/if}}{{#if this.extraClassnames}}{{ this.extraClassnames }}{{/if}} {{#if this.isHidden}}hidden{{/if}} {{#if this.isRequired}}required{{/if}}"{{#if this.id}} id="{{ id }}" {{/if}}s>
{{#if this.form-fieldset}}
{{> @form-fieldset this.form-fieldset }}
{{/if}}
{{#if this.form-radio-group}}
{{> @form-radio-group this.form-radio-group }}
{{/if}}
{{#if this.form-checkbox-group}}
{{> @form-checkbox-group this.form-checkbox-group }}
{{/if}}
{{#if this.form-select-}}
{{> @form-select this.form-select }}
{{/if}}
{{#if this.form-input}}
{{> @form-input this.form-input }}
{{/if}}
{{#if this.form-range-slider}}
{{> @form-range-slider this.form-range-slider }}
{{/if}}
{{#if this.form-switch}}
{{> @form-switch this.form-switch }}
{{/if}}
{{#if this.form-textarea}}
{{> @form-textarea this.form-textarea }}
{{/if}}
{{#if this.form-input}}
{{> @form-input this.form-input }}
{{/if}}
</div>
{{/each}}
{{else if this.isFieldsetGroup}}
<div class="row">
<div class="{{ this.col-1 }}">
<div class="form-list__field">
{{#if this.form-fieldset-1}}
{{> @form-fieldset this.form-fieldset-1 }}
{{/if}}
{{#if this.form-radio-group-1}}
{{> @form-radio-group this.form-radio-group-1 }}
{{/if}}
{{#if this.form-checkbox-group-1}}
{{> @form-checkbox-group this.form-checkbox-group-1 }}
{{/if}}
{{#if this.form-select-1}}
{{> @form-select this.form-select-1 }}
{{/if}}
{{#if this.form-input-1}}
{{> @form-input this.form-input-1 }}
{{/if}}
{{#if this.form-range-slider-1}}
{{> @form-range-slider this.form-range-slider-1 }}
{{/if}}
{{#if this.form-switch-1}}
{{> @form-switch this.form-switch-1 }}
{{/if}}
{{#if this.form-textarea-1}}
{{> @form-textarea this.form-textarea-1 }}
{{/if}}
</div>
</div>
</div>
<div class="row">
<div class="{{ this.col-3 }}">
<div class="form-list__field">
{{#if this.form-fieldset-2}}
{{> @form-fieldset this.form-fieldset-2 }}
{{/if}}
{{#if this.form-radio-group-2}}
{{> @form-radio-group this.form-radio-group-2 }}
{{/if}}
{{#if this.form-checkbox-group-2}}
{{> @form-checkbox-group this.form-checkbox-group-2 }}
{{/if}}
{{#if this.form-select-2}}
{{> @form-select this.form-select-2 }}
{{/if}}
{{#if this.form-input-2}}
{{> @form-input this.form-input-2 }}
{{/if}}
{{#if this.form-range-slider-2}}
{{> @form-range-slider this.form-range-slider-2 }}
{{/if}}
{{#if this.form-switch-2}}
{{> @form-switch this.form-switch-2 }}
{{/if}}
{{#if this.form-textarea-2}}
{{> @form-textarea this.form-textarea-2 }}
{{/if}}
</div>
</div>
<div class="{{ this.col-3 }}">
<div class="form-list__field">
{{#if this.form-fieldset-3}}
{{> @form-fieldset this.form-fieldset-3 }}
{{/if}}
{{#if this.form-radio-group-3}}
{{> @form-radio-group this.form-radio-group-3 }}
{{/if}}
{{#if this.form-checkbox-group-3}}
{{> @form-checkbox-group this.form-checkbox-group-3 }}
{{/if}}
{{#if this.form-select-3}}
{{> @form-select this.form-select-3 }}
{{/if}}
{{#if this.form-input-3}}
{{> @form-input this.form-input-3 }}
{{/if}}
{{#if this.form-range-slider-3}}
{{> @form-range-slider this.form-range-slider-3 }}
{{/if}}
{{#if this.form-switch-3}}
{{> @form-switch this.form-switch-3 }}
{{/if}}
{{#if this.form-textarea-3}}
{{> @form-textarea this.form-textarea-3 }}
{{/if}}
</div>
</div>
<div class="{{ this.col-3 }}">
<div class="form-list__field">
{{#if this.form-fieldset-4}}
{{> @form-fieldset this.form-fieldset-4 }}
{{/if}}
{{#if this.form-radio-group-4}}
{{> @form-radio-group this.form-radio-group-4 }}
{{/if}}
{{#if this.form-checkbox-group-4}}
{{> @form-checkbox-group this.form-checkbox-group-4 }}
{{/if}}
{{#if this.form-select-4}}
{{> @form-select this.form-select-4 }}
{{/if}}
{{#if this.form-input-4}}
{{> @form-input this.form-input-4 }}
{{/if}}
{{#if this.form-range-slider-4}}
{{> @form-range-slider this.form-range-slider-4 }}
{{/if}}
{{#if this.form-switch-4}}
{{> @form-switch this.form-switch-4 }}
{{/if}}
{{#if this.form-textarea-4}}
{{> @form-textarea this.form-textarea-4 }}
{{/if}}
</div>
</div>
</div>
<div class="row">
<div class="{{ this.col-2 }}">
<div class="form-list__field">
{{#if this.form-fieldset-5}}
{{> @form-fieldset this.form-fieldset-5 }}
{{/if}}
{{#if this.form-radio-group-5}}
{{> @form-radio-group this.form-radio-group-5 }}
{{/if}}
{{#if this.form-checkbox-group-5}}
{{> @form-checkbox-group this.form-checkbox-group-5 }}
{{/if}}
{{#if this.form-select-5}}
{{> @form-select this.form-select-5 }}
{{/if}}
{{#if this.form-input-5}}
{{> @form-input this.form-input-5 }}
{{/if}}
{{#if this.form-range-slider-5}}
{{> @form-range-slider this.form-range-slider-5 }}
{{/if}}
{{#if this.form-switch-6}}
{{> @form-switch this.form-switch-5 }}
{{/if}}
{{#if this.form-textarea-5}}
{{> @form-textarea this.form-textarea-5 }}
{{/if}}
</div>
</div>
<div class="{{ this.col-2 }}">
<div class="form-list__field">
{{#if this.form-fieldset-6}}
{{> @form-fieldset this.form-fieldset-6 }}
{{/if}}
{{#if this.form-radio-group-6}}
{{> @form-radio-group this.form-radio-group-6 }}
{{/if}}
{{#if this.form-checkbox-group-6}}
{{> @form-checkbox-group this.form-checkbox-group-6 }}
{{/if}}
{{#if this.form-select-6}}
{{> @form-select this.form-select-6 }}
{{/if}}
{{#if this.form-input-6}}
{{> @form-input this.form-input-6 }}
{{/if}}
{{#if this.form-range-slider-6}}
{{> @form-range-slider this.form-range-slider-6 }}
{{/if}}
{{#if this.form-switch-6}}
{{> @form-switch this.form-switch-6 }}
{{/if}}
{{#if this.form-textarea-6}}
{{> @form-textarea this.form-textarea-6 }}
{{/if}}
</div>
</div>
</div>
{{else if this.hasThreeFields}}
{{#each this.field}}
<div class="form-list__field {{#if this.distinguisher}}form-list__field_{{ distinguisher }}{{/if}} {{#if this.extraClassnames}}{{ this.extraClassnames }}{{/if}} {{#if this.isHidden}}hidden{{/if}} {{#if this.isRequired}}required{{/if}}" {{#if this.id}}id="{{ id }}"{{/if}}>
{{#if this.form-fieldset}}
{{> @form-fieldset this.form-fieldset }}
{{/if}}
{{#if this.form-radio-group}}
{{> @form-radio-group this.form-radio-group }}
{{/if}}
{{#if this.form-checkbox-group}}
{{> @form-checkbox-group this.form-checkbox-group }}
{{/if}}
{{#if this.form-select}}
{{> @form-select this.form-select }}
{{/if}}
{{#if this.form-input}}
{{> @form-input this.form-input }}
{{/if}}
{{#if this.form-range-slider}}
{{> @form-range-slider this.form-range-slider }}
{{/if}}
{{#if this.form-switch}}
{{> @form-switch this.form-switch }}
{{/if}}
{{#if this.form-textarea}}
{{> @form-textarea this.form-textarea }}
{{/if}}
{{#if this.form-input}}
{{> @form-input this.form-input }}
{{/if}}
</div>
{{/each}}
{{else}}
<div class="form-list__field {{#if this.distinguisher}}form-list__field_{{ distinguisher }}{{/if}} {{#if this.extraClassnames}}{{ this.extraClassnames }}{{/if}} {{#if this.isHidden}}hidden{{/if}} {{#if this.isRequired}}required{{/if}}"
{{#if this.id}} id="{{ id }}" {{/if}}>
{{#if this.form-fieldset}}
{{> @form-fieldset this.form-fieldset }}
{{/if}}
{{#if this.form-radio-group}}
{{> @form-radio-group this.form-radio-group }}
{{/if}}
{{#if this.form-checkbox-group}}
{{> @form-checkbox-group this.form-checkbox-group }}
{{/if}}
{{#if this.form-select}}
{{> @form-select this.form-select }}
{{/if}}
{{#if this.form-input}}
{{> @form-input this.form-input }}
{{/if}}
{{#if this.form-range-slider}}
{{> @form-range-slider this.form-range-slider }}
{{/if}}
{{#if this.form-switch}}
{{> @form-switch this.form-switch }}
{{/if}}
{{#if this.form-textarea}}
{{> @form-textarea this.form-textarea }}
{{/if}}
</div>
{{/if}}
</li>
{{/each}}
</ul>
{
"form-list": [
{
"isTwoColumn": true,
"col-1": "col-xs-5 col-ms-5 col-sm-5 col-md-6 col-lg-6",
"isRequired-1": true,
"form-fieldset-1": {
"field-top": {
"label": {
"text": "Prefix"
},
"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"
}
}
},
"input": {
"distinguisher": "prefix",
"id": "randomInputId3",
"type": "text",
"title": "Phone prefix",
"value": "+34",
"validationAttributes": "minlength='3'"
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
},
"col-2": "col-xs-7 col-ms-7 col-sm-7 col-md-6 col-lg-6",
"isRequired-2": true,
"form-fieldset-2": {
"field-top": {
"label": {
"text": "Telefono"
},
"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"
}
}
},
"input": {
"distinguisher": "phone-number",
"id": "randomInputId4",
"type": "text",
"title": "Phone number",
"validationAttributes": "minlength='11'"
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
}
]
}
.form-list {
&__item {
&:first-child {
.form-list {
&__field {
margin-top: 0;
}
}
}
}
&__field {
display: flex;
flex-direction: column;
height: 100%;
margin-bottom: 0;
@media (--viewport-ms-min) {
margin-bottom: 0;
}
}
&__show-password {
opacity: 0;
display: none;
}
&__valid-indicator {
position: absolute;
top: 67px;
/*top: 50%;*/
right: 10px;
opacity: 0;
transform: translate(0, -50%);
display: flex;
transition: opacity 0.3s;
@media (--viewport-ms-min) {
right: 20px;
}
.icon {
fill: var(--color-valid);
}
}
&__error-message {
position: absolute;
left: 0;
opacity: 0;
display: flex;
/*padding-top: 8px;*/
transition: opacity 0.3s;
}
&__helper-text {
position: relative;
left: 0;
display: flex;
/*padding-top: 8px;*/
.bodycopy-xs{color: var(--color-grey2);}
}
&__tooltip-label {
&_option {
&_2 {
display: none;
}
}
}
.hidden {
display: none;
&-xs {
@media (--viewport-xs-max) {
display: none;
}
&-ms {
@media (--viewport-ms-max) {
display: none;
}
}
}
&-ms {
@media (--viewport-ms-only) {
display: none;
}
&-min {
@media (--viewport-ms-min) {
display: none;
}
}
}
&-sm {
@media (--viewport-sm-only) {
display: none;
}
&-min {
@media (--viewport-sm-min) {
display: none;
}
}
}
}
}
No notes defined.