UCI

Search engine 

<div class="search-engine col-xs-10 col-ms-10 col-sm-4 col-lg-4 col"><!-- ==== La clase fractal es para la previsualización en Fractal. NO INTEGRAR ==== -->
    <div class="fieldset  ">
        <label class="label " for="webSearch"></label>
        <input class="input  
                    input-distinguisher_
            " id="webSearch" type="search" name="" title="Search" autocomplete="off" placeholder="Buscar" />
    </div>

    <div class="search-engine__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 class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col">
        <div class="search-engine__dropdown">
            <p>Sugerencias</p>
            <ul>
                <li>dhsldhsadasldjas</li>
                <li>dhsldhsadasldjas</li>
                <li>dhsldhsadasldjas</li>
            </ul>
        </div>
    </div>
</div>
 
<div class="search-engine col-xs-10 col-ms-10 col-sm-4 col-lg-4 col{{#if isFractal}} fractal{{/if}}"><!-- ==== La clase fractal es para la previsualización en Fractal. NO INTEGRAR ==== -->
    {{> @fieldset fieldset }}

    <div class="search-engine__icon">
        {{ render '@icon--search' }}
    </div>
    <div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col">
        <div class="search-engine__dropdown">
            <p>Sugerencias</p>
            <ul>
                <li>dhsldhsadasldjas</li>
                <li>dhsldhsadasldjas</li>
                <li>dhsldhsadasldjas</li>
            </ul>
        </div>
    </div>
</div>
 
{
  "fieldset": {
    "label": {
      "for": "webSearch",
      "text": ""
    },
    "input": {
      "id": "webSearch",
      "type": "search",
      "title": "Search",
      "placeholder": "Buscar",
      "autocomplete": "off"
    }
  }
}
  • Content: 
    .search-engine {
    position:absolute;
    bottom:23px;
    width: 100%;
    &.fractal{ /* Esta clase es para la previsualización en Fractal */
        position: relative; top:auto; right:auto;
    }

    .fieldset{
        label{
            color: var(--color-white);
            font: normal 26px var(--base-font-family);
            text-transform:none;
            left:0;
        }
    
        .input {
            padding-top:5px;
            padding-bottom:5px;
            padding-right: 40px;
            padding-left: 0;
            border:0;
            border-bottom: 1px solid var(--color-white);
            color: var(--color-white);
            font: normal 26px var(--base-font-family);
        
    
            @media (--viewport-ms-min) {
                padding-right: 50px;
            }
            &::placeholder{
                opacity: 1;
                color: var(--color-white);
                font: normal 26px var(--base-font-family);
            }
        }
    }
    &__icon {
        position: absolute;
        top: 20px;
        right: 15px;
        transform: translate(0, -50%);
        display: flex;
        .icon{
            width: 18px; 
            height: 18px; 
            fill:var(--color-white);
        }
    }
    &__dropdown {
        position:absolute;
        width: calc(100% - 30px);
        background-color: var(--color-white);
        z-index: 9999;
        top:62px;
        left:15px;
        padding: 20px 31px 0;
        color: var(--color-accent-dark);
        box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.1);
        li{line-height: 120%;padding-bottom:20px;}
    }    
}
  • URL: /components/raw/search-engine/search-engine.css
  • Filesystem Path: src/02-molecules/search-engine/search-engine.css
  • Size: 1.6 KB

No notes defined.