UCI

Landing form list: Hipotecas 

<ul class="form-list row landing-form-list">
    <li class="
            form-list__item col
                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="
            form-list__item col
                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="
            form-list__item col
                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="
            form-list__item col
               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="
            form-list__item col
               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="
            form-list__item col
               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 row landing-form-list">
    {{#each this.form-list}}
        <li class="
            form-list__item col
            {{#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 twocolumns-b}}
               col-xs-12 col-ms-12 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.extraClasses}}
                {{ this.extraClasses }}
            {{/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"
        }
      }
    }
  ]
}
  • Content: 
    .landing-form-list {
    /*li{
        &: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;}
        }
        .form-list__field{
            position: relative;
        }
    }*/
    li{
        &.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-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;}
            }
        }
        &.onecolumn{
        }
        .form-list__field{
            position: relative;
        }
        
    }
    .form-fieldset .form-fieldset__valid-indicator{ /* esto hay que dejarlo para que funcionen las validaciones de sitecore forms */
        opacity:0;
    }
    .form-fieldset input.valid + .form-fieldset__valid-indicator{ /* esto hay que dejarlo para que funcionen las validaciones de sitecore forms */
        opacity:1;
    }
    
    .form-list__error-message { /* esto hay que dejarlo para que funcionen las validaciones de sitecore forms */
        opacity: 1;
    }
}
  • URL: /components/raw/landing-form-list/landing-form-list.css
  • Filesystem Path: src/02-molecules/landing-form-list/landing-form-list.css
  • Size: 1.7 KB

No notes defined.