PDJ Brandbox

store-filter 

<section class="store-filter">
    <div class="store-filter__inner">
        <div class="store-filter__item">
            <div class="select">
                <select name="" class="select__input store-filter__categories" disabled>
                    <option value="" disabled selected>Product category</option>
                </select>

                <div class="select__trigger">
                    <span class="select__symbol">
                        <svg class="icon-chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                            <path fill="currentColor" d="M11.172 9.82L13 8 9.906 4.99 6.04 1.21c-.281-.28-.703-.28-.914 0l-.914.91c-.281.28-.281.7 0 .91L9.273 8l-5.062 4.97c-.281.28-.281.7 0 .91l.914.91c.281.28.703.28.914 0l5.133-4.97z" />
                        </svg>

                    </span>
                </div>
            </div>

        </div>

        <div class="store-filter__item">
            <div class="select">
                <select name="" class="select__input store-filter__products" disabled>
                    <option value="" disabled selected>Product</option>
                </select>

                <div class="select__trigger">
                    <span class="select__symbol">
                        <svg class="icon-chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                            <path fill="currentColor" d="M11.172 9.82L13 8 9.906 4.99 6.04 1.21c-.281-.28-.703-.28-.914 0l-.914.91c-.281.28-.281.7 0 .91L9.273 8l-5.062 4.97c-.281.28-.281.7 0 .91l.914.91c.281.28.703.28.914 0l5.133-4.97z" />
                        </svg>

                    </span>
                </div>
            </div>

        </div>

        <div class="store-filter__item store-filter__item--switch">
            <div class="switch">
                <div class="switch__item">
                    <input class="switch__input" type="radio" name="switch" id="offline" checked>

                    <label class="switch__label" for="offline">
                        Stores
                    </label>
                </div>
                <div class="switch__item">
                    <input class="switch__input" type="radio" name="switch" id="online">

                    <label class="switch__label" for="online">
                        Online stores
                    </label>
                </div>
            </div>

        </div>
    </div>
</section>
 
<section class="store-filter">
  <div class="store-filter__inner">
    <div class="store-filter__item">
      {{render '@select' product-categories merge=true}}
    </div>

    <div class="store-filter__item">
      {{render '@select' products merge=true}}
    </div>

    <div class="store-filter__item store-filter__item--switch">
      {{render '@switch' switch merge=true}}
    </div>
  </div>
</section>
 
product-categories:
  class: store-filter__categories
  small: false
  disabled: true
  options:
    - value: ''
      label: Product category
      disabled: true
      selected: true
products:
  class: store-filter__products
  small: false
  disabled: true
  options:
    - value: ''
      label: Product
      disabled: true
      selected: true
switch: true
  • Content: 
    .store-filter {
  overflow: hidden;
}

.store-filter__inner {
  @media (min-width: 750px) {
    display: flex;
    margin: calc(var(--gap) * -1);
  }
}

.store-filter__item {
  margin-top: calc(var(--gap) * 4);

  @media (min-width: 750px) {
    flex: 0 1 auto;
    margin-top: 0;
    padding: calc(var(--gap) * 1);
  }

  &:first-child {
    margin-top: 0;
  }
}

.store-filter__item--switch {
  position: relative;
  z-index: 2;
}

.store-filter:after {
  transition: opacity 150ms;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--color--neutrals-0);
  content: '';
  opacity: 0;
  pointer-events: none;

  .online--is-active & {
    opacity: 0.7;
    pointer-events: all;
  }
}
  • URL: /components/raw/store-filter/store-filter.scss
  • Filesystem Path: ../src/03_molecules/store-filter/store-filter.scss
  • Size: 765 Bytes

No notes defined.