38 lines
902 B
Svelte
38 lines
902 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: dashed 2px var(--color-highlight);
|
||
|
|
color: var(--color-highlight);
|
||
|
|
font-weight: 700;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: background-color 0.05s ease-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
.outlined-button:hover {
|
||
|
|
background-color: var(--color-background-highlight);
|
||
|
|
}
|
||
|
|
|
||
|
|
.outlined-button-fullwidth {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
</style>
|