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.
|
|
<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; export let compacter: boolean = false; export let tiny: 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 class:compacter class:tiny 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; }
div.boi.compacter { font-size: 1em; margin: 0 1ch; border-width: 3px; padding: 0.25em; }
div.boi.tiny { display: inline-block; margin: auto; font-size: 1em; border-width: 3px; } </style>
|