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

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

$popupPadding: 20px; // Отступ контента внутри попапа
$popupMargin: 20px; // Отступ попапа от краёв окна

@mixin popupBounding($width, $padding: null) {
    @if ($padding == null) {
        $padding: $popupMargin;
    }

    @if ($padding != $popupMargin) {
        margin: $padding auto;
        padding: 0 $padding;
    }

    max-width: $width;
}

.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;

    perspective: 600px;

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

.popupWrapper {
    box-sizing: content-box;
    margin: $popupMargin auto;
    padding: 0 $popupMargin;

    display: inline-block;
    width: 100%;
    vertical-align: middle;

    transition: max-width .3s;
}

.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
 */
$popupInitPosition: translateY(10%) rotateX(-8deg);

.trEnter {
    opacity: 0;

    .popup {
        opacity: 0;
        transform: $popupInitPosition;
    }

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

        .popup {
            opacity: 1;
            transform: translateY(0) rotateX(0deg);
            transition: 0.3s cubic-bezier(0.23, 1, 0.32, 1); // easeOutQuint
        }
    }
}

.trLeave {
    opacity: 1;

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

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

        .popup {
            opacity: 0;
            transform: $popupInitPosition;
            transition: 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); // easeOutQuart
        }
    }
}

.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;
    }
}