Add a custom checkbox component

web-svelte/src/components/SciFi-Checkbox.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+import { createEventDispatcher } from "svelte";
+
+export let name: string;
+export let id: string;
+
+const emit = createEventDispatcher();
+
+let enabled = false;
+
+function toggleState() {
+	enabled = !enabled;
+	emit(`toggle`, enabled);
+};
+</script>
+
+<label class="container">
+	<slot></slot>
+	<input type="checkbox" {name} {id}>
+	<span class="checkmark"></span>
+</label>
+
+<style lang="scss">
+/* Customize the label (the container) */
+.container {
+	display: inline-flex;
+	align-items: center;
+	position: relative;
+	padding-left: 35px;
+	margin: 10px;
+	cursor: pointer;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	height: 25px;
+
+	input {
+		position: absolute;
+		opacity: 0;
+		cursor: pointer;
+		height: 0;
+		width: 0;
+	}
+}
+
+/* Create a custom checkbox */
+.checkmark {
+	position: absolute;
+	top: 0;
+	left: 0;
+	height: 25px;
+	width: 25px;
+	background-color: #ff0000;
+	border-radius: 12px;
+}
+
+/* On mouse-over, add a grey background color */
+.container:hover input ~ .checkmark {
+	background-color: #a70000;
+}
+
+.container:hover input:checked ~ .checkmark {
+	background-color: #007700;
+}
+
+/* When the checkbox is checked, add a blue background */
+.container input:checked ~ .checkmark {
+	background-color: #00aa00;
+}
+
+/* Create the checkmark/indicator (hidden when not checked) */
+.checkmark:after {
+	content: "";
+	position: absolute;
+	display: none;
+}
+
+/* Show the checkmark when checked */
+.container input:checked ~ .checkmark:after {
+	display: block;
+}
+
+/* Style the checkmark/indicator */
+.checkmark:after {
+	left: 7px;
+	top: 2px;
+	width: 7px;
+	height: 14px;
+	border: solid black;
+	border-width: 0 3px 3px 0;
+	-webkit-transform: rotate(45deg);
+	-ms-transform: rotate(45deg);
+	transform: rotate(45deg);
+}
+</style>