You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
53 lines
1.1 KiB
53 lines
1.1 KiB
<script lang="ts">
|
|
import { createEventDispatcher } from "svelte";
|
|
import type { ModalData } from "../stores/modal";
|
|
import modalStore from "../stores/modal";
|
|
|
|
export let open: ModalData = {name: "none"};
|
|
export let disabled: boolean = false;
|
|
export let compact: boolean = false;
|
|
|
|
const dispatch = createEventDispatcher();
|
|
|
|
function handleClick() {
|
|
dispatch("click", {open});
|
|
|
|
if (open.name !== "none") {
|
|
modalStore.set(open);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<div class="boi" class:disabled class:compact on:click={handleClick}><slot></slot></div>
|
|
|
|
<style>
|
|
div.boi {
|
|
border: 6px dashed;
|
|
padding: 0.5em;
|
|
margin: 1em 0.5ch;
|
|
text-align: center;
|
|
color: #777;
|
|
border-color: #333;
|
|
cursor: pointer;
|
|
border-bottom-right-radius: 0.25em;
|
|
font-size: 2em;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
}
|
|
div.boi:hover {
|
|
color: #AAA;
|
|
border-color: #444;
|
|
}
|
|
|
|
div.boi.disabled {
|
|
color: #333;
|
|
border-color: #222;
|
|
cursor: wait;
|
|
}
|
|
|
|
div.boi.compact {
|
|
margin: 0;
|
|
border-width: 4px;
|
|
padding: 0.25em;
|
|
}
|
|
</style>
|