chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: add interactive shadow patterns — hover lift, active tab elevation

Browse Source 
Shadows communicate interaction state, not decoration:
- Primary buttons: cyan-tinted shadow + lift on hover
- Ghost buttons: subtle shadow + lift on hover
- Both: shadow shrinks on active/click (press effect)
- tab-active-shadow: elevation shadow for selected tabs/toggles
- card-lift: optional hover lift for interactive cards

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Michael Chihlas
2026-03-22 04:51:14 -04:00
parent 303a558432
commit a73d34c39b
2 changed files with 59 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
frontend/src/index.css
View File

@@ -178,9 +178,15 @@
border-radius: 5px;
padding: 9px 16px;
font-size: 13px;
transition: filter 150ms ease;
transition: filter 150ms ease, box-shadow 150ms ease, transform 150ms ease;
&:hover {
filter: brightness(1.1);
box-shadow: 0 2px 8px rgba(34, 211, 238, 0.25);
transform: translateY(-1px);
}
&:active {
box-shadow: 0 1px 2px rgba(34, 211, 238, 0.15);
transform: translateY(0);
}
}
@@ -191,11 +197,38 @@
border-radius: 5px;
padding: 9px 16px;
font-size: 13px;
transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
transition: background 150ms ease, color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
&:hover {
background: var(--color-bg-elevated);
color: var(--color-text-primary);
border-color: var(--color-border-hover);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
transform: translateY(-1px);
}
&:active {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
transform: translateY(0);
}
}
/* ── Interactive shadow patterns ────────────────── */
/* Tab/toggle group: active item gets elevation shadow */
@utility tab-active-shadow {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
/* Card hover lift — optional, add to cards that should feel interactive */
@utility card-lift {
transition: box-shadow 200ms ease, transform 200ms ease, border-color 200ms ease;
&:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
transform: translateY(-2px);
border-color: var(--color-border-hover);
}
&:active {
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
transform: translateY(0);
}
}