FAA Pattern Library - Music

Post search 

<div class="post-search post-search--light">
    <form class="post-search search-form--music" role="search" aria-label="post search" method="get" id="search-form">
        <div class="post-search__search-title">
            Search faculty by name, title, or position
        </div>
        <div class="post-search__search-bar">
            <input class="post-search__input" placeholder="Enter search term" type="text" id="post-search-input" value="cat" name="q" required="required" aria-label="Search for keywords" />
            <button class="search-form__clear-button" type="button" role="button" onclick="document.getElementById('post-search-input').value = '';document.getElementById('search-input').focus();">
            <span class="search-form__clear-button-text">
                Clear input field
            </span>
                <span class="search-form__clear-button-icon">
                <svg aria-hidden="true" class="clear-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
    <path class="clear-icon__shape" fill="#E84A27" d="M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0zm0 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zM8.613 7.21l.094.083L12 10.585l3.293-3.292c.39-.39 1.024-.39 1.414 0 .36.36.388.928.083 1.32l-.083.094L13.415 12l3.292 3.293c.39.39.39 1.024 0 1.414-.36.36-.928.388-1.32.083l-.094-.083L12 13.415l-3.293 3.292c-.39.39-1.024.39-1.414 0-.36-.36-.388-.928-.083-1.32l.083-.094L10.585 12 7.293 8.707c-.39-.39-.39-1.024 0-1.414.36-.36.928-.388 1.32-.083z"/>
</svg>
            </span>
            </button>
            <button type="submit" class="post-search__submit-icon" aria-label="Submit search">
                <svg aria-hidden="true" class="search-large-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
    <path class="search-large-icon__shape" fill="#E84A27" d="M17.613 16.21l.094.083 6 6c.39.39.39 1.024 0 1.414-.36.36-.928.388-1.32.083l-.094-.083-6-6c-.39-.39-.39-1.024 0-1.414.36-.36.928-.388 1.32-.083zM9 0c4.97 0 9 4.03 9 9s-4.03 9-9 9-9-4.03-9-9 4.03-9 9-9zm0 2C5.134 2 2 5.134 2 9s3.134 7 7 7 7-3.134 7-7-3.134-7-7-7z"/>
</svg>
            </button>
        </div>
    </form>
</div>
 
<div class="post-search {{ background == 'dark' ? 'post-search--dark' : 'post-search--light' }}">
    <form class="post-search search-form--{{ siteUnit }}" role="search" aria-label="post search" method="get" id="search-form">
        <div class="post-search__search-title">
            {{ search.helpText}}
        </div>
        <div class="post-search__search-bar">
            <input class="post-search__input" placeholder="Enter search term" type="text" id="post-search-input"
                   value="{{ search.term }}" name="q" required="required" aria-label="Search for keywords"/>
            <button class="search-form__clear-button" type="button" role="button" onclick="document.getElementById('post-search-input').value = '';document.getElementById('search-input').focus();">
            <span class="search-form__clear-button-text">
                Clear input field
            </span>
                <span class="search-form__clear-button-icon">
                {% include 'bits/icons/clear-x.twig' %}
            </span>
            </button>
            <button type="submit" class="post-search__submit-icon" aria-label="Submit search">
                {% include 'bits/icons/search-large.twig' %}
            </button>
        </div>
    </form>
</div>
 
{
  "siteUnit": "music",
  "departmentName": "Music",
  "background": "light",
  "search": {
    "term": "cat",
    "helpText": "Search faculty by name, title, or position"
  }
}
  • Content: 
    .post-search
    --iconFillColor illiniOrange
    --iconFillColorActive black
    --borderColorActive illiniOrange
    --backgroundColorActive transparent
    --textColorActive black

    &--light
        --labelColor #3d454c

    &--dark
        --labelColor #e4e4e4

    width 100%
    margin-bottom 48px

    &__container
        @extends $contentContainer
        position relative
        display inline

    &__search-title
        @extends $headline5
        color var(--labelColor)
        padding-bottom 8px

    &__input-label
        @extends $invisible

    &__input
        @extends $primaryParagraph
        color charcoalLight
        diplay inline
        grid-area input
        padding 10px 16px
        width 100%

        &::placeholder
            color grey
            font-weight normal

        &:focus
            border-color var(--borderColorActive)
            outline none
            & ~ ^[0]__submit
                border-color var(--borderColorActive)

    &__search-bar
        border solid 2px cloudDarker
        background-color white
        display flex
        align-items center

    &__submit-icon
        align-self center
        cursor pointer
        display inline
        grid-area submit
        margin-left auto
        margin-bottom -4px
        padding 10px 16px

        & .search-large-icon
            & .search-large-icon__shape
                fill var(--iconFillColor)
  • URL: /components/raw/post-search/post-search.styl
  • Filesystem Path: components/partials/post-search/post-search.styl
  • Size: 1.4 KB

There are no notes for this item.