Overlays

Default

The default overlay just puts a black overlay on the screen and centers the content inside it.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

<div class="overlay overlay--closed">
	<button class="btn overlay__close">
		<span class="icon btn__item btn__icon">
			<svg></svg>
		</span>
	</button>
	<div class="overlay__body">
		<!-- YOUR CONTENT -->
	</div>
</div>

Notes

To open the Overlay remove the --closed modifier from the overlay class. The close button is optional, you can also implement your own one in the overlay body and remove the default one.

Bottom Overlay

This Overlay should be used in combination of lists, and also if the user gets a prompt that he/she has to answer.

<div class="overlay overlay--closed">
	<!-- ... -->
	<div class="overlay__body overlay__body--bottom">
		<!-- YOUR CONTENT -->
	</div>
</div>

Notes

Add the --bottom modifier to the body.

SCSS

.overlay {
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	width: 100%;
	background: rgba(0, 0, 0, 0.6);
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	&--closed {
		display: none;
	}
	&__close {
		position: absolute;
		right: 25px;
		top: 25px;
		color: #fff;
		z-index: 1001;
		&:hover, &:focus {
			.btn__icon:not(.btn__icon--floating) {
				color: #fff;
			}
		}	
	}
	&__body {
		max-width: 80%;
		@include media-breakpoint-down(xs) {
			max-width: 90%;
		}
		&--bottom {
			position: absolute;
			bottom: 0;
			min-height: 70%;
			border-bottom-left-radius: 0px;
			border-bottom-right-radius: 0px;
			@include media-breakpoint-down(xs) {
				max-width: 100%;
			}
		}
	}
}