styling
This commit is contained in:
Alex
@@ -1,304 +1,338 @@
|
||||
<script>
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import { t } from "svelte-i18n";
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import { t } from 'svelte-i18n';
|
||||
|
||||
/** @type {string} */
|
||||
export let name;
|
||||
/** @type {string} */
|
||||
export let name;
|
||||
|
||||
/** @type {string} */
|
||||
export let type = "text";
|
||||
/** @type {string} */
|
||||
export let type = 'text';
|
||||
|
||||
/** @type {string|Number|null} */
|
||||
export let value;
|
||||
/** @type {string|Number|null} */
|
||||
export let value;
|
||||
|
||||
/** @type {string} */
|
||||
export let placeholder = "";
|
||||
/** @type {string} */
|
||||
export let placeholder = '';
|
||||
|
||||
/** @type {Number} */
|
||||
export let rows = 4;
|
||||
/** @type {Number} */
|
||||
export let rows = 4;
|
||||
|
||||
/** @type {Array<{value: string | number, label: string, color?:string}>} */
|
||||
export let options = [];
|
||||
/** @type {Array<{value: string | number, label: string, color?:string}>} */
|
||||
export let options = [];
|
||||
|
||||
/** @type {Boolean} */
|
||||
export let required = false;
|
||||
/** @type {Boolean} */
|
||||
export let required = false;
|
||||
|
||||
/** @type {string} */
|
||||
export let label = "";
|
||||
/** @type {string} */
|
||||
export let label = '';
|
||||
|
||||
/** @type {string} */
|
||||
export let otherPasswordValue = "";
|
||||
/** @type {string} */
|
||||
export let otherPasswordValue = '';
|
||||
|
||||
/** @type {boolean} */
|
||||
export let toUpperCase = false;
|
||||
/** @type {boolean} */
|
||||
export let toUpperCase = false;
|
||||
|
||||
/** @type {boolean} */
|
||||
export let checked = false;
|
||||
/** @type {boolean} */
|
||||
export let checked = false;
|
||||
|
||||
/** @type {boolean} */
|
||||
export let readonly = false;
|
||||
/** @type {boolean} */
|
||||
export let readonly = false;
|
||||
|
||||
/**
|
||||
* @param {Event} event - The input event
|
||||
*/
|
||||
function handleInput(event) {
|
||||
const target = event.target;
|
||||
/**
|
||||
* @param {Event} event - The input event
|
||||
*/
|
||||
function handleInput(event) {
|
||||
const target = event.target;
|
||||
|
||||
if (target instanceof HTMLInputElement) {
|
||||
let inputValue = target.value;
|
||||
if (toUpperCase) {
|
||||
inputValue = inputValue.toUpperCase();
|
||||
target.value = inputValue; // Update the input field value
|
||||
}
|
||||
value = inputValue;
|
||||
}
|
||||
}
|
||||
if (target instanceof HTMLInputElement) {
|
||||
let inputValue = target.value;
|
||||
if (toUpperCase) {
|
||||
inputValue = inputValue.toUpperCase();
|
||||
target.value = inputValue; // Update the input field value
|
||||
}
|
||||
value = inputValue;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Validates the field
|
||||
* @param {string} name - The name of the field
|
||||
* @param {string|Number|null} value - The value of the field
|
||||
* @param {Boolean} required - The requirements of the field
|
||||
* @returns {string|null} The error message or null if valid
|
||||
*/
|
||||
function validateField(name, value, required) {
|
||||
if (
|
||||
value === null ||
|
||||
(typeof value === "string" && !value.trim() && !required)
|
||||
)
|
||||
return null;
|
||||
switch (name) {
|
||||
case "membership_start_date":
|
||||
return typeof value === "string" && value.trim()
|
||||
? null
|
||||
: $t("validation.date");
|
||||
case "email":
|
||||
return typeof value === "string" && /^\S+@\S+\.\S+$/.test(value)
|
||||
? null
|
||||
: $t("validation.email");
|
||||
case "password":
|
||||
case "password2":
|
||||
if (typeof value === "string" && value.length < 8) {
|
||||
return $t("validation.password");
|
||||
}
|
||||
if (otherPasswordValue && value !== otherPasswordValue) {
|
||||
return $t("validation.password_match");
|
||||
}
|
||||
return null;
|
||||
case "phone":
|
||||
return typeof value === "string" && /^\+?[0-9\s()-]{7,}$/.test(value)
|
||||
? null
|
||||
: $t("validation.phone");
|
||||
case "zip_code":
|
||||
return typeof value === "string" && /^\d{5}$/.test(value)
|
||||
? null
|
||||
: $t("validation.zip_code");
|
||||
case "iban":
|
||||
return typeof value === "string" &&
|
||||
/^[A-Z]{2}\d{2}[A-Z0-9]{1,30}$/.test(value)
|
||||
? null
|
||||
: $t("validation.iban");
|
||||
case "bic":
|
||||
return typeof value === "string" &&
|
||||
/^[A-Z]{6}[A-Z2-9][A-NP-Z0-9]([A-Z0-9]{3})?$/.test(value)
|
||||
? null
|
||||
: $t("validation.bic");
|
||||
case "licence_number":
|
||||
return typeof value === "string" && value.length == 11
|
||||
? null
|
||||
: $t("validation.licence");
|
||||
/**
|
||||
* Validates the field
|
||||
* @param {string} name - The name of the field
|
||||
* @param {string|Number|null} value - The value of the field
|
||||
* @param {Boolean} required - The requirements of the field
|
||||
* @returns {string|null} The error message or null if valid
|
||||
*/
|
||||
function validateField(name, value, required) {
|
||||
if (value === null || (typeof value === 'string' && !value.trim() && !required)) return null;
|
||||
switch (name) {
|
||||
case 'membership_start_date':
|
||||
return typeof value === 'string' && value.trim() ? null : $t('validation.date');
|
||||
case 'email':
|
||||
return typeof value === 'string' && /^\S+@\S+\.\S+$/.test(value)
|
||||
? null
|
||||
: $t('validation.email');
|
||||
case 'password':
|
||||
case 'password2':
|
||||
if (typeof value === 'string' && value.length < 8) {
|
||||
return $t('validation.password');
|
||||
}
|
||||
if (otherPasswordValue && value !== otherPasswordValue) {
|
||||
return $t('validation.password_match');
|
||||
}
|
||||
return null;
|
||||
case 'phone':
|
||||
return typeof value === 'string' && /^\+?[0-9\s()-]{7,}$/.test(value)
|
||||
? null
|
||||
: $t('validation.phone');
|
||||
case 'zip_code':
|
||||
return typeof value === 'string' && /^\d{5}$/.test(value)
|
||||
? null
|
||||
: $t('validation.zip_code');
|
||||
case 'iban':
|
||||
return typeof value === 'string' && /^[A-Z]{2}\d{2}[A-Z0-9]{1,30}$/.test(value)
|
||||
? null
|
||||
: $t('validation.iban');
|
||||
case 'bic':
|
||||
return typeof value === 'string' &&
|
||||
/^[A-Z]{6}[A-Z2-9][A-NP-Z0-9]([A-Z0-9]{3})?$/.test(value)
|
||||
? null
|
||||
: $t('validation.bic');
|
||||
case 'licence_number':
|
||||
return typeof value === 'string' && value.length == 11 ? null : $t('validation.licence');
|
||||
|
||||
default:
|
||||
return typeof value === "string" && !value.trim() && required
|
||||
? $t("validation.required")
|
||||
: null;
|
||||
}
|
||||
}
|
||||
default:
|
||||
return typeof value === 'string' && !value.trim() && required
|
||||
? $t('validation.required')
|
||||
: null;
|
||||
}
|
||||
}
|
||||
|
||||
$: error = validateField(name, value, required);
|
||||
$: selectedOption = options.find((option) => option.value == value);
|
||||
$: selectedColor = selectedOption ? selectedOption.color : "";
|
||||
$: error = validateField(name, value, required);
|
||||
$: selectedOption = options.find((option) => option.value == value);
|
||||
$: selectedColor = selectedOption ? selectedOption.color : '';
|
||||
</script>
|
||||
|
||||
<div class="input-box {type === 'checkbox' ? 'checkbox-container' : ''}">
|
||||
{#if type === "checkbox"}
|
||||
<label class="form-control {readonly ? 'form-control--disabled' : ''}">
|
||||
<input
|
||||
type="checkbox"
|
||||
{name}
|
||||
{value}
|
||||
{checked}
|
||||
{readonly}
|
||||
on:change={() => (checked = !checked)}
|
||||
/>
|
||||
<span class="checkbox-text"> {label} </span>
|
||||
</label>
|
||||
{:else}
|
||||
<span class="label">{label}</span>
|
||||
{/if}
|
||||
<div class="input-error-container">
|
||||
{#if error}
|
||||
<span class="error-message">{error}</span>
|
||||
{/if}
|
||||
{#if type === "select"}
|
||||
<select
|
||||
{name}
|
||||
bind:value
|
||||
{required}
|
||||
class="input select"
|
||||
style={selectedColor ? `color: ${selectedColor};` : ""}
|
||||
>
|
||||
{#each options as option}
|
||||
<option value={option.value}>{option.label}</option>
|
||||
{/each}
|
||||
</select>
|
||||
{:else if type === "textarea"}
|
||||
<textarea
|
||||
{name}
|
||||
{placeholder}
|
||||
{required}
|
||||
{value}
|
||||
{readonly}
|
||||
{rows}
|
||||
class="input textarea {readonly ? 'readonly' : ''}"
|
||||
style="height:{rows * 1.5}em;"
|
||||
/>
|
||||
{:else if type != "checkbox"}
|
||||
<input
|
||||
{name}
|
||||
{type}
|
||||
{placeholder}
|
||||
{readonly}
|
||||
{value}
|
||||
{required}
|
||||
on:input={handleInput}
|
||||
on:blur={handleInput}
|
||||
class="input {readonly ? 'readonly' : ''}"
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
{#if type === 'checkbox'}
|
||||
<label class="form-control {readonly ? 'form-control--disabled' : ''}">
|
||||
<input
|
||||
type="checkbox"
|
||||
{name}
|
||||
{value}
|
||||
{checked}
|
||||
{readonly}
|
||||
on:change={() => (checked = !checked)}
|
||||
/>
|
||||
<span class="checkbox-text"> {label} </span>
|
||||
</label>
|
||||
{:else}
|
||||
<span class="label">{label}</span>
|
||||
{/if}
|
||||
<div class="input-error-container">
|
||||
{#if error}
|
||||
<span class="error-message">{error}</span>
|
||||
{/if}
|
||||
{#if type === 'select'}
|
||||
<select
|
||||
{name}
|
||||
bind:value
|
||||
{required}
|
||||
class="input select"
|
||||
style={selectedColor ? `color: ${selectedColor};` : ''}
|
||||
>
|
||||
{#each options as option}
|
||||
<option value={option.value}>{option.label}</option>
|
||||
{/each}
|
||||
</select>
|
||||
{:else if type === 'textarea'}
|
||||
<textarea
|
||||
{name}
|
||||
{placeholder}
|
||||
{required}
|
||||
{value}
|
||||
{readonly}
|
||||
{rows}
|
||||
class="input textarea {readonly ? 'readonly' : ''}"
|
||||
style="height:{rows * 1.5}em;"
|
||||
></textarea>
|
||||
{:else if type != 'checkbox'}
|
||||
<input
|
||||
{name}
|
||||
{type}
|
||||
{placeholder}
|
||||
{readonly}
|
||||
{value}
|
||||
{required}
|
||||
on:input={handleInput}
|
||||
on:blur={handleInput}
|
||||
class="input {readonly ? 'readonly' : ''}"
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--form-control-color: #6bff55;
|
||||
--form-control-disabled: #959495;
|
||||
}
|
||||
:root {
|
||||
--form-control-color: var(--green); /* Changed from #6bff55 */
|
||||
--form-control-disabled: var(--overlay0); /* Changed from #959495 */
|
||||
}
|
||||
|
||||
.form-control {
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
line-height: 1.1;
|
||||
display: grid;
|
||||
grid-template-columns: 1.5em auto;
|
||||
gap: 0.75em;
|
||||
align-items: center;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.form-control {
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
line-height: 1.1;
|
||||
display: grid;
|
||||
grid-template-columns: 1.5em auto;
|
||||
gap: 0.75em;
|
||||
align-items: center;
|
||||
opacity: 0.8;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.form-control--disabled {
|
||||
color: var(--form-control-disabled);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.form-control--disabled {
|
||||
color: var(--form-control-disabled);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background-color: var(--form-background);
|
||||
margin: 0;
|
||||
font: inherit;
|
||||
color: currentColor;
|
||||
width: 1.75em;
|
||||
height: 1.75em;
|
||||
border: 0.15em solid currentColor;
|
||||
border-radius: 0.5em;
|
||||
transform: translateY(-0.075em);
|
||||
display: grid;
|
||||
place-content: center;
|
||||
transition: transform 0.2s ease-in-out;
|
||||
}
|
||||
input[type='checkbox'] {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background-color: var(--surface0);
|
||||
margin: 0;
|
||||
font: inherit;
|
||||
color: var(--text);
|
||||
width: 1.75em;
|
||||
height: 1.75em;
|
||||
border: 0.15em solid var(--overlay0);
|
||||
border-radius: 0.5em;
|
||||
transform: translateY(-0.075em);
|
||||
display: grid;
|
||||
place-content: center;
|
||||
transition: transform 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
input[type="checkbox"]::before {
|
||||
content: "";
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
|
||||
transform: scale(0);
|
||||
transform-origin: bottom left;
|
||||
transition: 120ms transform ease-in-out;
|
||||
box-shadow: inset 1em 1em var(--form-control-color);
|
||||
background-color: CanvasText;
|
||||
}
|
||||
input[type='checkbox']::before {
|
||||
content: '';
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
|
||||
transform: scale(0);
|
||||
transform-origin: bottom left;
|
||||
transition: 120ms transform ease-in-out;
|
||||
box-shadow: inset 1em 1em var(--form-control-color);
|
||||
background-color: var(--crust);
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked::before {
|
||||
transform: scale(1);
|
||||
}
|
||||
input[type='checkbox']:checked::before {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
input[type="checkbox"]:hover {
|
||||
outline: max(2px, 0.15em) solid currentColor;
|
||||
outline-offset: max(2px, 0.15em);
|
||||
transform: scale(1.3);
|
||||
}
|
||||
input[type='checkbox']:hover {
|
||||
outline: max(2px, 0.15em) solid var(--lavender);
|
||||
outline-offset: max(2px, 0.15em);
|
||||
transform: scale(1.3);
|
||||
}
|
||||
|
||||
input[type="checkbox"]:disabled {
|
||||
--form-control-color: var(--form-control-disabled);
|
||||
color: var(--form-control-disabled);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.readonly {
|
||||
background-color: #ececec;
|
||||
cursor: not-allowed;
|
||||
opacity: 0.7;
|
||||
color: #4f4f4f;
|
||||
}
|
||||
input[type='checkbox']:disabled {
|
||||
--form-control-color: var(--form-control-disabled);
|
||||
color: var(--form-control-disabled);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.readonly {
|
||||
background-color: var(--surface0);
|
||||
cursor: not-allowed;
|
||||
opacity: 0.7;
|
||||
color: var(--overlay1);
|
||||
}
|
||||
|
||||
.checkbox-container {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
background-color: transparent;
|
||||
}
|
||||
.checkbox-container {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
background-color: transparent;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.checkbox-text {
|
||||
font-size: 16px;
|
||||
}
|
||||
.checkbox-text {
|
||||
font-size: 16px;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.checkbox-text {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.select {
|
||||
padding-right: 1.5em;
|
||||
}
|
||||
.input-error-container {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
width: 100%;
|
||||
max-width: 444px;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.checkbox-text {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.select {
|
||||
padding-right: 1.5em;
|
||||
background-color: var(--surface0);
|
||||
}
|
||||
.input-error-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
width: 100%;
|
||||
max-width: 444px;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: #eb5424;
|
||||
font-size: 12px;
|
||||
margin-bottom: 5px;
|
||||
align-self: flex-start;
|
||||
}
|
||||
.error-message {
|
||||
color: var(--red); /* Changed from #eb5424 */
|
||||
font-size: 12px;
|
||||
margin-bottom: 5px;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 100%;
|
||||
}
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
color: white;
|
||||
}
|
||||
textarea {
|
||||
resize: vertical;
|
||||
min-height: 100px;
|
||||
}
|
||||
.input {
|
||||
width: 100%;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
width: 100%;
|
||||
padding: 0.75rem 0;
|
||||
background-color: var(--surface0);
|
||||
border: 1px solid var(--overlay0);
|
||||
border-radius: 6px;
|
||||
color: var(--text);
|
||||
transition: border-color 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
input:focus,
|
||||
textarea:focus,
|
||||
select:focus {
|
||||
outline: none;
|
||||
border-color: var(--lavender);
|
||||
}
|
||||
|
||||
input:hover:not(:disabled),
|
||||
textarea:hover:not(:disabled),
|
||||
select:hover:not(:disabled) {
|
||||
border-color: var(--overlay2);
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
min-height: 100px;
|
||||
}
|
||||
/* Add consistent spacing between input boxes */
|
||||
.input-box {
|
||||
margin: 1rem 0;
|
||||
padding: 0.5rem;
|
||||
background-color: var(--surface0);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.input-box .label {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--lavender);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Style select dropdown */
|
||||
select option {
|
||||
background-color: var(--base);
|
||||
color: var(--text);
|
||||
padding: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,128 +1,155 @@
|
||||
<script>
|
||||
import { quintOut } from "svelte/easing";
|
||||
import { quintOut } from 'svelte/easing';
|
||||
|
||||
import { t } from "svelte-i18n";
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import { t } from 'svelte-i18n';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
|
||||
const modal = (/** @type {Element} */ node, { duration = 300 } = {}) => {
|
||||
const transform = getComputedStyle(node).transform;
|
||||
const modal = (/** @type {Element} */ node, { duration = 300 } = {}) => {
|
||||
const transform = getComputedStyle(node).transform;
|
||||
|
||||
return {
|
||||
duration,
|
||||
easing: quintOut,
|
||||
css: (/** @type {any} */ t, /** @type {number} */ u) => {
|
||||
return `transform:
|
||||
return {
|
||||
duration,
|
||||
easing: quintOut,
|
||||
css: (/** @type {any} */ t, /** @type {number} */ u) => {
|
||||
return `transform:
|
||||
${transform}
|
||||
scale(${t})
|
||||
translateY(${u * -100}%)
|
||||
`;
|
||||
},
|
||||
};
|
||||
};
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
function closeModal() {
|
||||
dispatch("close", {});
|
||||
}
|
||||
const dispatch = createEventDispatcher();
|
||||
function closeModal() {
|
||||
dispatch('close', {});
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="modal-background">
|
||||
<div
|
||||
transition:modal|global={{ duration: 1000 }}
|
||||
class="modal"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
>
|
||||
<!-- svelte-ignore a11y-missing-attribute -->
|
||||
<a
|
||||
title={$t("cancel")}
|
||||
class="modal-close"
|
||||
on:click={closeModal}
|
||||
role="button"
|
||||
tabindex="0"
|
||||
on:keydown={(e) => e.key == "Enter" && closeModal()}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 384 512"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"
|
||||
/>
|
||||
</svg>
|
||||
<span class="sr-only">{$t("cancel")}</span>
|
||||
</a>
|
||||
<div class="container">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
<div transition:modal|global={{ duration: 1000 }} class="modal" role="dialog" aria-modal="true">
|
||||
<!-- svelte-ignore a11y-missing-attribute -->
|
||||
<a
|
||||
title={$t('cancel')}
|
||||
class="modal-close"
|
||||
on:click={closeModal}
|
||||
role="button"
|
||||
tabindex="0"
|
||||
on:keydown={(e) => e.key == 'Enter' && closeModal()}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 384 512"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"
|
||||
/>
|
||||
</svg>
|
||||
<span class="sr-only">{$t('cancel')}</span>
|
||||
</a>
|
||||
<div class="container">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.modal-background {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
}
|
||||
.modal-background {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(30, 30, 46, 0.65); /* var(--base) with 0.75 opacity */
|
||||
backdrop-filter: blur(4px); /* Optional: adds a slight blur effect */
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.modal {
|
||||
position: relative;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 70%;
|
||||
box-shadow: 0 0 10px hsl(0 0% 0% / 10%);
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border-width: 0;
|
||||
}
|
||||
@media (max-width: 990px) {
|
||||
.modal {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
.modal-close {
|
||||
border: none;
|
||||
}
|
||||
.modal {
|
||||
position: relative;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 70%;
|
||||
background-color: var(--base);
|
||||
border: 1px solid var(--surface0);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 20px rgba(17, 17, 27, 0.5); /* var(--crust) with opacity */
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border-width: 0;
|
||||
}
|
||||
@media (max-width: 990px) {
|
||||
.modal {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
.modal-close {
|
||||
border: none;
|
||||
padding: 1rem;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.modal-close svg {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
fill: rgb(14 165 233 /1);
|
||||
transition: all 0.5s;
|
||||
}
|
||||
.modal-close:hover svg {
|
||||
fill: rgb(225 29 72);
|
||||
transform: scale(1.5);
|
||||
}
|
||||
.modal .container {
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
align-items: center;
|
||||
}
|
||||
@media (min-width: 680px) {
|
||||
.modal .container {
|
||||
flex-direction: column;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.modal-close svg {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
transition: all 0.3s ease-in-out;
|
||||
fill: var(--blue); /* Using Catppuccin blue */
|
||||
}
|
||||
.modal-close:hover svg {
|
||||
fill: var(--red); /* Using Catppuccin red */
|
||||
transform: scale(1.2);
|
||||
}
|
||||
.modal .container {
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
align-items: center;
|
||||
padding: 2rem;
|
||||
background-color: var(--base);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* Scrollbar styling */
|
||||
.modal .container::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.modal .container::-webkit-scrollbar-track {
|
||||
background: var(--surface0);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.modal .container::-webkit-scrollbar-thumb {
|
||||
background: var(--surface2);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.modal .container::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--surface1);
|
||||
}
|
||||
|
||||
@media (min-width: 680px) {
|
||||
.modal .container {
|
||||
flex-direction: column;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,24 +1,24 @@
|
||||
<script>
|
||||
/** @type {number | null} */
|
||||
export let width;
|
||||
/** @type {string | null} */
|
||||
export let message;
|
||||
/** @type {number | null} */
|
||||
export let width;
|
||||
/** @type {string | null} */
|
||||
export let message;
|
||||
</script>
|
||||
|
||||
<div class="loading">
|
||||
<p class="simple-loader" style={width ? `width: ${width}px` : ""} />
|
||||
{#if message}
|
||||
<p>{message}</p>
|
||||
{/if}
|
||||
<p class="simple-loader" style={width ? `width: ${width}px` : ''}></p>
|
||||
{#if message}
|
||||
<p>{message}</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.loading p {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
.loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.loading p {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user