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

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

            <figure class="l-entry__media o-fullscreen u-mb-large">
                <div class="o-skeleton o-skeleton-media--horizontal">
                    <img class="u-absolute u-left u-top u-size-full" src="https://unsplash.it/600/338?random" alt="">
                </div>

            </figure>

        </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__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="https://unsplash.it/600/338?random" loading="lazy" alt="">
                        </figure>
                    </div>
                </div>

            </div>

        </div>

    </label>
</form>
<form>
  <label class="c-modal">
    <input class="u-none"  type="checkbox"/>
    
    <div class="u-cursor-pointer">
      {% if modifier=='media' %}
      <figure class="l-entry__media {% if nofull %}{% else %}o-fullscreen{% endif %} u-mb-large">
        <div class="o-skeleton o-skeleton-media--horizontal">
          <img class="u-absolute u-left u-top u-size-full" src="{{media}}" alt="">
        </div>

        {% if media.caption %}
          <figcaption class="u-caption-02 u-color-light u-px-small u-mt-small">{{media.caption}}</figcaption>            
        {% endif %}

      </figure>
      {% 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/600/338?random",
  "title": "Allagamento fosso Bel Poggio 1 (foto Reporter Montesacro) 2",
  "description": "Straripamento torrente Bel Poggio (foto Reporter Montesacro)",
  "action_one": "Chiudi",
  "action_two": "Richiedi info",
  "modifier": "media"
}
  • 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`
    //
    // ========================================================================
    
    $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 {
        transition: top .5s ease-in-out;
        top: -50%;
      }
    
      input {
        &:checked {
          ~ .c-modal__dialog {
            opacity: 1;
            visibility: visible;
            .c-modal__wrap {
              top: 0;
            }
          }
        }
      }
    
      &__media {
        &__close {
          top: $modal-close-position;
          right: $modal-close-position;
          border: 2px solid $ui-01;
          background: $ui-02;
          @include z(high);
        }
        max-width: var(--modal-size);
        margin: 0 auto;
        @include bp(md) {
          --modal-size: 70%;
        }
      }
    
      &__content {
        background: $ui-01;
        border-radius: 2px;
      }
    
      &__footer {
        :first-child {
          margin-right: auto;
        }
        // background: $ui-01;
        border-radius: 2px;
      }
    
      &__textual {
        max-width: var(--modal-size);
        margin: 0 auto;
        max-height: 80vh;
        @include bp(md) {
          --modal-size: 50%;
        }
      }
    
      &__image {
        max-height: 90vh;
      } 
    
      &--orientation {
        display: none;
        height: 100vh;
        @include z(cover);
    
        @media (max-width: 768px) and (orientation: landscape) {
          display: flex;
        }
    
        height: 100vh;
        width: 100vw;
    
        .o-icon {
          animation: rotate 3s infinite ease-in-out;
        }
      }
      
    }
    
    
    
    
  • URL: /components/raw/modal/_modal.scss
  • Filesystem Path: src/lib/components/modal/_modal.scss
  • Size: 1.9 KB

No notes defined.