primereact/components/overlaypanel/OverlayPanel.css

[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primereact) [![Discord Chat](https://img.shields.io/discord/5579

.p-overlaypanel {
    position: absolute;
    margin-top: 10px;
}

.p-overlaypanel-flipped {
    margin-top: 0;
    margin-bottom: 10px;
}

.p-overlaypanel-close {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}

/* Animation */
.p-overlaypanel-enter {
    opacity: 0;
    transform: scaleY(0.8);
}

.p-overlaypanel-enter-active {
    opacity: 1;
    transform: scaleY(1);
    transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
}

.p-overlaypanel-enter-done {
    transform: none;
}

.p-overlaypanel-exit {
    opacity: 1;
}

.p-overlaypanel-exit-active {
    opacity: 0;
    transition: opacity .1s linear;
}

.p-overlaypanel:after, .p-overlaypanel:before {
	bottom: 100%;
    left: calc(var(--overlayArrowLeft, 0) + 1.25rem);
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.p-overlaypanel:after {
	border-width: 8px;
	margin-left: -8px;
}

.p-overlaypanel:before {
	border-width: 10px;
	margin-left: -10px;
}

.p-overlaypanel-flipped:after, .p-overlaypanel-flipped:before {
    bottom: auto;
    top: 100%;
}

.p-overlaypanel.p-overlaypanel-flipped:after {
    border-bottom-color: transparent;
}

.p-overlaypanel.p-overlaypanel-flipped:before {
    border-bottom-color: transparent
}