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)
|
||||
_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');
|
||||
}
|
||||
|
||||
@@ -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
|
||||
* -------------------------------------------------------- */
|
||||
|
||||
Reference in New Issue
Block a user