justin/new-site
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Style officer suggestions as clickable cards with arrow hint

Browse source 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
justin 2026-04-29 01:22:25 -05:00
parent 834d2fc1ee
commit 63f74e8486
1 changed files with 16 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

20
site/src/components/intake/steps/OfficerStep.astro
View file

@ -91,10 +91,22 @@
.pw-row > * { flex: 1 1 140px; }
.pw-suggestions { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; padding: 0.75rem; margin-bottom: 1rem; }
.pw-suggest-label { font-size: 0.82rem; color: #1e40af; font-weight: 600; margin: 0 0 0.5rem; }
.pw-suggest-btn { display: block; width: 100%; text-align: left; padding: 0.5rem 0.75rem; margin: 0.25rem 0; border: 1px solid #dbeafe; background: #fff; border-radius: 6px; cursor: pointer; font-size: 0.85rem; color: #1f2937; transition: all 0.1s; }
.pw-suggest-btn:hover { border-color: #3b82f6; background: #f0f4ff; }
.pw-suggest-btn .sg-name { font-weight: 600; }
.pw-suggest-btn .sg-detail { font-size: 0.78rem; color: #6b7280; }
.pw-suggest-btn {
display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left;
padding: 0.6rem 0.85rem; margin: 0.3rem 0;
border: 2px solid #93c5fd; background: #fff; border-radius: 8px;
cursor: pointer; font-size: 0.85rem; color: #1f2937;
transition: all 0.15s; position: relative;
}
.pw-suggest-btn::after {
content: "Click to use \2192"; position: absolute; right: 12px; top: 50%;
transform: translateY(-50%); font-size: 0.72rem; font-weight: 600;
color: #3b82f6; opacity: 0.7;
}
.pw-suggest-btn:hover { border-color: #3b82f6; background: #eff6ff; box-shadow: 0 2px 8px rgba(59,130,246,0.15); }
.pw-suggest-btn:hover::after { opacity: 1; }
.pw-suggest-btn .sg-name { font-weight: 700; color: #1e3a5f; font-size: 0.9rem; }
.pw-suggest-btn .sg-detail { font-size: 0.78rem; color: #6b7280; display: block; padding-right: 5rem; }
.pw-err { color: #b91c1c; margin-top: 0.75rem; font-size: 0.9rem; }
</style>