message: Default

300 × 150
<div class="message message--info">
    <div class="message__wrapper">
        <div class="message__icon message__icon--info">
            <svg width="36" height="35" viewBox="0 0 36 35" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="18.2931" cy="17.5" r="16.7241" stroke="currentColor" stroke-width="1.55172" />
                <path d="M17.4252 25V13.7147H19.1592V25H17.4252ZM18.3069 11.8339C17.9689 11.8339 17.6775 11.7187 17.4326 11.4885C17.1926 11.2583 17.0726 10.9816 17.0726 10.6583C17.0726 10.335 17.1926 10.0583 17.4326 9.82808C17.6775 9.59786 17.9689 9.48276 18.3069 9.48276C18.6449 9.48276 18.9338 9.59786 19.1738 9.82808C19.4188 10.0583 19.5412 10.335 19.5412 10.6583C19.5412 10.9816 19.4188 11.2583 19.1738 11.4885C18.9338 11.7187 18.6449 11.8339 18.3069 11.8339Z" fill="currentColor" />
            </svg>

        </div>
        <div class="message__content">
            <p>This alert box indicates an informative change or action. This alert box indicates an informative change or action.</p>
        </div>
    </div>
    <div class="message__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>

    </div>
</div>
{{!-- Message info --}}
<div class="message message--info">
  <div class="message__wrapper">
    <div class="message__icon message__icon--info">
      {{render '@icon-info--large' }}
    </div>
    <div class="message__content">
      <p>{{ text }}</p>
    </div>
  </div>
  <div class="message__close">
    {{render '@icon-close' }}
  </div>
</div>
type: info
text: >-
  This alert box indicates an informative change or action. This alert box
  indicates an informative change or action.
  • 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.