CSS For Modal Dialog

dialog.css

@keyframes :local(fadeIn) {
    0% {
        background-color: rgba(0, 0, 0, 0);
    }
    100% {
        background-color: rgba(0, 0, 0, 0.3);
    }
}

@keyframes :local(fadeOut) {
    0% {
        background-color: rgba(0, 0, 0, 0.3);
    }
    100% {
        background-color: rgba(0, 0, 0, 0);
    }
}

@keyframes :local(anim-open) {
    0% { opacity: 0; -webkit-transform: scale3d(0, 0, 1); transform: scale3d(0, 0, 1); }
    100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
}

@keyframes :local(anim-close) {
    0% { opacity: 1; }
    100% { opacity: 0; -webkit-transform: scale3d(0.5, 0.5, 1); transform: scale3d(0.5, 0.5, 1); }
}

dialog.less

@import 'variables';
// ref: https://tympanus.net/Development/DialogEffects/sally.html
@import (inline) 'dialog.css';

:local .background {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 100;
    background-color: rgba(0, 0, 0, 0.3);
    animation: fadeIn .5s forwards;

    &.close {
        animation: fadeOut .5s forwards;
        .dialog {
            animation-name: anim-close;
            animation-duration: 0.4s;
            animation-fill-mode: forwards;
            animation-timing-function: cubic-bezier(0.6,0,0.4,1);
        }
    }

    &:before {
        content: '';
        display: inline-block;
        height:100%;
        vertical-align: middle;
    }

    .dialog {
        display: inline-block;
        vertical-align: middle;
        background-color: #fff;
        margin: auto;
        padding: 20px;
        animation-name: anim-open;
        animation-duration: 0.4s;
        animation-fill-mode: forwards;
        animation-timing-function: cubic-bezier(0.6,0,0.4,1);
        .content {
            display: table;
            min-width: 430px;
            max-width: 720px;
            .title_holder {
                display: table-row;
                height: 50px;
                font-weight: bold;
                .title {
                    display: table-cell;
                    line-height: 30px;
                    font-size: 25px;
                }
            }
            .body_holder {
                display: table-row;
                text-align: left;
                .body {
                    display: table-cell;
                    display: inline-block;
                    vertical-align: middle;
                    font-size: 16px;
                    width: 100%;
                    strong {
                        color: @color_green;
                    }
                }
            }
            .buttons {
                display: table-row;
                padding-top: 20px;
                .button {
                    display: inline-block;
                    margin: 20px 2px 0;
                    border: 1px solid @color_border;
                    border-color: @color_green;
                    background-color: @color_green;
                    color: #fff;
                    height: @button_height;
                    line-height: @button_height;
                    cursor: pointer;
                    padding: 0 18px;
                    font-size: @button_font_size;
                    min-width: 220px;
                    &.grey {
                        border-color: @color_clova_btn;
                        background-color: @color_clova_btn;
                    }
                }
            }

            @media screen and (max-width: @breakpoint_pc) {
                min-width: 0px;
            }
        }
    }

}