UX: Emoji popup layout adjustments (#12533)

This commit is contained in:
Penar Musaraj 2021-03-26 13:07:04 -04:00 committed by GitHub
parent 5096920500
commit edc0f61920
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -60,6 +60,7 @@ sup img.emoji {
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
padding: 0.25em; padding: 0.25em;
padding-left: 0.75em;
height: 100%; height: 100%;
background: var(--secondary); background: var(--secondary);
@ -101,8 +102,9 @@ sup img.emoji {
} }
.emoji-picker-category-buttons { .emoji-picker-category-buttons {
overflow-y: scroll; overflow-y: auto;
width: 60px; width: 50px;
padding-left: 0.5em;
display: flex; display: flex;
justify-content: center; justify-content: center;
flex-wrap: wrap; flex-wrap: wrap;
@ -131,7 +133,7 @@ sup img.emoji {
display: flex; display: flex;
width: 100%; width: 100%;
position: relative; position: relative;
padding: 0.25em; padding: 0.75em;
border-bottom: 1px solid var(--primary-low); border-bottom: 1px solid var(--primary-low);
box-sizing: border-box; box-sizing: border-box;
align-items: center; align-items: center;
@ -139,17 +141,17 @@ sup img.emoji {
.filter { .filter {
flex: 1 0 auto; flex: 1 0 auto;
margin: 0; margin: 0;
border: 0; width: calc(100% - 50px);
padding: 0; margin-right: 0.5em;
&:focus {
box-shadow: none;
}
} }
.d-icon { .d-icon {
color: var(--primary-medium); color: var(--primary-medium);
margin-right: 0.5em; cursor: pointer;
padding: 0.25em;
&:hover {
color: var(--tertiary);
}
} }
} }