Custom theme (replace with client name)

Quick Search: Default 

<div class="quick-search ">
    <form role="search" method="get" id="quick-search-form" class="quick-search__form" action="">
        <input id="quick-search-input" name="s" type="text" placeholder="Search" class="quick-search__input ">
        <label for="quick-search-input" class="quick-search__input-label">
            Search the website
        </label>
        <div class="quick-search__icon">
            <svg aria-hidden="true" class="search-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                <path class="_mark" fill="inherit" d="M6 12A6 6 0 116 0a6 6 0 010 12zm0-2a4 4 0 100-8 4 4 0 000 8zm5.293 2.707a1 1 0 011.414-1.414l3 3a1 1 0 01-1.414 1.414l-3-3z" />
            </svg>
        </div>
        <input aria-label="submit search query" class="quick-search__submit" type="submit" id="quick-search-submit" value="Search" />
    </form>
</div>
 
<div class="quick-search {{ isLarge ? 'quick-search--large' }}">
    <form role="search" method="get" id="{{ id|default('quick-search') }}-form" class="quick-search__form" action="{{site.link}}">
        <input id="{{ id|default('quick-search') }}-input" name="s" type="text" placeholder="Search" class="quick-search__input {{ isLarge ? 'quick-search__input--large' }}">
        <label for="{{ id|default('quick-search') }}-input" class="quick-search__input-label">
            Search the website
        </label>
        <div class="quick-search__icon">
            {% include 'bits/icons/search.twig' %}
        </div>
        <input aria-label="submit search query" class="quick-search__submit" type="submit" id="{{ id|default('quick-search') }}-submit" value="Search" />
    </form>
</div>
 
{
  "isLarge": false
}
  • Content: 
    .quick-search
    --backgroundColor soot
    --icon-color charcoal
    --itemTextColor charcoal

    padding-left 12px

    &__form
        align-items center
        display inline-flex
        justify-content space-between
        width 100%

    &__icon
        display flex
        margin-left 8px

        svg
            fill var(--icon-color)

    &__input-label
        position absolute
        z-index -1
        left -100vw
        font-weight 800

    &__input
        width 50px
        transition all 0.3s
        &::placeholder
            color var(--itemTextColor)
        &:focus
            width 200px

    &__submit
        @extends $invisible

    &--large
        background-color white
        border 2px solid white
        border-radius 8px
        padding 10px 20px
        width 100%

    &__input--large
        font-size 20px
        width 100%
        &::placeholder
            color charcoal
        &:focus
            width 100%
  • URL: /components/raw/quick-search/quick-search.styl
  • Filesystem Path: patterns/bits/quick-search/quick-search.styl
  • Size: 964 Bytes

No notes defined.