UCI

Form select: Error Net 

<div class="form-select  error" id="where">
    <div class="field-top form-list__tooltip-label_default">
        <label class="label-m" for="">Field Text</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>
    <div class="access-select-net error">
        <select name="select">
            <option value="">Provincia 1</option>
            <option value="">Provincia 2</option>
            <option value="">Provincia 3</option>
        </select>
    </div>
    <div class="field-bottom error">
        <div class="field-bottom__error-message">
            <span class="error-message">Debes rellenar el campo correctamente</span>
        </div>
    </div>
</div>
 
<div class="form-select {{#if distinguisher}}form-select-distinguisher_{{ distinguisher }}{{/if}}{{#if isDisabled}} disabled{{/if}}{{#if isError}} error{{/if}}{{#if isBGTransparent}} bgtransparent{{/if}}{{#if isBGAccentLight}} bgaccentlight{{/if}}"
    id="{{ id }}">
    {{> @field-top field-top }}
    {{#if net}}
    {{> @access-select-net select }}
    {{else}}
    {{> @access-select select }}
    {{/if}}
    {{> @field-bottom field-bottom }}
</div>
 
{
  "field-top": {
    "label": {
      "text": "Field Text"
    },
    "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"
      }
    }
  },
  "extraclass": "caption-placeholder-m",
  "id": "where",
  "select": {
    "chosen-placeholder": "Placeholder",
    "option": [
      {
        "id": "where1",
        "select-name": "where",
        "text": "Provincia 1"
      },
      {
        "id": "where2",
        "select-name": "where",
        "text": "Provincia 2"
      },
      {
        "id": "where3",
        "select-name": "where",
        "text": "Provincia 3"
      }
    ],
    "error": true
  },
  "net": true,
  "isError": true,
  "field-bottom": {
    "isError": true,
    "error-message": {
      "text": "Debes rellenar el campo correctamente"
    }
  }
}
  • Content: 
    .form-select {
    margin-bottom: 20px;
    position: relative;
    

    .access-select {background-color: var(--color-white);
        .list-is-open + .access-select__list {
            max-height: 350px;
            overflow-y: auto;
        }
    }

    &.disabled {
        .access-select {
            background-color: var(--color-grey-light);
            border-color: var(--color-quinary);
            &__chosen-option {
                border-color: var(--color-quinary);
            }
        }
    }
    &.bgtransparent {
        .access-select {
            background: transparent;
        }
    }
    &.bgaccentlight {
        .access-select {
            background-color: var(--color-accent-light);
            &__chosen-option {
                border-color: var(--color-accent-light);
                &:hover,
                &:focus {
                    border-color: var(--color-secondary);
                }
            }
            .list-is-open + .access-select__list {
                background-color: var(--color-accent-light);
                border-color: var(--color-accent-light);
            }
            .access-select__item:last-child {
                border-color: var(--color-accent-light);
            }
            .access-select__option {
                border-color: var(--color-accent-light);
                &:hover,
                &:focus {
                    border-color: var(--color-secondary);
                }
            }
        }
    }
    &.error {
        .access-select {
            border-color: var(--color-danger);
            color: var(--color-danger);
            &__chosen-option {
                border-color: var(--color-danger);
            }
        }
        .field-bottom {
            &__error-message {
                display:block;
                position:relative;
            }
            &__helper-text{display:none;}
        }
    }

}
  • URL: /components/raw/form-select/form-select.css
  • Filesystem Path: src/02-molecules/form-select/form-select.css
  • Size: 1.9 KB

No notes defined.