_modal.css 2.36 KB
@import "overlay";

.modal {
    position: fixed;
    margin: 0 auto;
    background: #fcfcfc;
    width: 512px;
    z-index: 1001;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    h2 {
        font-size: 32px;
        text-align: center;
        margin-top: 50px;
        margin-bottom: 0;
    }

    p {
        font-size: 30px;
        text-align: center;
        margin: 20px 40px 48px;
    }

    hr {
        border: none;
        border-top: 1px solid #e0e0e0;
        margin: 0;
    }

    .button-group {
        justify-content: space-around;
        align-items: stretch;
        height: 88px;
        text-align: center;

        a.modal-button {
            width: 49%;
            height: 100%;
            display: inline-block;
            text-align: center;
            color: $blue;
            font-size: 30px;
            line-height: 88px;
        }

        :not(:first-child) {
            border-left: 1px solid #e0e0e0;
        }
    }
}

.animation-target {
    animation: animation 1000ms linear both;
}

/* stylelint-disable */

/* Generated with Bounce.js. Edit at http://goo.gl/W7f9he */
@keyframes animation {
    0% {
        transform: translate(-50%, -50%) matrix3d(0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    4.3% {
        transform: translate(-50%, -50%) matrix3d(0.757, 0, 0, 0, 0, 0.757, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    8.61% {
        transform: translate(-50%, -50%) matrix3d(0.939, 0, 0, 0, 0, 0.939, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    12.91% {
        transform: translate(-50%, -50%) matrix3d(1.026, 0, 0, 0, 0, 1.026, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    17.22% {
        transform: translate(-50%, -50%) matrix3d(1.047, 0, 0, 0, 0, 1.047, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    28.33% {
        transform: translate(-50%, -50%) matrix3d(1.01, 0, 0, 0, 0, 1.01, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    39.44% {
        transform: translate(-50%, -50%) matrix3d(0.997, 0, 0, 0, 0, 0.997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    61.66% {
        transform: translate(-50%, -50%) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    83.98% {
        transform: translate(-50%, -50%) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    100% {
        transform: translate(-50%, -50%) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
}

/* stylelint-enable */