PDJ Brandbox

overlay-content 

<section class="overlay-content">
    <a href="#" target="_blank" class="overlay-content__trigger link link--underlined">
        <span class="link__label">Discover more</span>
    </a>

    <div class="overlay-content__overlay">
        <div class="overlay-content__header">
            <div class="overlay-content__header__inner">
                <span class="overlay-content__heading">Advanced CPU and rock-solid stability</span>

                <a class="overlay-content__close">
                    <span class="icon-cross">
                        <span class="icon-cross__inner"></span>
                    </span>
                </a>
            </div>
        </div>

        <div class="overlay-content__inner">
            <section class="col-two">
                <div class="col-two__inner">
                    <div class="col-two__item">
                        <div class="col-two__visual">
                            <div class="video-player">
                                <picture class="visual">
                                    <source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-player-mobile.jpg">
                                    <source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-player.jpg">
                                    <img data-sizes="auto" data-src="/graphics/video-player-mobile.jpg" class="lazyload" alt="">
                                </picture>

                                <span class="video-player__trigger">
                                    <span class="video-ID">agkb5TSjEmc</span>

                                    <span class="icon-play">
                                        <span class="icon-play__inner"></span>
                                        <span class="icon-play__icon">
                                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 7.6 14">
                                                <path fill="currentColor" d="M7.4,6.3l-5.6-6c-0.4-0.4-1-0.4-1.4,0C0.1,0.5,0,0.7,0,1v12c0,0.6,0.4,1,1,1c0.3,0,0.5-0.1,0.7-0.3l5.6-6C7.7,7.3,7.7,6.7,7.4,6.3z" />
                                            </svg>
                                        </span>
                                    </span>
                                </span>
                            </div>

                        </div>
                    </div>

                    <div class="col-two__item">
                        <div class="col-two__content">
                            <h2 class="col-two__heading heading heading--5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</h2>

                            <div class="col-two__item__description">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniamLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
                            </div>

                        </div>
                    </div>
                </div>
            </section>

            <div class="spacer spacer--4"></div>

            <section class="col-two col-two--reversed">
                <div class="col-two__inner">
                    <div class="col-two__item">
                        <div class="col-two__visual">
                            <div class="video-player">
                                <picture class="visual">
                                    <source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-player-mobile.jpg">
                                    <source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-player.jpg">
                                    <img data-sizes="auto" data-src="/graphics/video-player-mobile.jpg" class="lazyload" alt="">
                                </picture>

                                <span class="video-player__trigger">
                                    <span class="video-ID">agkb5TSjEmc</span>

                                    <span class="icon-play">
                                        <span class="icon-play__inner"></span>
                                        <span class="icon-play__icon">
                                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 7.6 14">
                                                <path fill="currentColor" d="M7.4,6.3l-5.6-6c-0.4-0.4-1-0.4-1.4,0C0.1,0.5,0,0.7,0,1v12c0,0.6,0.4,1,1,1c0.3,0,0.5-0.1,0.7-0.3l5.6-6C7.7,7.3,7.7,6.7,7.4,6.3z" />
                                            </svg>
                                        </span>
                                    </span>
                                </span>
                            </div>

                        </div>
                    </div>

                    <div class="col-two__item">
                        <div class="col-two__content">
                            <h2 class="col-two__heading heading heading--5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</h2>

                            <div class="col-two__item__description">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniamLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
                            </div>

                        </div>
                    </div>
                </div>
            </section>

            <div class="spacer spacer--4"></div>

            <section class="col-two">
                <div class="col-two__inner">
                    <div class="col-two__item">
                        <div class="col-two__visual">
                            <div class="video-player">
                                <picture class="visual">
                                    <source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-player-mobile.jpg">
                                    <source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-player.jpg">
                                    <img data-sizes="auto" data-src="/graphics/video-player-mobile.jpg" class="lazyload" alt="">
                                </picture>

                                <span class="video-player__trigger">
                                    <span class="video-ID">agkb5TSjEmc</span>

                                    <span class="icon-play">
                                        <span class="icon-play__inner"></span>
                                        <span class="icon-play__icon">
                                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 7.6 14">
                                                <path fill="currentColor" d="M7.4,6.3l-5.6-6c-0.4-0.4-1-0.4-1.4,0C0.1,0.5,0,0.7,0,1v12c0,0.6,0.4,1,1,1c0.3,0,0.5-0.1,0.7-0.3l5.6-6C7.7,7.3,7.7,6.7,7.4,6.3z" />
                                            </svg>
                                        </span>
                                    </span>
                                </span>
                            </div>

                        </div>
                    </div>

                    <div class="col-two__item">
                        <div class="col-two__content">
                            <h2 class="col-two__heading heading heading--5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</h2>

                            <div class="col-two__item__description">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniamLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
                            </div>

                        </div>
                    </div>
                </div>
            </section>

            <div class="spacer spacer--4"></div>

            <section class="col-two col-two--reversed">
                <div class="col-two__inner">
                    <div class="col-two__item">
                        <div class="col-two__visual">
                            <div class="video-player">
                                <picture class="visual">
                                    <source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-player-mobile.jpg">
                                    <source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-player.jpg">
                                    <img data-sizes="auto" data-src="/graphics/video-player-mobile.jpg" class="lazyload" alt="">
                                </picture>

                                <span class="video-player__trigger">
                                    <span class="video-ID">agkb5TSjEmc</span>

                                    <span class="icon-play">
                                        <span class="icon-play__inner"></span>
                                        <span class="icon-play__icon">
                                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 7.6 14">
                                                <path fill="currentColor" d="M7.4,6.3l-5.6-6c-0.4-0.4-1-0.4-1.4,0C0.1,0.5,0,0.7,0,1v12c0,0.6,0.4,1,1,1c0.3,0,0.5-0.1,0.7-0.3l5.6-6C7.7,7.3,7.7,6.7,7.4,6.3z" />
                                            </svg>
                                        </span>
                                    </span>
                                </span>
                            </div>

                        </div>
                    </div>

                    <div class="col-two__item">
                        <div class="col-two__content">
                            <h2 class="col-two__heading heading heading--5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</h2>

                            <div class="col-two__item__description">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniamLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
                            </div>

                        </div>
                    </div>
                </div>
            </section>

        </div>
    </div>
