68 lines
1.5 KiB
CSS
68 lines
1.5 KiB
CSS
textarea {
|
|
display: block;
|
|
color: var(--text);
|
|
border: none;
|
|
border-radius: var(--radius-sm);
|
|
min-height: 42px;
|
|
padding: 3px 9px;
|
|
padding: var(--padding-input-y) var(--padding-input-x);
|
|
width: 100%;
|
|
background: lightgrey;
|
|
outline: transparent;
|
|
}
|
|
|
|
[theme="color"] textarea {
|
|
background-color: var(--accent);
|
|
}
|
|
|
|
[theme="dark"] textarea {
|
|
background-color: var(--grey-darker);
|
|
}
|
|
|
|
[theme="light"] textarea {
|
|
background-color: var(--white);
|
|
}
|
|
|
|
/* Focus styles */
|
|
|
|
textarea:focus {
|
|
box-shadow: var(--border) 0 0 0 2px;
|
|
}
|
|
|
|
[theme="light"] textarea:focus {
|
|
box-shadow: var(--text) 0 0 0 2px;
|
|
}
|
|
|
|
[theme="dark"] textarea:focus {
|
|
box-shadow: var(--text) 0 0 0 2px;
|
|
}
|
|
|
|
.grow-wrap {
|
|
/* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
|
|
display: grid;
|
|
}
|
|
.grow-wrap::after {
|
|
/* Note the weird space! Needed to preventy jumpy behavior */
|
|
content: attr(data-replicated-value) " ";
|
|
|
|
/* This is how textarea text behaves */
|
|
white-space: pre-wrap;
|
|
|
|
/* Hidden from view, clicks, and screen readers */
|
|
visibility: hidden;
|
|
}
|
|
.grow-wrap > textarea {
|
|
/* You could leave this, but after a user resizes, then it ruins the auto sizing */
|
|
resize: none;
|
|
|
|
/* Firefox shows scrollbar on growth, you can hide like this. */
|
|
overflow: hidden;
|
|
}
|
|
.grow-wrap > textarea,
|
|
.grow-wrap::after {
|
|
/* Identical styling required!! */
|
|
font: inherit;
|
|
|
|
/* Place on top of each other */
|
|
grid-area: 1 / 1 / 2 / 2;
|
|
}
|