Fix styles of tag renderer to make it readable but remove hover state

This commit is contained in:
Andrew Kingston 2021-05-21 13:55:17 +01:00
parent 2c1c407e81
commit 1d9ef7f3bf
1 changed files with 23 additions and 10 deletions

View File

@ -9,9 +9,10 @@
$: leftover = roles.length - tags.length $: leftover = roles.length - tags.length
</script> </script>
<div class="tag-renderer">
<Tags> <Tags>
{#each tags as tag} {#each tags as tag}
<Tag disabled> <Tag>
{tag} {tag}
</Tag> </Tag>
{/each} {/each}
@ -19,3 +20,15 @@
<Tag>+{leftover} more</Tag> <Tag>+{leftover} more</Tag>
{/if} {/if}
</Tags> </Tags>
</div>
<style>
.tag-renderer :global(.spectrum-Tags-item:hover) {
color: var(--spectrum-alias-label-text-color);
border-color: var(--spectrum-alias-border-color-darker-default);
cursor: pointer;
}
.tag-renderer :global(.spectrum-Tags-itemLabel) {
cursor: pointer;
}
</style>