Practice/_src/admin/scss/plugins/ax5ui/_ax5modal.scss

//==============
//== modal
$ax5modal-z-index: 2000 !default;
$ax5modal-box-model: border-box !default;
$ax5modal-bg: #fff !default;
$ax5modal-border: 1px solid #ddd !default;
$ax5modal-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.60) !default;
$ax5modal-body-padding: 0px !default;
$ax5modal-header-padding: 10px 15px !default;

$ax5modal-header-addon-padding: 10px 10px !default;
$ax5modal-header-addon-btn-padding: 0px 2px !default;

$ax5modal-border-radius: 4px !default;
$ax5modal-easing-time-open: 0.3s !default;
$ax5modal-easing-time-close: 0.3s !default;
$ax5modal-easing-open: $ease-out-back !default;
$ax5modal-easing-close: $ease-out-back !default;

//== modal resizer
$ax5modal-resizer-bg: #ccc !default;
$ax5modal-resizer-border: 1px solid #ff0000 !default;
$ax5modal-resizer-box-shaodw: 0px 0px 5px 0px rgba(0, 0, 0, 0.60) !default;
$ax5modal-resizer-opacity : 0.3 !default;

//** Border color for elements within dialog
$ax5modal-default-text: #222 !default;
$ax5modal-default-border: 1px solid #ddd !default;
$ax5modal-default-header-bg: #f5f5f5 !default;

@mixin ax-modal() {
    box-sizing: border-box;
    *,
    *:before,
    *:after {
        box-sizing: border-box;
    }

    background-color: $ax5modal-bg;
    border: $ax5modal-border;

    @include ax-border-radius($ax5modal-border-radius);
    @include box-shadow($ax5modal-box-shadow);

    z-index: $ax5modal-z-index;
    position: fixed;
    left: 0px;
    top: 0px;
    //overflow: hidden;
    box-sizing: content-box;
}

@mixin ax-modal-section() {
    .ax-modal-header {
        user-select: none;
        //font-size: 1em;
        font-weight: 600;
        padding: $ax5modal-header-padding;
        border-bottom: 1px solid transparent;
        border-top-left-radius: $ax5modal-border-radius;
        border-top-right-radius: $ax5modal-border-radius;

        cursor: move;
        .ax-modal-header-addon{
            position: absolute;
            right: 0px;
            top: 0px;
            padding: $ax5modal-header-addon-padding;
            [data-modal-header-btn]{
                border: 0;
                padding: $ax5modal-header-addon-btn-padding;
                background: transparent;
                display: inline-block;
                text-align: center;
                cursor: pointer;
                outline: 0;
            }
        }
    }
    .ax-modal-body {
        border-bottom-left-radius: $ax5modal-border-radius;
        border-bottom-right-radius: $ax5modal-border-radius;

        padding: $ax5modal-body-padding;
        text-align: center;
        @include flex(1);
        position: relative;
        overflow: hidden;

        iframe {
            border: 0 none;
        }

        .fadeIn{
            @include animation(ax-modal-fade-in $ax5modal-easing-time-open $ease-out-back forwards);
        }
        .fadeOut{
            @include animation(ax-modal-fade-out $ax5modal-easing-time-open $ease-out-back forwards);
        }
    }
}

@mixin modal-variant($text-color, $border, $header-bg-color) {
    .ax-modal-header {
        color: $text-color;
        background: $header-bg-color;
        .ax-modal-header-addon{
            a{
                color: $text-color;
                outline: 0;
            }
        }
    }
    .ax-modal-body {

    }
}

