diff options
Diffstat (limited to 'src_frontend/ComponentLib/FloatingSelect.svelte')
| -rw-r--r-- | src_frontend/ComponentLib/FloatingSelect.svelte | 45 |
1 files changed, 45 insertions, 0 deletions
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 |