PDJ Brandbox

message: Atc 

<div class="message message--atc">
    <div class="message__wrapper">
        <div class="message__icon message__icon--atc">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 221.77 221.25">
                <path fill="#fff" d="M221.77,173.32c0,26.36-21.62,47.93-48.04,47.93H48.04c-26.42,0-48.04-21.57-48.04-47.93V47.93C0,21.57,21.62,0,48.04,0h125.69c26.42,0,48.04,21.57,48.04,47.93v125.4Z" />
                <g>
                    <g>
                        <path fill="#f1b43f" d="M114.59,57.75c-.03-.06-.06-.12-.11-.18l-.79-1.01c-.15-.19-.37-.31-.61-.34-.24-.03-.48,.05-.66,.2l-7.7,6.35c-.29,.23-.69,.27-1.01,.08l-6.52-3.76c-.2-.11-.34-.3-.41-.52l-1.82-6.26c-.1-.34,.01-.7,.29-.93l8.14-6.71c.37-.31,.43-.85,.14-1.23l-1.03-1.33c-.06-.07-.12-.12-.2-.17-3.17-.64-6.38-.25-9.22,.99-3.54,1.6-6.48,4.53-7.98,8.44-1.81,4.71-1.1,9.75,1.39,13.72,.36,.57,.67,1.1,.94,1.6,1.63,1.97,3.77,3.56,6.33,4.54,2.43,.93,4.96,1.2,7.38,.9,.33-.11,.68-.19,1.06-.22,.21-.02,.42-.05,.64-.08,4.75-1.14,8.87-4.51,10.76-9.4,.6-1.55,.92-3.13,1-4.7Z" />
                        <path fill="#f1b43f" d="M95.97,75.87c-1.63-.15-2.19-.11-3.72-.7-1.66-.64-2.17-1.12-3.56-2.22-2.46,6.35-21.09,49.9-21.09,49.9-1.11,2.89,.33,6.14,3.24,7.25,2.9,1.11,6.16-.33,7.27-3.23l17.86-51.01Zm-7.71,6.39l1.74,.66-12.22,31.75-1.74-.67,12.22-31.75Zm-16.41,45.23c-1.45-.55-2.18-2.18-1.62-3.63,.56-1.45,2.18-2.17,3.63-1.61,1.45,.56,2.17,2.18,1.62,3.63-.56,1.45-2.18,2.17-3.63,1.61Z" />
                    </g>
                    <g>
                        <polygon fill="#f1b43f" points="138.59 92.46 123.01 54.84 124.09 49.44 118.18 40.93 115.93 41.79 113.69 42.65 115.01 52.92 119.43 56.21 133.08 94.57 138.59 92.46" />
                        <path fill="#f1b43f" d="M141.78,95.59l-8.97,3.43,8.44,27.7c1.36,3.54,5.34,5.3,8.88,3.94,3.54-1.36,5.31-5.32,3.95-8.86l-12.31-26.22Zm5.87,25.71l-1.95,.75-7.7-20.01,1.95-.75,7.7,20.01Z" />
                    </g>
                </g>
                <g>
                    <path d="M35.49,155.57l6.11,15.82h-2.98l-1.49-4.19h-6.33l-1.49,4.19h-2.87l6.09-15.82h2.95Zm-1.53,2.73l-2.4,6.8h4.84l-2.38-6.8h-.07Z" />
                    <path d="M45.8,155.57v15.82h-2.53v-15.82h2.53Z" />
                    <path d="M59.77,165.72c0,3.01-1.51,5.98-4.95,5.98-1.44,0-3.06-.51-3.84-1.8h-.04v5.72h-2.53v-15.69h2.4v1.55h.04c.73-1.33,2.09-1.86,3.55-1.86,3.6,0,5.38,2.75,5.38,6.09Zm-5.71,3.99c2.29,0,3.18-2.04,3.18-4.03s-.96-4.05-3.2-4.05c-2.35,0-3.2,1.99-3.2,4.05s.98,4.03,3.22,4.03Z" />
                    <path d="M63.99,155.57v5.87h.04c.73-1.15,2.02-1.82,3.46-1.82,2.64,0,4.04,1.53,4.04,3.81v7.95h-2.53v-7.09c0-1.46-.44-2.68-2.24-2.68s-2.78,1.44-2.78,2.95v6.82h-2.53v-15.82h2.53Z" />
                    <path d="M83.61,162.88v6.03c0,.6,.13,.8,.69,.8,.13,0,.36,0,.53-.04v1.75c-.64,.18-1.31,.29-1.6,.29-1.11,0-1.78-.44-1.95-1.4-.91,.91-2.58,1.4-3.98,1.4-2.27,0-3.93-1.24-3.93-3.35s1.27-2.99,2.98-3.35c.87-.18,1.82-.29,2.89-.42,1.53-.18,2-.53,2-1.42,0-1-.8-1.55-2.38-1.55s-2.42,.66-2.53,1.82h-2.53c.18-2.5,2-3.81,5.22-3.81,2.78,0,4.6,1.31,4.6,3.26Zm-5.53,6.82c1.73,0,3-.86,3-2.1v-1.95c-.69,.42-1.02,.42-2.78,.64-1.67,.2-2.4,.8-2.4,1.84,0,.95,.8,1.57,2.18,1.57Z" />
                    <path d="M96.91,155.57v2.39h-5.04v13.43h-2.78v-13.43h-5.02v-2.39h12.84Z" />
                    <path d="M100.71,155.57v5.87h.04c.73-1.15,2.02-1.82,3.46-1.82,2.64,0,4.04,1.53,4.04,3.81v7.95h-2.53v-7.09c0-1.46-.44-2.68-2.24-2.68s-2.78,1.44-2.78,2.95v6.82h-2.53v-15.82h2.53Z" />
                    <path d="M120.95,165.45c0,.29-.02,.58-.04,.86h-8.44c0,1.88,1.09,3.39,3.09,3.39,1.4,0,2.33-.58,2.8-1.91h2.4c-.51,2.46-2.69,3.9-5.2,3.9-3.62,0-5.62-2.53-5.62-6.01s2.13-6.07,5.55-6.07c3.24,0,5.46,2.66,5.46,5.83Zm-2.58-.8c-.13-1.6-1.18-3.04-2.91-3.04s-2.91,1.35-3,3.04h5.91Z" />
                    <path d="M126.13,156.5v3.43h2.29v1.88h-2.29v6.25c0,1.2,.29,1.44,1.27,1.44,.47,0,.93-.04,1.02-.09v1.95c-1,.11-1.29,.13-1.64,.13-2.42,0-3.18-.78-3.18-3.08v-6.6h-1.91v-1.88h1.91v-3.43h2.53Z" />
                    <path d="M140.19,162.88v6.03c0,.6,.13,.8,.69,.8,.13,0,.36,0,.53-.04v1.75c-.64,.18-1.31,.29-1.6,.29-1.11,0-1.78-.44-1.95-1.4-.91,.91-2.58,1.4-3.98,1.4-2.27,0-3.93-1.24-3.93-3.35s1.27-2.99,2.98-3.35c.87-.18,1.82-.29,2.89-.42,1.53-.18,2-.53,2-1.42,0-1-.8-1.55-2.38-1.55s-2.42,.66-2.53,1.82h-2.53c.18-2.5,2-3.81,5.22-3.81,2.78,0,4.6,1.31,4.6,3.26Zm-5.53,6.82c1.73,0,3-.86,3-2.1v-1.95c-.69,.42-1.02,.42-2.78,.64-1.67,.2-2.4,.8-2.4,1.84,0,.95,.8,1.57,2.18,1.57Z" />
                    <path d="M162.49,160.6h-2.78c-.56-2.1-1.87-3.15-3.95-3.15-3.02,0-4.82,2.5-4.82,6.03s1.78,6.03,4.82,6.03c2.27,0,3.75-1.6,4.04-4.14h2.71c-.29,3.79-2.84,6.4-6.75,6.4-2.24,0-4.06-.8-5.49-2.35-1.4-1.57-2.11-3.57-2.11-5.94,0-4.52,2.82-8.29,7.6-8.29,3.66,0,6.37,2.06,6.73,5.41Z" />
                    <path d="M174.31,162.88v6.03c0,.6,.13,.8,.69,.8,.13,0,.36,0,.53-.04v1.75c-.64,.18-1.31,.29-1.6,.29-1.11,0-1.78-.44-1.95-1.4-.91,.91-2.58,1.4-3.98,1.4-2.26,0-3.93-1.24-3.93-3.35s1.27-2.99,2.98-3.35c.87-.18,1.82-.29,2.89-.42,1.53-.18,2-.53,2-1.42,0-1-.8-1.55-2.38-1.55s-2.42,.66-2.53,1.82h-2.53c.18-2.5,2-3.81,5.22-3.81,2.78,0,4.6,1.31,4.6,3.26Zm-5.53,6.82c1.73,0,3-.86,3-2.1v-1.95c-.69,.42-1.02,.42-2.78,.64-1.67,.2-2.4,.8-2.4,1.84,0,.95,.8,1.57,2.18,1.57Z" />
                    <path d="M183.77,159.69v2.44c-.38-.07-.73-.11-1.09-.11-1.89,0-3.11,1.64-3.11,3.83v5.54h-2.53v-11.46h2.38v2.22h.04c.36-1.46,2.07-2.53,3.35-2.53,.49,0,.58,0,.96,.07Z" />
                    <path d="M195.32,165.45c0,.29-.02,.58-.04,.86h-8.44c0,1.88,1.09,3.39,3.09,3.39,1.4,0,2.33-.58,2.8-1.91h2.4c-.51,2.46-2.69,3.9-5.2,3.9-3.62,0-5.62-2.53-5.62-6.01s2.13-6.07,5.55-6.07c3.24,0,5.46,2.66,5.46,5.83Zm-2.58-.8c-.13-1.6-1.18-3.04-2.91-3.04s-2.91,1.35-3,3.04h5.91Z" />
                </g>
            </svg>

        </div>
        <div class="message__content">
            <h3>Check out AlphaTheta Care!</h3>
            <p>If you purchased the product within 30days(JP)(6month(US), you can apply to the warranty service which protects you from natural or accidental failure.</p>

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

            <a href="#" class="link link--colored">
                <span class="link__label">See more</span>
            </a>

        </div>
    </div>
</div>
 
{{!-- Message atc --}}
<div class="message message--atc">
  <div class="message__wrapper">
    <div class="message__icon message__icon--atc">
      {{ render '@care-icon' }}
    </div>
    <div class="message__content">
      <h3>{{ title }}</h3>
      <p>{{ text }}</p>

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

      {{render '@link--colored' link merge=true}}
    </div>
  </div>
</div>
 
type: info-atc
text: >-
  If you purchased the product within 30days(JP)(6month(US), you can apply to
  the warranty service which protects you from natural or accidental failure.
title: Check out AlphaTheta Care!
link:
  modifier: colored
  label: See more
  url: '#'
  class: false
  target: false
  icon: false
  • Content: 
    /**
 * Message blocks
 * Remove message blocks and optional parent when clicked on the close button.
 */

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

  "use strict";

  const classNames = {
    wrapper: 'messages',
    block: 'message',
    close: 'message__close',
  };

  const autoClear = true;
  const autoClearAfter = 5000;

  const allowRemove = parentEl => {
    if (!parentEl.children.length) {
      return true;
    } else {
      [...parentEl.children, ...[]].forEach(child => {
        const childStyles = window.getComputedStyle(child);
        if (childStyles.display === 'none') {
          child.parentNode.removeChild(child);
        }
      });
    }

    return !parentEl.children.length;
  };

  const addEvents = () => {
    [...d.querySelectorAll('.' + classNames.block), ...[]].forEach(messageBlock => {
      [...messageBlock.querySelectorAll('.' + classNames.close), ...[]].forEach(closeBtn => {
        closeBtn.addEventListener('click', e => {
          e.preventDefault();

          const parentEl = messageBlock.parentNode;

          if (parentEl && messageBlock) {
            parentEl.removeChild(messageBlock);
          }

          if (parentEl && parentEl.classList.contains(classNames.wrapper) && allowRemove(parentEl)) {
            parentEl.parentNode.removeChild(parentEl);
          }
        });

        if (autoClear) {
          setTimeout(() => { closeBtn.click(); }, autoClearAfter);
        }
      });
    });
  };

  const newMessage = (content, type) => {
    const icons = {
      'success': '<svg xmlns="http://www.w3.org/2000/svg" class="icon-succes" fill="none" viewBox="0 0 35 35" width="35" height="35"><circle cx="17.5" cy="17.5" r="16.7241" stroke="currentColor" stroke-width="1.55172"/><path d="M10.5 17.3276L16.0172 22.5L24.9828 12.5" stroke="currentColor" stroke-width="2.58621"/></svg>',
      'error': '<svg xmlns="http://www.w3.org/2000/svg" class="icon-error" fill="none" viewBox="0 0 41 35" width="41" height="35"><path stroke="currentColor" stroke-width="1.5" d="m21.722 1.625 17.32 30c.675 1.167-.167 2.625-1.515 2.625H2.887c-1.348 0-2.19-1.458-1.516-2.625l17.32-30c.674-1.167 2.358-1.167 3.031 0Z"/><path fill="currentColor" d="m21.174 12.454-.142 10.455h-1.648l-.142-10.454h1.932Zm-.966 14.66a1.23 1.23 0 0 1-.902-.377 1.23 1.23 0 0 1-.377-.902c0-.35.126-.65.377-.902.25-.25.551-.376.902-.376.35 0 .65.125.902.376.25.251.376.552.376.902 0 .232-.059.445-.177.64-.114.194-.268.35-.462.468-.19.114-.402.17-.64.17Z"/></svg>',
    };

    type = Object.keys(icons).includes(type) ? type : Object.keys(icons)[0];

    const contentBlock = document.createElement('div');
    contentBlock.classList.add('message__content');
    contentBlock.innerHTML = content;

    const iconWrapper = document.createElement('div');
    iconWrapper.classList.add('message__icon');
    iconWrapper.classList.add('message__icon--' + type);
    iconWrapper.innerHTML = icons[type];

    const messageWrapper = document.createElement('div');
    messageWrapper.classList.add('message__wrapper');
    messageWrapper.appendChild(iconWrapper);
    messageWrapper.appendChild(contentBlock);

    const close = document.createElement('div');
    close.classList.add(classNames.close);
    close.innerHTML = '<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"></path></svg>';

    const block = document.createElement('div');
    block.classList.add(classNames.block);
    block.classList.add(classNames.block + '--' + type);
    block.appendChild(messageWrapper);
    block.appendChild(close);

    const availableWrapper = document.querySelector('.' + classNames.wrapper);

    if (!availableWrapper) {
      const wrapper = document.createElement('div');
      wrapper.classList.add(classNames.wrapper);
      wrapper.appendChild(block);
      document.body.appendChild(wrapper);
    } else {
      availableWrapper.appendChild(block);
    }

    addEvents();
  };

  const init = () => {
    addEvents();
    w.updateMessages = addEvents;
    w.newMessage = newMessage;
  };

  d.addEventListener('DOMContentLoaded', init);

})(window, window.document);
  • URL: /components/raw/message/message.js
  • Filesystem Path: ../src/03_molecules/message/message.js
  • Size: 4.4 KB
  • Content: 
    .messages {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 999;

  display: block;
  padding: var(--gap--4);

  background-color: rgba(white, .9);
  backdrop-filter: blur(2px);
}