@include keyframes(ax-modal) {
    0% {
        opacity: 0.0;
        //@include transform(translateY(20%));
        @include transform(scale(0.8));
    }
    100% {
        opacity: 1.0;
        @include transform(scale(1.0));
    }
    /*
    0% {
        opacity: 0.0;
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    0.1% {
        opacity: 1.0;
        -webkit-transform: matrix3d(0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    5.9% {
        -webkit-transform: matrix3d(0.711, 0, 0, 0, 0, 0.742, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(0.711, 0, 0, 0, 0, 0.742, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    7.7% {
        -webkit-transform: matrix3d(0.768, 0, 0, 0, 0, 0.812, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(0.768, 0, 0, 0, 0, 0.812, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    11.5% {
        -webkit-transform: matrix3d(0.869, 0, 0, 0, 0, 0.935, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(0.869, 0, 0, 0, 0, 0.935, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    11.7% {
        -webkit-transform: matrix3d(0.873, 0, 0, 0, 0, 0.94, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(0.873, 0, 0, 0, 0, 0.94, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    15.2% {
        -webkit-transform: matrix3d(0.941, 0, 0, 0, 0, 1.014, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(0.941, 0, 0, 0, 0, 1.014, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    17.5% {
        -webkit-transform: matrix3d(0.973, 0, 0, 0, 0, 1.045, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(0.973, 0, 0, 0, 0, 1.045, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    19% {
        -webkit-transform: matrix3d(0.99, 0, 0, 0, 0, 1.058, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(0.99, 0, 0, 0, 0, 1.058, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    22.8% {
        -webkit-transform: matrix3d(1.019, 0, 0, 0, 0, 1.071, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1.019, 0, 0, 0, 0, 1.071, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    23.2% {
        -webkit-transform: matrix3d(1.021, 0, 0, 0, 0, 1.071, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1.021, 0, 0, 0, 0, 1.071, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    30.3% {
        -webkit-transform: matrix3d(1.036, 0, 0, 0, 0, 1.049, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1.036, 0, 0, 0, 0, 1.049, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    30.4% {
        -webkit-transform: matrix3d(1.036, 0, 0, 0, 0, 1.049, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1.036, 0, 0, 0, 0, 1.049, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    37.5% {
        -webkit-transform: matrix3d(1.028, 0, 0, 0, 0, 1.016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1.028, 0, 0, 0, 0, 1.016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    44.6% {
        -webkit-transform: matrix3d(1.016, 0, 0, 0, 0, 0.997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1.016, 0, 0, 0, 0, 0.997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    50.3% {
        -webkit-transform: matrix3d(1.008, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1.008, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    51.7% {
        -webkit-transform: matrix3d(1.006, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1.006, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    70.3% {
        -webkit-transform: matrix3d(0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    80.3% {
        -webkit-transform: matrix3d(0.999, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(0.999, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    100% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    */
}

@include keyframes(ax-modal-destroy) {
    /*
    from {
        @include transform(scale(1));
        opacity: 1.0;
    }
    to {
        @include transform(scale(0.5));
        opacity: 0.0;
    }
    */
    100% {
        opacity: 0.0;
        @include transform(translateY(20%));
    }
    0% {
        opacity: 1.0;
        @include transform(translateY(0));
    }

}

@include keyframes(ax-modal-fullscreen) {
    0% {
        @include transform(translateY(20%));
    }
    100% {
        @include transform(translateY(0));
    }
}

@include keyframes(ax-modal-fullscreen-destroy) {
    0% {
        @include transform(translateY(0));
    }
    100% {
        @include transform(translateY(100%));
    }
}

@include keyframes(ax-modal-fade-in){
    0% {
        opacity: 0.0;
    }
    100% {
        opacity: 1.0;
    }
}

@include keyframes(ax-modal-fade-out){
    0% {
        opacity: 1.0;
    }
    100% {
        opacity: 0.0;
    }
}

// mixins --------------------------------------------- end

