UCI

Search input: Default 

<div class="search-input">
    <div class="fieldset  ">
        <label class="label " for="glossarySearch">BUSCA UN TÉRMINO</label>
        <input class="input  
                    input-distinguisher_
            " id="glossarySearch" type="search" name="" title="Search" autocomplete="" />
    </div>

    <div class="search-input__icon">
        <svg class="icon icon-search     ">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#search"></use>
        </svg>

    </div>
</div>
 
<div class="search-input">
    {{> @fieldset fieldset }}

    <div class="search-input__icon">
        {{ render '@icon--search' }}
    </div>
</div>
 
{
  "fieldset": {
    "label": {
      "for": "glossarySearch",
      "text": "BUSCA UN TÉRMINO"
    },
    "input": {
      "id": "glossarySearch",
      "type": "search",
      "title": "Search"
    }
  }
}
  • Content: 
    .search-input {
    position: relative;

    .input {
        padding-right: 40px;

        @media (--viewport-ms-min) {
            padding-right: 50px;
        }
    }

    &__icon {
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translate(0, -50%);
        display: flex;

        @media (--viewport-ms-min) {
            right: 30px;
        }
    }
}
  • URL: /components/raw/search-input/search-input.css
  • Filesystem Path: src/02-molecules/search-input/search-input.css
  • Size: 395 Bytes

No notes defined.