Custom theme (replace with client name)

Taxonomy Filter 

<form class="taxonomy-filter" data-taxonomy-filter method="get">
    <div class="taxonomy-filter__container">
        <div class="taxonomy-filter__local-taxonomy">
            <label class="taxonomy-filter__select-label" for="local-taxonomy-select">Tags</label>
            <select class="taxonomy-filter__select" name="local-taxonomy" id="local-taxonomy-select">
                <option class="taxonomy-filter__select-option" value="all">All
                </option>
                <option class="taxonomy-filter__select-option" value="1">Thing 1</option>
                <option class="taxonomy-filter__select-option" value="2">Thing 2</option>
                <option class="taxonomy-filter__select-option" value="3">Thing 3</option>
                <option class="taxonomy-filter__select-option" value="4">Thing 4</option>
            </select>
        </div>
        <div class="taxonomy-filter__buttons">
            <button type="tertiary" class="
            standard-button
            standard-button--natural-width
            
        ">
                <div class="standard-button__container">
                    <span class="standard-button__text">
                        View
                    </span>
                </div>
            </button>
            <button type="tertiary" class="
            standard-button
            standard-button--natural-width
            
        ">
                <div class="standard-button__container">
                    <span class="standard-button__text">
                        Clear
                    </span>
                </div>
            </button>
        </div>
    </div>
</form>
 
