You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
<script lang="ts"> import type { IconName } from "../external/icons"; import { iconNames } from "../external/icons"; import Icon from "./Icon.svelte";
export let value: IconName; export let disabled: boolean; </script>
<div class:disabled class="icon-select"> {#each iconNames as iconName (iconName)} <div class="icon-item" class:selected={value===iconName} on:click={() => {if (!disabled) { value = iconName }}}> <Icon name={iconName} /> </div> {/each} </div>
<style> div.icon-select { background: #222; margin: 0; padding: 0; border-radius: 0.05em; margin-bottom: 0.5em; }
div.icon-select.disabled { background: #444; }
div.icon-item { display: inline-block; box-sizing: border-box; width: calc(100% / 8); padding: 0.35em 0 0.25em 0; text-align: center;
cursor: pointer; } div.icon-item:hover { background-color: #292929; } div.icon-item.selected { background-color: rgb(18, 63, 75); } div.icon-item.selected:hover { background-color: rgb(24, 83, 99); } div.icon-select.disabled > div.icon-item { background-color: #444; cursor: default; } div.icon-select.disabled > div.icon-item.selected { background-color: #555; } </style>
|