38 lines
964 B
Svelte
38 lines
964 B
Svelte
<script lang="ts">
|
|
let {
|
|
text,
|
|
onClick,
|
|
fullWidth,
|
|
}: {
|
|
text: string;
|
|
onClick: () => undefined;
|
|
fullWidth?: boolean;
|
|
} = $props();
|
|
</script>
|
|
|
|
{#if fullWidth}
|
|
<button class="outlined-button outlined-button-fullwidth" onclick={onClick}>{text}</button>
|
|
{:else}
|
|
<button class="outlined-button" onclick={onClick}>{text}</button>
|
|
{/if}
|
|
|
|
<style>
|
|
.outlined-button {
|
|
font-family: var(--font-mono);
|
|
font-size: var(--font-size-mono);
|
|
padding: 8px;
|
|
border: var(--border-style) var(--border-dash-size) var(--color-highlight);
|
|
color: var(--color-highlight);
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
transition: background-color var(--duration-animation) var(--anim-curve);
|
|
}
|
|
|
|
.outlined-button:hover {
|
|
background-color: var(--color-background-highlight);
|
|
}
|
|
|
|
.outlined-button-fullwidth {
|
|
width: 100%;
|
|
}
|
|
</style> |