diff --git a/submissions/examples/command-palette-modal/README.md b/submissions/examples/command-palette-modal/README.md new file mode 100644 index 00000000..1bdb4789 --- /dev/null +++ b/submissions/examples/command-palette-modal/README.md @@ -0,0 +1,53 @@ +# Command Palette Search Modal Component + +A keyboard-inspired command palette modal similar to VS Code, Linear, and Notion for quick navigation and command execution. Includes a search input with icon, grouped command list with keyboard shortcut badges, a backdrop overlay, and smooth entrance animations. + +## Classes + +| Class | Description | +|---|---| +| `ease-command-overlay` | Fixed backdrop overlay with blur | +| `ease-command-palette` | Modal container with scale-in animation | +| `ease-command-search` | Search bar with icon and ESC badge | +| `ease-command-input` | Text input for filtering commands | +| `ease-command-esc` | ESC keyboard hint badge | +| `ease-command-list` | Scrollable command list | +| `ease-command-group` | Command section group | +| `ease-command-group-title` | Group section header | +| `ease-command-divider` | Visual divider between groups | +| `ease-command-item` | Individual command with staggered reveal | +| `ease-command-item-icon` | Command icon slot | +| `ease-command-item-label` | Command label text | +| `ease-command-item-spacer` | Flexible spacer between label and shortcut | +| `ease-command-kbd` | Keyboard shortcut badge | + +## Usage + +```html +
+ +
+
+ ⌘ + + ESC +
+ +
+
+ Navigation + +
+ ⚒ + Create Project + + ⌘P +
+
+
+
+``` + +## Why it fits EaseMotion CSS + +Pure CSS command palette with backdrop blur overlay, scale-in entrance animation, and staggered item reveals. Clean, keyboard-friendly design using design tokens for colors and spacing. Respects `prefers-reduced-motion`. diff --git a/submissions/examples/command-palette-modal/demo.html b/submissions/examples/command-palette-modal/demo.html new file mode 100644 index 00000000..54405aaa --- /dev/null +++ b/submissions/examples/command-palette-modal/demo.html @@ -0,0 +1,122 @@ + + + + + + Command Palette — EaseMotion CSS + + + + +

Command Palette

+

Keyboard-inspired search modal component — Issue #1160

+

Press Cmd + K to open (simulated)

+ + +
+ + +
+ + +
+ ⌘ + + ESC +
+ + +
+ +
+ Navigation + +
+ ⚒ + Create Project + + ⌘P +
+ +
+ ⚙ + Open Settings + + ⌘S +
+ +
+ ☰ + View Dashboard + + ⌘D +
+
+ +
+ +
+ Actions + +
+ ★ + Deploy to Production + + ⌘⌧D +
+ +
+ ↻ + Run Tests + + ⌘⌧T +
+ +
+ ✎ + Quick Note + + ⌘N +
+
+ +
+
+ + + diff --git a/submissions/examples/command-palette-modal/style.css b/submissions/examples/command-palette-modal/style.css new file mode 100644 index 00000000..a376f8c9 --- /dev/null +++ b/submissions/examples/command-palette-modal/style.css @@ -0,0 +1,220 @@ +/* ============================================================ + EaseMotion CSS — Command Palette Search Modal Component + Issue #1160 + ============================================================ */ + +/* ── Overlay ──────────────────────────────────────────────── */ + +.ease-command-overlay { + position: fixed; + inset: 0; + background: rgba(0, 0, 0, 0.5); + backdrop-filter: blur(4px); + -webkit-backdrop-filter: blur(4px); + animation: ease-kf-command-fade-in 200ms var(--ease-ease, cubic-bezier(0.4,0,0.2,1)) both; + z-index: 100; +} + +/* ── Palette modal ───────────────────────────────────────── */ + +.ease-command-palette { + position: fixed; + top: 15%; + left: 50%; + transform: translateX(-50%); + width: 100%; + max-width: 540px; + background: #1a1a2e; + border: 1.5px solid rgba(255, 255, 255, 0.1); + border-radius: var(--ease-radius-lg, 0.75rem); + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); + overflow: hidden; + z-index: 101; + animation: ease-kf-command-scale-in 200ms var(--ease-ease-out, cubic-bezier(0,0,0.2,1)) both; +} + +/* ── Search area ─────────────────────────────────────────── */ + +.ease-command-search { + display: flex; + align-items: center; + gap: var(--ease-space-3, 0.75rem); + padding: var(--ease-space-4, 1rem) var(--ease-space-4, 1rem); + border-bottom: 1.5px solid rgba(255, 255, 255, 0.06); +} + +.ease-command-search-icon { + font-size: 1.125rem; + opacity: 0.35; + flex-shrink: 0; +} + +.ease-command-input { + flex: 1; + background: none; + border: none; + outline: none; + color: #fff; + font-family: inherit; + font-size: var(--ease-text-base, 1rem); + line-height: 1.5; + padding: 0; +} + +.ease-command-input::placeholder { + color: rgba(255, 255, 255, 0.3); +} + +.ease-command-esc { + flex-shrink: 0; + display: inline-flex; + align-items: center; + padding: 0.125rem 0.5rem; + border-radius: var(--ease-radius-sm, 0.375rem); + background: rgba(255, 255, 255, 0.08); + font-family: inherit; + font-size: 0.6875rem; + color: rgba(255, 255, 255, 0.3); +} + +/* ── Command list ────────────────────────────────────────── */ + +.ease-command-list { + padding: var(--ease-space-2, 0.5rem); + max-height: 320px; + overflow-y: auto; +} + +/* Custom scrollbar */ +.ease-command-list::-webkit-scrollbar { + width: 6px; +} +.ease-command-list::-webkit-scrollbar-track { + background: transparent; +} +.ease-command-list::-webkit-scrollbar-thumb { + background: rgba(255, 255, 255, 0.1); + border-radius: 3px; +} + +/* ── Group ───────────────────────────────────────────────── */ + +.ease-command-group { + display: flex; + flex-direction: column; + gap: 2px; +} + +.ease-command-group-title { + display: block; + padding: var(--ease-space-2, 0.5rem) var(--ease-space-3, 0.75rem); + font-size: 0.6875rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.06em; + color: rgba(255, 255, 255, 0.3); +} + +/* ── Divider ─────────────────────────────────────────────── */ + +.ease-command-divider { + height: 1.5px; + background: rgba(255, 255, 255, 0.04); + margin: var(--ease-space-1, 0.25rem) 0; +} + +/* ── Command item ────────────────────────────────────────── */ + +.ease-command-item { + display: flex; + align-items: center; + gap: var(--ease-space-3, 0.75rem); + padding: var(--ease-space-2, 0.5rem) var(--ease-space-3, 0.75rem); + border-radius: var(--ease-radius-sm, 0.375rem); + cursor: pointer; + transition: + background var(--ease-speed-fast, 150ms) var(--ease-ease, cubic-bezier(0.4,0,0.2,1)); + animation: ease-kf-command-item-in 200ms var(--ease-ease-out, cubic-bezier(0,0,0.2,1)) both; +} + +.ease-command-item:nth-child(2) { animation-delay: 30ms; } +.ease-command-item:nth-child(3) { animation-delay: 60ms; } +.ease-command-item:nth-child(4) { animation-delay: 90ms; } + +.ease-command-item:hover { + background: rgba(255, 255, 255, 0.06); +} + +.ease-command-item-icon { + flex-shrink: 0; + width: 20px; + text-align: center; + font-size: 0.875rem; + opacity: 0.5; +} + +.ease-command-item-label { + flex-shrink: 0; + font-size: var(--ease-text-sm, 0.875rem); + line-height: 1.5; +} + +.ease-command-item-spacer { + flex: 1; + min-width: var(--ease-space-2, 0.5rem); +} + +/* ── Keyboard shortcut badge ─────────────────────────────── */ + +.ease-command-kbd { + flex-shrink: 0; + display: inline-flex; + align-items: center; + gap: 2px; + padding: 0.125rem 0.375rem; + border-radius: var(--ease-radius-sm, 0.375rem); + background: rgba(255, 255, 255, 0.06); + font-family: inherit; + font-size: 0.6875rem; + color: rgba(255, 255, 255, 0.3); + line-height: 1.4; +} + +/* ── Keyframes ───────────────────────────────────────────── */ + +@keyframes ease-kf-command-fade-in { + from { opacity: 0; } + to { opacity: 1; } +} + +@keyframes ease-kf-command-scale-in { + from { + opacity: 0; + transform: translateX(-50%) scale(0.96); + } + to { + opacity: 1; + transform: translateX(-50%) scale(1); + } +} + +@keyframes ease-kf-command-item-in { + from { + opacity: 0; + transform: translateY(4px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* ── Reduced motion ──────────────────────────────────────── */ + +@media (prefers-reduced-motion: reduce) { + .ease-command-overlay, + .ease-command-palette, + .ease-command-item { + animation: none; + } +}