react-elegant-ui/components/Popup/_view/Popup_view_default.css

Elegant UI components, made by BEM best practices for react

.Popup_view_default {
	visibility: hidden;
	box-sizing: border-box;
	border-radius: var(--popup-border-radius);
	color: var(--popup-view-default-typo-color);
	background-color: var(--popup-view-default-fill-color);
	box-shadow: 0 1.5ex 2ex -1ex rgba(0, 0, 0, 0.3);
	animation-duration: 0.1s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
}

.Popup_view_default::before {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	content: '';
	border-radius: inherit;
	box-shadow: 0 0 0 1px var(--popup-view-default-border-color-shadow);
}

.Popup_view_default.Popup_visible {
	visibility: visible;
}

.Popup_view_default .Popup-Tail::after {
	background: var(--popup-view-default-fill-color);
	box-shadow: 0 0 0 0.15ex var(--popup-view-default-border-color-shadow);
}

/* Setup animations for directions */
.Popup_view_default.Popup[data-popper-placement^='bottom'] {
	animation-name: popup_view_default_bottom;
}

.Popup_view_default.Popup[data-popper-placement^='bottom'].Popup_visible {
	animation-name: popup_view_default_bottom_visible;
}

.Popup_view_default.Popup[data-popper-placement^='top'] {
	animation-name: popup_view_default_top;
}

.Popup_view_default.Popup[data-popper-placement^='top'].Popup_visible {
	animation-name: popup_view_default_top_visible;
}

.Popup_view_default.Popup[data-popper-placement^='right'] {
	animation-name: popup_view_default_right;
}

.Popup_view_default.Popup[data-popper-placement^='right'].Popup_visible {
	animation-name: popup_view_default_right_visible;
}

.Popup_view_default.Popup[data-popper-placement^='left'] {
	animation-name: popup_view_default_left;
}

.Popup_view_default.Popup[data-popper-placement^='left'].Popup_visible {
	animation-name: popup_view_default_left_visible;
}

/* Animations list. All animations shake container */
@keyframes popup_view_default_bottom {
	0% {
		visibility: visible;
		opacity: 1;
		transform: translateY(0);
	}

	99% {
		transform: translateY(10px);
	}

	100% {
		visibility: hidden;
		opacity: 0;
	}
}

@keyframes popup_view_default_bottom_visible {
	0% {
		opacity: 0;
		transform: translateY(10px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes popup_view_default_top {
	0% {
		visibility: visible;
		opacity: 1;
		transform: translateY(0);
	}

	99% {
		transform: translateY(-10px);
	}

	100% {
		visibility: hidden;
		opacity: 0;
	}
}

@keyframes popup_view_default_top_visible {
	0% {
		opacity: 0;
		transform: translateY(-10px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes popup_view_default_right {
	0% {
		visibility: visible;
		opacity: 1;
		transform: translateX(0);
	}

	99% {
		transform: translateX(10px);
	}

	100% {
		visibility: hidden;
		opacity: 0;
	}
}

@keyframes popup_view_default_right_visible {
	0% {
		opacity: 0;
		transform: translateX(10px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes popup_view_default_left {
	0% {
		visibility: visible;
		opacity: 1;
		transform: translateX(0);
	}

	99% {
		transform: translateX(-10px);
	}

	100% {
		visibility: hidden;
		opacity: 0;
	}
}

@keyframes popup_view_default_left_visible {
	0% {
		opacity: 0;
		transform: translateX(-10px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}