First commit

Lab 7/modal.css

@@ -0,0 +1,95 @@
+/* Modal interactions based on Bootstrap */
+
+.modal {
+	/* The modal covers the entire screent */
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+
+	overflow-x: hidden;
+	overflow-y: auto;
+
+	/* The modal has a dark color */
+	background-color: rgb(33, 37, 41, .5);
+}
+
+.fade:not(.show) {
+	/* When not shown, the modal is see-through and (important!) doesn't capture clicks */
+	pointer-events: none;
+  transition: opacity .15s linear;
+	opacity: 0;
+
+	z-index: -1;
+}
+
+.fade {
+	/* Controls the speed of the fade in/out transitions */
+  transition: opacity .15s linear;
+
+	z-index: 10;
+}
+
+.show {
+	/* When shown, make the dark gray (somewhat transparent) background solid */
+	opacity: 1;
+}
+
+
+/* Controls the drop-down motion of the dialog box */
+.modal-dialog {
+	display: flex;
+	justify-content: center;
+	width: 100%;
+	pointer-events: none;
+	position: relative;
+}
+
+/* When the modal gets the show class added, drop down from 0 to 10vh from the top */
+.modal.show .modal-dialog {
+	transition: transform .3s ease-out;
+	transform: translate(0,10vh);
+}
+
+/* When the modal is dismissed, raise it before making it disappear */
+.modal.fade:not(.show) .modal-dialog {
+	transition: transform .3s ease-out;
+	transform: translate(0,-10vh);
+}
+
+/* Create the box around the modal content */
+.modal-content {
+	pointer-events: auto;
+	background: white;
+	opacity: 1;
+	min-height: 10vh;
+	min-width: 30vw;
+	border: 1px solid rgba(0,0,0,.2);
+	border-radius: .3rem;
+	background-clip: padding-box;
+}
+
+.modal-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 1rem;
+	border-bottom: 1px solid gray;
+}
+
+.modal-header * {
+	margin: 0;
+}
+
+.modal-body {
+	padding: 0rem 1rem;
+}
+
+.modal-footer {
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	border-top: 1px solid gray;
+	padding: 1rem;
+}