Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: Update user field styling in the create-account modal (#24091) 

1. Removes accidental bold from `text` and `multiselect` labels/placeholders
2. Adds the animated label/placeholder combo to `multiselect`
3. Makes the `multiselect` placeholder lighter to match other fields
4. Makes the `dropdown` values darker to match other fields
5. Removes the extra 5px spacing before `confirmation` fields
This commit is contained in:
Jarek Radosz 2023-10-25 13:03:20 +02:00 committed by GitHub
parent 605ec0ad9f
commit 125ab9f31d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 16 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
app/assets/stylesheets/common/base/login.scss
View File

@ -157,7 +157,9 @@ body.invite-page {
min-height: 1.4em; // prevents height increase due to tips min-height: 1.4em; // prevents height increase due to tips
} }
label.alt-placeholder, label.alt-placeholder,
.user-field.dropdown label.control-label { .user-field.text label.control-label,
.user-field.dropdown label.control-label,
.user-field.multiselect label.control-label {
color: var(--primary-medium); color: var(--primary-medium);
font-size: 16px; font-size: 16px;
font-weight: normal; font-weight: normal;
@ -168,7 +170,9 @@ body.invite-page {
box-shadow: 0 0 0 0px rgba(var(--tertiary-rgb), 0); box-shadow: 0 0 0 0px rgba(var(--tertiary-rgb), 0);
transition: 0.2s ease all; transition: 0.2s ease all;
} }
.user-field.dropdown label.control-label { .user-field.text label.control-label,
.user-field.dropdown label.control-label,
.user-field.multiselect label.control-label {
z-index: 999; z-index: 999;
top: -8px; top: -8px;
left: calc(1em - 0.25em); left: calc(1em - 0.25em);
@ -176,8 +180,10 @@ body.invite-page {
padding: 0 0.25em 0 0.25em; padding: 0 0.25em 0 0.25em;
font-size: $font-down-1; font-size: $font-down-1;
} }
.user-field.dropdown:focus-within { .user-field.text:focus-within,
z-index: 1000; // this ensures the active dropdown is always on top of sibling dropdown labels .user-field.dropdown:focus-within,
.user-field.multiselect:focus-within {
z-index: 1000; // ensures the active input is always on top of sibling input labels
} }
input:focus + label.alt-placeholder, input:focus + label.alt-placeholder,
input.value-entered + label.alt-placeholder { input.value-entered + label.alt-placeholder {
@ -255,7 +261,8 @@ body.invite-page {
text-overflow: ellipsis; text-overflow: ellipsis;
} }
} }
span.name { details:not(.has-selection) span.name,
details:not(.has-selection) span.formatted-selection {
color: var(--primary-medium); color: var(--primary-medium);
} }
.select-kit-row span.name { .select-kit-row span.name {

3
app/assets/stylesheets/desktop/login.scss
View File

@ -356,9 +356,6 @@
} }
display: flex; display: flex;
flex-direction: column; flex-direction: column;
&.confirm {
margin-top: 5px;
}
} }
.invites-show { .invites-show {

3
app/assets/stylesheets/desktop/topic-post.scss
View File

@ -523,7 +523,8 @@ blockquote {
-webkit-font-smoothing: subpixel-antialiased; -webkit-font-smoothing: subpixel-antialiased;
} }
.dropdown { .dropdown,
.multiselect {
position: relative; position: relative;
} }

3
app/assets/stylesheets/mobile/topic-list.scss
View File

@ -438,7 +438,8 @@ tr.category-topic-link {
// Misc. stuff // Misc. stuff
// -------------------------------------------------- // --------------------------------------------------
.dropdown { .dropdown,
.multiselect {
position: relative; position: relative;
} }
.dropdown-toggle:active, .dropdown-toggle:active,