68 lines
1.4 KiB
SCSS
68 lines
1.4 KiB
SCSS
@include comfortable {
|
|
--editable-text-padding-inline: 4px;
|
|
--editable-text-padding-block: 4px;
|
|
}
|
|
|
|
@include compact {
|
|
--editable-text-padding-inline: 4px;
|
|
--editable-text-padding-block: 1px;
|
|
}
|
|
|
|
editable-text {
|
|
--min-visible-lines: 0;
|
|
--max-visible-lines: 10;
|
|
|
|
&[multiline] {
|
|
--min-visible-lines: 5;
|
|
--max-visible-lines: 20;
|
|
}
|
|
|
|
// Fun auto-sizing approach from CSSTricks:
|
|
// https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/
|
|
|
|
display: grid;
|
|
|
|
&::after {
|
|
content: attr(value) ' ';
|
|
visibility: hidden;
|
|
margin: 1px;
|
|
}
|
|
|
|
&::after, .input {
|
|
grid-area: 1 / 1 / 2 / 2;
|
|
padding: var(--editable-text-padding-block) var(--editable-text-padding-inline);
|
|
font: inherit;
|
|
line-height: inherit;
|
|
color: inherit;
|
|
overflow-wrap: break-word;
|
|
white-space: pre-wrap;
|
|
max-height: calc(2ex * var(--max-visible-lines));
|
|
}
|
|
|
|
.input {
|
|
// Necessary for consistent padding, even if it's actually an <input>
|
|
-moz-default-appearance: textarea;
|
|
|
|
min-height: calc(2ex * var(--min-visible-lines));
|
|
margin: 0;
|
|
|
|
&:read-only, &:not(:focus) {
|
|
appearance: none;
|
|
border: none;
|
|
outline: none;
|
|
background: transparent;
|
|
margin: 1px;
|
|
}
|
|
|
|
&:hover:not(:read-only, :focus) {
|
|
border-radius: 5px;
|
|
border: 1px solid var(--fill-tertiary);
|
|
box-shadow: 0 0 0 1px var(--fill-quinary);
|
|
margin: 0;
|
|
}
|
|
|
|
::placeholder {
|
|
color: var(--fill-tertiary);
|
|
}
|
|
}
|
|
}
|