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.
90 lines
1.9 KiB
90 lines
1.9 KiB
<script lang="ts"> |
|
import Icon from './Icon.svelte'; |
|
|
|
interface Props { |
|
icon: string; |
|
label: string; |
|
size?: number | string; |
|
class?: string; |
|
active?: boolean; |
|
disabled?: boolean; |
|
onclick?: () => void; |
|
} |
|
|
|
let { |
|
icon, |
|
label, |
|
size = 16, |
|
class: className = '', |
|
active = false, |
|
disabled = false, |
|
onclick |
|
}: Props = $props(); |
|
</script> |
|
|
|
<button |
|
class="icon-button {className}" |
|
class:active={active} |
|
class:disabled={disabled} |
|
{onclick} |
|
{disabled} |
|
aria-label={label} |
|
title={label} |
|
> |
|
<Icon name={icon} {size} /> |
|
</button> |
|
|
|
<style> |
|
.icon-button { |
|
display: inline-flex; |
|
align-items: center; |
|
justify-content: center; |
|
padding: 0.25rem 0.75rem; |
|
border: 1px solid var(--fog-border, #e5e7eb); |
|
border-radius: 0.25rem; |
|
background: var(--fog-post, #ffffff); |
|
color: var(--fog-text, #1f2937); |
|
cursor: pointer; |
|
transition: all 0.2s; |
|
font-size: 0.875rem; |
|
line-height: 1.5; |
|
gap: 0.375rem; |
|
} |
|
|
|
:global(.dark) .icon-button { |
|
background: var(--fog-dark-post, #1f2937); |
|
border-color: var(--fog-dark-border, #374151); |
|
color: var(--fog-dark-text, #f9fafb); |
|
} |
|
|
|
.icon-button:hover:not(.disabled) { |
|
background: var(--fog-highlight, #f3f4f6); |
|
border-color: var(--fog-accent, #64748b); |
|
} |
|
|
|
:global(.dark) .icon-button:hover:not(.disabled) { |
|
background: var(--fog-dark-highlight, #374151); |
|
} |
|
|
|
.icon-button.active { |
|
background: var(--fog-accent, #64748b); |
|
color: var(--fog-text, #ffffff); |
|
border-color: var(--fog-accent, #64748b); |
|
} |
|
|
|
:global(.dark) .icon-button.active { |
|
background: var(--fog-dark-accent, #64748b); |
|
color: var(--fog-dark-text, #ffffff); |
|
border-color: var(--fog-dark-accent, #64748b); |
|
} |
|
|
|
.icon-button.disabled { |
|
cursor: not-allowed; |
|
opacity: 0.5; |
|
} |
|
|
|
.icon-button:focus-visible { |
|
outline: 2px solid var(--fog-accent, #64748b); |
|
outline-offset: 2px; |
|
} |
|
</style>
|
|
|