E3 Alliance Pattern Library

Search form 

<form class="search-form search-form--light" aria-label="search page form" role="search" method="get" id="search-form" action="">
    <div class="search-form__container">
        <label class="search-form__input-label" for="search-input">Search for keywords</label>
        <input class="search-form__input" data-quick-search-input placeholder="Search" type="text" id="search-input" value="" name="s" required="required" />
        <input class="search-form__submit" type="submit" id="search-submit" aria-label="Search" value="" />
        <div class="search-form__submit-icon">
            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M17.1259 15.2325C17.6239 15.7638 17.6239 16.5939 17.1259 17.1251C16.5946 17.6232 15.7645 17.6232 15.2333 17.1251L11.2821 13.1408C9.92078 14.0372 8.26063 14.5021 6.46766 14.2697C3.41297 13.838 0.955938 11.3478 0.557501 8.3263C-0.00695259 3.81067 3.81141 -0.00768501 8.32703 0.556768C11.3485 0.955206 13.8388 3.41224 14.2704 6.46692C14.5028 8.25989 14.038 9.92005 13.1415 11.2482L17.1259 15.2325ZM3.14734 7.39661C3.14734 9.75403 5.03992 11.6466 7.39734 11.6466C9.72156 11.6466 11.6473 9.75403 11.6473 7.39661C11.6473 5.07239 9.72156 3.14661 7.39734 3.14661C5.03992 3.14661 3.14734 5.07239 3.14734 7.39661Z" />
                <path d="M17.1259 15.2325C17.6239 15.7638 17.6239 16.5939 17.1259 17.1251C16.5946 17.6232 15.7645 17.6232 15.2333 17.1251L11.2821 13.1408C9.92078 14.0372 8.26063 14.5021 6.46766 14.2697C3.41297 13.838 0.955938 11.3478 0.557501 8.3263C-0.00695259 3.81067 3.81141 -0.00768501 8.32703 0.556768C11.3485 0.955206 13.8388 3.41224 14.2704 6.46692C14.5028 8.25989 14.038 9.92005 13.1415 11.2482L17.1259 15.2325ZM3.14734 7.39661C3.14734 9.75403 5.03992 11.6466 7.39734 11.6466C9.72156 11.6466 11.6473 9.75403 11.6473 7.39661C11.6473 5.07239 9.72156 3.14661 7.39734 3.14661C5.03992 3.14661 3.14734 5.07239 3.14734 7.39661Z" fill-opacity="0.2" />
            </svg>
        </div>
    </div>
</form>
 
<form class="search-form search-form--{{ background ? background : 'dark' }}" aria-label="search page form" role="search" method="get" id="search-form" action="{{site.link}}">
    <div class="search-form__container">
        <label class="search-form__input-label" for="search-input">Search for keywords</label>
        <input class="search-form__input" data-quick-search-input placeholder="Search" type="text" id="search-input" value="{{ search.term }}" name="s" required="required" />
        <input class="search-form__submit" type="submit" id="search-submit" aria-label="Search" value=""/>
        <div class="search-form__submit-icon">
            {% include 'bits/icons/search.twig' %}
        </div>
    </div>
</form>
 
{
  "site": {
    "name": "E3 Alliance"
  },
  "post": {
    "term": "Nancy Drew"
  },
  "background": "light"
}
  • Content: 
    breakpoint = 580px
.search-form
    &--dark
        --iconFillColor #B7BFDE
        --iconFillColorActive white
        --borderWidth 2px
        --borderColor #B7BFDE
        --borderColorActive #B7BFDE
        --placeholderColor #B7BFDE
        --placeholderColorActive #B7BFDE
        --backgroundColor transparent
        --textColor white
        --width 100%
        --displayMobile grid

    &--light
        --borderWidth 1px
        --iconFillColor sapphire
        --iconFillColorActive greenAppleDark3
        --borderColor sapphire
        --borderColorActive sapphire
        --placeholderColor darkSapphire
        --placeholderColorActive darkSapphire
        --backgroundColor transparent
        --textColor darkSapphire
        --width 85%
        --displayMobile flex

    border-bottom var(--borderWidth) solid var(--borderColor)

    &__container
        align-items center
        grid-template-areas "input submit"

        @supports (display: grid)
            display grid

        grid-template-columns 1fr 144px

        +below(breakpoint)
            display var(--displayMobile)

    &__input-label
        @extends $invisible
        color var(--textColor)

    &__input
        @extends $bodyLarge
        background-color var(--backgroundColor)
        color var(--textColor)

        +below(breakpoint)
            primaryLink()
            width var(--width)

        grid-area input

        &::placeholder
            color var(--placeholderColor)

        &:focus
            outline none

    &__submit-icon
        display flex
        grid-area submit
        margin-left auto
        margin-right 24px
        pointer-events none

        & svg path
            fill var(--iconFillColor)

        & path
            transition all .3s ease

        +below(breakpoint)
            margin 0 18px 0 14px

    &__submit
        //@extends $linkBody
        background-color transparent
        cursor pointer
        grid-area submit
        height 100%
        padding 16px 56px 16px 24px
        transition all .3s ease

        +below(breakpoint)
            color transparent
            padding 0

        &:focus
        &:hover
            color var(--textColor)

        &:focus
        &:hover + .search-form__submit-icon path
            fill var(--iconFillColorActive)
            background-color var(--backgroundColor)
            color var(--textColor)
            border var(--borderColorActive)
  • URL: /components/raw/search-form/search-form.styl
  • Filesystem Path: patterns/partials/search-form/search-form.styl
  • Size: 2.4 KB

No notes defined.