wikijs/client/scss/components/modal.scss

.modal {
	align-items: flex-start;
	display: block;

	&.is-superimposed {
		.modal-background {
			z-index: 20;
		}
		.modal-container {
			z-index: 21;
		}
	}

}
.modal-background {
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	position: fixed;
	background-color: rgba(0,0,0,0.85);
	z-index: 10;

  &-enter-active {
    animation: .4s ease fadeIn;
  }
  &-leave-active {
    animation: .4s ease fadeOut;
  }

}
.modal-container {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 11;
	display: flex;
	justify-content: center;
	align-items: center;
}
.modal-content {
	width: 600px;
	background-color: #FFF;

  &-enter-active {
    animation: .3s ease zoomIn;
  }
  &-leave-active {
    animation: .3s ease zoomOut;
  }

	&.is-expanded {
		align-self: stretch;
		width: 100%;
		margin: 20px;
		display: flex;
		flex-direction: column;

		> section {
			flex-grow: 1;
		}

	}

	header {
		background-color: mc('teal', '600');
		color: #FFF;
		display: flex;
		flex-shrink: 0;
		height: 40px;
		align-items: center;
		font-weight: 400;
		font-size: 16px;
		padding: 0 20px;
		position: relative;

		@each $color, $colorvalue in $material-colors {
			&.is-#{$color} {
				background-color: mc($color, '600');
			}
		}

		.modal-notify {
			position: absolute;
			display: none;
			align-items: center;
			height: 40px;
			right: 20px;
			top: 0;

			&.is-active {
				display: flex;
			}

			span {
				font-size: 12px;
				letter-spacing: 1px;
				text-transform: uppercase;
			}

			i {
				margin-left: 15px;
				display: inline-block;
				@include spinner(#FFF, .5s, 20px);
			}

		}

	}

	section {
		padding: 20px;
		border-top: 1px dotted mc('grey', '300');

		&:first-of-type {
			border-top: none;
			padding-top: 20px;
		}
		&:last-of-type {
			padding-bottom: 20px;
		}

		&.is-gapless {
			padding: 10px;
			display: flex;
		}

		&.modal-loading {
			display: flex;
			flex-direction: column;
			align-items: center;

			> i {
				display: block;
				@include spinner(mc('blue','500'), .4s, 32px);
				margin-bottom: 10px;
			}

			> span {
				color: mc('grey', '600');
			}

			> em {
				font-size: 12px;
				color: mc('grey', '500');
				font-style: normal;
			}

		}

		&.modal-instructions {
			display: flex;
			flex-direction: column;
			align-items: center;
			color: mc('grey', '800');

			img {
				height: 100px;

				& + * {
					margin-top: 10px;
				}

			}

			i.is-huge {
				font-size: 72px;
				margin-bottom: 10px;
			}

			> span {
				color: mc('grey', '800');
			}

			> em {
				font-size: 12px;
				color: mc('grey', '600');
				font-style: normal;
				margin-top: 10px;
				display: block;
			}

		}

		.bullets {
			list-style-type: square;
			padding: 5px 0 0 30px;
			font-size: 14px;
			color: mc('grey', '800');
		}

		.note {
			display: block;
			margin-top: 10px;
			font-size: 14px;
			color: mc('grey', '800');

			&:first-child {
				margin-top: 0;
			}

			ul {
				color: mc('grey', '800');
				padding-left: 10px;

				li {
					margin-top: 5px;
					display: flex;
					align-items: center;

					> i {
						margin-right: 8px;
						font-size: 18px;
					}

				}
			}

		}

	}

	footer {
		padding: 20px;
		text-align: right;

		.button {
			margin-left: 10px;
		}

	}

}

.modal-toolbar {
	background-color: mc('teal', '700');
	padding: 7px 20px;
	display: flex;
	flex-shrink: 0;
	justify-content: center;

	@each $color, $colorvalue in $material-colors {
		&.is-#{$color} {
			background-color: mc($color, '700');

			.button {
				border-color: mc($color, '900');
				background-color: mc($color, '900');

				&:hover {
					border-color: mc($color, '900');
					background-color: mc($color, '800');
				}

			}

		}
	}

	// BUTTONS

	.button {
		border: 1px solid mc('teal', '900');
		background-color: mc('teal', '900');
		transition: all .4s ease;
		color: #FFF;
		border-radius: 0;

		&:first-child {
			border-top-left-radius: 4px;
			border-bottom-left-radius: 4px;
		}

		&:last-child {
			border-top-right-radius: 4px;
			border-bottom-right-radius: 4px;
		}

		&:hover {
			border-color: mc('teal', '900');
			background-color: mc('teal', '800');
			color: #FFF;
		}

	}

	.button + .button {
		margin-left: 1px;
	}

}

.modal-sidebar {

	background-color: mc('teal', '50');
	padding: 0;
	//padding: 7px 20px;

	@each $color, $colorvalue in $material-colors {
		&.is-#{$color} {
			background-color: mc($color, '50');

			.model-sidebar-header {
				background-color: mc($color, '100');
				color: mc($color, '800');
			}

			.model-sidebar-list > li a {
				&:hover {
					background-color: mc($color, '200');
				}
				&.is-active {
					background-color: mc($color, '500');
				}
			}

		}
	}

	.model-sidebar-header {
		padding: 7px 20px;
	}

	.model-sidebar-content {
		padding: 7px 20px;
	}

	.model-sidebar-list {

		> li {
			padding: 0;

			a {
				display: flex;
				align-items: center;
				height: 34px;
				padding: 0 20px;
				cursor: pointer;
				color: mc('grey', '800');

				&:hover {
					background-color: mc('teal', '200');
				}

				&.is-active {
					color: #FFF;
				}

				i {
					margin-right: 7px;
				}

			}

		}

	}

}

.modal-content .card-footer-item.featured {
	animation: flash 4s ease 0 infinite;
}