</section>
 
<section class="overlay-content">
  {{render '@link--underlined' trigger merge=true }}

  <div class="overlay-content__overlay">
    <div class="overlay-content__header">
      <div class="overlay-content__header__inner">
        <span class="overlay-content__heading">{{ heading }}</span>

        <a class="overlay-content__close">
          {{> @icon-cross }}
        </a>
      </div>
    </div>

    <div class="overlay-content__inner">
      {{render '@col-two' comp1 merge=true }}

      <div class="spacer spacer--4"></div>

      {{render '@col-two' comp2 merge=true }}

      <div class="spacer spacer--4"></div>

      {{render '@col-two' comp1 merge=true }}

      <div class="spacer spacer--4"></div>

      {{render '@col-two' comp2 merge=true }}
    </div>
  </div>
</section>
 
trigger:
  label: Discover more
  class: overlay-content__trigger
heading: Advanced CPU and rock-solid stability
comp1:
  modifier: false
comp2:
  modifier: reversed
  • Content: 
    const OVERLAYCONTENT = ((w, d, undefined) => {

  'use strict';

  const selectors = {
    theWrap: '.overlay-content',
    theTrigger: '.overlay-content__trigger',
    theClose: '.overlay-content__close',
  };

  const classes = {
    isVisible: 'is-visible',
    overlayContentIsVisible: 'overlay-content-is-visible',
  };

  const els = {};

  const init = () => {
    els.theWraps = d.querySelectorAll(selectors.theWrap);

    [...els.theWraps].forEach((theWrap) => {
      const theTrigger = theWrap.querySelector(selectors.theTrigger);
      const theClose = theWrap.querySelector(selectors.theClose);

      theTrigger && theTrigger.addEventListener('click', (e) => {
        e.preventDefault();
        theWrap.classList.add(classes.isVisible);
        d.body.classList.add(classes.overlayContentIsVisible);
        d.addEventListener('keyup', keyTabbed);
        MAIN.resize(true);
      });

      theClose && theClose.addEventListener('click', (e) => {
        e.preventDefault();
        theWrap.classList.remove(classes.isVisible);
        d.body.classList.remove(classes.overlayContentIsVisible);
        d.removeEventListener('keyup', keyTabbed);
      });
    });
  };

  const keyTabbed = (event) => {
    if(!event || event.key !== 'Escape') { return; }

    [...els.theWraps].forEach((theWrap) => {
      theWrap.classList.contains(classes.isVisible) && theWrap.classList.remove(classes.isVisible);
      d.body.classList.contains(classes.overlayContentIsVisible) && d.body.classList.remove(classes.overlayContentIsVisible);
    });
  };

  d.addEventListener('DOMContentLoaded', init);

})(window, window.document);
  • URL: /components/raw/overlay-content/overlay-content.js
  • Filesystem Path: ../src/04_organisms/overlay-content/overlay-content.js
  • Size: 1.6 KB
  • Content: 
    .overlay-content-is-visible {
  overflow: hidden;

  .header,
  .nav-in-page {
    z-index: -1;
  }
}

