accounts-frontend/src/components/ui/popup/popup.scss

@import '~components/ui/colors.scss';
@import '~components/ui/fonts.scss';

$popupPadding: 20px;

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    z-index: 200;

    background: rgba(#fff, 0.8);

    text-align: center;
    white-space: nowrap;

    overflow-x: hidden;
    overflow-y: auto;

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

.popupWrapper {
    $padding: 20px;
    $maxPopupWidth: 500px;

    display: inline-block;
    width: 100%;
    max-width: $maxPopupWidth + $padding * 2;
    box-sizing: border-box;
    margin: $padding auto;
    padding: 0 $padding;
    vertical-align: middle;
}

.popup {
    white-space: normal;
    text-align: left;

    background: #fff;
    box-shadow: 0 0 10px rgba(#000, 0.2);

    color: #666;

    :invalid {
        button {
            opacity: 0.3;
            pointer-events: none;
        }
    }
}

.header {
    position: relative;
    background: $light;
    padding: 15px $popupPadding;
    border-bottom: 1px solid #dedede;
}

.headerTitle {
    font-size: 20px;
    font-family: $font-family-title;
    text-align: center;
}

.body {
    padding: $popupPadding;
}

.close {
    position: absolute;
    right: 0;
    top: 0;
    padding: 15px;
    cursor: pointer;
    font-size: 20px;
    color: rgba(#000, 0.4);
    background: rgba(#000, 0);
    transition: 0.25s;
    transform: translateX(0);

    &:hover {
        color: rgba(#000, 0.6);
        background: rgba(#fff, 0.75);
    }
}

@media (min-width: 655px) {
    .close {
        position: fixed;
        padding: 35px;
    }
}

/**
 * Transition states
 */
.trEnter {
    opacity: 0;

    .popup {
        opacity: 0;
        transform: translateY(-30%);
    }

    &Active {
        opacity: 1;
        transition: opacity 0.2s ease-in;

        .popup {
            opacity: 1;
            transform: translateY(0);
            transition: 0.2s ease;
        }
    }
}

.trLeave {
    opacity: 1;

    .popup {
        opacity: 1;
        transform: translateY(0);
    }

    &Active {
        opacity: 0;
        transition: opacity 0.2s ease-in;

        .popup {
            opacity: 0;
            transform: translateY(30%);
            transition: 0.2s ease;
        }
    }
}

.trEnter,
.trLeave {
    .close {
        // do not show close during transition, because transform forces position: fixed
        // to layout relative container, instead of body
        opacity: 0;
        transform: translate(100%);
        transition: 0s;
    }
}