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 { getModalContext } from "../contexts/ModalContext.svelte"; import Icon from "../layout/Icon.svelte";
export let show: boolean = false; export let verb: string = "Submit"; export let noun: string = "Form"; export let wide: boolean = false; export let error: string | null = null; export let closable: boolean = false; export let disabled: boolean = false;
const {closeModal} = getModalContext(); </script>
{#if show} <div class="modal-background"> <div class="modal" class:wide> <div class="header"> <div class="title" class:noclose={!closable}>{verb} {noun}</div> {#if (closable)} <div class="x"> <div class="button" on:click={closeModal}> <Icon name="times" /> </div> </div> {/if} </div> {#if (error != null)} <div class="error">{error}</div> {/if} <div class="body"> <slot></slot> </div> <div class="button-row"> <button disabled={disabled} type="submit">{verb} {noun}</button> <button disabled={!closable} on:click|preventDefault={closeModal} >Cancel</button> </div> </div> </div> {/if}
<style lang="scss"> @import "../../css/colors";
div.modal-background { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); } div.modal { position: absolute; left: 50%; top: 50%; width: calc(100vw - 4em); max-width: 40ch; max-height: calc(100vh - 4em); overflow: auto; transform: translate(-50%,-50%); border-radius: 0.5em; background: $color-entry1; } div.modal.wide { max-width: 80ch; }
div.header { padding: 1em; margin-bottom: 0; padding-bottom: 0; } div.error { margin: 0.5em; padding: 0.5em; border: 1px solid rgb(204, 65, 65); border-radius: 0.2em; background-color: rgb(133, 39, 39); color: rgb(211, 141, 141); animation: fadein 0.5s; } div.body { padding: 1em 0; margin-top: 0; padding-top: 0;
display: flex; flex-direction: row;
@media screen and (max-width: 749px) { display: block; } } div.title { color: $color-entry10; line-height: 1em; }
div.x { position: relative; line-height: 1em; top: -1em; text-align: right; } div.x div.button { color: $color-entry7; display: inline-block; padding: 0em 0.5ch 0.1em 0.5ch; line-height: 1em; user-select: none; cursor: pointer; } div.x div.button:hover { color: $color-entry10; }
div.button-row { display: flex; flex-direction: row; border-top: 0.5px solid $color-entry2;
button { display: inline-block; padding: 0.25em 1ch; font-size: 1.25em; background: none; border: none; color: $color-entry7; border-left : 0.5px solid $color-entry2; cursor: pointer; } button:first-of-type { margin-left: auto; } button:hover { background-color: $color-entryhalf; } button:disabled { color: $color-entry4; } } div.modal :global(label) { padding: 1em 0 0.125em 0.25ch; font-size: 0.9em; user-select: none; -webkit-user-select: none; -moz-user-select: none; } div.modal :global(input), div.modal :global(select), div.modal :global(textarea) { width: calc(100% - 2ch); margin-bottom: 1em; margin-top: 0.25em; background: $color-entryhalf; color: $color-entry8; border: none; outline: none; resize: vertical; padding: 0.5em 1ch; } div.modal :global(select) { padding-left: 0.5ch; padding: 0.45em 1ch; width: 100%; } div.modal :global(select option), div.modal :global(select optgroup) { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 0.5em 0; }
div.modal :global(input)::placeholder { opacity: 0.5; } div.modal :global(select:disabled) { background: $color-entryhalf; color: $color-entry4; } div.modal :global(input:disabled) { background: $color-entryhalf; color: $color-entry4; } div.modal :global(textarea) { min-height: 3.5em; height: 3.5em; font-family: inherit; } div.modal :global(textarea:disabled) { background: #444; color: #aaa; } div.modal :global(input.nolast) { margin-bottom: 0.5em; } div.modal :global(input[type="checkbox"]) { width: initial; display: inline-block; } div.modal :global(input[type="checkbox"] + label) { width: initial; display: inline-block; padding: 0; margin: 0; } div.modal :global(input:focus), div.modal :global(select:focus), div.modal :global(textarea:focus) { background: $color-entry0; color: $color-entry10; border: none; outline: none; } div.modal :global(p) { margin: 0.25em 1ch 1em 1ch; font-size: 0.9em; }
div.modal :global(input::-webkit-outer-spin-button), div.modal :global(input::-webkit-inner-spin-button) { -webkit-appearance: none; margin: 0; }
div.modal :global(input[type=number]) { -moz-appearance: textfield; } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } </style>
|