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 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>
|