From c421dc0b2894ed2cae407b1727fff92603a7e90b Mon Sep 17 00:00:00 2001
From: Jarek Radosz <jradosz@gmail.com>
Date: Mon, 24 Oct 2022 19:37:01 +0200
Subject: [PATCH] UX: Improve autocomplete styling (#18723)
1. Restore the original text color (`--primary-high`)
2. Fix the double bottom border
3. Make the padding around icons even
---
.../stylesheets/common/base/compose.scss | 45 ++++++++++++-------
1 file changed, 28 insertions(+), 17 deletions(-)
diff --git a/app/assets/stylesheets/common/base/compose.scss b/app/assets/stylesheets/common/base/compose.scss
index ab8adc21af3..584fc1a3746 100644
--- a/app/assets/stylesheets/common/base/compose.scss
+++ b/app/assets/stylesheets/common/base/compose.scss
@@ -393,44 +393,55 @@ html.composer-open {
width: 240px;
background-color: var(--secondary);
border: 1px solid var(--primary-low);
+
ul {
list-style: none;
padding: 0;
margin: 0;
li {
- .d-icon-users {
- color: var(--primary-medium);
- padding: 0 2px;
+ &:not(:last-child) {
+ border-bottom: 1px solid var(--primary-low);
}
- border-bottom: 1px solid var(--primary-low);
-
a {
- padding: 5px;
- display: block;
@include ellipsis;
+ color: var(--primary-high);
+ display: flex;
+ padding: 5px;
- span.username {
- color: var(--primary);
- }
- span.name {
- font-size: var(--font-down-1);
- vertical-align: middle;
- }
- &.selected {
- background-color: var(--tertiary-low);
- }
@include hover {
background-color: var(--highlight-low);
text-decoration: none;
}
+ &.selected {
+ background-color: var(--tertiary-low);
+ }
+
+ span {
+ margin-left: 5px;
+
+ &.username {
+ color: var(--primary);
+ }
+
+ &.name {
+ font-size: var(--font-down-1);
+ vertical-align: middle;
+ }
+ }
+
.relative-date {
font-size: var(--font-down-3);
padding-top: 10em;
}
}
+
+ .d-icon-users {
+ color: var(--primary-medium);
+ padding: 0 2px;
+ }
}
}
}