UCI

Form Search: Filled 

<div class="form-search filled" id="">
    <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> <input class="input  
                input-distinguisher_name
        " id="input" type="text" name="" title="Name" autocomplete="" placeholder="Placeholder" />
    <div class="form-search__icon">
        <svg class="icon icon-close     ">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#close"></use>
        </svg>

    </div>
    <div class="field-bottom">
    </div>
</div>
 
<div class="form-search{{#if isDisabled}} disabled{{/if}}{{#if filled}} filled{{/if}}{{#if isError}} error{{/if}}{{#if isBGTransparent}} bgtransparent{{/if}}{{#if isBGAccentLight}} bgaccentlight{{/if}}" id="{{ id }}">
    {{> @field-top field-top }}
    {{#if textarea}}
        {{> @input textarea }}
    {{else}}
        {{> @input input }}
    {{/if}}
    {{#if filled}}
        <div class="form-search__icon">
            {{ render '@icon--close' }}
        </div>
    {{else}}
        <div class="form-search__icon">
            {{ render '@icon--search' }}
        </div>
    {{/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"
      }
    }
  },
  "input": {
    "distinguisher": "name",
    "id": "input",
    "type": "text",
    "title": "Name",
    "placeholder": "Placeholder"
  },
  "filled": true
}
  • Content: 
    .form-search {
    margin-bottom: 20px;
    position: relative;
    
    .input{
        background-color: var(--color-white);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-right: 41px;
    }
    
    .icon-close, .icon-search {
        position: relative;
        transform: translateY(-50%);
        cursor: pointer;
        right: 16px;
        float: right;
    }
    .icon-close {
        fill: var(--color-grey2);
        width: 15px;
        height: 15px;
        bottom: 25px;
    }
    .icon-search {
        fill: var(--color-grey2);
        width: 13px;
        height: 13px;
        bottom: 25px;
    }
    &.filled {
        .input {
            border-color: var(--color-secondary);
        }
    }
    &.disabled {
        .input {
            background-color: var(--color-grey-light);
            border-color: var(--color-quinary);
            color: var(--color-grey2);

            &:focus {
                color: var(--color-text);
            }
        }
    }
    &.bgtransparent {
        .input {
            background: transparent;

            &:focus {
                color: var(--color-text);
            }
        }
    }
    &.bgaccentlight {
        .input {
            background-color: var(--color-accent-light);
            border-color: var(--color-accent-light);
            &:hover,
            &:focus {
                border-color: var(--color-secondary);
            }

            &:focus {
                color: var(--color-text);
            }
        }
    }
    &.error {
        .input {
            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;}
        }
    }
}
  • URL: /components/raw/form-search/form-search.css
  • Filesystem Path: src/02-molecules/form-search/form-search.css
  • Size: 2 KB

No notes defined.