FAA Pattern Library - Department of Urban and Regional Planning

Image Modal 

<div class="image-modal image-modal--durp" data-image-modal data-modal-is-open="false">
    <div class="image-modal__container">
        <div class="image-modal__image">
            <button aria-label="close modal" class="image-modal__close-button" data-modal-close-button>
                <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M24 48C37.2548 48 48 37.2548 48 24C48 10.7452 37.2548 0 24 0C10.7452 0 0 10.7452 0 24C0 37.2548 10.7452 48 24 48Z" fill="black" fill-opacity="0.25"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M25 17V23H31L31.1166 22.9933C31.614 22.9355 32 22.5128 32 22L31.9933 21.8834C31.9355 21.386 31.5128 21 31 21H28.416L32 17.5L30.5 16L27 19.586V17L26.9933 16.8834C26.9355 16.386 26.5128 16 26 16C25.4477 16 25 16.4477 25 17ZM16 30.5L17.5 32L21 28.416V31L21.0067 31.1166C21.0645 31.614 21.4872 32 22 32C22.5523 32 23 31.5523 23 31V25H17L16.8834 25.0067C16.386 25.0645 16 25.4872 16 26L16.0067 26.1166C16.0645 26.614 16.4872 27 17 27H19.586L16 30.5Z" fill="white"/>
</svg>
            </button>
            <figure class="captioned-image">
                <picture class="captioned-image__picture">
                    <source srcset="" type="image/webp">
                    <img class="captioned-image__gallery-image" loading="lazy" src="" alt="">
                </picture>
            </figure>

        </div>
    </div>
</div>
 
{% import "bits/macros/imageSource.twig" as imageMacros %}

<div class="image-modal image-modal--{{ siteUnit }}" data-image-modal data-modal-is-open="false">
    <div class="image-modal__container">
        <div class="image-modal__image">
            <button aria-label="close modal" class="image-modal__close-button" data-modal-close-button>
                {% include 'bits/icons/shrink.twig' %}
            </button>
            {{ imageMacros.createHeightOnlyCropWithoutCaption(image, size|default(500)) }}
        </div>
        {% if image.caption %}
            <div class="image-modal__caption">
                {{ image.caption }}
            </div>
        {% endif %}
    </div>
</div>
 
{
  "siteUnit": "durp",
  "departmentName": "Department of Urban and Regional Planning",
  "background": "dark"
}
  • Content: 
    .image-modal
    --captionColor greyDarkest

    &--dark
        --captionColor grey

    &--arch
        --borderColor industrialBlue

    &--art
        --borderColor archesBlue

    &--dance
        --borderColor archesBlue

    &--durp
        --borderColor illiniOrange

    &--theatre
        --borderColor illiniOrange

    background-color rgba(54, 61, 68, 0.75)
    z-index 1
    align-items center
    justify-content center
    left 0
    display flex
    top 0
    transition all 200ms ease-in-out
    width 100%
    height 100vh
    position fixed
    &[data-modal-is-open="false"]
        visibility hidden
        opacity 0
    &[data-modal-is-open="true"]
        visibility visible
        opacity 1

    &__container
        position relative
        background-color #f8f8f8

    &__image
        max-width 100vw
        position relative
        +above(800px)
            max-width 80vw
        img
            max-height 70vh
            max-width 85vw
            height auto
            width auto

    &__caption
        @extends $detail
        border-top 2px solid var(--borderColor)
        color var(--captionColor)
        padding-top 8px
        padding-bottom 38px
        z-index 2
        margin-top 24px
        margin-left 24px
        margin-right 24px

    &__close-button
        position absolute
        right 16px
        top 16px
  • URL: /components/raw/image-modal/image-modal.styl
  • Filesystem Path: components/partials/image-modal/image-modal.styl
  • Size: 1.4 KB

There are no notes for this item.