MarcoE/SteUP_Dotnet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Separa di nuovo i campi della schermata di accesso

Browse Source 
Il pannello unico diviso da linee e' la forma di un elenco da consultare. Qui
si compilano tre dati diversi uno dopo l'altro, e lo stacco fra un campo e
l'altro serve a dire dove finisce quello che stai scrivendo.

Ogni campo torna a essere una superficie sua, con il bordo che si accende su
quello attivo. Le etichette restano ferme sopra il campo: e' il salto
dell'etichetta al primo tocco che faceva sembrare la schermata un modulo web,
non il fatto che i campi fossero separati.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Marco Elefante
2026-09-17 12:54:51 +02:00
parent 66ed92299b
commit 4c1ef3d846
1 changed files with 11 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
SteUp.Shared/wwwroot/css/components.css
+11 -7
View File
@@ -899,24 +899,28 @@
/* Un pannello solo, tre righe divise da una linea: la stessa forma delle
liste dell'app, invece di tre riquadri che galleggiano separati. */
/* Tre campi distinti, non tre righe di un blocco unico: qui non si consulta un
elenco, si compilano tre dati diversi uno dopo l'altro, e lo stacco fra uno
e l'altro dice dove finisce quello che stai scrivendo. */
.onboarding__fields {
display: flex;
flex-direction: column;
gap: var(--space-sm);
margin-top: var(--space-xl);
background-color: var(--surface);
border-radius: var(--radius-surface);
overflow: hidden;
}
.onboarding__field {
display: block;
padding: var(--space-sm) var(--space-md);
transition: background-color var(--duration-fast) var(--ease-out);
background-color: var(--surface);
border-radius: var(--radius-control);
border: 1.5px solid transparent;
transition: border-color var(--duration-fast) var(--ease-out);
}
.onboarding__field + .onboarding__field { border-top: 1px solid var(--divider); }
.onboarding__field:focus-within { background-color: var(--surface-muted); }
/* Il campo attivo si segna col bordo, non cambiando fondo: lo stacco dallo
sfondo di pagina lo fa gia' la superficie bianca. */
.onboarding__field:focus-within { border-color: var(--primary-dark); }
/* L'etichetta sta sopra il campo e non si muove: niente testo che scivola
quando appoggi il dito. */