mail/src/sass/components/_lightbox.scss

.lightbox {
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 2000;

    @include respond-to(md) {
        margin: 0 auto;
        width: $lightbox-width;
        max-width: $lightbox-max-width;
        height: auto;
        text-align: left;
        backface-visibility: hidden;
    }
    @include respond-to(lg) {
        max-width: $lightbox-max-width + 100px;
    }

    .lightbox-body {
        position: relative;
        height: 100%;
        padding: $lightbox-padding;
        background: #fff;
        backface-visibility: hidden;
        display: flex;
        flex-direction: column;

        @include respond-to(md) {
            max-height: $lightbox-min-height;
        }
        @include respond-to(lg) {
            max-height: $lightbox-min-height + 50px;
        }

        & > header {
            flex-shrink: 0;
            text-align: center;
            position: relative;
            margin-bottom: 15px;
            button.close {
                position: absolute;
                top: 0px;
                right: 0px;
                display: block;
                border: none;
                background: none;
                padding: 0 0 0 40px;
                margin: 0;
                color: $color-grey-dark;
                outline: none;

                svg {
                    height: 1em;
                    width: 1em;
                    fill: $color-grey-dark;
                }

                &.active {
                    top: 2px;
                    right: -2px;
                }
            }
            h2 {
                margin: 0;
                padding: 0;
                font-size: $font-size-bigger;
                font-weight: normal;
                line-height: 1em;
                color: $color-grey-dark;
            }
        }
        & > .content {
            flex-grow: 1;
            overflow: hidden;
        }
    }
}

.lightbox-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    display: none;
    top: 0;
    left: 0;
    z-index: 1000;
    background: $color-grey-dark-alpha;
    overflow: auto;

    @include respond-to(md) {
        @include scut-vcenter-ib(".lightbox");
        text-align: center;
    }

    &.show {
        display: block;
    }

    /* ngAnimate */
    &.show-add {
        display: block;
        opacity: 0;
        @include respond-to(md) {
            transition: opacity 0.3s;
        }
        .lightbox-body {
            transform: scale(0.7);
            @include respond-to(md) {
                transition: transform 0.3s;
            }
        }
    }
    &.show-add-active {
        opacity: 1;
        .lightbox-body {
            transform: scale(1);
        }
    }
    &.show-remove {
        display: block;
        opacity: 1;
        @include respond-to(md) {
            transition: opacity 0.3s;
        }
        .lightbox-body {
            transform: scale(1);
            @include respond-to(md) {
                transition: transform 0.3s;
            }
        }
    }
    &.show-remove-active {
        opacity: 0;
        .lightbox-body {
            transform: scale(0.7);
        }
    }
}