E3 Alliance Pattern Library

Search Toggle 

<button aria-expanded="false" class="search-toggle" data-search-toggle>
    <div class="search-toggle__text">
        Toggle search form
    </div>
    <div class="search-toggle__icon-open">
        <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 class="search-toggle__icon-close">
        <svg class="close-icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path class="close-icon__path" d="M15.7803 13.4951C16.4404 14.1045 16.4404 15.1709 15.7803 15.7803C15.4756 16.085 15.0693 16.2373 14.6631 16.2373C14.2061 16.2373 13.7998 16.085 13.4951 15.7803L8.16309 10.4482L2.78027 15.7803C2.47559 16.085 2.06934 16.2373 1.66309 16.2373C1.20605 16.2373 0.799805 16.085 0.495117 15.7803C-0.165039 15.1709 -0.165039 14.1045 0.495117 13.4951L5.82715 8.1123L0.495117 2.78027C-0.165039 2.1709 -0.165039 1.10449 0.495117 0.495117C1.10449 -0.165039 2.1709 -0.165039 2.78027 0.495117L8.16309 5.82715L13.4951 0.495117C14.1045 -0.165039 15.1709 -0.165039 15.7803 0.495117C16.4404 1.10449 16.4404 2.1709 15.7803 2.78027L10.4482 8.16309L15.7803 13.4951Z" fill="#14516E" />
        </svg>
    </div>
</button>
 
{{ enqueue_script('search-toggle') }}
<button
    aria-expanded="false"
    class="search-toggle"
    data-search-toggle
>
    <div class="search-toggle__text">
        Toggle search form
    </div>
    <div class="search-toggle__icon-open">
        {% include '/bits/icons/search.twig' %}
    </div>
    <div class="search-toggle__icon-close">
        {% include '/bits/icons/x.twig' %}
    </div>
</button>
 
{
  "site": {
    "name": "E3 Alliance"
  }
}
  • Content: 
    .search-toggle
    --iconColor e3Green
    --iconColorActive white
    --iconBackgroundColor navigationGrey
    --iconBackgroundColorActive sapphire
    --itemTextColor e3Green

    background var(--iconBackgroundColor)
    border-radius 4px
    display flex
    cursor pointer
    padding 8px

    &:hover
    &:focus
    &:active
        background-color var(--iconBackgroundColorActive)

        & svg
            & path
                fill var(--iconColorActive)

    &__text
        @extends $visually-hidden
    &__icon-close
        & svg
            margin 2px
            width 14px

    &__icon-close
    &__icon-open
        & svg
            & path
                fill var(--iconColor)


    &[aria-expanded=true]
        z-index 2
        position relative

        & .search-toggle__icon-close
            display block
        & .search-toggle__icon-open
            display none

    &[aria-expanded=false]
        & .search-toggle__icon-close
            display none
        & .search-toggle__icon-open
            display block

    &:hover
    &:focus
        background-color var(--iconColor)
            & svg path
                fill var(--iconColorActive)
  • URL: /components/raw/search-toggle/search-toggle.styl
  • Filesystem Path: patterns/bits/search-toggle/search-toggle.styl
  • Size: 1.2 KB

No notes defined.