css for command palette

This commit is contained in:
Jan Prochazka
2021-03-22 19:01:57 +01:00
parent 5531705433
commit 15c9e93e8a

View File

@@ -72,6 +72,7 @@
<div class="search"> <div class="search">
<input type="text" bind:this={domInput} bind:value={filter} on:keydown={handleKeyDown} /> <input type="text" bind:this={domInput} bind:value={filter} on:keydown={handleKeyDown} />
</div> </div>
<div class="content">
{#each filteredItems as command, index} {#each filteredItems as command, index}
<div class="command" class:selected={index == selectedIndex} on:click={() => handleCommand(command)}> <div class="command" class:selected={index == selectedIndex} on:click={() => handleCommand(command)}>
<div>{command.text}</div> <div>{command.text}</div>
@@ -80,15 +81,20 @@
{/if} {/if}
</div> </div>
{/each} {/each}
</div>
</div> </div>
<style> <style>
.main { .main {
width: 500px; width: 500px;
max-height: 500px;
background: var(--theme-bg-2); background: var(--theme-bg-2);
padding: 5px; padding: 5px;
} }
.content {
max-height: 400px;
overflow-y: scroll;
}
.search { .search {
display: flex; display: flex;
} }