.ax5modal {
    * {
        box-sizing: border-box;
    }
    *:before,
    *:after {
        box-sizing: border-box;
    }

    @include animation(ax-modal $ax5modal-easing-time-open $ax5modal-easing-open forwards);
    @include transform(translateZ(0px));
    //@include transition(all $ax5modal-easing-time-open linear);

    @include ax-modal();
    @include ax-modal-section();
    @include modal-variant($ax5modal-default-text, $ax5modal-default-border, $ax5modal-default-header-bg);

    &.destroy {
        @include animation(ax-modal-destroy $ax5modal-easing-time-close $ax5modal-easing-close forwards);
    }

    &.fullscreen {
        border: 0px none;
        @include ax-border-radius(0px);
        @include box-shadow(none);
        @include animation(ax-modal-fullscreen $ax5modal-easing-time-open $ease-out-back forwards);

        &.destroy {
            @include animation(ax-modal-fullscreen-destroy $ax5modal-easing-time-close $ease-out-expo forwards);
        }
    }

    &.draged{
        .ax-modal-header {
            opacity: 0.5;
        }
        .ax-modal-body {
            opacity: 0.5;
        }
    }
    [data-ax5modal-resizer]{
        position: absolute;
        display: block;
        &:before{
            position: absolute;
            content: ' ';
            display: block;
            width: auto;
            height: auto;
            left: auto;
            top: auto;
            right: auto;
            bottom: auto;
            //background: #ff3300;
            //opacity: 0.3;
        }

        &[data-ax5modal-resizer="top"]{
            left: 0;
            top: 0;
            width: 100%;
            height: 0;

            &:before{
                width: 100%;
                height: 8px;
                left: 0;
                top: -4px;
                cursor: row-resize;
            }
        }
        &[data-ax5modal-resizer="bottom"]{
            left: 0;
            bottom: 0;
            width: 100%;
            height: 0;

            &:before{
                width: 100%;
                height: 8px;
                left: 0;
                top: -4px;
                cursor: row-resize;
            }
        }
        &[data-ax5modal-resizer="left"]{
            left: 0;
            top: 0;
            width: 0;
            height: 100%;

            &:before{
                width: 8px;
                height: 100%;
                left: -4px;
                top: 0;
                cursor: col-resize;
            }
        }
        &[data-ax5modal-resizer="right"]{
            right: 0;
            top: 0;
            width: 0;
            height: 100%;

            &:before{
                width: 8px;
                height: 100%;
                left: -4px;
                top: 0;
                cursor: col-resize;
            }
        }
        &[data-ax5modal-resizer="top-left"]{
            left: 0;
            top: 0;
            width: 0;
            height: 0;

            &:before{
                width: 8px;
                height: 8px;
                left: -4px;
                top: -4px;
                cursor: nwse-resize;
            }
        }
        &[data-ax5modal-resizer="top-right"]{
            right: 0;
            top: 0;
            width: 0;
            height: 0;

            &:before{
                width: 8px;
                height: 8px;
                left: -4px;
                top: -4px;
                cursor: nesw-resize;
            }
        }
        &[data-ax5modal-resizer="bottom-left"]{
            left: 0;
            bottom: 0;
            width: 0;
            height: 0;

            &:before{
                width: 8px;
                height: 8px;
                left: -4px;
                top: -4px;
                cursor: nesw-resize;
            }
        }
        &[data-ax5modal-resizer="bottom-right"]{
            right: 0;
            bottom: 0;
            width: 0;
            height: 0;

            &:before{
                width: 8px;
                height: 8px;
                left: -4px;
                top: -4px;
                cursor: nwse-resize;
            }
        }
    }
}

// resizer가 활성화 되면 리사이저 백그라운드도 함께 활성화 됩니다. 백그라운드는 페이지 전체를 투명 레이어로 덮어 리사이저가 자유롭게 활동 하도록 도와 줍니다.
.ax5modal-resizer-background{
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: $ax5modal-z-index;
    //opacity: 0.1;
    cursor: move;
}
.ax5modal-resizer{
    position: absolute;
    left: 0px;
    top: 0px;

    z-index: $ax5modal-z-index + 1;
    cursor: move;

    box-sizing: $ax5modal-box-model;
    background-color: $ax5modal-resizer-bg;
    border: $ax5modal-resizer-border;
    opacity: $ax5modal-resizer-opacity;

    @include ax-border-radius($ax5modal-border-radius);
    @include box-shadow($ax5modal-box-shadow);
}