robin - final version

frontend/src/lib/components/widgets/Worldcard/selectbox.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+    import { createEventDispatcher } from "svelte"
+    export let abbriviation
+    export let name
+    export let focused = false
+    let dispatcher = createEventDispatcher()
+    $: {
+        dispatcher("click", focused)
+    }
+</script>
+
+<button class="selectbox" on:click="{() => (focused = !focused)}" class:focused="{focused}">
+    <div class="abbriviation">{abbriviation}</div>
+    <div class="name">{name}</div>
+</button>
+
+<style lang="less">
+    @import "../../../assets/css/main.less";
+    .selectbox {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        color: @font-color-secondary;
+        padding: 5px;
+        height: 30px;
+        border-radius: 15px;
+        font-size: 0.7rem;
+        transition: width 0.5s ease-in-out;
+        background-color: transparent;
+        border: 2px solid @bg-color;
+        .abbriviation {
+            padding-right: 10px;
+        }
+        .name {
+            padding-right: 10px;
+        }
+        &.focused {
+            width: fit-content;
+            background-color: @bg-color;
+            color: @font-color;
+            .abbriviation {
+                font-weight: bold;
+            }
+        }
+    }
+</style>