PDJ Brandbox

product-registered 

<article class="product-registered">
    <div class="product-registered__header">
        <div class="product-registered__visual">
            <div class="product-registered__image">
                <picture class="visual">
                    <img data-sizes="auto" data-src="/graphics/product-registered.png" class="lazyload" alt="">
                </picture>

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

    <div class="product-registered__content">

        <div class="product-registered__icons">
            <svg viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M18.1031 7.77778H4.73333C2.67147 7.77778 1 9.44925 1 11.5111V31.2667C1 33.3285 2.67147 35 4.73333 35H24.4889C26.5508 35 28.2222 33.3285 28.2222 31.2667V17.5778" stroke="currentColor" stroke-width="1.55" stroke-linecap="round" />
                <path d="M32.8444 3.15563C33.9819 4.29312 33.9819 6.13735 32.8444 7.27484L18.6282 21.491C18.5957 21.5235 18.5546 21.5458 18.5097 21.5552L13.7156 22.5645C13.5485 22.5997 13.4003 22.4515 13.4355 22.2844L14.4448 17.4903C14.4542 17.4454 14.4765 17.4043 14.509 17.3718L28.7252 3.15563C29.8627 2.01814 31.7069 2.01814 32.8444 3.15563Z" stroke="currentColor" stroke-width="1.55" />
                <path d="M28.25 4.83334L31.1667 7.75" stroke="currentColor" stroke-width="1.55" stroke-linecap="round" />
            </svg>

            <svg class="icon-delete" viewBox="0 0 24 27" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1 3.60416H23" stroke="currentColor" stroke-width="1.55" stroke-linecap="round" />
                <path d="M9.38097 1H14.6191" stroke="currentColor" stroke-width="1.55" stroke-linecap="round" />
                <path d="M3.61904 6.20834L5.3354 22.4211C5.55081 24.4559 7.26705 26 9.31317 26H14.7802C16.7865 26 18.4824 24.5137 18.7456 22.5248L20.9048 6.20834" stroke="currentColor" stroke-width="1.55" stroke-linecap="round" />
                <path d="M7.80952 7.77084L8.85714 22.3542" stroke="currentColor" stroke-width="1.55" stroke-linecap="round" />
                <path d="M12 7.77084V22.3542" stroke="currentColor" stroke-width="1.55" stroke-linecap="round" />
                <path d="M15.1429 22.3542L16.1905 7.77084" stroke="currentColor" stroke-width="1.55" stroke-linecap="round" />
            </svg>

        </div>

        <h4 class="product-registered__heading heading">
            CDJ-2000NXS2
        </h4>
        <span class="product-registered__serial">
            Serial No.<br>
            xxxxxxxxxxxxx
        </span>

        <div class="product-registered__actions actions actions--center">
            <div class="actions__item">
                <a href="" class="link link--colored">
                    <span class="link__label">Label</span>
                </a>

            </div>
        </div>

    </div>
</article>
 
