PDJ Brandbox

sub-header-actions 

<div class="sub-header-actions">

    <section class="overlay-modal" data-step="1">
        <div class="overlay-modal__overlay">
            <span class="overlay-modal__bg overlay-modal__trigger--close"></span>

            <div class="overlay-modal__inner">
                <span class="overlay-modal__close overlay-modal__trigger--close"></span>

                <div class="overlay-modal__content">
                    <h3 class="heading heading--4">
                        <span data-step="1">Sign me up for: CDJ-3000</span>
                        <span data-step="2">Thank you!</span>
                    </h3>

                    <div class="overlay-modal__description">
                        We&#x27;ll notify you as soon as this product is available again.
                    </div>

                    <form data-step="1" class="form form--modal form--modal" novalidate>
                        <div class="overlay-modal__form">
                            <div class="parent-class input-field is-required">
                                <div class="input-field__inner">
                                    <input type="email" name="email" id="" value="" class="test" required>
                                    <span class="input-field__placeholder">Email address</span>
                                </div>
                                <div class="input-field__error">
                                    <p>This field is not filled in correctly or cannot be empty.</p>
                                </div>
                            </div>

                            <div class="overlay-modal__action">

                                <button type="submit" class="action action--normal action--on-light">
                                    <span class="action__label">Sign me up</span>
                                    <span class="action__bg"></span>
                                </button>

                            </div>
                        </div>

                        <div class="overlay-modal__note">
                            We respect your privacy and don&#x27;t share you email with anybody.
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <div class="sub-header-actions__item sub-header-actions__item--labels">
        <div class="sub-header-actions__labels">
            <span class="sub-header-actions__label sub-header-actions__label--price">€ 1,999</span>
            <span class="sub-header-actions__label sub-header-actions__label--delim">-</span>
            <span class="sub-header-actions__label sub-header-actions__label--oos">Out of stock</span>

            <div class="sub-header-actions__label sub-header-actions__label--notify">
                <a href="http://shopus.pioneerdj.com/products/productdetail/part_number=CDJ-2000NXS2/UXJCB/15960.0.1.1" class="link link--colored overlay-modal__trigger">
                    <span class="link__label">Notify me</span>
                </a>
            </div>
        </div>
    </div>

    <div class="sub-header-actions__item">
        <a href="http://shopus.pioneerdj.com/products/productdetail/part_number=CDJ-2000NXS2/UXJCB/15960.0.1.1" id="shop-url-button" class="sub-header-actions__action overlay-modal__trigger">
            <span class="sub-header-actions__button action action--normal action--on-light">
                <span class="action__label desktop">Notify when available</span>
                <span class="action__label mobile">Notify me</span>
                <span class="action__bg"></span>
            </span>
        </a>
    </div>

    <div class="sub-header-actions__item">
        <a href="/en-us/shops/search/" class="sub-header-actions__action">
            <span class="sub-header-actions__button action action--ghost action--on-dark">
                <span class="action__label">Find a store</span>
                <span class="action__bg"></span>
            </span>

            <span class="sub-header-actions__icon">
                <svg class="icon-marker" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 28">
                    <path fill="currentColor" d="M10,0c5.5,0,10,4.4,10,9.8c0,1.8-0.5,3.5-1.4,5l0,0l-7.7,12.7c-0.1,0.2-0.4,0.4-0.7,0.4l0,0c-0.3,0-0.6-0.1-0.7-0.4l0,0L1.5,15C0.5,13.5,0,11.7,0,9.8C0,4.4,4.5,0,10,0z M10,1.6c-4.6,0-8.3,3.7-8.3,8.2c0,1.5,0.4,3,1.3,4.3l0,0l7.2,11.4l7-11.6c0.8-1.3,1.2-2.7,1.2-4.2C18.3,5.3,14.6,1.6,10,1.6z M10,5c2.8,0,5,2.2,5,5c0,2.7-2.2,5-5,5c-2.8,0-5-2.3-5-5C5,7.2,7.2,5,10,5z M10,6.7c-1.8,0-3.3,1.5-3.3,3.3c0,1.8,1.5,3.3,3.3,3.3c1.9,0,3.3-1.5,3.3-3.3C13.3,8.2,11.8,6.7,10,6.7z" />
                </svg>

            </span>
        </a>
    </div>
</div>
 
