University of Florida College of the Arts Pattern Library

Search form: On Dark 

<form class="search-form search-form--dark" aria-label="search page form" role="search" method="get" id="search-form" action="">
    <div class="search-form__container">
        <label class="search-form__input-label" for="search-input">Search for keywords</label>
        <input class="search-form__input" placeholder="Search" type="text" id="search-input" value="" name="s" required="required" />
        <input class="search-form__submit" type="submit" id="search-submit" aria-label="Search" value="" />
        <div class="search-form__submit-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>
        </div>
    </div>
</form>
 
<form class="search-form search-form--{{ background }}" aria-label="search page form" role="search" method="get" id="search-form" action="{{site.link}}">
    <div class="search-form__container">
        <label class="search-form__input-label" for="search-input">Search for keywords</label>
        <input class="search-form__input" placeholder="Search" type="text" id="search-input" value="{{ search.term }}" name="s" required="required" />
        <input class="search-form__submit" type="submit" id="search-submit" aria-label="Search" value=""/>
        <div class="search-form__submit-icon">
            {% include 'bits/icons/search-large.twig' %}
        </div>
    </div>
</form>
 
{
  "post": {
    "term": "Nancy Drew"
  },
  "background": "dark"
}
  • Content: 
    breakpoint = 580px
.search-form
    --iconFillColor rgba(69, 89, 169, 0.8)
    --iconFillColorActive blue400
    --borderColor rgba(69, 89, 169, 0.8)
    --borderColorActive blue400
    --placeholderColor rgba(69, 89, 169, 0.8)
    --placeholderColorActive blue400
    --backgroundColor transparent
    --textColor blue500

    &--dark
        --iconFillColor rgba(255, 255, 255, 0.8)
        --iconFillColorActive white
        --borderColor blue100
        --borderColorActive white
        --placeholderColor rgba(255, 255, 255, 0.8)
        --placeholderColorActive white
        --backgroundColor transparent
        --textColor white

    border-bottom 2px solid var(--borderColor)

    &__container
        align-items center
        grid-template-areas "input submit"

        @supports (display: grid)
            display grid

        grid-template-columns 1fr 144px

        +below(breakpoint)
            grid-template-columns 1fr 56px


    &__input-label
        @extends $invisible
        color rgba(255, 255, 255, 0.8)

    &__input
        @extends $bodyLarge
        background-color var(--backgroundColor)
        color var(--textColor)

        +below(breakpoint)
            primaryLink()

        grid-area input

        &::placeholder
            color var(--placeholderColor)

        &:focus
            outline none

    &__submit-icon
        display flex
        grid-area submit
        margin-left auto
        margin-right 24px
        pointer-events none

        & .search-large-icon
            & .search-large-icon__shape
                fill var(--iconFillColor)

        & path
            transition all .3s ease

        +below(breakpoint)
            margin 0 18px 0 14px

    &__submit
        @extends $linkBody
        background-color cloud
        cursor pointer
        grid-area submit
        height 100%
        padding 16px 56px 16px 24px
        transition all .3s ease

        +below(breakpoint)
            color transparent
            padding 0

        &:focus
        &:hover
            color var(--textColor)

        &:focus
        &:hover + .search-form__submit-icon path
            fill var(--iconFillColorActive)
            background-color var(--backgroundColor)
            color var(--textColor)
            border var(--borderColorActive)
  • URL: /components/raw/search-form/search-form.styl
  • Filesystem Path: patterns/partials/search-form/search-form.styl
  • Size: 2.3 KB

No notes defined.