@yandex/ui/Popup/_theme/Popup_theme_normal.css

Yandex UI components

/*
 * 1. Предотвращает пропадание тени в iOS. https://st.yandex-team.ru/ISLCOMPONENTS-1710
 */

.Popup2_theme_normal {
    visibility: hidden;

    box-sizing: border-box;
    margin: -9999px 0 0 -9999px;

    border: 1px solid rgba(0, 0, 0, .06);

    animation-duration: .1s;
    animation-timing-function: ease-out;

    animation-fill-mode: forwards;
}

.Popup2_theme_normal .Popup2-TailFill {
    fill: #fff;
}

.Popup2_theme_normal .Popup2-TailBorder {
    fill: rgba(0, 0, 0, .06);
}

.Popup2_theme_normal::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    content: '';

    border-radius: .1px; /* 1 */
    background: #fff;
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, .4);
}

/* NOTE: ISL-5672 */
.Popup2_theme_normal.Popup2_visible::before {
    z-index: -1;
}

.Popup2_theme_normal.Popup2_visible {
    visibility: visible;

    margin: 0;
}

.Popup2_theme_normal.Popup2[data-popper-placement^='bottom'] {
    animation-name: popup2_theme_normal_bottom;
}

.Popup2_theme_normal.Popup2[data-popper-placement^='bottom'].Popup2_visible {
    animation-name: popup2_theme_normal_bottom_visible;
}

.Popup2_theme_normal.Popup2[data-popper-placement^='top'] {
    animation-name: popup2_theme_normal_top;
}

.Popup2_theme_normal.Popup2[data-popper-placement^='top'].Popup2_visible {
    animation-name: popup2_theme_normal_top_visible;
}

.Popup2_theme_normal.Popup2[data-popper-placement^='right'] {
    animation-name: popup2_theme_normal_right;
}

.Popup2_theme_normal.Popup2[data-popper-placement^='right'].Popup2_visible {
    animation-name: popup2_theme_normal_right_visible;
}

.Popup2_theme_normal.Popup2[data-popper-placement^='left'] {
    animation-name: popup2_theme_normal_left;
}

.Popup2_theme_normal.Popup2[data-popper-placement^='left'].Popup2_visible {
    animation-name: popup2_theme_normal_left_visible;
}

@keyframes popup2_theme_normal_bottom {
    0% {
        visibility: visible;

        margin: 0;

        opacity: 1;

        transform: translateY(0);
    }

    99% {
        margin: 0;

        transform: translateY(10px);
    }

    100% {
        visibility: hidden;

        margin: -9999px 0 0 -9999px;

        opacity: 0;
    }
}

@keyframes popup2_theme_normal_bottom_visible {
    0% {
        opacity: 0;

        transform: translateY(10px);
    }

    100% {
        opacity: 1;

        transform: translateY(0);
    }
}

@keyframes popup2_theme_normal_top {
    0% {
        visibility: visible;

        margin: 0;

        opacity: 1;

        transform: translateY(0);
    }

    99% {
        margin: 0;

        transform: translateY(-10px);
    }

    100% {
        visibility: hidden;

        margin: -9999px 0 0 -9999px;

        opacity: 0;
    }
}

@keyframes popup2_theme_normal_top_visible {
    0% {
        opacity: 0;

        transform: translateY(-10px);
    }

    100% {
        opacity: 1;

        transform: translateY(0);
    }
}

@keyframes popup2_theme_normal_right {
    0% {
        visibility: visible;

        margin: 0;

        opacity: 1;

        transform: translateX(0);
    }

    99% {
        margin: 0;

        transform: translateX(10px);
    }

    100% {
        visibility: hidden;

        margin: -9999px 0 0 -9999px;

        opacity: 0;
    }
}

@keyframes popup2_theme_normal_right_visible {
    0% {
        opacity: 0;

        transform: translateX(10px);
    }

    100% {
        opacity: 1;

        transform: translateX(0);
    }
}

@keyframes popup2_theme_normal_left {
    0% {
        visibility: visible;

        margin: 0;

        opacity: 1;

        transform: translateX(0);
    }

    99% {
        margin: 0;

        transform: translateX(-10px);
    }

    100% {
        visibility: hidden;

        margin: -9999px 0 0 -9999px;

        opacity: 0;
    }
}

@keyframes popup2_theme_normal_left_visible {
    0% {
        opacity: 0;

        transform: translateX(-10px);
    }

    100% {
        opacity: 1;

        transform: translateX(0);
    }
}