diff --git a/submissions/examples/floating-notification-toast/README.md b/submissions/examples/floating-notification-toast/README.md new file mode 100644 index 00000000..772bb2d6 --- /dev/null +++ b/submissions/examples/floating-notification-toast/README.md @@ -0,0 +1,35 @@ +# Floating Notification Toast Component + +A lightweight notification toast component built entirely with HTML and CSS. Displays success, error, warning, or info messages with a status icon, title, message text, and optional dismiss button. Features a smooth slide-in entrance animation. + +## Classes + +| Class | Description | +|---|---| +| `ease-toast` | Base toast container with slide-in animation | +| `ease-toast-success` | Green success variant | +| `ease-toast-error` | Red error variant | +| `ease-toast-warning` | Amber warning variant | +| `ease-toast-info` | Blue info variant | +| `ease-toast-icon` | Circular status icon slot | +| `ease-toast-content` | Title and message wrapper | +| `ease-toast-title` | Toast title text | +| `ease-toast-msg` | Toast message text | +| `ease-toast-close` | Dismiss button | + +## Usage + +```html + +``` + +## Why it fits EaseMotion CSS + +Pure CSS toast with staggered slide-in entrance animation, color-coded variants, and a hover-visible dismiss button. Uses design tokens for colors and spacing. Respects `prefers-reduced-motion`. diff --git a/submissions/examples/floating-notification-toast/demo.html b/submissions/examples/floating-notification-toast/demo.html new file mode 100644 index 00000000..2f9bcc2f --- /dev/null +++ b/submissions/examples/floating-notification-toast/demo.html @@ -0,0 +1,73 @@ + + + + + + Floating Notification Toast — EaseMotion CSS + + + + +

Floating Notification Toast

+

Lightweight feedback toast component — Issue #1167

+ +
+ + + + + + + + + +
+ + diff --git a/submissions/examples/floating-notification-toast/style.css b/submissions/examples/floating-notification-toast/style.css new file mode 100644 index 00000000..ce569eb0 --- /dev/null +++ b/submissions/examples/floating-notification-toast/style.css @@ -0,0 +1,160 @@ +/* ============================================================ + EaseMotion CSS — Floating Notification Toast Component + Issue #1167 + ============================================================ */ + +/* ── Toast base ───────────────────────────────────────────── */ + +.ease-toast { + display: flex; + align-items: flex-start; + gap: var(--ease-space-3, 0.75rem); + width: 100%; + padding: var(--ease-space-3, 0.75rem) var(--ease-space-4, 1rem); + border-radius: var(--ease-radius-md, 0.5rem); + border: 1.5px solid transparent; + background: rgba(255, 255, 255, 0.04); + animation: ease-kf-toast-slide-in var(--ease-speed-medium, 300ms) var(--ease-ease-out, cubic-bezier(0,0,0.2,1)) both; + transition: + opacity var(--ease-speed-medium, 300ms) var(--ease-ease, cubic-bezier(0.4,0,0.2,1)), + transform var(--ease-speed-medium, 300ms) var(--ease-ease, cubic-bezier(0.4,0,0.2,1)); +} + +.ease-toast:nth-child(2) { animation-delay: 100ms; } +.ease-toast:nth-child(3) { animation-delay: 200ms; } +.ease-toast:nth-child(4) { animation-delay: 300ms; } + +/* ── Icon ─────────────────────────────────────────────────── */ + +.ease-toast-icon { + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + width: 24px; + height: 24px; + border-radius: var(--ease-radius-full, 999px); + font-size: 0.75rem; + font-weight: 700; + line-height: 1; + margin-top: 1px; +} + +/* ── Content ─────────────────────────────────────────────── */ + +.ease-toast-content { + flex: 1; + min-width: 0; +} + +.ease-toast-title { + margin: 0 0 0.125rem; + font-size: var(--ease-text-sm, 0.875rem); + font-weight: 600; + line-height: 1.4; +} + +.ease-toast-msg { + margin: 0; + font-size: var(--ease-text-xs, 0.75rem); + line-height: 1.5; + opacity: 0.65; +} + +/* ── Close button ────────────────────────────────────────── */ + +.ease-toast-close { + flex-shrink: 0; + background: none; + border: none; + cursor: pointer; + font-size: 1.125rem; + line-height: 1; + padding: 0; + opacity: 0.35; + color: inherit; + transition: opacity var(--ease-speed-fast, 150ms); +} + +.ease-toast-close:hover { + opacity: 0.8; +} + +/* ── Variants ────────────────────────────────────────────── */ + +/* Success */ +.ease-toast-success { + border-color: rgba(34, 197, 94, 0.3); + background: rgba(34, 197, 94, 0.06); +} +.ease-toast-success .ease-toast-icon { + background: rgba(34, 197, 94, 0.15); + color: var(--ease-color-success, #22c55e); +} +.ease-toast-success .ease-toast-title { + color: var(--ease-color-success, #22c55e); +} + +/* Error */ +.ease-toast-error { + border-color: rgba(239, 68, 68, 0.3); + background: rgba(239, 68, 68, 0.06); +} +.ease-toast-error .ease-toast-icon { + background: rgba(239, 68, 68, 0.15); + color: var(--ease-color-danger, #ef4444); +} +.ease-toast-error .ease-toast-title { + color: var(--ease-color-danger, #ef4444); +} + +/* Warning */ +.ease-toast-warning { + border-color: rgba(245, 158, 11, 0.3); + background: rgba(245, 158, 11, 0.06); +} +.ease-toast-warning .ease-toast-icon { + background: rgba(245, 158, 11, 0.15); + color: var(--ease-color-warning, #f59e0b); +} +.ease-toast-warning .ease-toast-title { + color: var(--ease-color-warning, #f59e0b); +} + +/* Info */ +.ease-toast-info { + border-color: rgba(59, 130, 246, 0.3); + background: rgba(59, 130, 246, 0.06); +} +.ease-toast-info .ease-toast-icon { + background: rgba(59, 130, 246, 0.15); + color: var(--ease-color-info, #3b82f6); +} +.ease-toast-info .ease-toast-title { + color: var(--ease-color-info, #3b82f6); +} + +/* ── Keyframes ───────────────────────────────────────────── */ + +@keyframes ease-kf-toast-slide-in { + from { + opacity: 0; + transform: translateX(-12px); + } + to { + opacity: 1; + transform: translateX(0); + } +} + +/* ── Reduced motion ──────────────────────────────────────── */ + +@media (prefers-reduced-motion: reduce) { + .ease-toast { + animation: none; + transition: none; + } + .ease-toast-close { + transition: none; + } +}