.message {
  display: flex;
  justify-content: center;
  position: relative;
  margin: 0 auto var(--gap--4) auto;
  max-width: var(--section--9);

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

  &--error {
    background: rgba(#E63F5C, 0.1);
    border: 1px solid var(--color--negative);
  }

  &--success {
    background: rgba(#1DBD96, 0.1);
    border: 1px solid var(--color--positive);
  }

  &--info {
    background: rgba(#007DE1, 0.1);
    border: 1px solid var(--color--action);
  }

  &--atc {
    background-color: var(--color--neutrals-1);
    border-radius: var(--gap);
    border: none;
  }

  &__wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: var(--gap--4);

    @media all and (min-width: 750px) {
      flex-direction: row;
      text-align: left;
      max-width: 50%;
    }
  }

  &__content {
    color: var(--color--neutrals-10);
    padding-top: var(--gap--4);

    @media all and (min-width: 750px) {
      padding-top: 0;
    }
  }

  &__icon {
    @media all and (min-width: 750px) {
      margin-right: var(--gap--4);
    }

    &--error {
      color: var(--color--negative);
    }

    &--success {
      color: var(--color--positive);
    }

    &--info {
      color: var(--color--action);
    }

    &--atc {
      width: 75px;
      flex-shrink: 0;
    }
  }

  &__close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;

    display: block;
    padding: var(--gap--5);
    color: var(--color--neutrals-8);
    cursor: pointer;

    svg {
      display: block;
      width: var(--gap--3);
      height: var(--gap--3);
    }

    @media all and (min-width: 750px) {
      transition: transform 150ms ease-out;

      &:hover {
        transform: rotate(90deg);
      }
    }
  }
}
  • URL: /components/raw/message/message.scss
  • Filesystem Path: ../src/03_molecules/message/message.scss
  • Size: 2 KB

No notes defined.