GDL - Global Design Language

Modal: Default 

<form>
    <label class="c-modal">
        <input class="u-none" type="checkbox" />

        <div class="u-cursor-pointer u-mb-large">

            <h2 class="u-heading-05 u-m-none">Open Modal</h2>

        </div>

        <div class="c-modal__dialog u-fixed u-top u-bottom u-right u-left o-bg-base">
            <div class="c-modal__wrap u-absolute u-bottom u-right u-left ">

                <div class="c-modal__textual u-relative u-mt-xlarge u-p-base o-bg-base u-flex u-justify-start u-items-center u-column">

                    <div class="u-flex u-justify-between u-size-full o-divider o-divider--bottom u-pt-base">
                        <h2 class="u-heading-05 u-m-none">Lorem ipsum</h2>
                        <span class="c-modal__close o-link-inverse u-p-xxsmall u-absolute u-radius-circle">
                            <svg class="o-icon o-icon--md u-cursor-pointer">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-x"></use>
                            </svg>
                        </span>
                    </div>

                    <div class="o-divider o-divider--bottom u-overflow-scroll">
                        <div class="u-py-none">
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quas.</p>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quas.</p>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quas.</p>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quas.</p>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quas.</p>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quas.</p>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quas.</p>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quas.</p>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quas.</p>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quas.</p>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quas.</p>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quas.</p>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quas.</p>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quas.</p>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quas.</p>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quas.</p>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quas.</p>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quas.</p>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quas.</p>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quas.</p>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quas.</p>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quas.</p>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quas.</p>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quas.</p>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quas.</p>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quas.</p>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quas.</p>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quas.</p>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quas.</p>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quas.</p>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quas.</p>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quas.</p>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quas.</p>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quas.</p>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quas.</p>
                        </div>
                    </div>

                    <div class="u-pt-medium u-flex u-justify-end u-size-full u-wrap">
                        <button class="c-btn c-btn--default u-label-04 u-cursor-pointer u-mb-base u-ml-small"> Chiudi </button>
                        <button class="c-btn c-btn--primary u-label-04 u-cursor-pointer u-mb-base u-ml-small"> Richiedi info </button>
                    </div>

                </div>

            </div>

        </div>

    </label>
</form>
 
<form>
  <label class="c-modal">
    <input class="u-none"  type="checkbox"/>
    
    <div class="u-cursor-pointer u-mb-large">
      {% if modifier=='media' %}
      <figure class="l-entry__media {% if nofull %}{% else %}o-fullscreen{% endif %}  o-skeleton u-ratio-16-9">
        <picture class="u-size-full">
          <source srcset="{{media}}" xmedia="(min-width: 30em)" type="image/jpeg">
          <img decoding="async" referrerpolicy="no-referrer" class="u-size-full" src="{{media}}" alt="">
        </picture>
      </figure>
      <figcaption class="u-caption-02 u-color-secondary u-pl-small u-pl-none@lg  u-pt-medium u-pt-small@lg u-relative o-bg-base">testo</figcaption>
      {% else %}
      <h2 class="u-heading-05 u-m-none">Open Modal</h2>
      {% endif %}

    </div>

    <div class="c-modal__dialog u-fixed u-top u-bottom u-right u-left o-bg-base">
      <div class="c-modal__wrap u-absolute u-bottom u-right u-left ">
         {% if modifier=='media' %}
        <div class="c-modal__media u-flex u-justify-center u-items-center u-size-full-height">
          <div class="c-modal__content u-relative">
            <span class="c-modal__close o-link-inverse u-p-xxsmall u-absolute u-radius-circle">
              <svg class="o-icon o-icon--md u-cursor-pointer">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-x"></use>
              </svg>
            </span>
            <figure>
              <img decoding="async" referrerpolicy="no-referrer" class="u-p-small c-modal__image" src="{{media}}" loading="lazy" alt="">
            </figure>
          </div>
        </div>
        {% else %}
        <div class="c-modal__textual u-relative u-mt-xlarge u-p-base o-bg-base u-flex u-justify-start u-items-center u-column">

          <div class="u-flex u-justify-between u-size-full o-divider o-divider--bottom u-pt-base">
            <h2 class="u-heading-05 u-m-none">{{title}}</h2>
            <span class="c-modal__close o-link-inverse u-p-xxsmall u-absolute u-radius-circle">
              <svg class="o-icon o-icon--md u-cursor-pointer">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-x"></use>
              </svg>
            </span>
          </div>

          <div class="o-divider o-divider--bottom u-overflow-scroll">
            <div class="u-py-none">
              <p>{{description}}</p>
              <p>{{description}}</p>
              <p>{{description}}</p>
              <p>{{description}}</p>
              <p>{{description}}</p>
              <p>{{description}}</p>
              <p>{{description}}</p>
              <p>{{description}}</p>
              <p>{{description}}</p>
              <p>{{description}}</p>
              <p>{{description}}</p>
              <p>{{description}}</p>
              <p>{{description}}</p>
              <p>{{description}}</p>
              <p>{{description}}</p>
              <p>{{description}}</p>
              <p>{{description}}</p>
              <p>{{description}}</p>
              <p>{{description}}</p>
              <p>{{description}}</p>
              <p>{{description}}</p>
              <p>{{description}}</p>
              <p>{{description}}</p>
              <p>{{description}}</p>
              <p>{{description}}</p>
              <p>{{description}}</p>
              <p>{{description}}</p>
              <p>{{description}}</p>
              <p>{{description}}</p>
              <p>{{description}}</p>
              <p>{{description}}</p>
              <p>{{description}}</p>
              <p>{{description}}</p>
              <p>{{description}}</p>
              <p>{{description}}</p>
            </div>
          </div>

          <div class="u-pt-medium u-flex u-justify-end u-size-full u-wrap">
            <button class="c-btn c-btn--default u-label-04 u-cursor-pointer u-mb-base u-ml-small"> {{action_one}} </button>
            <button class="c-btn c-btn--primary u-label-04 u-cursor-pointer u-mb-base u-ml-small"> {{action_two}} </button>
          </div>

        </div>
        {% endif %}

      </div>

    </div>

  </label>
