improvements and cleanup to input components

This commit is contained in:
Henry Jameson 2022-04-26 17:31:26 +03:00
parent a96367139c
commit 079e289260
6 changed files with 24 additions and 17 deletions

View file

@ -3,6 +3,7 @@
:root { :root {
--navbar-height: 3.5rem; --navbar-height: 3.5rem;
--post-line-height: 1.4;
} }
html { html {
@ -440,7 +441,7 @@ textarea,
height: unset; height: unset;
} }
--padding: 0.5em; --_padding: 0.5em;
border: none; border: none;
border-radius: $fallback--inputRadius; border-radius: $fallback--inputRadius;
@ -458,10 +459,9 @@ textarea,
box-sizing: border-box; box-sizing: border-box;
display: inline-block; display: inline-block;
position: relative; position: relative;
height: 2.4em; line-height: 2;
line-height: 1.2;
hyphens: none; hyphens: none;
padding: var(--padding); padding: 0 var(--_padding);
&:disabled, &:disabled,
&[disabled=disabled], &[disabled=disabled],
@ -563,6 +563,12 @@ textarea,
} }
} }
// Textareas should have stock line-height + vertical padding instead of huge line-height
textarea {
padding: var(--_padding);
line-height: var(--post-line-height);
}
option { option {
color: $fallback--text; color: $fallback--text;
color: var(--text, $fallback--text); color: var(--text, $fallback--text);

View file

@ -43,7 +43,7 @@
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
flex-shrink: 1; flex-shrink: 1;
line-height: 1.4em; line-height: var(--post-line-height);
} }
.chat-preview { .chat-preview {
@ -82,7 +82,7 @@
} }
.time-wrapper { .time-wrapper {
line-height: 1.4em; line-height: var(--post-line-height);
} }
.chat-preview-body { .chat-preview-body {

View file

@ -119,7 +119,7 @@
.notification-details { .notification-details {
min-width: 0; min-width: 0;
word-wrap: break-word; word-wrap: break-word;
line-height: 1.4; line-height: var(--post-line-height);
position: relative; position: relative;
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;

View file

@ -394,7 +394,6 @@
border-radius: var(--tooltipRadius, $fallback--tooltipRadius); border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
padding: 0.5em; padding: 0.5em;
margin: 0; margin: 0;
line-height: 1.4em;
} }
.text-format { .text-format {
@ -503,17 +502,19 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 0.25em 0.5em 0.5em; padding: 0.25em 0.5em 0.5em;
line-height: 1.85em; line-height: 1.85;
} }
.form-post-body { .form-post-body {
box-sizing: content-box; // TODO: make a resizable textarea component?
box-sizing: content-box; // needed for easier computation of dynamic size
overflow: hidden; overflow: hidden;
transition: min-height 200ms 100ms; transition: min-height 200ms 100ms;
padding-bottom: calc(var(--padding) + 1.2em); // stock padding + 1 line of text (for counter)
// Because we changed box-sizing original height values are no longer correct padding-bottom: calc(var(--_padding) + var(--post-line-height) * 1em);
height: 1.2em; // two lines of text
min-height: 1.2em; height: calc(var(--post-line-height) * 1em);
min-height: calc(var(--post-line-height) * 1em);
resize: none; resize: none;
&.scrollable-form { &.scrollable-form {

View file

@ -19,7 +19,7 @@
overflow-wrap: break-word; overflow-wrap: break-word;
word-wrap: break-word; word-wrap: break-word;
word-break: break-word; word-break: break-word;
line-height: 1.4em; line-height: var(--post-line-height);
} }
.summary { .summary {
@ -33,7 +33,7 @@
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
height: 1.4em; height: 1.4;
} }
} }

View file

@ -87,7 +87,7 @@
&-left { &-left {
padding: 1.1em 0.7em 0.7em; padding: 1.1em 0.7em 0.7em;
line-height: 1.4em; line-height: var(--post-line-height);
box-sizing: border-box; box-sizing: border-box;
> div { > div {