react-elegant-ui/components/Modal/Modal.css

Elegant UI components, made by BEM best practices for react

/*
* 1. enable 3d acceleration to fix bug when inner content is disappear with `-webkit-overflow-scrolling: touch` on mobile safari
* source: https://github.com/bem/yandex-ui/blob/036885bc9d32db5645d74da0507a1e951d9ca2e0/src/Modal/Modal.css
*/

.Modal {
	position: fixed;
	z-index: 1300;
	top: 0;
	left: 0;

	display: none;

	width: 100%;
	height: 100%;
}

.Modal-Wrapper {
	position: fixed;
	top: 0;
	left: 0;

	overflow-y: auto;
	-webkit-overflow-scrolling: touch;

	width: 100%;
	height: 100%;
}

.Modal-Wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	flex-wrap: wrap;
}

.Modal.Modal_visible {
	display: block;
}

.Modal-Cell {
	max-width: 100%;
	box-sizing: border-box;
	text-align: center;
}

.Modal-Cell_align_top {
	vertical-align: top;
}

.Modal-Cell_align_middle {
	vertical-align: middle;
}

.Modal-Cell_align_bottom {
	vertical-align: bottom;
}

.Modal-Content {
	position: relative;
	z-index: 1;

	display: inline-block;

	text-align: left;

	border-radius: var(--modal-border-radius);
	outline: none;

	transform: translate3d(0, 0, 0); /* 1 */

	max-width: 100%;
}

.Modal-Overlay {
	position: fixed;
	top: 0;
	left: 0;

	width: 100%;
	height: 100%;
	touch-action: none;

	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}