starcoach-hackathon/zarinpal-analytics-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: simplify form focus treatment

Browse Source
This commit is contained in:
Amirhossein Khalili
2026-08-20 23:07:31 +03:30
parent d66a80affe
commit 760e5c6752
2 changed files with 12 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
DESIGN.md
View File

@@ -132,6 +132,7 @@ The approved Persian-first baseline remains authoritative where the shipped arti
| Version | Date | Decision |
| ------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 0.9.3 | 2026-08-20 | Replaced stacked field focus outlines with one narrow semantic-blue border across text fields, textareas, native selects, and custom select triggers; other keyboard targets retain a subtle 1px outline. |
| 0.9.2 | 2026-08-20 | Pinned the initialization skeleton sidebar to the physical right and reserved matching right-side content space so loading and loaded shells share the same geometry. |
| 0.9.1 | 2026-08-20 | Distributed the desktop period-type group and exact-period control across the available filter-bar width while preserving the compact mobile sheet layout. |
| 0.9.0 | 2026-08-20 | Added labeled X/Y axes and Persian ticks to the payment-history chart, and made the fee-share donut fluidly fill its dedicated visual column on larger viewports. |
@@ -269,7 +270,7 @@ The form language is low-radius and precise. Data cards, filter bars, inputs, se
### Inputs / Fields
- **Style:** Transparent or workspace-toned field, 1px input border, 6–8px radius, 32–36px desktop height, 44px touch height, and compact 12–14px text. Terminal and status selects use the same RTL popover primitive rather than the browser-native menu.
- **Focus:** Border shifts to the ring color and gains a restrained 1px low-opacity blue ring.
- **Focus:** Text fields, textareas, native selects, and custom select triggers use one narrow semantic-blue border without a second outer ring. Other keyboard-focusable controls use a restrained 1px outline.
- **Error / Disabled:** Error uses danger border plus ring; disabled fields reduce opacity and preserve legible text.
### Navigation

12
src/app.css
View File

@@ -132,8 +132,16 @@ select {
-webkit-tap-highlight-color: transparent;
}
:focus-visible {
outline: 3px solid var(--focus);
outline-offset: 3px;
outline: 1px solid var(--focus);
outline-offset: 2px;
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[data-slot='select-trigger']:focus-visible {
border-color: var(--ring);
outline: none;
box-shadow: none;
}
::selection {
background: #ffd400;