philomena/assets/css/elements/form.css
2024-06-12 20:50:46 +02:00

63 lines
1.1 KiB
CSS

form .field {
display: flex;
gap: var(--padding-normal);
margin-bottom: var(--padding-normal);
}
form .field:last-child {
margin-bottom: 0;
}
form .form--two-column {
display: grid;
grid: inherit;
grid-template-columns: 1 / -1;
gap: var(--padding-normal);
}
form .form--two-column > .field,
form .form--two-column > li {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--padding-normal);
}
form .form--three-items {
display: grid;
grid: inherit;
grid-template-columns: 1 / -1;
gap: var(--padding-normal);
}
form .form--three-items > .field {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: 1fr auto;
gap: var(--padding-normal);
}
form .form--three-items > .field > *:nth-child(1) {
grid-area: 1 / 1 / 2 / 2;
}
form .form--three-items > .field > *:nth-child(2) {
grid-area: 1 / 2 / 2 / 3;
}
form .form--three-items > .field > *:nth-child(3) {
grid-area: 2 / 1 / 3 / 3;
}
form .form--three-items select {
width: fit-content;
}
form .with-error {
display: block;
}
form label {
display: flex;
flex: 1 0 auto;
align-self: center;
}