ux: accent glow on quick-add input after successful item add
This commit is contained in:
@@ -352,6 +352,8 @@ function wireQuickAdd(container) {
|
|||||||
// Erfolgs-Feedback auf dem +-Button (DOM-API, kein innerHTML)
|
// Erfolgs-Feedback auf dem +-Button (DOM-API, kein innerHTML)
|
||||||
_flashAddBtn(form.querySelector('.quick-add__btn'));
|
_flashAddBtn(form.querySelector('.quick-add__btn'));
|
||||||
nameInput.focus();
|
nameInput.focus();
|
||||||
|
nameInput.classList.add('quick-add__input--flash');
|
||||||
|
nameInput.addEventListener('animationend', () => nameInput.classList.remove('quick-add__input--flash'), { once: true });
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
window.oikos.showToast(err.message, 'danger');
|
window.oikos.showToast(err.message, 'danger');
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2336,6 +2336,23 @@ textarea.input { resize: vertical; }
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* --------------------------------------------------------
|
||||||
|
* Signature Moment: Eingabefeld-Glow nach erfolgreichem Item-Add
|
||||||
|
* -------------------------------------------------------- */
|
||||||
|
@keyframes input-add-flash {
|
||||||
|
0% { box-shadow: none; }
|
||||||
|
25% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--module-accent, var(--color-accent)) 45%, transparent); }
|
||||||
|
100% { box-shadow: none; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.quick-add__input--flash {
|
||||||
|
animation: input-add-flash 550ms var(--ease-out) forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.quick-add__input--flash { animation: none; }
|
||||||
|
}
|
||||||
|
|
||||||
/* --------------------------------------------------------
|
/* --------------------------------------------------------
|
||||||
* Windows High Contrast / Forced Colors
|
* Windows High Contrast / Forced Colors
|
||||||
* -------------------------------------------------------- */
|
* -------------------------------------------------------- */
|
||||||
|
|||||||
Reference in New Issue
Block a user