buttons folder

This commit is contained in:
Jan Prochazka
2022-02-12 17:26:28 +01:00
parent 5a88423f62
commit e06b030707
74 changed files with 81 additions and 107 deletions

View File

@@ -0,0 +1,38 @@
<script lang="ts">
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
export let type = 'button';
export let disabled = false;
export let value;
function handleClick() {
if (!disabled) dispatch('click');
}
</script>
<input {type} {value} class:disabled {...$$restProps} on:click={handleClick} />
<style>
input {
border: 1px solid var(--theme-bg-button-inv-2);
padding: 5px;
margin: 2px;
width: 100px;
background-color: var(--theme-bg-button-inv);
color: var(--theme-font-inv-1);
border-radius: 2px;
}
input:hover:not(.disabled) {
background-color: var(--theme-bg-button-inv-2);
}
input:active:not(.disabled) {
background-color: var(--theme-bg-button-inv-3);
}
input.disabled {
background-color: var(--theme-bg-button-inv-3);
color: var(--theme-font-inv-3);
}
</style>