</form>
 
{
  "action": false,
  "media": "https://unsplash.it/1200/800?random",
  "title": "Lorem ipsum",
  "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quas.",
  "action_one": "Chiudi",
  "action_two": "Richiedi info"
}
  • Content: 
    // Name:            Modal
// Description:     Modal of website
//
// Component:       `c-modal`
//
// Dependencies:    `settings/v7/colors.tokens`
//                  `settings/v7/colors.themes`
//                  `settings/v7/colors.mode`
//                  `settings/v7/global`
//                  `settings/v7/spacing.tokens`
//
// ========================================================================
@use '../../../assets/sass/settings/v7/colors.tokens' as *;
@use '../../../assets/sass/settings/v7/layout-standard' as *;
@use '../../../assets/sass/settings/v7/global' as *;
@use '../../../assets/sass/settings/v7/spacing.tokens' as *;
@use '../../../assets/sass/tools/v7/mq' as *;
@use '../../../assets/sass/tools/v7/zindex' as *;
@use '../../../assets/sass/tools/v7/typography' as *;

$modal-close-position: -12px;

.c-modal {
  --modal-size: 90%;

  &__dialog {
    opacity: 0;
    visibility: hidden;
    background: rgba($ui-02, .5);
    transition: opacity .25s ease;
    @include z(clouds);
  }

  &__close {
    top: 1rem;
    right: 1rem;
    fill: $ui-02;
    @include z(high);
  }

  &__wrap {
    top: -50%;
    transition: top .5s ease-in-out;
  }

  input {
    &:checked {
      ~ .c-modal__dialog {
        opacity: 1;
        visibility: visible;
        .c-modal__wrap {
          top: 0;
        }
      }
    }
  }

  &__media {
    max-width: var(--modal-size);
    margin: 0 auto;
    @include bp(md) {
      --modal-size: 70%;
    }
    &__close {
      top: $modal-close-position;
      right: $modal-close-position;
      border: 2px solid $ui-01;
      background: $ui-02;
      @include z(high);
    }
  }

  &__content {
    background: $ui-01;
    border-radius: 2px;
  }

  &__footer {
    // background: $ui-01;
    border-radius: 2px;
    :first-child {
      margin-right: auto;
    }
  }

  &__textual {
    max-width: var(--modal-size);
    margin: 0 auto;
    max-height: 80vh;
    @include bp(md) {
      --modal-size: 50%;
    }
  }

  &__image {
    max-height: 90svh;
  }  

  &--orientation {
    display: none;
    height: 100vh;

    height: 100vh;
    width: 100vw;
    @include z(cover);

    @media (max-width: 768px) and (orientation: landscape) {
      display: flex;
    }

    .o-icon {
      animation: rotate 3s infinite ease-in-out;
    }
  }
  
}

.c-modal--popover {
  top: 0;
  @supports not selector(:popover-open) {
    /* Questo blocco di codice verrà applicato se il browser NON supporta 'popover' */   
    display: none;
  }
  @include bp(sm){
    height: fit-content;
  }
  &::backdrop{
    backdrop-filter: blur(5px);
    background-color: rgba($ui-02, .8);
    transition: display var(--_duration) var(--ease-4);
    touch-action: none;
  }  
  &__body {
    height: calc(100% - 2*$padding-small);
    @include bp(sm){
      height: auto;
    }
  }
  &__btn {
    @supports not selector(:popover-open) {
      /* Questo blocco di codice verrà applicato se il browser NON supporta 'popover' */   
      display: none;
    }
  }
}
  • URL: /components/raw/modal/_modal.scss
  • Filesystem Path: src/lib/components/modal/_modal.scss
  • Size: 3 KB

Modal

This component serves to show a modal of websites

Variations

Possible variations:

  • Default - a default modal
  • Media - shows a modal of a media
  • Global - shows a checkbox checkable for a Privacy Police
  • Orientation - a modal that appears in landscape mode

Usage

Render modal

In order to display a modal component use following syntax:

  1. for a default modal :
  {% render "@modal--default" %}
  1. for a media modal:
  {% render "@modal--media" %}
  1. for a global modal :
  {% render "@modal--global" %}
  1. for a orientation modal:
  {% render "@modal--orientation" %}