Search

Ready Added in 2.0.0

Easily create a nice looking search.

Usage

The Search component consists of a search form and the search input itself.

Class/Attribute Description
.gls-search Add this class to a container element to define the Search component.
.gls-search-input Add this class to an <input> element to create the search field. 
<form class="gls-search">
    <input class="gls-search-input" type="search" placeholder="">
</form>

By default, the search has no additional styling. In this example we are using the .gls-search-default modifier.

  • <form class="gls-search gls-search-default">
    <input class="gls-search-input" type="search" placeholder="Search">
</form>

Search icon

To create a search icon, add the gls-search-icon attribute to a <span> element. To change the alignment, add the .gls-search-icon-flip class.

<form class="gls-search gls-search-default">
    <span gls-search-icon></span>
    <input class="gls-search-input" type="search" placeholder="">
</form>

  • <div class="gls-margin">
    <form class="gls-search gls-search-default">
        <span gls-search-icon></span>
        <input class="gls-search-input" type="search" placeholder="Search">
    </form>
</div>

<div class="gls-margin">
    <form class="gls-search gls-search-default">
        <span class="gls-search-icon-flip" gls-search-icon></span>
        <input class="gls-search-input" type="search" placeholder="Search">
    </form>
</div>

Clickable

To enable an action, use an <a> or <button> element to create the icon.

<form class="gls-search gls-search-default">
    <a href="" gls-search-icon></a>
    <input class="gls-search-input" type="search" placeholder="">
</form>

  • <div class="gls-margin">
    <form class="gls-search gls-search-default">
        <a href="" gls-search-icon></a>
        <input class="gls-search-input" type="search" placeholder="Search">
    </form>
</div>

<div class="gls-margin">
    <form class="gls-search gls-search-default">
        <a href="" class="gls-search-icon-flip" gls-search-icon></a>
        <input class="gls-search-input" type="search" placeholder="Search">
    </form>
</div>

Default modifier

To apply the default search styling, add the .gls-search-default class.

<form class="gls-search gls-search-default">...</form>

  • <form class="gls-search gls-search-default">
    <span gls-search-icon></span>
    <input class="gls-search-input" type="search" placeholder="Search">
</form>

Large modifier

To increase the size of the search, for example when creating an overlay search, add the .gls-search-large class.

<form class="gls-search gls-search-large">...</form>

  • <form class="gls-search gls-search-large">
    <span gls-search-icon></span>
    <input class="gls-search-input" type="search" placeholder="Search">
</form>

A search can be used inside a navbar from the Navbar component. Just add the .gls-search-navbar class.

<form class="gls-search gls-search-navbar">...</form>

  • <nav class="gls-navbar-container" gls-navbar>
    <div class="gls-navbar-left">

        <div class="gls-navbar-item">
            <form class="gls-search gls-search-navbar">
                <span gls-search-icon></span>
                <input class="gls-search-input" type="search" placeholder="Search">
            </form>
        </div>

    </div>
</nav>

Toggle

To apply a hover state to the search icon when using an <a> or <button> element, add the .gls-search-toggle class. To create the search icon itself, add the gls-search-icon attribute.

<a class="gls-search-toggle" href="" gls-search-icon></a>

  • <a class="gls-search-toggle" href="" gls-search-icon></a>

Search in navbar

The search icon can be used as a toggle to open the search inside a navbar – as an overlay, drop or dropdown – or outside in a modal. Just add the .gls-navbar-toggle class to the icon.

<div class="gls-navbar-container" gls-navbar>
    <div class="gls-navbar-left">
        <a class="gls-navbar-toggle" gls-search-icon gls-toggle href=""></a>
    </div>
</div>

Overlay

  • <nav class="gls-navbar-container gls-margin" gls-navbar>

    <div class="nav-overlay gls-navbar-left">

        <a class="gls-navbar-item gls-logo" href="#">Logo</a>

        <ul class="gls-navbar-nav">
            <li class="gls-active"><a href="#">Active</a></li>
            <li><a href="#">Item</a></li>
        </ul>

    </div>

    <div class="nav-overlay gls-navbar-right">

        <a class="gls-navbar-toggle" gls-search-icon gls-toggle="target: .nav-overlay; animation: gls-animation-fade" href="#"></a>

    </div>

    <div class="nav-overlay gls-navbar-left gls-flex-1" hidden>

        <div class="gls-navbar-item gls-width-expand">
            <form class="gls-search gls-search-navbar gls-width-1-1">
                <input class="gls-search-input" type="search" placeholder="Search" autofocus>
            </form>
        </div>

        <a class="gls-navbar-toggle" gls-close gls-toggle="target: .nav-overlay; animation: gls-animation-fade" href="#"></a>

    </div>

</nav>

Drop

  • <nav class="gls-navbar-container gls-margin" gls-navbar>
    <div class="gls-navbar-left">

        <a class="gls-navbar-item gls-logo" href="#">Logo</a>

        <ul class="gls-navbar-nav">
            <li class="gls-active"><a href="#">Active</a></li>
            <li><a href="#">Item</a></li>
        </ul>

    </div>
    <div class="gls-navbar-right">

        <div>
            <a class="gls-navbar-toggle" gls-search-icon href="#"></a>
            <div class="gls-drop" gls-drop="mode: click; pos: left-center; offset: 0">
                <form class="gls-search gls-search-navbar gls-width-1-1">
                    <input class="gls-search-input" type="search" placeholder="Search" autofocus>
                </form>
            </div>
        </div>

    </div>
</nav>

  • <nav class="gls-navbar-container gls-margin" gls-navbar>
    <div class="gls-navbar-left">

        <a class="gls-navbar-item gls-logo" href="#">Logo</a>

        <ul class="gls-navbar-nav">
            <li class="gls-active"><a href="#">Active</a></li>
            <li><a href="#">Item</a></li>
        </ul>

    </div>
    <div class="gls-navbar-right">

        <div>
            <a class="gls-navbar-toggle" href="#" gls-search-icon></a>
            <div class="gls-navbar-dropdown" gls-drop="mode: click; cls-drop: gls-navbar-dropdown; boundary: !nav">

                <div class="gls-grid-small gls-flex-middle" gls-grid>
                    <div class="gls-width-expand">
                        <form class="gls-search gls-search-navbar gls-width-1-1">
                            <input class="gls-search-input" type="search" placeholder="Search" autofocus>
                        </form>
                    </div>
                    <div class="gls-width-auto">
                        <a class="gls-navbar-dropdown-close" href="#" gls-close></a>
                    </div>
                </div>

            </div>
        </div>

    </div>
</nav>

  • <nav class="gls-navbar gls-navbar-container gls-margin">
    <div class="gls-navbar-left">

        <a class="gls-navbar-item gls-logo" href="#">Logo</a>

        <ul class="gls-navbar-nav">
            <li class="gls-active"><a href="#">Active</a></li>
            <li><a href="#">Item</a></li>
        </ul>

    </div>
    <div class="gls-navbar-right">

        <a class="gls-navbar-toggle" href="#modal-full" gls-search-icon gls-toggle></a>

    </div>
</nav>

<div id="modal-full" class="gls-modal-full gls-modal" gls-modal>
    <div class="gls-modal-dialog gls-flex gls-flex-center gls-flex-middle" gls-height-viewport>
        <button class="gls-modal-close-full" type="button" gls-close></button>
        <form class="gls-search gls-search-large">
            <input class="gls-search-input gls-text-center" type="search" placeholder="Search" autofocus>
        </form>
    </div>
</div>