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 {
--navbar-height: 3.5rem;
--post-line-height: 1.4;
}
html {
@ -440,7 +441,7 @@ textarea,
height: unset;
}
--padding: 0.5em;
--_padding: 0.5em;
border: none;
border-radius: $fallback--inputRadius;
@ -458,10 +459,9 @@ textarea,
box-sizing: border-box;
display: inline-block;
position: relative;
height: 2.4em;
line-height: 1.2;
line-height: 2;
hyphens: none;
padding: var(--padding);
padding: 0 var(--_padding);
&: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 {
color: $fallback--text;
color: var(--text, $fallback--text);

View file

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

View file

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

View file

@ -394,7 +394,6 @@
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
padding: 0.5em;
margin: 0;
line-height: 1.4em;
}
.text-format {
@ -503,17 +502,19 @@
display: flex;
flex-direction: column;
padding: 0.25em 0.5em 0.5em;
line-height: 1.85em;
line-height: 1.85;
}
.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;
transition: min-height 200ms 100ms;
padding-bottom: calc(var(--padding) + 1.2em);
// Because we changed box-sizing original height values are no longer correct
height: 1.2em;
min-height: 1.2em;
// stock padding + 1 line of text (for counter)
padding-bottom: calc(var(--_padding) + var(--post-line-height) * 1em);
// two lines of text
height: calc(var(--post-line-height) * 1em);
min-height: calc(var(--post-line-height) * 1em);
resize: none;
&.scrollable-form {

View file

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

View file

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