espterm-front-end/sass/layout/_modal.scss

.Modal {
	z-index: 100;
	position: fixed;
	width: 100%; height: 100%;
	left: 0; top: 0; right: 0; bottom: 0;

	display: flex;
	justify-content: center;
	align-items: center;

	transition: opacity .5s;
	background: rgba(black, .65);
	opacity: 0;
	&.visible { opacity: 1 }
	&.hidden { display: none }

	&.light {
		background: rgba(black, .25);
	}

	@include media($phone) {
		flex-direction: column;
		justify-content: flex-start;
		overflow-y: auto;
		.Dialog {
			margin-top: dist(-1) !important;
			flex-basis: unset;
			flex-shrink: 0;
		}
	}
}

.Dialog {
	margin: dist(-1);
	padding: dist(0);
	overflow: hidden;

	//max-width: 100%;
	//max-height: 100%;
	flex-basis: 35rem;
	//min-height: 15rem;

	background: $c-modal-bg;//#1c1c1e;
	border-left: 6px solid $c-form-highlight;
	border-right: 6px solid $c-form-highlight;
	//border-top: 1px solid $c-form-highlight;
	//border-bottom: 1px solid $c-form-highlight;
	box-shadow: 0 0 6px 0 black;

	border-radius: 6px;

	h1,h2 {
		margin-top:0;
	}

	p:last-child {
		margin-bottom: 0;
	}
}

// "toast"
.NotifyMsg {
	position: fixed;
	top: dist(1);
	right: dist(2);
	padding: dist(-1) dist(0);

	// center horizontally
	//left: 50%;
	//@include translate(-50%,0);
	// hack to remove blur in chrome
	-webkit-font-smoothing: subpixel-antialiased;
	-webkit-transform: translateZ(0) scale(1.0, 1.0);

	background: #3887d0;
	&.error {
		background: #d03e42;
	}

	color: white;
	text-shadow: 0 0 2px black;
	box-shadow: 0 0 6px 0 rgba(black, .6);
	border-radius: 5px;

	max-width: 600px;

	@include media($phone) {
		width: calc(100% - #{dist(0)});
	}

	transition: opacity .5s;
	opacity: 0;
	&.visible { opacity: 1 }
	&.hidden { display: none }
}