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.
79 lines
1.4 KiB
79 lines
1.4 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 color: "red" | "green" | "blue" | "yellow" | "purple" | undefined = undefined;
|
|
export let disabled: boolean = false;
|
|
|
|
const dispatch = createEventDispatcher();
|
|
|
|
function handleClick() {
|
|
dispatch("click", {open});
|
|
|
|
if (open.name !== "none") {
|
|
modalStore.set(open);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<div on:click={handleClick} class={`option ${color}`} class:disabled><slot></slot></div>
|
|
|
|
<style>
|
|
div.option {
|
|
display: inline-block;
|
|
font-size: 0.9em;
|
|
padding: 0.125em 0.75ch;
|
|
cursor: pointer;
|
|
color: #aa8822;
|
|
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
}
|
|
|
|
div.option:hover {
|
|
color: #FC1;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
div.option.green {
|
|
color: #484;
|
|
}
|
|
div.option.green:hover {
|
|
color: #78ff78;
|
|
}
|
|
|
|
div.option.red {
|
|
color: #852a24;
|
|
}
|
|
div.option.red:hover {
|
|
color: #ff4545;
|
|
}
|
|
|
|
div.option.blue {
|
|
color: #446d88;
|
|
}
|
|
div.option.blue:hover {
|
|
color: #78c9ff;
|
|
}
|
|
|
|
div.option.yellow {
|
|
color: #7a7429;
|
|
}
|
|
div.option.yellow:hover {
|
|
color: #e7e55e;
|
|
}
|
|
|
|
div.option.purple {
|
|
color: #7a2973;
|
|
}
|
|
div.option.purple:hover {
|
|
color: #e75ed0;
|
|
}
|
|
|
|
div.option.disabled {
|
|
opacity: 0.5;
|
|
}
|
|
</style>
|