Add a base modal that other modals can expand off of

web-svelte/src/components/modals/BaseModal.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+import { fade, scale } from "svelte/transition";
+import { createEventDispatcher } from "svelte";
+import SciFiButton from "../SciFi-Button.svelte";
+
+const emit = createEventDispatcher();
+
+
+export let open = false;
+function closeModal() {
+	emit(`close`);
+	open = false;
+};
+</script>
+
+{#if open}
+<div class="modal">
+	<div
+		class="background clickable"
+		in:fade
+		out:fade="{{ delay: 200 }}"
+		on:click="{closeModal}"
+	></div>
+	<div
+		class="foreground"
+		in:scale="{{ delay: 400, start: 0, opacity: 1 }}"
+		out:scale="{{ start: 0, opacity: 1 }}"
+	>
+		<SciFiButton
+			classes="close-button"
+			handler={closeModal}
+			height="60"
+			width="60"
+			on:click
+		>
+			<div class="icon-container">
+				<span class="material-icons">
+					close
+				</span>
+			</div>
+		</SciFiButton>
+		<slot></slot>
+	</div>
+</div>
+{/if}
+
+<style lang="scss">
+@import "../../styles/mixins";
+
+.modal {
+	z-index: 100;
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100vw;
+	height: 100vh;
+
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
+	.background {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		background-color: rgba(0,0,0, 0.5);
+	}
+
+	.foreground {
+		z-index: 101;
+		max-height: 80vh;
+		overflow: auto;
+		width: 90%;
+		padding: 15px;
+		position: relative;
+		border-radius: 10px;
+
+		background: var(--dark-but-not-black);
+		color: #FFFFFF;
+
+		.icon-container {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+		}
+
+		:global(.close-button) {
+			position: absolute;
+			top: 10px;
+			right: 10px;
+		}
+
+		@include medium {
+			width: 75%;
+		}
+	}
+}
+</style>