@indiekit/frontend
Version:
Frontend components for Indiekit
43 lines (37 loc) • 1.1 kB
CSS
textarea-field {
display: block;
}
.textarea {
appearance: none;
background-color: var(--color-background);
border: var(--input-border-width) solid var(--color-outline-variant);
border-radius: var(--border-radius-small);
font: var(--font-body);
inline-size: 100%;
margin-block-end: var(--input-border-width-focus-offset);
padding-block: calc(var(--space-s) / 2);
padding-inline: var(--space-s);
&:focus-visible {
border-color: var(--color-on-background);
border-width: var(--input-border-width-focus);
inset-block-start: calc(var(--input-border-width-focus-offset) * -1);
margin-block-end: calc(var(--input-border-width-focus-offset) * -1);
padding-inline-start: calc(
var(--space-s) - var(--input-border-width-focus-offset)
);
}
&:disabled,
&[readonly] {
background: var(--color-offset);
border-color: var(--color-offset);
color: var(--color-on-offset);
resize: none;
}
}
.textarea--error {
border-color: var(--color-error);
}
.textarea--monospace {
font: var(--font-code);
font-variant-numeric: tabular-nums;
}