360Giving Design System - Components

Modal: Default 

<button class="modal__trigger" data-id="modal-00">Activate Modal</button>

<div id="modal-00" class="modal" aria-hidden>
    <div class="modal__overlay modal__trigger" data-id="modal-00"></div>
    <div class="modal__window">
        <button class="modal__close modal__trigger" data-id="modal-00"></button>
        <div class="modal__content">
            <h5>This is a heading 5</h5>
            <p>Data in JSON format is ideal for direct use by developers building visualisations and web apps. The JSON should conform to the 360Giving JSON Schemas. Anyone automating the publication of their data from their internal databases or via an API may favour this format. The column titles used in spreadsheet representations of data are derived directly from the 360Giving JSON Schemas.</p>

            <h6>This is a heading 6</h6>
            <p>Data in JSON format is ideal for direct use by developers building visualisations and web apps. The JSON should conform to the 360Giving JSON Schemas. Anyone automating the publication of their data from their internal databases or via an API may favour this format. The column titles used in spreadsheet representations of data are derived directly from the 360Giving JSON Schemas.</p>
        </div>
    </div>
</div>
 
<button class="modal__trigger" data-id="modal-00">Activate Modal</button>

<div id="modal-00" class="modal" aria-hidden>
  <div class="modal__overlay modal__trigger" data-id="modal-00"></div>
  <div class="modal__window">
    <button class="modal__close modal__trigger" data-id="modal-00"></button>
    <div class="modal__content">
      <h5>This is a heading 5</h5>
      <p>Data in JSON format is ideal for direct use by developers building visualisations and web apps. The JSON should conform to the 360Giving JSON Schemas. Anyone automating the publication of their data from their internal databases or via an API may favour this format. The column titles used in spreadsheet representations of data are derived directly from the 360Giving JSON Schemas.</p>

      <h6>This is a heading 6</h6>
      <p>Data in JSON format is ideal for direct use by developers building visualisations and web apps. The JSON should conform to the 360Giving JSON Schemas. Anyone automating the publication of their data from their internal databases or via an API may favour this format. The column titles used in spreadsheet representations of data are derived directly from the 360Giving JSON Schemas.</p>  
    </div>
  </div>
</div>
 
/* No context defined. */
  • Content: 
    .dashboard-modal {
  background: $white;
  padding: 1rem;  

  h3 {
    margin-top: 0;
  }

  &__groups {
    display: flex;
    flex-direction: column;

    @include breakpoint($regular) {
      flex-direction: row;
    }
  }

  &__group:first-child {
    max-width: 100%;

    @include breakpoint($regular) {
      max-width: 20%;
    }
  }

  &__stat {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0.5rem;
    border: solid 1px hsla(var(--gray-30-hsl));
    margin: 0 0 1rem 0; // Mobile

    @include breakpoint($regular) {
      margin: 0 1rem 0 0;
    }

    span {
      margin-bottom: 0.5rem;

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

    &-value-placeholder {
      font-size: 1.2rem;
      font-weight: 700;
      color: hsla(var(--gray-30-hsl), 1);
    }
  }

  &__subtitle {
    font-weight: 700;
    margin: 0 0 4px 0;
  }
}
  • URL: /components/raw/modal/modal--dashboard.scss
  • Filesystem Path: src/components/03-components/modal/modal--dashboard.scss
  • Size: 892 Bytes
  • Content: 
    document.querySelectorAll('.modal__trigger').forEach(function(el) {
  el.onclick = function(){
    const target = el.getAttribute('data-id');
    const modal = document.getElementById(target);
    const body = document.getElementsByTagName('body');


    if (modal.hasAttribute('aria-hidden')) {
      
      modal.removeAttribute('aria-hidden')
      modal.classList.add('modal--shown');
      body[0].classList.add('modal--shown');

    } else {
      modal.setAttribute('aria-hidden', '')
      modal.classList.remove('modal--shown');
      body[0].classList.remove('modal--shown');
    }
  };
});


// Maybe we should move the class toggling to the <body> element,
// and deal with the displays at the CSS level. 
// This will minimize JS intervention in the DOM, and possibilitate the 
// Overflow: hidden; for the <body> without new JS lines
  • URL: /components/raw/modal/modal.js
  • Filesystem Path: src/components/03-components/modal/modal.js
  • Size: 847 Bytes
  • Content: 
    .modal {
  transition: all .4s ease;
  align-items: center;
  justify-content: center;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  width: 100vw;
  height: 100vh;

  &__overlay {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    background-color: hsla(var(--white-hsl), .4);
  }

  &__trigger { cursor: pointer; }

  &__close {
    cursor: pointer;
    background-color: unset;
    padding: unset;
    border: unset;
    float: right;
    &:after {
      @extend .u-material-icons;
      content: 'close';
    }
  }

  &__window {
    position: relative;
    padding: 40px;
    max-height: 90vh;
    max-width: $single-column;
    overflow-y: scroll;
    background-color: hsla(var(--white-hsl), 1);
    box-shadow: 8px 8px 32px hsla(var(--base-hsl), .1);
  }
}

.modal.modal--shown { display: flex; }
body.modal--shown { overflow: hidden; }
  • URL: /components/raw/modal/modal.scss
  • Filesystem Path: src/components/03-components/modal/modal.scss
  • Size: 904 Bytes

No notes defined.