PDJ Brandbox

nav-action 

<nav class="actionNav">
    <div class="actionNav__item">
        <div class="search">
            <a class="search__trigger search__trigger--open header__trigger--close">
                <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>

            </a>

            <div class="search__inner">
                <form action="https://pioneerdj.com/search-results" class="search__form">
                    <div class="search__field">
                        <input name="q" type="search" class="search__input input__search" data-search-page="/search-results?q=" data-no-results="Oops nothing can be found" data-nothing-entered="Please enter a search query">

                        <a href="#0" class="search__closeTrigger search__trigger--close">
                            <svg class="icon-close" viewBox="0 0 12 14" version="1" xmlns="http://www.w3.org/2000/svg">
                                <path fill="currentColor" d="M6.066 5.492L2.372.931A1 1 0 1 0 .818 2.19l3.848 4.752L.418 11.34a1 1 0 0 0 1.439 1.39v-.001l4.077-4.222 3.694 4.561a1 1 0 1 0 1.554-1.259L7.334 7.059l4.248-4.399a1 1 0 0 0-1.439-1.39v.001L6.066 5.492z" />
                            </svg>

                            <span class="screenReader">Close</span>
                        </a>
                    </div>

                    <span class="search__loader"></span>
                </form>

                <div class="search__overlay search__trigger--close"></div>

                <div class="search__results">
                    <div class="search__results__inner">
                        <h3 class="heading heading--2 heading--fancy">
                            Top results
                        </h3>

                        <ul class="search__list">
                            <!-- THIS WILL BE FILLED BY JS -->
                            <li class="search__item">
                                <a class="search__link" href="/en/news/2016/os-x-v10114-el-capitan-and-pioneer-dj-controllers-compatibility/">OS X v10114 El Capitan and Pioneer DJ controllers compatibility</a>
                            </li>

                            <li class="search__item">
                                <a class="search__link" href="/en/news/2016/windows-64-bit-driver-release/">Windows 64-bit driver release</a>
                            </li>

                            <li class="search__item">
                                <a class="search__link" href="/en/news/2018/ddj-rb-ddj-rr-ddj-rz-driver-for-windows-update-ver1300-ver1300-ver1200/">DDJ-RB DDJ-RR DDJ-RZ Driver for Windows update Ver1300 Ver1300 Ver1200</a>
                            </li>

                            <li class="search__item">
                                <a class="search__link" href="/en/product/accessories/djc-b-wego3-bag/">DJC-B-WEGO3-BAG</a>
                            </li>

                            <li class="search__item">
                                <a class="search__link" href="/en/news/2017/ddj-rr-ver104-and-ddj-rb-ver103-firmware-update/">DDJ-RR Ver104 and DDJ-RB Ver103 Firmware update</a>
                            </li>
                        </ul>

                        <a href="#" class="search__cta button trigger__searchpage"><span class="button__label">See all results</span></a>

                        <p class="search__note">
                            Didn’t find what you’re looking for? Maybe use fewer words or a more general search term.<br />If you still have no luck you can contact our <a href="https://pioneerdj.com/en/support/contact">customer service</a>.
                        </p>
                    </div>
                </div>
            </div>
        </div>

    </div>
</nav>
 
<nav class="actionNav">
  <div class="actionNav__item">
    {{render '@search' }}
  </div>
</nav>
 
/* No context defined. */
  • Content: 
    .actionNav {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
}

.actionNav__item {
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 0 0 30px;
  flex: 0 0 30px;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 30px;
  height: 45px;
  margin-left: 16px;
}

.actionNav__item:first-child {
  margin-left: 0;
}
  • URL: /components/raw/nav-action/nav-action.scss
  • Filesystem Path: ../src/03_molecules/nav-action/nav-action.scss
  • Size: 413 Bytes

No notes defined.