Corrige trois régressions du restyling du formulaire de ligne comptable
- Le select "Type de ligne" affichait un chevron géant répété (le
shorthand `background: transparent` sur input/select/textarea
réinitialisait aussi position/repeat/size de Claro, transformant sa
flèche unique alignée à droite en motif carrelé). Les select gardent
maintenant leur background Claro intact.
- Les menus "Toggle Actions" (⋮) de la Répartition étaient ouverts en
permanence : mon display:flex écrasait le display:none par défaut de
Claro, cassant le toggle piloté par paragraphs.actions.js. Rescopé à
`.paragraphs-dropdown.open .paragraphs-dropdown-actions`.
- Marges resserrées : le `.form-item { margin-block: 1.5rem }` de Claro
s'ajoutait à notre propre grid-gap. Neutralisé (`margin-block: 0`), et
gap/paddings réduits.
This commit is contained in:
@@ -26,12 +26,18 @@
|
|||||||
|
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(3, 1fr);
|
grid-template-columns: repeat(3, 1fr);
|
||||||
gap: 0.9rem 1rem;
|
gap: 0.5rem 1rem;
|
||||||
max-width: 44rem;
|
max-width: 44rem;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 0.15rem 0.1rem 0.5rem;
|
padding: 0.15rem 0.1rem 0.5rem;
|
||||||
color: var(--flform-text);
|
color: var(--flform-text);
|
||||||
}
|
}
|
||||||
|
/* Claro gives every .form-item a large margin-block (1.5rem, meant for a
|
||||||
|
form with one field per row) -- with our own grid `gap` now doing that
|
||||||
|
job, this just doubles up the spacing between rows. */
|
||||||
|
.figli-ledger-form .form-item {
|
||||||
|
margin-block: 0;
|
||||||
|
}
|
||||||
html.gin--dark-mode .figli-ledger-form {
|
html.gin--dark-mode .figli-ledger-form {
|
||||||
--flform-border: #3d3e42;
|
--flform-border: #3d3e42;
|
||||||
--flform-border-soft: #333438;
|
--flform-border-soft: #333438;
|
||||||
@@ -92,11 +98,20 @@ html.gin--dark-mode .figli-ledger-form {
|
|||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border: 1px solid var(--flform-border);
|
border: 1px solid var(--flform-border);
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
padding: 0.4rem 0.55rem;
|
padding: 0.32rem 0.5rem;
|
||||||
font-size: 0.88rem;
|
font-size: 0.88rem;
|
||||||
background: transparent;
|
|
||||||
color: var(--flform-text);
|
color: var(--flform-text);
|
||||||
}
|
}
|
||||||
|
/* Not select: Claro positions its dropdown-chevron background-image via
|
||||||
|
background-position/-repeat/-size, which the `background` shorthand
|
||||||
|
below would silently reset to their initial values (top-left,
|
||||||
|
repeating) -- that turned the single right-aligned arrow into a tiled
|
||||||
|
pattern smeared across the whole field. Selects keep Claro's own
|
||||||
|
background untouched; only the border/radius/padding above apply. */
|
||||||
|
.figli-ledger-form input.form-element,
|
||||||
|
.figli-ledger-form textarea.form-element {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
.figli-ledger-form input.form-element:focus,
|
.figli-ledger-form input.form-element:focus,
|
||||||
.figli-ledger-form select.form-element:focus,
|
.figli-ledger-form select.form-element:focus,
|
||||||
.figli-ledger-form textarea.form-element:focus {
|
.figli-ledger-form textarea.form-element:focus {
|
||||||
@@ -130,10 +145,10 @@ html.gin--dark-mode .figli-ledger-form {
|
|||||||
}
|
}
|
||||||
.figli-ledger-form table.field-multiple-table thead th {
|
.figli-ledger-form table.field-multiple-table thead th {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
padding: 0.5rem 0.6rem 0.35rem;
|
padding: 0.4rem 0.6rem 0.25rem;
|
||||||
}
|
}
|
||||||
.figli-ledger-form table.field-multiple-table tbody td {
|
.figli-ledger-form table.field-multiple-table tbody td {
|
||||||
padding: 0.5rem 0.6rem;
|
padding: 0.35rem 0.6rem;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
border-top: 1px solid var(--flform-border-soft);
|
border-top: 1px solid var(--flform-border-soft);
|
||||||
}
|
}
|
||||||
@@ -181,7 +196,13 @@ html.gin--dark-mode .figli-ledger-form {
|
|||||||
.figli-ledger-form .paragraphs-dropdown-toggle:hover {
|
.figli-ledger-form .paragraphs-dropdown-toggle:hover {
|
||||||
color: var(--flform-accent);
|
color: var(--flform-accent);
|
||||||
}
|
}
|
||||||
.figli-ledger-form .paragraphs-dropdown-actions {
|
/* Closed by default (Claro's own paragraphs.actions.css already sets
|
||||||
|
display: none here and toggles a sibling .open class on click via
|
||||||
|
paragraphs.actions.js) -- only restyle the panel's look, and only once
|
||||||
|
Drupal's own JS has actually opened it. Getting this wrong (e.g.
|
||||||
|
forcing `display: flex` unconditionally here) makes every "Toggle
|
||||||
|
Actions" menu render permanently expanded. */
|
||||||
|
.figli-ledger-form .paragraphs-dropdown.open .paragraphs-dropdown-actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 0.2rem;
|
gap: 0.2rem;
|
||||||
|
|||||||
Reference in New Issue
Block a user