modal.scss

$outer-space-black: #2E3741;
$modal-box-shadow: $outer-space-black;
$zModal-close: 100;

@mixin modal($width: 680px, $height: 523px) {
    .modal-dialog {
        min-height: $height;
        width: $width;

        & .modal-content {
            box-shadow: 0 5px 15px $modal-box-shadow;
            min-height: $height;
            padding: 48px 80px 24px;
            position: relative;
            width: $width;
        }

        & .modal-header {
            border-bottom: none;
            margin-bottom: 12px;
            padding: 0;
            text-align: center;

            & > h1,
            & > h2,
            & > h3 {
                font-size: 26px;
                margin-bottom: 8px;
                margin-top: 0;
            }

            // subheader
            & > span {
                font-size: 14px;
                font-weight: normal;
            }
        }

        & .modal-body {
            padding: 0;
        }

        & .close {
            background: url('/static/images/close-icon.svg');
            position: absolute;
            right: 24px;
            top: 24px;
            height: 14px;
            opacity: 1;
            width: 14px;
            z-index: zModal-close;

            & > span:first-of-type {
                // hide bootstrap "x"
                display: none;
            }

            &:focus,
            &:hover {
                opacity: 0.7;
            }
        }

        & .modal-footer {
            border-top: none;
            bottom: 24px;
            height: 34px;
            left: 30px;
            padding-top: 5px;
            position: absolute;
            text-align: center;
            width: calc(100% - 60px);
        }
    }
}