Style adjustments for forms.

This commit is contained in:
Fredrik Jonsson 2023-03-27 11:36:05 +02:00
commit 4ec8920b90
2 changed files with 10 additions and 6 deletions

View file

@ -11,7 +11,7 @@ body {
} }
.footer { .footer {
border-top: 2px solid var(--color-brand); border-top: 2px solid var(--color-border);
} }
// Apply smaller text to blocks, footer etc. // Apply smaller text to blocks, footer etc.
@ -202,11 +202,6 @@ figure {
// Search // Search
.search-input {
// Add vertical rhythm margins.
@include margin-block(1);
}
.search-text { .search-text {
font-size: var(--fs-l); font-size: var(--fs-l);
max-width: 80%; max-width: 80%;

View file

@ -18,6 +18,7 @@ select {
@include margin-bottom(.75); @include margin-bottom(.75);
} }
// Mark field as required if needed.
label { label {
&:has(+ :required) { &:has(+ :required) {
&::after { &::after {
@ -44,9 +45,17 @@ textarea {
width: Min(30em, 100%); width: Min(30em, 100%);
} }
// For forms with multibple fields show submit button below the form.
input:not(:only-of-type), input:not(:only-of-type),
textarea { textarea {
& + [type='submit'] { & + [type='submit'] {
display: block; display: block;
} }
} }
// For forms with single field add space between it and the submit button.
input:only-of-type {
&:has(+ [type='submit']) {
margin-right: .5rem;
}
}