{# {% if is_wordpress %} #}
{#    {{ enqueue_script('taxonomy-filter') }} #}
{# {%  endif  %} #}

<form class="taxonomy-filter" data-taxonomy-filter method="get">
    <div class="taxonomy-filter__container">
        {% if includeSearch | default %}
            <label class="taxonomy-filter__input-label" for="search-input">Search for keywords</label>
            <input class="taxonomy-filter__input" placeholder="Enter search term" type="text" id="search-input"
                   value="{{ search.term }}" name="search"/>
            <button class="taxonomy-filter__clear-button" type="button" role="button"
                    onclick="document.getElementById('search-input').value = '';document.getElementById('search-input').focus();">
                <span class="taxonomy-filter__clear-button-text">
                    Clear input field
                </span>
                <span class="taxonomy-filter__clear-button-icon">
                    {% include 'bits/icons/clear-x.twig' %}
                </span>
            </button>
            <input class="taxonomy-filter__submit" type="submit" id="search-submit" value="Search"/>
            <div class="taxonomy-filter__submit-icon">
                {% include 'bits/icons/search.twig' %}
            </div>
        {% endif %}
        {% if fields.filterByGlobalTaxonomy == false %}
            <div class="taxonomy-filter__global-taxonomy">
                <label class="taxonomy-filter__select-label" for="global-taxonomy-select">Units and Areas</label>
                <select class="taxonomy-filter__select" name="global-taxonomy" id="global-taxonomy-select">
                    <option class="taxonomy-filter__select-option"
                            value="all">All
                    </option>
                    {% for option in fields.globalOptions %}
                        <option class="taxonomy-filter__select-option"
                                value="{{ option.value }}"{{ fields.taxonomies.globalTaxonomy == option.value ? " selected" }}>{{ option.label }}</option>
                    {% endfor %}
                </select>
            </div>
        {% endif %}
        <div class="taxonomy-filter__local-taxonomy">
            <label class="taxonomy-filter__select-label" for="local-taxonomy-select">Tags</label>
            <select class="taxonomy-filter__select" name="local-taxonomy" id="local-taxonomy-select">
                <option class="taxonomy-filter__select-option"
                        value="all">All
                </option>
                {% for option in fields.localOptions %}
                    <option class="taxonomy-filter__select-option"
                            value="{{ option.value }}"{{ fields.taxonomies.localTaxonomy == option.value ? " selected" }}>{{ option.label }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="taxonomy-filter__buttons">
            {% include 'bits/standard-button/standard-button.twig' with {
                button: {
                    type: 'tertiary',
                    isButton: true,
                    buttonType: 'submit',
                    text: 'View',
                }
            } %}
            {% include 'bits/standard-button/standard-button.twig' with {
                button: {
                    type: 'tertiary',
                    isButton: true,
                    buttonType: 'reset',
                    text: 'Clear',
                }
            } %}
        </div>
    </div>
</form>
 
{
  "fields": {
    "globalOptions": [
      {
        "label": "Category 1",
        "value": "1"
      },
      {
        "label": "Category 2",
        "value": "2"
      },
      {
        "label": "Category 3",
        "value": "3"
      },
      {
        "label": "Category 4",
        "value": "4",
        "selected": true
      }
    ],
    "localOptions": [
      {
        "label": "Thing 1",
        "value": "1"
      },
      {
        "label": "Thing 2",
        "value": "2",
        "selected": true
      },
      {
        "label": "Thing 3",
        "value": "3"
      },
      {
        "label": "Thing 4",
        "value": "4"
      }
    ],
    "submitButtonText": "View",
    "cancelButtonText": "Clear"
  }
}
  • Content: 
    smallestBreakpoint = 400px
mediumBreakpoint = 700px

.taxonomy-filter
    --backgroundImage url("data:image/svg+xml;charset=utf8,%3Csvg aria-hidden='true' class='down-toggle-icon' xmlns='http://www.w3.org/2000/svg' width='12' height='6' viewBox='0 0 12 6'%3E%3Cpath class='_mark down-toggle-icon__shape' fill='%23FF552E' fill-rule='evenodd' d='M12 0L6 6 0 0z'/%3E%3C/svg%3E")
    --textColor greyDarkest
    --iconFillColor illiniOrange
    --iconFillColorActive black
    --borderColorActive illiniOrange
    --backgroundColorActive transparent
    --textColorActive black

    align-items flex-end
    display flex
    flex-direction row
    flex-wrap wrap

    &__container
        align-items center
        display flex

    &__input-label
        @extends $invisible

    &__input
        @extends $bodyLarge
        background-color white
        border 2px solid charcoalLighter
        border-radius 100px 0 0 100px
        color charcoalLight
        padding 16px
        transition border-color .3s ease

        +below(breakpoint)
            padding 10px 16px 10px 16px
            primaryLink()


        &::placeholder
            color grey
            font-weight normal

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

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

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

        & path
            transition all .3s ease

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

    &__submit
        @extends $linkLarge
        background-color smoke
        border 2px solid charcoalLighter
        border-left none
        border-radius 0 100px 100px 0
        color charcoalLight
        cursor pointer
        grid-area submit
        height 100%
        padding 16px
        transition all .3s ease

        +below(breakpoint)
            color transparent
            padding 0

        &:focus
        &:hover
            fill var(--iconFillColorActive)
            background-color var(--backgroundColorActive)
            color var(--textColorActive)
            border-color var(--borderColorActive)

        &:focus
        &:hover + .search-form__submit-icon path
            fill var(--iconFillColorActive)
            background-color var(--backgroundColorActive)
            color var(--textColorActive)
            border var(--borderColorActive)

    &__clear-button
        cursor pointer
        grid-area input
        margin-left auto
        margin-right 16px

        & .clear-icon
            & .clear-icon__shape
                fill var(--iconFillColor)

        +below(breakpoint)
            display none

    &__clear-button-text
        @extends $invisible

    &__clear-button-icon
        display flex

    &__global-taxonomy
    &__local-taxonomy
        margin-bottom 8px
        margin-right 18px

    &__buttons
        margin-top 24px
        margin-bottom 8px

    &__select-label
        @extends $headline5
        color var(--textColor)
        display block
        padding 0 10px 4px

    &__select
        appearance none
        box-sizing border-box
        background-color white
        background-image var(--backgroundImage)
        background-repeat no-repeat
        background-position right 9px center
        border 2px solid grey
        border-radius 0
        color greyDarkest
        padding 10px 32px 10px 16px
        width 33vw

        +above(smallestBreakpoint)
            width 100%

    &__select-option
        @extends $bodyLarge
        color greyDarkest
  • URL: /components/raw/taxonomy-filter/taxonomy-filter.styl
  • Filesystem Path: patterns/partials/taxonomy-filter/taxonomy-filter.styl
  • Size: 3.8 KB

No notes defined.