mirror of
https://seed.radicle.dev/rad:z4V1sjrXqjvFdnCUbxPFqd5p4DtH5.git
synced 2026-11-15 19:30:38 +08:00
75 lines
1.5 KiB
Svelte
75 lines
1.5 KiB
Svelte
<script lang="ts" strictEvents>
|
|
export let active: boolean = false;
|
|
export let hoverable: boolean = true;
|
|
export let clickable: boolean = false;
|
|
export let disabled: boolean = false;
|
|
export let size: "small" | "regular" = "regular";
|
|
</script>
|
|
|
|
<style>
|
|
.square-button {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 2rem;
|
|
padding: 0 0.75rem;
|
|
background: var(--color-foreground-1);
|
|
border: none;
|
|
border-radius: var(--border-radius-small);
|
|
color: var(--color-foreground);
|
|
font-family: var(--font-family-monospace);
|
|
font-size: var(--font-size-tiny);
|
|
}
|
|
|
|
.small {
|
|
height: var(--button-tiny-height);
|
|
}
|
|
|
|
.clickable {
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
.active {
|
|
color: var(--color-background);
|
|
background: var(--color-foreground);
|
|
background-color: var(--color-foreground);
|
|
}
|
|
|
|
.active:hover {
|
|
background-color: var(--color-foreground);
|
|
}
|
|
|
|
.hoverable:hover {
|
|
background-color: var(--color-foreground-2);
|
|
}
|
|
|
|
.active.hoverable:hover {
|
|
background-color: var(--color-foreground);
|
|
}
|
|
|
|
.disabled {
|
|
cursor: not-allowed;
|
|
color: var(--color-foreground-5);
|
|
}
|
|
.disabled.active {
|
|
color: var(--color-background);
|
|
}
|
|
.disabled:hover {
|
|
background: var(--color-foreground-1);
|
|
}
|
|
</style>
|
|
|
|
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
<div
|
|
on:click
|
|
class="square-button"
|
|
class:active
|
|
class:hoverable
|
|
class:disabled
|
|
class:small={size === "small"}
|
|
class:clickable>
|
|
<span>
|
|
<slot />
|
|
</span>
|
|
</div>
|