AFW Pattern Lab

Site Search 

<div class="site-search">
    <div class="site-search__inner">

        <input type="text" class="form__input" id="search" placeholder="What can we help you find?" />

        <button class="site-search__submit" type="submit">
            <i class="icon fas fa-search fa-fw" aria-hidden="true"></i>
            <span class="sr-only">Search</span>
        </button>
    </div>
</div>
 
<div class="site-search{{modifierClasses|lspace}}">
    <div class="site-search__inner">
        {% render '@form--text', input, true %}
        <button class="site-search__submit" type="submit">
            {% render '@icon--default', icon, true %}
			<span class="sr-only">Search</span>
        </button>
    </div>
</div>
 
{
  "input": {
    "id": "search",
    "placeholder": "What can we help you find?",
    "modifierClasses": "site-search__input"
  },
  "icon": {
    "icon": "fa-search",
    "family": "fas"
  }
}
  • Content: 
    .site-search {
    $this: &;

    display: flex;

    &__inner {
        background: $color-sky;
        border-radius: rem(4px);
        display: flex;
        align-items: stretch;
        justify-content: flex-start;
        flex: 0 0 100%;
        width: 100%;
    }

    &__input {
        background: none;
        border: none;
        flex: 1 1 100%;
        font-size: rem(15px);

        &:focus {
            outline: none;
        }

        &::placeholder {
            color: $color-primary-text;
        }
    }

    &__submit {
        appearance: none;
        background: none;
        border: none;
        color: $color-primary-blue;
        flex: 0 0 48px;
        font-size: rem(17px);
        border-radius: rem(4px);

        &:hover,
        &:focus {
            background: $color-primary-blue;
            color: $color-white;
            cursor: pointer;
            outline: none;
        }
    }
}
  • URL: /components/raw/site-search/site-search.scss
  • Filesystem Path: source/patterns/molecules/site-search/site-search.scss
  • Size: 928 Bytes

No notes defined.