about summary refs log tree commit diff stats
path: root/src/pages/components/Select.svelte
blob: 7829c53e0ea48bdd30a7c49acfa7e8e7295ec9b9 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<script>
  export let values
  export let value
  export let onChange
  export let ariaLabel
</script>

<select bind:value on:change={onChange} aria-label={ariaLabel} on:change on:contextmenu on:input>
  {#each values as option}
    <option value={option.value}>{option.name}</option>
  {/each}
</select>

<style>
  select {
    font-weight: bold;
    box-sizing: border-box;
    border-style: solid;
    border-color: #767676;
    color: var(--text);
    font-size: 16px;
    padding: 8px;
    background-color: var(--bg-secondary);
    border: none;
    margin: 0;
    max-width: 500px;
    border-radius: 3px;
  }

  select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
</style>