style.scss

.dialog__backdrop {
	align-items: center;
	bottom: 0;
	left: 0;
	display: flex;
	justify-content: center;
	position: fixed;
	right: 0;
	top: 46px;
	transition: background-color .2s ease-in;
	z-index: z-index( 'root', '.dialog__backdrop' ); // try to ensure that dialogs are on top of everything else

	&.dialog-enter,
	&.dialog-leave.dialog-leave-active {
		background-color: rgba( lighten( $gray, 30% ), 0 );
	}

	&,
	&.dialog-enter.dialog-enter-active,
	&.dialog-leave {
		background-color: rgba( lighten( $gray, 30% ), 0.8 );
	}

	// covers the masterbar as well
	&.is-full-screen {
		top: 0;
	}
}

.dialog.card {
	position: relative;
	display: flex;
	flex-direction: column;
	max-width: 90%;
	max-height: 90%;
	margin: auto 0; // IE needs a horizontal margin values to properly center flex item
	padding: 0;
	opacity: 1;
	transition: opacity .2s ease-in;

	.dialog-enter &,
	.dialog-leave.dialog-leave-active & {
		opacity: 0;
	}

	&,
	.dialog-enter.dialog-enter-active &,
	.dialog-leave & {
		opacity: 1;
	}
}

.dialog__content {
	padding: 16px;
	overflow-y: auto;

	@include breakpoint( ">480px" ) {
		padding: 24px;
	}

	&:last-child {
		bottom: 0;
	}

	h1 {
		color: $gray-dark;
		font-size: 1.375em;
		font-weight: 600;
		height: 2em;
		line-height: 2em;
		margin-bottom: .5em;
	}
}

.dialog__action-buttons {
	position: relative;
	border-top: 1px solid lighten( $gray, 30% );
	padding: 16px;
	margin: 0;
	text-align: right;

	@include breakpoint( ">480px" ) {
		padding-left: 24px;
		padding-right: 24px;
	}

	&:before {
		content: "";
		display: block;
		position: absolute;
		bottom: 100%;
		left: 16px;
		right: 16px;
		height: 24px;
		background: linear-gradient( to bottom, rgba( 255,255,255, 0 ) 0%, rgba( 255,255,255, 1 ) 100% );
		margin-bottom: 1px;
	}
}

.dialog__action-buttons .button {
	margin-left: 10px;
	min-width: 80px;

	.is-left-aligned {
		margin-left: 0;
		margin-right: 10px;
	}
}

.dialog__action-buttons .is-left-aligned {
	float: left;
}

.ReactModal__Body--open {
	overflow: hidden;
}