108 lines
2.1 KiB
SCSS
108 lines
2.1 KiB
SCSS
/* Form defaults. */
|
|
|
|
form {
|
|
/* Add vertical rhythm margins. */
|
|
margin-block: 0 var(--spacing-m);
|
|
}
|
|
|
|
input,
|
|
textarea,
|
|
select {
|
|
margin-block: 0 var(--spacing-m);
|
|
}
|
|
|
|
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;
|
|
}
|
|
}
|
|
}
|