100 lines
1.9 KiB
CSS
100 lines
1.9 KiB
CSS
/* 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 {
|
|
--color-input: currentColor;
|
|
--color-input-bg: light-dark(
|
|
oklch(from var(--color-input) 100% 0.03 h),
|
|
oklch(from var(--color-input) calc(l - 0.4) c h)
|
|
);
|
|
--color-input-border: light-dark(
|
|
oklch(from var(--color-input) calc(l + 0.2) c h),
|
|
oklch(from var(--color-input) calc(l - 0.07) c h)
|
|
);
|
|
|
|
&:user-valid {
|
|
--color-input: var(--color-success);
|
|
border-color: var(--color-input-border);
|
|
border-style: solid;
|
|
background-color: var(--color-input-bg);
|
|
}
|
|
|
|
&:focus:user-valid {
|
|
border-color: transparent;
|
|
}
|
|
|
|
&:user-invalid {
|
|
--color-input: var(--color-error);
|
|
border-color: var(--color-input-border);
|
|
border-style: solid;
|
|
background-color: var(--color-input-bg);
|
|
}
|
|
|
|
&:focus:user-invalid {
|
|
--color-input: var(--color-warning);
|
|
border-color: transparent;
|
|
background-color: var(--color-input-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'] {
|
|
width: min(20em, 100%);
|
|
}
|
|
|
|
/* Make field where you enter more info a bit wider. */
|
|
[type='text'],
|
|
textarea {
|
|
width: min(30em, 100%);
|
|
}
|
|
|
|
/* Make sure textareas without a rows attribute are not tiny. */
|
|
textarea:not([rows]) {
|
|
min-height: 7lh;
|
|
}
|