Filter 

<div class="demo demo--accented">
    <auto-submit-form>
        <form class="filter-group">
            <div class="filter-group__item">
                <label class="filter-label" for="filter">Tag wählen:</label>
                <select name="filter" id="filter" class="filter-select">
                    <option value="all">All</option>
                    <option value="category1">Category 1</option>
                    <option value="category2">Category 2</option>
                    <option value="category3">Category 3</option>
                </select>
            </div>
            <button type="submit" class="btn btn--xsmall">Filtern</button>
        </form>
    </auto-submit-form>
    <auto-submit-form>
        <form class="filter-group">
            <div class="filter-group__item">
                <label class="filter-label" for="filter">Tag wählen:</label>
                <select name="filter" id="filter" class="filter-select">
                    <option value="all">All</option>
                    <option value="category1">Category 1</option>
                    <option value="category2">Category 2</option>
                    <option value="category3">Category 3</option>
                </select>
            </div>
            <div class="filter-group__item">
                <label class="filter-label" for="filter">Tag wählen:</label>
                <select name="filter" id="filter" class="filter-select">
                    <option value="all">All</option>
                    <option value="category1">Category 1</option>
                    <option value="category2">Category 2</option>
                    <option value="category3">Category 3</option>
                </select>
            </div>
            <div class="filter-group__item">
                <label class="filter-label" for="filter">Tag wählen:</label>
                <select name="filter" id="filter" class="filter-select">
                    <option value="all">All</option>
                    <option value="category1">Category 1</option>
                    <option value="category2">Category 2</option>
                    <option value="category3">Category 3</option>
                </select>
            </div>
            <button type="submit" class="btn btn--xsmall">Filtern</button>
        </form>
    </auto-submit-form>
</div>
 
<div class="demo demo--accented">
    <auto-submit-form>
        <form class="filter-group">
            <div class="filter-group__item">
                <label class="filter-label" for="filter">Tag wählen:</label>
                <select name="filter" id="filter" class="filter-select">
                    <option value="all">All</option>
                    <option value="category1">Category 1</option>
                    <option value="category2">Category 2</option>
                    <option value="category3">Category 3</option>
                </select>
            </div>
            <button type="submit" class="btn btn--xsmall">Filtern</button>
        </form>
    </auto-submit-form>
    <auto-submit-form>
        <form class="filter-group">
            <div class="filter-group__item">
                <label class="filter-label" for="filter">Tag wählen:</label>
                <select name="filter" id="filter" class="filter-select">
                    <option value="all">All</option>
                    <option value="category1">Category 1</option>
                    <option value="category2">Category 2</option>
                    <option value="category3">Category 3</option>
                </select>
            </div>
            <div class="filter-group__item">
                <label class="filter-label" for="filter">Tag wählen:</label>
                <select name="filter" id="filter" class="filter-select">
                    <option value="all">All</option>
                    <option value="category1">Category 1</option>
                    <option value="category2">Category 2</option>
                    <option value="category3">Category 3</option>
                </select>
            </div>
            <div class="filter-group__item">
                <label class="filter-label" for="filter">Tag wählen:</label>
                <select name="filter" id="filter" class="filter-select">
                    <option value="all">All</option>
                    <option value="category1">Category 1</option>
                    <option value="category2">Category 2</option>
                    <option value="category3">Category 3</option>
                </select>
            </div>
            <button type="submit" class="btn btn--xsmall">Filtern</button>
        </form>
    </auto-submit-form>
</div>
 
/* No context defined. */
  • Content: 
    .filter-label {
  @extend %heading-font-bold;

  display: block;
  width: 100%;
  font-size: $font-size-base;
  color: $filter-label-color;
}

.filter-select {
  @extend %heading-font-bold;

  cursor: pointer;

  display: inline-block;

  width: 100%;
  margin-top: $spacer-xs;
  padding: $spacer-xs;

  font-size: $font-size-base;
  color: $filter-select-text-color;
  text-align: center;

  appearance: none;
  background-color: $filter-select-background-color;
  background-image: asset-url('icons/chevron-down.svg');
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 14px 10px;
  border: 4px solid $brand-white;
}

auto-submit-form {
  display: block;
  width: 100%;
}

auto-submit-form.enhanced {
  [type='submit'] {
    display: none;
  }
}

.filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: $spacer-xs;
  justify-content: center;
}

.filter-group__item {
  flex-grow: 1;
  min-width: 15rem;
  max-width: 50%;
  margin-top: 0;
}
  • URL: /components/raw/filter/_filter.scss
  • Filesystem Path: components/04-molecules/filter/_filter.scss
  • Size: 990 Bytes
  • Content: 
    export default class AutoSubmitForm extends HTMLElement {
  connectedCallback() {
    let form = this.querySelector('form')
    form.addEventListener('change', form.submit)
    this.classList.add('enhanced')
  }
}
  • URL: /components/raw/filter/filter.js
  • Filesystem Path: components/04-molecules/filter/filter.js
  • Size: 214 Bytes

No notes defined.