From f243dc8d7527cde3d5b5a4f6e659cf7604f5ae2a Mon Sep 17 00:00:00 2001
From: Jakob Stendahl <jakobste@uio.no>
Date: Thu, 21 Oct 2021 14:12:12 +0200
Subject: :sparkles: Make all variable-types changeable from both home and
 editor

---
 src_frontend/ComponentLib/Toggle.svelte | 50 +++++++++++++++++++++++++++++++++
 1 file changed, 50 insertions(+)
 create mode 100644 src_frontend/ComponentLib/Toggle.svelte

(limited to 'src_frontend/ComponentLib')

diff --git a/src_frontend/ComponentLib/Toggle.svelte b/src_frontend/ComponentLib/Toggle.svelte
new file mode 100644
index 0000000..bd24273
--- /dev/null
+++ b/src_frontend/ComponentLib/Toggle.svelte
@@ -0,0 +1,50 @@
+<script>
+    export let checked = false;
+    export let id;
+</script>
+
+<style>
+.toggle {
+    --width: 40px;
+    --height: calc(var(--width) / 2);
+    --border-radius: calc(var(--height) / 2);
+
+    display: inline-block;
+    cursor: pointer;
+}
+.toggle__input {
+    display: none;
+}
+.toggle__fill {
+    position: relative;
+    width: var(--width);
+    height: var(--height);
+    border-radius: var(--border-radius);
+    background: #dddddd;
+    transition: background 0.2s;
+}
+.toggle__fill::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: var(--height);
+    width: var(--height);
+    background: #ffffff;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
+    border-radius: var(--border-radius);
+    transition: transform 0.2s;
+}
+.toggle__input:checked ~ .toggle__fill {
+    background: #009578;
+}
+
+.toggle__input:checked ~ .toggle__fill::after {
+    transform: translateX(var(--height));
+}
+</style>
+
+<label class="toggle" for="{id}">
+    <input class="toggle__input" id="{id}" name="{id}" type="checkbox" bind:checked={checked} on:change>
+    <div class="toggle__fill"></div>
+</label>
\ No newline at end of file
-- 
cgit v1.2.3