.overlay-content {
  overflow: hidden;

  &.is-visible {
    overflow: visible;
  }
}

.overlay-content__overlay {
  --overlay-content-header-height: 50px;

  @media (min-width: 900px) {
    --overlay-content-header-height: 70px;
  }

  transition: opacity 500ms, left 0s 500ms;
  position: fixed;
  top: 0;
  left: 100%;
  z-index: 90210;
  display: block;
  width: 100vw;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  overflow: auto;
  opacity: 0;
  pointer-events: none;


  .is-visible & {
    transition: opacity 500ms;
    left: 0;
    opacity: 1;
    pointer-events: all;
  }
}

.overlay-content__header {
  position: sticky;
  top: 0;
  z-index: 90210;
  padding: 0 var(--gutter--bucket);
  background-color: var(--color--neutrals-0);
}

.overlay-content__header__inner {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--overlay-content-header-height);
  border-bottom: var(--divider);
}

.overlay-content__heading {
  flex: 0 0 auto;
  max-width: calc(100vw - ((var(--gutter--bucket) + 14px + (var(--gutter--bucket) * 2)) * 2));
  margin-right: auto;
  margin-left: auto;
  overflow: hidden;
  font-size: var(--h--6);
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;

  @media (min-width: 900px) {
    opacity: .4;
  }
}

.overlay-content__close {
  transition: transform 250ms;
  transform: translate(0, -50%);
  position: absolute;
  top: 50%;
  right: var(--gutter--bucket);
  display: block;
  width: 14px;
  color: inherit;
  text-decoration: none;
  cursor: pointer;

  &:hover,
  &:focus,
  &:active {
    transform: translate(0, -50%) rotate(90deg);
    color: inherit;
    text-decoration: none;
  }

  &:after {
    transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    content: '';
  }
}

.overlay-content__inner {
  min-height: calc(100vh - var(--overlay-content-header-height));
  min-height: calc((var(--vh, 1vh) * 100) - var(--overlay-content-header-height));
  padding: var(--gap--8) 0;
  background-image: linear-gradient(to bottom, rgba(#FFF, 1), rgba(#FFF, 1) 50vh, rgba(#FFF, .95));
}
  • URL: /components/raw/overlay-content/overlay-content.scss
  • Filesystem Path: ../src/04_organisms/overlay-content/overlay-content.scss
  • Size: 2.3 KB

No notes defined.