<ul class="form-list prequalifier-form-list row">
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
">
<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=""></label>
<div class="field-top__wrap">
</div>
</div> <input class="input
input-distinguisher_
" type="" name="" title="" autocomplete="" />
<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>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
">
<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=""></label>
<div class="field-top__wrap">
</div>
</div> <input class="input
input-distinguisher_
" type="" name="" title="" autocomplete="" />
<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>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
">
<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=""></label>
<div class="field-top__wrap">
</div>
</div> <input class="input
input-distinguisher_
" type="" name="" title="" autocomplete="" />
<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>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-6 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=""></label>
<div class="field-top__wrap">
</div>
</div> <input class="input
input-distinguisher_
" type="" name="" title="" autocomplete="" />
<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>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-6 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=""></label>
<div class="field-top__wrap">
</div>
</div> <input class="input
input-distinguisher_
" type="" name="" title="" autocomplete="" />
<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>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-12 col-sm-12 col-md-12 col-lg-12
">
<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=""></label>
<div class="field-top__wrap">
</div>
</div> <input class="input
input-distinguisher_
" type="" name="" title="" autocomplete="" />
<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>
</div>
</div>
</li>
</ul>
<ul class="form-list prequalifier-form-list row">
{{#each this.form-list}}
<li class="col
form-list__item
{{#if this.extraClasses}}
{{ this.extraClasses }}
{{/if}}
{{#if fivecolumns_2_5}}
col-xs-12 col-ms-6 col-sm-6 col-md-2_5 col-lg-2_5
{{else if fivecolumns_1_5}}
col-xs-12 col-ms-6 col-sm-6 col-md-1_5 col-lg-1_5
{{else if fivecolumns_2}}
col-xs-12 col-ms-6 col-sm-6 col-md-2 col-lg-2
{{else if fourcolumns}}
col-xs-12 col-ms-6 col-sm-6 col-md-3 col-lg-3
{{else if threecolumns}}
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
{{else if twocolumns}}
col-xs-12 col-ms-6 col-sm-6 col-md-6 col-lg-6
{{else if onecolumn}}
col-xs-12 col-ms-12 col-sm-12 col-md-12 col-lg-12
{{else}}
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
{{/if}}
">
{{#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-range-slider-1}}
{{> @form-range-slider this.form-range-slider-1 }}
{{/if}}
{{#if this.form-switch-1}}
{{> @form-switch this.form-switch-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-range-slider-2}}
{{> @form-range-slider this.form-range-slider-2 }}
{{/if}}
{{#if this.form-switch-2}}
{{> @form-switch this.form-switch-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-range-slider}}
{{> @form-range-slider this.form-range-slider }}
{{/if}}
{{#if this.form-switch}}
{{> @form-switch this.form-switch }}
{{/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}}
>
{{#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-range-slider}}
{{> @form-range-slider this.form-range-slider }}
{{/if}}
{{#if this.form-switch}}
{{> @form-switch this.form-switch }}
{{/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-range-slider}}
{{> @form-range-slider this.form-range-slider }}
{{/if}}
{{#if this.form-switch}}
{{> @form-switch this.form-switch }}
{{/if}}
</div>
{{/if}}
</li>
{{/each}}
</ul>
{
"form-list": [
{
"isRequired": true,
"form-fieldset": {
"tooltip-label": {
"notit": true,
"label": {
"text": "Form fieldset"
},
"link": {
"isInline": true,
"href": "#",
"text": "Link"
},
"tooltip": {
"isHipotecas": true,
"title": {
"text": "TÃtulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
},
"fieldset": {
"label": {
"for": "randomInputId211",
"text": "NOMBRE"
},
"input": {
"distinguisher": "name",
"id": "randomInputId211",
"type": "text",
"title": "Name"
}
},
"error-message": {
"text": "Put a correct name, please*"
},
"helper-text": {
"text": "This is a helper text"
}
}
},
{
"isRequired": true,
"form-fieldset": {
"tooltip-label": {
"notit": true,
"label": {
"text": "Form fieldset"
},
"link": {
"isInline": true,
"href": "#",
"text": "Link"
},
"tooltip": {
"isHipotecas": true,
"title": {
"text": "TÃtulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
},
"fieldset": {
"label": {
"for": "randomInputId212",
"text": "NOMBRE"
},
"input": {
"distinguisher": "name",
"id": "randomInputId212",
"type": "text",
"title": "Name"
}
},
"error-message": {
"text": "Put a correct name, please*"
},
"helper-text": {
"text": "This is a helper text"
}
}
},
{
"isRequired": true,
"form-fieldset": {
"tooltip-label": {
"notit": true,
"label": {
"text": "Form fieldset"
},
"link": {
"isInline": true,
"href": "#",
"text": "Link"
},
"tooltip": {
"isHipotecas": true,
"title": {
"text": "TÃtulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
},
"fieldset": {
"label": {
"for": "randomInputId213",
"text": "NOMBRE"
},
"input": {
"distinguisher": "name",
"id": "randomInputId213",
"type": "text",
"title": "Name"
}
},
"error-message": {
"text": "Put a correct name, please*"
},
"helper-text": {
"text": "This is a helper text"
}
}
},
{
"twocolumns": true,
"isRequired": true,
"form-fieldset": {
"tooltip-label": {
"notit": true,
"label": {
"text": "Form fieldset"
},
"link": {
"isInline": true,
"href": "#",
"text": "Link"
},
"tooltip": {
"isHipotecas": true,
"title": {
"text": "TÃtulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
},
"fieldset": {
"label": {
"for": "randomInputId214",
"text": "NOMBRE"
},
"input": {
"distinguisher": "name",
"id": "randomInputId214",
"type": "text",
"title": "Name"
}
},
"error-message": {
"text": "Put a correct name, please*"
},
"helper-text": {
"text": "This is a helper text"
}
}
},
{
"twocolumns": true,
"isRequired": true,
"form-fieldset": {
"tooltip-label": {
"notit": true,
"label": {
"text": "Form fieldset"
},
"link": {
"isInline": true,
"href": "#",
"text": "Link"
},
"tooltip": {
"isHipotecas": true,
"title": {
"text": "TÃtulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
},
"fieldset": {
"label": {
"for": "randomInputId215",
"text": "NOMBRE"
},
"input": {
"distinguisher": "name",
"id": "randomInputId215",
"type": "text",
"title": "Name"
}
},
"error-message": {
"text": "Put a correct name, please*"
},
"helper-text": {
"text": "This is a helper text"
}
}
},
{
"onecolumn": true,
"isRequired": true,
"form-fieldset": {
"tooltip-label": {
"notit": true,
"label": {
"text": "Form fieldset"
},
"link": {
"isInline": true,
"href": "#",
"text": "Link"
},
"tooltip": {
"isHipotecas": true,
"title": {
"text": "TÃtulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
},
"fieldset": {
"label": {
"for": "randomInputId216",
"text": "NOMBRE"
},
"input": {
"distinguisher": "name",
"id": "randomInputId216",
"type": "text",
"title": "Name"
}
},
"error-message": {
"text": "Put a correct name, please*"
},
"helper-text": {
"text": "This is a helper text"
}
}
}
]
}
.prequalifier-form-list {
display: flex; flex-direction: row;
li{
&.col-sm-6, &.col-md-6, &.col-lg-6{
&:first-child .form-list__field,
&:nth-child(2) .form-list__field{
@media (--viewport-ms-min) {margin-top: 0;}
@media (--viewport-sm-min) {margin-top: 0;}
}
}
&.col-sm-4, &.col-md-4, &.col-lg-4{
&:first-child .form-list__field,
&:nth-child(2) .form-list__field{
@media (--viewport-ms-min) {margin-top: 0;}
@media (--viewport-sm-min) {margin-top: 0;}
}
&:nth-child(3) .form-list__field {
@media (--viewport-sm-min) {margin-top: 0;}
}
}
&.col-md-3, &.col-lg-3{
&:first-child .form-list__field,
&:nth-child(2) .form-list__field, &:nth-child(3) .form-list__field, &:nth-child(4) .form-list__field, &:nth-child(5) .form-list__field{
@media (--viewport-md-min) {margin-top: 0;}
}
}
&.col-md-2_5, &.col-lg-2_5{ /*para las 5 columnas aleatorias*/
@media (--viewport-md-min) {box-sizing: border-box;flex: 0 1 auto;flex-basis:20.888%;max-width:20.8333%;padding-right: var(--half-gutter-width-ms-min, 0.5rem);padding-left: var(--half-gutter-width-ms-min, 0.5rem);}
@media (--viewport-lg-min) {box-sizing: border-box;flex: 0 1 auto;flex-basis:20.888%;max-width:20.8333%;padding-right: var(--half-gutter-width-lg-min, 0.5rem);padding-left: var(--half-gutter-width-lg-min, 0.5rem);}
&:first-child .form-list__field,
&:nth-child(2) .form-list__field, &:nth-child(3) .form-list__field, &:nth-child(4) .form-list__field, &:nth-child(5) .form-list__field{
@media (--viewport-md-min) {margin-top: 0;}
}
}
&.col-md-2_4, &.col-lg-2_4, &.col-md-2, &.col-lg-2, &.col-md-1_5, &.col-lg-1_5,
&.col-md-1_5 + &.col-md-3, &.col-lg-1_5 + &.col-lg-3{ /*para las 5 columnas aleatorias*/
&:first-child .form-list__field,
&:nth-child(2) .form-list__field, &:nth-child(3) .form-list__field, &:nth-child(4) .form-list__field, &:nth-child(5) .form-list__field{
@media (--viewport-md-min) {margin-top: 0;}
}
}
.form-list__field{
position: relative;
}
/*&:last-child{
.form-list__field{
@media (--viewport-xs-max) {margin-bottom:0;}
}
}*/
}
li.col-md-1_5 + li.col-md-3, li.col-lg-1_5 + li.col-lg-3{ /*para las 5 columnas aleatorias*/
.form-list__field{
@media (--viewport-md-min) {margin-top: 0;}
}
}
/*.form-list__error-message {
opacity: 0;
}
.input-validation-error {
border-color: #e4002b;
color: #e4002b;
}*/
}
No notes defined.