University of Florida College of the Arts Pattern Library

Search Toggle 

<button aria-label="Toggle search form" aria-expanded="false" class="search-toggle" data-search-toggle>
    <span class="search-toggle__content-container search-toggle__content-container--collapsed">
        <div class="color-circle-icon color-circle-icon--blue color-circle-icon--big">
            <span class="color-circle-icon__icon">
                <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="search-large-icon" width="24" height="25" fill="none" viewBox="0 0 24 25">
                    <path class="search-large-icon__shape" fill="#E84A27" d="m19.6 21.5-6.3-6.3a6.096 6.096 0 0 1-3.8 1.3c-1.817 0-3.354-.63-4.612-1.887C3.629 13.354 3 11.817 3 10c0-1.817.63-3.354 1.888-4.612C6.146 4.129 7.683 3.5 9.5 3.5c1.817 0 3.354.63 4.613 1.888C15.37 6.646 16 8.183 16 10a6.096 6.096 0 0 1-1.3 3.8l6.3 6.3-1.4 1.4Zm-10.1-7c1.25 0 2.313-.438 3.188-1.313C13.562 12.313 14 11.25 14 10c0-1.25-.438-2.313-1.313-3.188C11.813 5.938 10.75 5.5 9.5 5.5c-1.25 0-2.313.438-3.188 1.313S5 8.75 5 10c0 1.25.438 2.313 1.313 3.188.875.874 1.937 1.312 3.187 1.312Z" />
                </svg> </span>
        </div>
    </span>
    <span class="search-toggle__content-container search-toggle__content-container--expanded">
        <div class="color-circle-icon color-circle-icon--blue color-circle-icon--small">
            <span class="color-circle-icon__icon">
                <svg class="x" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                    <path class="x__shape" d="M1.6129 0.209705L1.70711 0.292893L6 4.585L10.2929 0.292893C10.6834 -0.0976311 11.3166 -0.0976311 11.7071 0.292893C12.0676 0.653377 12.0953 1.22061 11.7903 1.6129L11.7071 1.70711L7.415 6L11.7071 10.2929C12.0976 10.6834 12.0976 11.3166 11.7071 11.7071C11.3466 12.0676 10.7794 12.0953 10.3871 11.7903L10.2929 11.7071L6 7.415L1.70711 11.7071C1.31658 12.0976 0.683418 12.0976 0.292893 11.7071C-0.0675907 11.3466 -0.0953203 10.7794 0.209705 10.3871L0.292893 10.2929L4.585 6L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292893C0.653377 -0.0675907 1.22061 -0.0953203 1.6129 0.209705Z" fill="#303030" />
                </svg>
            </span>
        </div>
    </span>
</button>
 
{{ enqueue_script('search-toggle') }}

<button aria-label="Toggle search form"
        aria-expanded="false"
        class="search-toggle"
        data-search-toggle>
    <span class="search-toggle__content-container search-toggle__content-container--collapsed">
        {% include '/bits/color-circle-icon/color-circle-icon.twig' with {
                background: 'blue',
                size: 'big',
                icon: {name:'search-large'}
            }
        %}
    </span>
    <span class="search-toggle__content-container search-toggle__content-container--expanded">
        {% include '/bits/color-circle-icon/color-circle-icon.twig' with {
                background: 'blue',
                size: 'small',
                icon: {name:'x'}
            }
        %}
    </span>
</button>
 
/* No context defined. */
  • Content: 
    .search-toggle

    +below(breakpointHeaderLarge)
        display none

    &[aria-expanded=true]
        z-index 2
        position relative
        background-color var(--buttonBackgroundColor)

        & .search-toggle__content-container--expanded
            display block
        & .search-toggle__content-container--collapsed
            display none

    &[aria-expanded=false]
        & .search-toggle__content-container--expanded
            display none
        & .search-toggle__content-container--collapsed
            display block

    &[aria-expanded=true]
        & ^[0]__text
            color var(--expandedTextColor)

    &:hover
    &:focus
        & .search-toggle__content-container
            & .color-circle-icon--blue
                background-color black
  • URL: /components/raw/search-toggle/search-toggle.styl
  • Filesystem Path: patterns/partials/search-toggle/search-toggle.styl
  • Size: 783 Bytes

No notes defined.