PDJ Brandbox

store-box 

<div class="store-search">
    <div class="store-search__inner">
        <div class="store-search__form">
            <div class="store-search__field">
                <div class="search-field">
                    <div class="search-field__input">
                        <div class="parent-class input-field is-required">
                            <div class="input-field__inner">
                                <input type="text" name="q" id="" value="" class="store-search__input" required>
                                <span class="input-field__placeholder">City..</span>
                            </div>
                            <div class="input-field__error">
                                <p>This field is not filled in correctly or cannot be empty.</p>
                            </div>
                        </div>

                    </div>

                    <div class="search-field__submit">
                        <div class="action action--normal action--on-light action--icon">
                            <span class="action__icon">
                                <svg class="icon-search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 57">
                                    <path fill="currentColor" d="M60 54.93 39.86 34.91a21.74 21.74 0 0 0 4.28-12.97C44.14 9.84 34.24 0 22.07 0S0 9.84 0 21.94s9.9 21.94 22.07 21.94c6.23 0 11.87-2.59 15.88-6.73L57.92 57 60 54.93ZM22.07 40.95c-10.55 0-19.13-8.53-19.13-19.02S11.52 2.92 22.07 2.92 41.2 11.45 41.2 21.94s-8.58 19.02-19.13 19.02Z" />
                                </svg>

                            </span>

                            <span class="action__bg"></span>
                        </div>
                    </div>
                </div>

            </div>

            <div class="store-search__link">
                <a href="" class="store-seach__link link link--underlined">
                    <span class="link__icon"><svg class="icon-location" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
                            <path fill="currentColor" d="M4.16 16.96h10.080l3.040 9.28 6.24-20.32zM16 32c-8.8 0-16-7.2-16-16s7.2-16 16-16 16 7.2 16 16-7.2 16-16 16zM16 1.12c-8.16 0-14.88 6.72-14.88 14.88s6.72 14.88 14.88 14.88 14.88-6.72 14.88-14.88-6.72-14.88-14.88-14.88z" />
                        </svg>
                    </span>
                    <span class="link__label"></span>
                </a>
            </div>

            <div class="store-search__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>

            </div>
        </div>

        <div class="store-search__note">
            <div class="search-note">
                Please contact retailer directly to check stock availability
            </div>

        </div>
    </div>
</div>
 
<div class="store-search">
  <div class="store-search__inner">
    <div class="store-search__form">
      <div class="store-search__field">
        {{render '@search-field' searchfield merge=true}}
      </div>

      <div class="store-search__link">
        <a href="{{searchlink.url}}" class="store-seach__link link link--underlined">
          <span class="link__icon">{{> @icon-location}}</span>
          <span class="link__label">{{searchlink.label}}</span>
        </a>
      </div>

      <div class="store-search__filter">
        {{render '@store-filter' storefilter merge=true}}
      </div>
    </div>

    {{#if searchnote}}
      <div class="store-search__note">
        {{render '@search-note' searchnote merge=true}}
      </div>
    {{/if}}
  </div>
</div>
 
searchform:
  method: GET
  url: https://pioneerdj.com/en/search-results/
searchfield:
  input:
    value: ''
    placeholder: City..
    class: store-search__input
    name: q
    required: true
    disabled: false
searchnote:
  content: Please contact retailer directly to check stock availability
  • Content: 
    .store-search {
  position: relative;
  padding: calc(var(--gap) * 4);
  border: 1px solid var(--color--neutrals-2);

  @media (min-width: 750px) {
    padding: calc(var(--gap) * 8);
  }
}

.store-search__inner {
  max-width: var(--section--4);
  margin: 0 auto;
}

.store-search__link {
  display: flex;
  margin-top: calc(var(--gap) * 2);
  font-size: var(--p--2);

  @media (min-width: 750px) {
    justify-content: flex-end;
  }
}

.store-search__filter {
  margin-top: calc(var(--gap) * 8);
}

.store-search__note {
  margin-top: calc(var(--gap) * 4);
}
  • URL: /components/raw/store-search/store-search.scss
  • Filesystem Path: ../src/03_molecules/store-search/store-search.scss
  • Size: 559 Bytes

No notes defined.