Adriano/InsanityLab-web
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

longevity: #15 bersagli touch >=44px per radio, pulsanti e link-pulsante

Browse Source 
Tablet del centro: label di radio (lg-field--consenso, alternative del
check-up), button di lg-form__nav e lg-btn a min-height 44px, senza
cambiare l'aspetto desktop.

Refs #15
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Adriano (daitarn)
2026-09-28 08:21:36 +02:00
parent 8aeb25f930
commit 680224e773
1 changed files with 7 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/platforms/src/styles/longevity.css
+7 -3
View File
@@ -154,13 +154,15 @@
.lg-field--consenso { border: 1px solid var(--lg-line); padding: 16px 18px; gap: 10px; }
.lg-field--consenso legend { padding: 0 4px; font-weight: 500; color: var(--c-heading); }
.lg-field--consenso label { display: flex; align-items: center; gap: 8px; font-weight: 400; }
/* Bersaglio touch >= 44px (#15, tablet del centro): l'input radio/checkbox resta piccolo,
ma l'intera label (dove il dito tocca davvero) ha l'altezza minima del criterio WCAG. */
.lg-field--consenso label { display: flex; align-items: center; gap: 8px; font-weight: 400; min-height: 44px; }
/* Sezioni ad alternative del check-up (#13): un fieldset per protocollo, radio in legenda. */
.lg-form__alternative { display: flex; flex-direction: column; gap: 12px; }
.lg-form__alternativa { border: 1px solid var(--lg-line); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.lg-form__alternativa legend { padding: 0 4px; }
.lg-form__alternativa legend label { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--c-heading); }
.lg-form__alternativa legend label { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--c-heading); min-height: 44px; } /* bersaglio touch (#15) */
.lg-form__soglia { margin: 0; font-size: .8rem; color: var(--c-text-light); }
.lg-form__alternativa details { font-size: .85rem; }
.lg-form__alternativa summary { cursor: pointer; color: var(--c-text-light); }
@@ -172,6 +174,7 @@
font-family: var(--font-heading); font-size: .78rem; font-weight: 600; letter-spacing: .08em;
text-transform: uppercase; padding: 11px 22px; border: 1px solid var(--c-heading);
background: transparent; color: var(--c-heading); cursor: pointer;
min-height: 44px; /* bersaglio touch (#15) */
}
.lg-form__nav button:disabled { opacity: .35; cursor: not-allowed; }
.lg-form__nav button:last-child:not(:only-child) { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
@@ -219,9 +222,10 @@
/* bottone pieno per un link che porta a un'azione (non un <button> di form) */
.lg-btn {
display: inline-block; font-family: var(--font-heading); font-size: .76rem; font-weight: 600;
display: inline-flex; align-items: center; font-family: var(--font-heading); font-size: .76rem; font-weight: 600;
letter-spacing: .06em; text-transform: uppercase; padding: 10px 20px; border: 1px solid var(--c-accent);
background: var(--c-accent); color: var(--lg-surface); text-decoration: none;
min-height: 44px; box-sizing: border-box; /* bersaglio touch (#15) */
}
.lg-btn:hover { background: var(--c-accent-dark); border-color: var(--c-accent-dark); }