From 7bdce37fd3f18e2712e18c4e2c64cac69af0aca1 Mon Sep 17 00:00:00 2001
From: Jakob Stendahl <jakob.stendahl@outlook.com>
Date: Sun, 19 Sep 2021 19:43:11 +0200
Subject: :boom: Introduce new UI based on svelte, and rewrite a lot of the
 node app and the NeoRuntime

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

(limited to 'src_frontend/ComponentLib/FloatingSelect.svelte')

diff --git a/src_frontend/ComponentLib/FloatingSelect.svelte b/src_frontend/ComponentLib/FloatingSelect.svelte
new file mode 100644
index 0000000..0d71ca7
--- /dev/null
+++ b/src_frontend/ComponentLib/FloatingSelect.svelte
@@ -0,0 +1,45 @@
+<script>
+    import FloatingButton from "./Button/FloatingButton.svelte";
+    export let value;
+
+    export let faIcon = false;
+    export let backgroundColor = "white";
+    export let color = "black";
+    export let activeBackgroundColor = "gray";
+    export let activeColor = "white";
+    export let active = false;
+    export let label = null;
+</script>
+
+<style>
+    select {
+        text-decoration: none;   
+        -webkit-appearance: none;
+           -moz-appearance: none;
+                appearance: none; 
+        background-color: transparent;
+        border: none;
+        margin: auto;
+        text-align: center;
+    }
+    select:focus {
+        outline: none;
+    }
+    .active {
+        background-color: var(--active-bg-color);
+        color: var(--active-color); 
+    }
+</style>
+<FloatingButton fullWidth=true
+                {faIcon}
+                {label}
+                {backgroundColor}
+                {color}
+                {activeBackgroundColor}
+                {activeColor}
+                {active} >
+    <select on:change
+            bind:value={value}>
+            <slot></slot>
+    </select> 
+</FloatingButton>
\ No newline at end of file
-- 
cgit v1.2.3

