diff options
Diffstat (limited to '')
| -rw-r--r-- | frontend/src/app.css | 52 | ||||
| -rw-r--r-- | frontend/src/lib/components/Select.svelte | 22 |
2 files changed, 31 insertions, 43 deletions
diff --git a/frontend/src/app.css b/frontend/src/app.css index 13a7883..e1b6ca0 100644 --- a/frontend/src/app.css +++ b/frontend/src/app.css @@ -148,33 +148,41 @@ } } -.svelecte-control { - --sv-item-color: inherit !important; - --sv-bg: theme(colors.slate.900) !important; - --sv-disabled-bg: theme(colors.slate.900) !important; - --sv-border: 1px solid rgba(0, 0, 0, 0) !important; - --sv-disabled-border-color: rgba(0, 0, 0, 0) !important; - --sv-border-color: theme(colors.slate.600) !important; - --sv-active-border: 1px solid theme(colors.slate.500) !important; - --sv-item-selected-bg: theme(colors.indigo.800) !important; - --sv-item-active-bg: theme(colors.indigo.800) !important; - --sv-highlight-bg: none !important; - --sv-item-btn-bg-hover: theme(colors.rose.900) !important; - --sv-placeholder-color: theme(colors.gray.500) !important; +.svelecte { + --sv-bg: theme(colors.slate.900); + --sv-disabled-bg: theme(colors.slate.900); + --sv-border: 1px solid rgba(0, 0, 0, 0); + --sv-dropdown-active-bg: theme(colors.indigo.800); + --sv-item-selected-bg: theme(colors.indigo.800); + --sv-item-btn-bg-hover: theme(colors.rose.900); + --sv-item-btn-color-hover: theme(colors.rose.100); + --sv-separator-bg: theme(colors.gray.700); + --sv-min-height: 38px; + --sv-item-wrap-padding: 3px 3px 3px 5px; } -.svelecte-control input { - @apply !h-8; +.svelecte.is-focused { + --sv-border: 1px solid theme(colors.slate.500); } -.exclude .svelecte-control { - --sv-border: 1px solid theme('colors.red.900') !important; - --sv-active-border: 1px solid theme('colors.red.700') !important; +.svelecte input::placeholder { + color: theme(colors.gray.500); +} + +.exclude .svelecte { + --sv-border: 1px solid theme(colors.red.900); + --sv-item-selected-bg: theme(colors.rose.800); + --sv-dropdown-active-bg: theme(colors.rose.800); +} + +.sv-item--btn { + border-radius: 0 2px 2px 0 !important; +} - --sv-item-selected-bg: theme(colors.rose.800) !important; - --sv-item-active-bg: theme(colors.rose.800) !important; +.sv-item--wrap { + border-radius: 2px 0 0 2px !important; } -.sv-dropdown { - @apply my-1 !bg-slate-950; +.sv-item--wrap.in-dropdown { + border-radius: 2px !important; } diff --git a/frontend/src/lib/components/Select.svelte b/frontend/src/lib/components/Select.svelte index f7e87a4..dece4a5 100644 --- a/frontend/src/lib/components/Select.svelte +++ b/frontend/src/lib/components/Select.svelte @@ -1,7 +1,5 @@ <script lang="ts"> import type { ListItem } from '$lib/Utils'; - - // @ts-expect-error Svelecte 3 does not have types, and 4 (which does) is pending stabilization import Svelecte from 'svelecte'; let inputId: string; @@ -17,12 +15,6 @@ export let value: Value; export { inputId as id, valueAsObject as object, multiple as multi }; - - function optionsPlaceholder(from: Value): Item[] { - if (from === undefined || from === null) return []; - - return Array.isArray(from) ? from : [from]; - } </script> {#if options !== null && options !== undefined} @@ -39,17 +31,5 @@ bind:value /> {:else} - <Svelecte - virtualList - valueField="id" - labelField="name" - disabled - options={optionsPlaceholder(value)} - {multiple} - {clearable} - {inputId} - {valueAsObject} - {placeholder} - {value} - /> + <Svelecte {placeholder} /> {/if} |