Circuit-Forge/avocet
3
0
Fork 0
Code Issues 9 Pull requests 1 Projects Releases Packages Wiki Activity Actions

feat(avocet): LabelBucketGrid bucket-mode CSS — spring expansion, glow on drop

Browse source
This commit is contained in:
pyr0ball 2026-03-03 16:19:29 -08:00
parent 9b5a1ae752
commit b623d252d0
1 changed files with 41 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

79
web/src/components/LabelBucketGrid.vue
View file

@ -40,11 +40,11 @@ function onDrop(name: string) {
.label-grid { .label-grid {
display: grid; display: grid;
grid-template-columns: repeat(5, 1fr); grid-template-columns: repeat(5, 1fr);
gap: var(--space-2); gap: 0.5rem;
transition: all var(--bucket-expand); transition: all var(--bucket-expand, 250ms cubic-bezier(0.34, 1.56, 0.64, 1));
} }
/* Mobile: 3×3 numpad layout + hired at bottom */ /* Mobile: 3-column numpad layout */
@media (max-width: 480px) { @media (max-width: 480px) {
.label-grid { .label-grid {
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
@ -52,67 +52,70 @@ function onDrop(name: string) {
} }
.label-grid.bucket-mode { .label-grid.bucket-mode {
gap: var(--space-4); gap: 1rem;
padding: var(--space-3); padding: 1rem;
} }
.label-btn { .label-btn {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: var(--space-1); justify-content: center;
padding: var(--space-2) var(--space-1); gap: 0.25rem;
border: 2px solid var(--label-color, var(--color-border)); min-height: 44px; /* Touch target */
border-radius: var(--radius-md); padding: 0.5rem 0.25rem;
border-radius: 0.5rem;
border: 2px solid var(--label-color, #607D8B);
background: transparent; background: transparent;
color: var(--color-text); color: var(--color-text, #1a2338);
cursor: pointer; cursor: pointer;
font-family: var(--font-body); transition: all var(--bucket-expand, 250ms cubic-bezier(0.34, 1.56, 0.64, 1));
transition: all var(--bucket-expand); font-family: var(--font-body, sans-serif);
min-height: 44px; /* touch target */
} }
.label-grid.bucket-mode .label-btn { .label-grid.bucket-mode .label-btn {
padding: var(--space-6) var(--space-2); min-height: 80px;
font-size: 1.15rem; padding: 1rem 0.5rem;
} border-width: 3px;
font-size: 1.1rem;
.label-btn:hover,
.label-btn:focus-visible {
background: color-mix(in srgb, var(--label-color) 12%, transparent);
}
.label-btn:focus-visible {
outline: 2px solid var(--label-color);
outline-offset: 2px;
} }
.label-btn.is-drop-target { .label-btn.is-drop-target {
background: var(--label-color); background: var(--label-color, #607D8B);
color: var(--color-text-inverse, #fff); color: #fff;
transform: scale(1.08); transform: scale(1.08);
box-shadow: 0 0 16px color-mix(in srgb, var(--label-color) 60%, transparent); box-shadow: 0 0 16px color-mix(in srgb, var(--label-color, #607D8B) 60%, transparent);
}
.label-btn:hover:not(.is-drop-target) {
background: color-mix(in srgb, var(--label-color, #607D8B) 12%, transparent);
} }
.key-hint { .key-hint {
font-size: 0.7rem; font-size: 0.65rem;
font-weight: 700; font-family: var(--font-mono, monospace);
opacity: 0.6; opacity: 0.55;
font-family: var(--font-mono); line-height: 1;
} }
.emoji { font-size: 1.2rem; line-height: 1; } .emoji {
font-size: 1.25rem;
line-height: 1;
}
.label-name { .label-name {
font-size: 0.65rem; font-size: 0.7rem;
text-align: center; text-align: center;
line-height: 1.2; line-height: 1.2;
word-break: break-word; word-break: break-word;
color: var(--color-text-muted); hyphens: auto;
} }
.label-grid.bucket-mode .label-name { /* Reduced-motion fallback */
font-size: 0.75rem; @media (prefers-reduced-motion: reduce) {
color: var(--color-text); .label-grid,
.label-btn {
transition: none;
}
} }
</style> </style>