13de06cd52
- Table structure rewrite to use grid layout instead of the <table> component so that screen readers can see the content - Added icons to mirror right-click actions - Moved creator actions to the options menu - Drag-drop to reorder creators - Using editable-text instead of clicky component - Consolidated autocomplete logic in one function - Added @focus-ring to all components of the itemBox - Fields are focusable and navigatable via keyboard in non-edit modes - General refactoring to consolidate stylesheets across platforms and remove code that's not more used (mainly related to handling old clicky text component). - Retractions panel background set for --material-background instead of light pink in dark mode.
119 lines
2.4 KiB
SCSS
119 lines
2.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;
|
|
}
|
|
|
|
&[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: nowrap;
|
|
padding: var(--editable-text-padding-block) var(--editable-text-padding-inline);
|
|
}
|
|
|
|
&:not([nowrap])::after {
|
|
content: attr(value) ' ';
|
|
visibility: hidden;
|
|
margin: 1px;
|
|
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;
|
|
}
|
|
// somehow it fixes extra tall textareas on windows that was rendered to have at least
|
|
// 3 rows even when there's no text
|
|
textarea {
|
|
overflow: hidden;
|
|
}
|
|
}
|