ux: accent glow on quick-add input after successful item add

This commit is contained in:
Ulas Kalayci
2026-04-30 09:13:48 +02:00
parent e10516d32f
commit edd8d0889d
2 changed files with 19 additions and 0 deletions
+2
View File
@@ -352,6 +352,8 @@ function wireQuickAdd(container) {
// Erfolgs-Feedback auf dem +-Button (DOM-API, kein innerHTML)
_flashAddBtn(form.querySelector('.quick-add__btn'));
nameInput.focus();
nameInput.classList.add('quick-add__input--flash');
nameInput.addEventListener('animationend', () => nameInput.classList.remove('quick-add__input--flash'), { once: true });
} catch (err) {
window.oikos.showToast(err.message, 'danger');
}
+17
View File
@@ -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
* -------------------------------------------------------- */