UHasselt Component Library

Search Field 

<div class="search-field">
    <span class="atm-form-input  ">
        <input type="text" name="input" id="input" placeholder="Zoekterm..." class="form-input" value="">
        <span class="icon far fa-times   form-input-error-icon" aria-hidden="true"></span>
        <span class="icon far fa-check   form-input-valid-icon" aria-hidden="true"></span>
    </span>

    <a href="#" class="button button-black button-noframe">
        <span>
            <span class="icon fal fa-search   " aria-hidden="true"></span>
        </span>
    </a>

</div>
 
<div class="search-field">
    {{render '@input' input merge=true}}
    {{render '@button' button merge=true}}
</div>
 
{
  "input": {
    "placeholder": "Zoekterm..."
  },
  "button": {
    "text": false,
    "noframe": true,
    "iconBefore": {
      "style": "fal",
      "icon": "fa-search"
    }
  }
}
  • Content: 
    .search-field {
    @apply clear-both;

    .st-default-search-input {
        @apply bg-none w-auto h-auto p-0 pl-2 border-none;
    }

    .form-input {
        @apply float-left bg-gray-400;
        height: 52px;
        width: calc(100% - 60px);
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .button {
        @apply float-left mb-0;

        > span {
            @apply px-4;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }
    }
}

#nav-mobile {
    .form-input-wrapper {
        padding: 0 !important;
        input {
            @apply w-full rounded-none bg-white;
        }
    }

    .main-search-button span {
        border-radius: 0 !important;
    }
}
  • URL: /components/raw/search-field/search-field.css
  • Filesystem Path: src\components\03-molecules\search-field\search-field.css
  • Size: 788 Bytes

No notes defined.