<div class="sub-header-actions">
  {{render '@overlay-modal' }}

  <div class="sub-header-actions__item sub-header-actions__item--labels">
    <div class="sub-header-actions__labels">
      <span class="sub-header-actions__label sub-header-actions__label--price">€ 1,999</span>
      <span class="sub-header-actions__label sub-header-actions__label--delim">-</span>
      <span class="sub-header-actions__label sub-header-actions__label--oos">Out of stock</span>

      {{#unless hidenotify}}
      <div class="sub-header-actions__label sub-header-actions__label--notify">
        <a href="http://shopus.pioneerdj.com/products/productdetail/part_number=CDJ-2000NXS2/UXJCB/15960.0.1.1" class="link link--colored overlay-modal__trigger">
          <span class="link__label">Notify me</span>
        </a>
      </div>
      {{/unless}}
    </div>
  </div>

  {{#unless hidenotify}}
  <div class="sub-header-actions__item">
    <a href="http://shopus.pioneerdj.com/products/productdetail/part_number=CDJ-2000NXS2/UXJCB/15960.0.1.1" id="shop-url-button" class="sub-header-actions__action overlay-modal__trigger">
      <span class="sub-header-actions__button action action--normal action--on-light">
        <span class="action__label desktop">Notify when available</span>
        <span class="action__label mobile">Notify me</span>
        <span class="action__bg"></span>
      </span>
    </a>
  </div>
  {{/unless}}

  <div class="sub-header-actions__item">
    <a href="/en-us/shops/search/" class="sub-header-actions__action">
      <span class="sub-header-actions__button action action--{{#if hidenotify}}normal{{else}}ghost{{/if}} action--on-{{#if hidenotify}}light{{else}}dark{{/if}}">
        <span class="action__label">Find a store</span>
        <span class="action__bg"></span>
      </span>

      <span class="sub-header-actions__icon">
        {{render '@icon-marker'}}
      </span>
    </a>
  </div>
</div>
 
/* No context defined. */
  • Content: 
    .sub-header-actions {
  position: relative;
  display: flex;
  width: 100%;
  height: 50px;

  .js-sticky__stick & {
    top: -6px;
  }
}

.sub-header-actions__item {
  display: flex;
  flex: 0 0 calc(50% - (var(--gap) * 2));
  align-items: center;
  justify-content: flex-end;
  margin-right: calc(var(--gap) * 4);

  @media (min-width: 900px) {
    flex: none;
  }

  &:nth-child(2) {
    .js-sticky__stick & {
      @media (max-width: 899px) {
        display: none;
      }
    }
  }

  &:last-child {
    margin-right: 0;
  }

  .js-sticky__stick & {
    @media (max-width: 899px) {
      flex: none;
    }
  }
}

.sub-header-actions__item--labels {
  .js-sticky__wrap:not(.js-sticky__stick) & {
    @media (max-width: 899px) {
      position: absolute;
      bottom: calc(100% + (var(--gap) * 2));
      left: 0;
      margin-right: 0;
    }
  }
}

.sub-header-actions__labels {
  .js-sticky__wrap:not(.js-sticky__stick) & {
    @media (max-width: 899px) {
      display: flex;
      width: 100%;
    }
  }
}

.sub-header-actions__label {
  display: block;
  margin-right: calc(var(--gap) * 2);
  color: var(--color--neutrals-0);
  font-size: var(--p--1);
  line-height: 1.1875;

  @media (min-width: 900px) {
    margin-right: 0;
    text-align: right;
  }

  .js-sticky__stick & {
    margin-right: 0;
    text-align: right;
  }

  &:last-child {
    margin-right: 0;
  }
}

.sub-header-actions__label--price {
  .js-sticky__stick & {
    @media (max-width: 899px) {
      display: none;
    }
  }
}

.sub-header-actions__label--delim {
  @media (min-width: 900px) {
    display: none;
  }

  .js-sticky__stick & {
    display: none;
  }
}

.sub-header-actions__label--oos {
  font-weight: 700;

  .js-sticky__stick & {
    @media (max-width: 899px) {
      font-weight: 500;
    }
  }
}

.sub-header-actions__label--notify {
  display: none;

  .js-sticky__stick & {
    @media (max-width: 899px) {
      display: block;
      font-weight: 500;
    }
  }
}

.sub-header-actions__action {
  text-decoration: none !important;
  flex: auto;
}

.sub-header-actions__button {
  .js-sticky__stick & {
    @media (max-width: 899px) {
      display: none;
    }
  }
}

.sub-header-actions__icon {
  display: none;

  .js-sticky__stick & {
    @media (max-width: 899px) {
      display: block;
      margin: 0 calc(var(--gap) * 2) 0 calc(var(--gap) * 1);
      font-size: 17px;
      font-weight: 500;
      color: var(--color--neutrals-0);
    }
  }
}
  • URL: /components/raw/sub-header-actions/sub-header-actions.scss
  • Filesystem Path: ../src/99_legacy_reskinned/sub-header-actions/sub-header-actions.scss
  • Size: 2.5 KB

No notes defined.