5ae6f88b15
- Remove margins and add a border to the pseudo-element. It improves how the text of the pseudo-component matches the text from textarea and should prevent the scrollbar from appearing due to mismatch. - Swap explicit width setting for editable-text in itemBox for min-width: 0. It still allows the editable-text to be shrunk when the itemBox is narrow but does not cause mismatches between pseudo elements and the textarea.
121 lines
2.5 KiB
SCSS
121 lines
2.5 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;
|
|
}
|
|
|
|
&[nowrap] {
|
|
--min-visible-lines: 1;
|
|
}
|
|
|
|
&[tight] {
|
|
@include comfortable {
|
|
--editable-text-padding-inline: 4px;
|
|
--editable-text-padding-block: 2px;
|
|
}
|
|
|
|
@include compact {
|
|
--editable-text-padding-inline: 3px;
|
|
--editable-text-padding-block: 1px;
|
|
}
|
|
}
|
|
|
|
// Fun auto-sizing approach from CSSTricks:
|
|
// https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/
|
|
|
|
display: grid;
|
|
|
|
span {
|
|
visibility: hidden;
|
|
margin: 0;
|
|
border: 1px solid transparent;
|
|
width: fit-content;
|
|
white-space: pre;
|
|
padding: var(--editable-text-padding-block) var(--editable-text-padding-inline);
|
|
}
|
|
|
|
&:not([nowrap])::after {
|
|
content: attr(value) ' ';
|
|
visibility: hidden;
|
|
border: 1px solid transparent;
|
|
padding: var(--editable-text-padding-block) var(--editable-text-padding-inline);
|
|
font: inherit;
|
|
line-height: inherit;
|
|
color: inherit;
|
|
}
|
|
|
|
&:not([nowrap])::after, &:not([nowrap]) .input {
|
|
grid-area: 1 / 1 / 2 / 2;
|
|
overflow-wrap: anywhere;
|
|
white-space: pre-wrap;
|
|
max-height: calc(2ex * var(--max-visible-lines));
|
|
}
|
|
|
|
.input {
|
|
@include focus-ring;
|
|
// 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;
|
|
border: 1px solid transparent;
|
|
|
|
font: inherit;
|
|
line-height: inherit;
|
|
color: inherit;
|
|
padding: var(--editable-text-padding-block) var(--editable-text-padding-inline);
|
|
|
|
&:read-only, &:not(:focus) {
|
|
appearance: none;
|
|
background: transparent;
|
|
}
|
|
|
|
&:hover:not(:read-only, :focus) {
|
|
border-radius: 5px;
|
|
background-color: var(--fill-quinary);
|
|
box-shadow: 0 0 0 1px var(--fill-quinary);
|
|
}
|
|
|
|
::placeholder {
|
|
color: var(--fill-tertiary);
|
|
}
|
|
}
|
|
|
|
&[multiline] {
|
|
&::after, .input {
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.input {
|
|
min-height: 5em;
|
|
}
|
|
}
|
|
&[nowrap] {
|
|
.input:not(:focus, :hover) {
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
&[hidden]{
|
|
display: none;
|
|
}
|
|
// Per https://stackoverflow.com/a/22700700, somehow this removes an extra half-line
|
|
// at the bottom of textarea on windows
|
|
@media (-moz-platform: windows) {
|
|
textarea {
|
|
overflow-x: hidden;
|
|
}
|
|
}
|
|
}
|