<article class="product-registered{{#if class}} {{ class }}{{/if}}">
  <div class="product-registered__header">
      <div class="product-registered__visual">
        <div class="product-registered__image">
          {{render '@visual' visual merge=true }}
        </div>
      </div>
  </div>

  <div class="product-registered__content">

    <div class="product-registered__icons">
      {{render '@icon-edit' }}
      {{render '@icon-delete' }}
    </div>

    <h4 class="product-registered__heading heading">
        {{ label }}
    </h4>
    <span class="product-registered__serial">
      Serial No.<br>
      {{ serial }}
    </span>

    {{#each actions }}
    <div class="product-registered__actions actions actions--center">
      <div class="actions__item">
        {{render '@link--colored' this merge=true }}
      </div>
    </div>
    {{/each}}

  </div>
</article>
 
visual:
  src: /graphics/product-registered.png
label: CDJ-2000NXS2
serial: xxxxxxxxxxxxx
actions:
  - action: null
    url: ''
    label: Label
  • Content: 
    /**
 * Show more
 */

const SHOWMORE = ((w, d, undefined) => {

  'use strict';

  const settings = {
    numItemsByClick: 6,
    numItemsByClickData: 'items',
  };

  const classes = {
    cta: 'loadmore--showmore',
    ctaParent: 'load-more',
    item: 'item--hidden',
    hidden: 'hidden',
  };

  let ctas;

  const init = () => {
    ctas = [...d.querySelectorAll('.' + classes.cta), ...[]];

    if (!ctas.length) {
      return;
    }

    addEvents();
  };

  const addEvents = () => {
    ctas.forEach(cta => {
      showHideCta(cta, true);

      cta.addEventListener('click', e => {
        e.preventDefault();

        const items = d.querySelectorAll('.' + classes.item);
        const numItems = cta.dataset[settings.numItemsByClickData] || settings.numItemsByClick;

        if ((items || []).length) {
          Array.prototype.slice.call(items).slice(0, numItems).forEach(item => {
            item.classList.remove(classes.item);
          });
        }

        if (!d.querySelectorAll('.' + classes.item).length) {
          ctas.forEach(cta => showHideCta(cta, false));
        }
      });
    });
  };

  const showHideCta = (cta, show) => {
    if (!cta) {
      return;
    }

    const parent = cta.closest('.' + classes.ctaParent);

    if (show) {
      cta.classList.remove(classes.hidden);

      if (parent) {
        parent.classList.remove(classes.hidden);
      }
    } else {
      cta.classList.add(classes.hidden);

      if (parent) {
        parent.classList.add(classes.hidden);
      }
    }
  }

  w.addEventListener('load', init);

})(window, window.document);
  • URL: /components/raw/product-registered/product-registered.js
  • Filesystem Path: ../src/03_molecules/product-registered/product-registered.js
  • Size: 1.6 KB
  • Content: 
    .product-registered {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  user-select: none;
}

.product-registered__icons {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--gap--4);
  margin-bottom: var(--gap--2);

  svg {
      display: block;
      width: auto;
      height: 20px;
      flex: none !important;

      &:hover {
        color: var(--color--action);
        transition: 400ms;
        cursor: pointer;
      }
  }
}

.product-registered__visual {
  flex: 0 0 auto;
  padding: var(--gap--8);


  background-color: #F7F7F7;

  @media (min-width: 1100px) {
    padding: 0 var(--gap--2);
  }
}

.product-registered__image {
  transition: transform 700ms;
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  padding-top: 100%;
  backface-visibility: hidden;

  .product-registered__visual:hover & {
    @media (hover:hover) {
      transform: scale(1.05);
    }
  }

  img {
    object-fit: contain !important;
  }
}

.product-registered__arrow {
  transform: translate(0, -50%);
  position: absolute;
  top: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
}

.product-registered__arrow--prev {
  transform: translate(0, -50%) rotate(-180deg);
  left: calc((var(--gap--8) - 18px) / 2);
  cursor: pointer;
}

.product-registered__arrow--next {
  right: calc((var(--gap--8) - 18px) / 2);
  cursor: pointer;
}

.product-registered__content {
  text-align: center;
  margin-top: var(--gap--6);
}

.product-registered__heading {
  position: relative;
  display: inline-block;
  width: auto;
  font-size: 1em;
  font-weight: 700;
}

.product-registered__heading:after {
  .product-registered__inner:hover & {
    transform: translate(-50%, .75em);
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 100%;
    height: 1px;
    background-color: currentColor;
    content: '' !important;
    backface-visibility: hidden;
  }
}

.product-registered__label {
  display: none;

  &.is-active {
    display: block;
  }
}

.product-registered__serial {
  display: block;
  margin: var(--gap--1) 0 var(--gap--2);
  color: var(--color--neutrals-6);
  font-size: .85714286em;
}

.item--hidden {
  display: none;
}
  • URL: /components/raw/product-registered/product-registered.scss
  • Filesystem Path: ../src/03_molecules/product-registered/product-registered.scss
  • Size: 2.3 KB

No notes defined.