scss [lightbox- SCSS] #ui #scss

Posted 2021-05-17

$grid-gutter-width : 1rem;

// lightbox
$lightbox_small_maxHeight: calc(100vh - 1rem);
$lightbox_small_maxWidth: calc(100vw - 1rem);

$lightbox_medium_mediaMinWidth: 400px;
$lightbox_medium_maxHeight: 90vh;
$lightbox_medium_maxWidth: 90vw;

$lightbox_large_mediaMinWidth: 1200px;
$lightbox_large_maxHeight: 90vh;
$lightbox_large_maxWidth: 70vw;

$lightbox_xxl_mediaMinWidth: 1600px;
$lightbox_xxl_maxHeight: 90vh;
$lightbox_xxl_maxWidth: 1100px;

$lightbox_padding: $grid-gutter-width / 2;
$lightbox_header-height: 1rem;
$lightbox_border_radius: 3px;

// lightbox colors
$lightbox_close-color: #333;
$lightbox_background_content: white;
$lightbox_background_header: #f5f5f5;
$lightbox_border: 1px solid $eee;
$lightbox_overlay_color: transparentize(black, .4);
$lightbox_shadow: 0 2px 5px rgba(0, 0, 0, .2);

.hffLightbox {
    @mixin lb_styles_background {
        background: $lightbox_overlay_color;
    }
    @mixin lb_styles {
        border-radius: $lightbox_border_radius;
        border: $lightbox_border;
        background: $lightbox_background_content;
        box-shadow: 0 2px 5px $lightbox_shadow;
    }
    @mixin lb_styles-header {
        background: $lightbox_background_header;
        border-bottom: $lightbox_border;
    }
    @mixin lb_styles-headline {
        font-weight: bold;
    }
    @mixin lb_styles-content {
    }

    &, & * {
        box-sizing: border-box;
    }
    position: fixed;
    height: 200vh;
    width: 200vw;
    left: -50vw;
    top: -50vh;
    @include lb_styles_background();
    z-index: 1000;

    &-wrapper {
        transition: all ease-in-out .5s;
        animation-name: fadeInLightbox;
        animation-duration: .5s;
        overflow: hidden;
        left: 50%;
        top: 50%;
        max-width: 2000px;
        max-height: $lightbox_small_maxHeight;
        width: $lightbox_small_maxWidth;
        position: absolute;
        transform: translate(-50%, -50%);
        @include lb_styles();
    }
    &-content {
        overflow: auto;
        @include lb_styles-content();
        max-height: calc(#{$lightbox_small_maxHeight} - 4rem);
    }
    &-header {
        overflow: hidden;
        @include lb_styles-header();
        &-headline{
            line-height: 1rem;
            padding-right: calc(#{$lightbox_header-height} * 2);
            overflow: hidden;
            text-overflow: ellipsis;
            max-height: $lightbox_header-height;
            text-transform: uppercase;
            @include lb_styles-headline();
        }
    }
    &-footer {

    }
    &-content, &-header, &-footer {
        padding: $lightbox_padding;
    }
    &-close {
        cursor: pointer;
        position: absolute;
        right: $lightbox_padding;
        top: $lightbox_padding;
        width: $lightbox_header-height;
        height: $lightbox_header-height;
        opacity: 0.7;
        text-indent: -1000;
        font-size: 0;
        &:hover {
            opacity: 1;
        }
        &:before, &:after {
            position: absolute;
            left: 50%;
            top: 0;
            transform: translate(-50%, -50%);
            content: ' ';
            height: $lightbox_header-height;
            width: 2px;
            background-color: $lightbox_close-color;
        }
        &:before {
            transform: rotate(45deg);
        }
        &:after {
            transform: rotate(-45deg);
        }
    }
}

@media (min-width: #{$lightbox_medium_mediaMinWidth}) {
    .hffLightbox-wrapper {
        max-height: $lightbox_medium_maxHeight;
        width: $lightbox_medium_maxWidth;
    }
    .hffLightbox-content {
        max-height: calc(#{$lightbox_medium_maxHeight} - 4rem);
    }
}

@media (min-width: #{$lightbox_large_mediaMinWidth}) {
    .hffLightbox-wrapper {
        max-height: $lightbox_large_maxHeight;
        width: $lightbox_large_maxWidth;
    }
    .hffLightbox-content {
        max-height: calc(#{$lightbox_large_maxHeight} - 4rem);
    }
}
@media (min-width: #{$lightbox_xxl_mediaMinWidth}) {
    .hffLightbox-wrapper {
        max-height: $lightbox_xxl_maxHeight;
        width: $lightbox_xxl_maxWidth;
    }
    .hffLightbox-content {
        max-height: calc(#{$lightbox_xxl_maxHeight} - 4rem);
    }
}