Web Design Guide 2023-12-11 10:29:21 | 2.0.0

Lightbox 

<div class="mfp-bg mfp-ready"></div>
<div class="mfp-wrap mfp-close-btn-in mfp-auto-cursor mfp-ready" tabindex="-1" style="overflow: hidden auto;">
    <div class="mfp-container mfp-s-ready mfp-inline-holder">
        <div class="mfp-content">
            <div class=" media lightbox -lightboxed">
                <img class="media__item" src="/demo/1000x1000.png" alt=zoomable image>
            </div>

        </div>
    </div>
</div>
 
<div class="mfp-bg mfp-ready"></div>
<div class="mfp-wrap mfp-close-btn-in mfp-auto-cursor mfp-ready" tabindex="-1" style="overflow: hidden auto;">
  <div class="mfp-container mfp-s-ready mfp-inline-holder">
    <div class="mfp-content">
      {{render '@atoms-media--image-lightbox' image merge=true}}
    </div>
  </div>
</div>
 
{
  "image": {
    "modifiers": "-lightboxed"
  }
}
  • Content: 
    /* Lightbox */

$height: 42.8rem; //max height in lightbox

//Styling plugin close button
.lightbox.-lightboxed {
  @each $size in $breakpoint-classes {
    @include breakpoint($size) {
      $infix: breakpoint-infix($size);

      @each $name, $aspect-ratio in $aspect-ratios {
        &.-ar#{$infix}-#{$name} {
          @include height-by-aspect-ratio($aspect-ratio, 4rem, 3.2rem);
        }
      }
    }
  }

  .mfp-close {
    $symbol-close: map-get($icons, 'cross');

    @include typography-level('button');

    top: 0;
    right: 0;
    width: auto;
    height: auto;
    opacity: 1;
    outline: 0 none;
    border: 0 none;
    background: $white;
    line-height: 1;
    color: $black;
    cursor: pointer;

    @each $breakpoint, $gutter in $grid-gutters {
      @include breakpoint($breakpoint) {
        $gutter: rem-calc($gutter);
        padding: $gutter / 2;
      }
    }

    &::before {
      @include icon-content-extended($symbol-close);
    }

    &:hover,
    &:focus {
      color: $primary;
    }

    &:active {
      top: 0;
    }
  }
}
  • URL: /components/raw/lightbox/_lightbox.scss
  • Filesystem Path: src/components/03-css-utilities/02-helpers/lightbox/_lightbox.scss
  • Size: 1.1 KB

There are no notes for this item.