mirror of
https://github.com/philomena-dev/philomena.git
synced 2024-11-24 12:37:58 +01:00
59 lines
1 KiB
CSS
59 lines
1 KiB
CSS
form .field {
|
|
display: flex;
|
|
gap: var(--padding-normal);
|
|
margin-bottom: var(--padding-normal);
|
|
}
|
|
|
|
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;
|
|
}
|