112 lines
1.8 KiB
CSS
Executable file
112 lines
1.8 KiB
CSS
Executable file
:root {
|
|
/* padding for form */
|
|
/* 30 is min, 50 is max */
|
|
--padding-form: calc(((30 / 16) * 1rem) + (50 - 30) * var(--fluid-bp));
|
|
|
|
/* Margin for input */
|
|
/* 30 is min, 50 is max */
|
|
--margin-input: calc(((30 / 16) * 1rem) + (50 - 30) * var(--fluid-bp));
|
|
|
|
/* Margin for label */
|
|
/* 5 is min, 10 is max */
|
|
--margin-label: calc(((5 / 16) * 1rem) + (10 - 5) * var(--fluid-bp));
|
|
}
|
|
|
|
form {
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
background-color: var(--background-dark);
|
|
padding: 30px;
|
|
padding: var(--padding-form);
|
|
}
|
|
|
|
form * {
|
|
display: block;
|
|
}
|
|
|
|
form > * + * {
|
|
margin-top: 30px;
|
|
margin-top: var(--margin-s);
|
|
}
|
|
|
|
label ~ input,
|
|
label ~ select,
|
|
label ~ textarea {
|
|
margin-top: 5px;
|
|
margin-top: var(--margin-label);
|
|
}
|
|
|
|
label ~ span {
|
|
margin-top: 0;
|
|
}
|
|
|
|
legend {
|
|
padding: 0;
|
|
margin-bottom: 5px;
|
|
margin-bottom: var(--margin-label);
|
|
}
|
|
|
|
label ~ span {
|
|
color: var(--grey-dark);
|
|
font-style: italic;
|
|
font-weight: 600;
|
|
}
|
|
|
|
input + span,
|
|
select + span {
|
|
color: var(--grey-pitchblack);
|
|
display: none;
|
|
font-weight: 600;
|
|
}
|
|
|
|
input[type="radio"] ~ label,
|
|
input[type="checkbox"] ~ label {
|
|
font-weight: 400;
|
|
margin-right: var(--margin-label);
|
|
}
|
|
|
|
[aria-invalid] + span {
|
|
display: block;
|
|
color: var(--red-darker);
|
|
}
|
|
|
|
[data-size] {
|
|
width: 100%;
|
|
}
|
|
|
|
[data-size="30"] {
|
|
max-width: 30ch;
|
|
}
|
|
|
|
[data-size="10"] {
|
|
max-width: 10ch;
|
|
}
|
|
|
|
[type="checkbox"],
|
|
[type="radio"],
|
|
[type="checkbox"] ~ label,
|
|
[type="radio"] ~ label {
|
|
width: auto;
|
|
display: inline;
|
|
}
|
|
|
|
[theme="color"] form {
|
|
background-color: var(--background);
|
|
}
|
|
|
|
form .grouped {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
|
gap: var(--margin-s);
|
|
}
|
|
|
|
.errMsg {
|
|
color: var(--red-darker);
|
|
display: block;
|
|
font-weight: 600;
|
|
font-style: italic;
|
|
}
|
|
|
|
form[data-naked] {
|
|
all: unset;
|
|
}
|