108 lines
2.1 KiB
SCSS
108 lines
2.1 KiB
SCSS
// Form defaults.
|
|
|
|
form {
|
|
// Add vertical rhythm margins.
|
|
@include margin-block(0 1);
|
|
}
|
|
|
|
input,
|
|
textarea,
|
|
select {
|
|
@include margin-block(0 1);
|
|
}
|
|
|
|
label {
|
|
font-weight: var(--fw-bold);
|
|
|
|
// Display as block if before input.
|
|
&:has(+ input),
|
|
&:has(+ textarea){
|
|
display: block;
|
|
}
|
|
|
|
// Mark field as required if needed.
|
|
&:has(+ :required) {
|
|
&::after {
|
|
content: '*';
|
|
color: var(--color-mark-highlight);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Valid and invalid state.
|
|
input,
|
|
textarea {
|
|
&:user-valid {
|
|
border-color: var(--color-success);
|
|
border-style: solid;
|
|
background-color: var(--color-success-bg);
|
|
}
|
|
|
|
&:focus:user-valid {
|
|
border-color: transparent;
|
|
}
|
|
|
|
&:user-invalid {
|
|
border-color: var(--color-error);
|
|
border-style: solid;
|
|
background-color: var(--color-error-bg);
|
|
}
|
|
|
|
&:focus:user-invalid {
|
|
border-color: transparent;
|
|
background-color: var(--color-warning-bg);
|
|
}
|
|
}
|
|
|
|
// Set max text line width for readability.
|
|
input,
|
|
label,
|
|
textarea,
|
|
select {
|
|
max-width: var(--max-line-width);
|
|
}
|
|
|
|
fieldset {
|
|
border: 1px solid var(--color-border);
|
|
}
|
|
|
|
// Make field where you enter more info a bit wider.
|
|
[type='email'],
|
|
[type='password'],
|
|
[type='range'],
|
|
[type='search'],
|
|
[type='url'] {
|
|
// Writing "Min" instead of "min" to force use of css "min()" instead of sass "min()".
|
|
// stylelint-disable-next-line function-name-case
|
|
width: Min(20em, 100%);
|
|
}
|
|
|
|
// Make field where you enter more info a bit wider.
|
|
[type='text'],
|
|
textarea {
|
|
// Writing "Min" instead of "min" to force use of css "min()" instead of sass "min()".
|
|
// stylelint-disable-next-line function-name-case
|
|
width: Min(30em, 100%);
|
|
}
|
|
|
|
// Make sure textareas without a rows attribute are not tiny.
|
|
textarea:not([rows]) {
|
|
min-height: 7lh;
|
|
}
|
|
|
|
// For forms with multibple fields show submit button below the form.
|
|
input:not(:only-of-type),
|
|
textarea {
|
|
& + [type='submit'] {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
// For forms on mobile with single field add space between it and the submit button.
|
|
@media (min-width: 666px) {
|
|
input:only-of-type {
|
|
&:has(+ [type='submit']) {
|
|
margin-inline-end: .5rem;
|
|
}
|
|
}
|
|
}
|