anki/ts/editor-toolbar/SquareButton.svelte

88 lines
1.8 KiB
Svelte

<script lang="typescript">
import { getContext } from "svelte";
import type { Readable } from "svelte/store";
import { disabledKey } from "./contextKeys";
export let id = "";
export let className = "";
export let props: Record<string, string> = {};
export let onClick: (event: ClickEvent) => void;
export let active = false;
const disabledStore = getContext(disabledKey);
$: disabled = $disabledStore;
</script>
<style lang="scss">
button {
display: inline-block;
padding: 0;
background-color: white;
&:hover {
background-color: #eee;
}
&:active,
&.active {
box-shadow: inset 0 0 12px 4px rgb(0 0 0 / 30%);
border-color: #aaa;
}
&.active:active {
box-shadow: none;
border-color: var(--border);
}
&[disabled] {
opacity: 0.4;
cursor: not-allowed;
&:hover {
background-color: white;
}
&:active,
&.active {
box-shadow: none;
}
}
}
span {
display: inline-block;
vertical-align: middle;
/* constrain icon */
width: 28px;
height: 28px;
& > :global(svg),
& > :global(img) {
fill: currentColor;
vertical-align: unset;
width: 100%;
height: 100%;
}
}
/* for DropdownMenu */
:global(.dropdown-toggle)::after {
margin-right: 0.25rem;
}
</style>
<button
{id}
class={className}
{...props}
class:active
tabindex="-1"
{disabled}
on:click={onClick}
on:mousedown|preventDefault>
<span class="p-1"><slot /></span>
</button>