More icon updates for consistency

This commit is contained in:
Andrew Kingston 2024-03-13 13:58:42 +00:00
parent f9156765c0
commit 567cbf3ef8
2 changed files with 10 additions and 2 deletions

View File

@ -14,6 +14,7 @@
export let disabled = false export let disabled = false
export let color export let color
export let tooltip export let tooltip
export let newStyles = false
$: rotation = getRotation(direction) $: rotation = getRotation(direction)
@ -28,6 +29,7 @@
<!-- svelte-ignore a11y-click-events-have-key-events --> <!-- svelte-ignore a11y-click-events-have-key-events -->
<div <div
class="icon" class="icon"
class:newStyles
on:mouseover={() => (showTooltip = true)} on:mouseover={() => (showTooltip = true)}
on:focus={() => (showTooltip = true)} on:focus={() => (showTooltip = true)}
on:mouseleave={() => (showTooltip = false)} on:mouseleave={() => (showTooltip = false)}
@ -60,6 +62,9 @@
display: grid; display: grid;
place-items: center; place-items: center;
} }
.newStyles {
color: var(--spectrum-global-color-gray-700);
}
svg.hoverable { svg.hoverable {
pointer-events: all; pointer-events: all;
@ -72,7 +77,10 @@
svg.hoverable:active { svg.hoverable:active {
color: var(--spectrum-global-color-blue-400) !important; color: var(--spectrum-global-color-blue-400) !important;
} }
.newStyles svg.hoverable:hover,
.newStyles svg.hoverable:active {
color: var(--spectrum-global-color-gray-900) !important;
}
svg.disabled { svg.disabled {
color: var(--spectrum-global-color-gray-500) !important; color: var(--spectrum-global-color-gray-500) !important;
pointer-events: none !important; pointer-events: none !important;

View File

@ -65,7 +65,7 @@
{/if} {/if}
<span /> <span />
{#if !empty} {#if !empty}
<Icon name="Copy" hoverable on:click={copy} /> <Icon name="Copy" hoverable newStyles on:click={copy} />
{/if} {/if}
{/if} {/if}
</div> </div>