Some design tweaks to web emoji picker (#8076)

* Tighten up and reverse action items on web

* Tweak web styles for emoji bar

* Might as well make disabled more obvious

* Format
This commit is contained in:
Eric Bailey
2025-03-28 16:38:24 -05:00
committed by GitHub
parent 152bc3c1ec
commit a84ba121fa
3 changed files with 96 additions and 48 deletions
+35
View File
@@ -290,3 +290,38 @@ input[type='range'][orient='vertical']::-moz-range-thumb {
width: 16px;
margin-left: -6px;
}
/*
* EmojiReactionPicker dropdown elements, within Radix components
*/
.EmojiReactionPicker__Pressable {
cursor: pointer;
border: 1px solid transparent;
}
.EmojiReactionPicker__Pressable:focus {
outline: none;
border-color: var(--text);
}
.EmojiReactionPicker__Pressable:hover {
outline: none;
transform: scale(1.1);
border-color: transparent;
}
.EmojiReactionPicker__Pressable:not(.__selected).__disabled {
transform: scale(1) !important;
border-color: transparent !important;
opacity: 0.7;
}
.EmojiReactionPicker__Pressable ~ button {
cursor: pointer;
border: 1px solid transparent;
}
.EmojiReactionPicker__Pressable ~ button:focus {
outline: none;
border-color: var(--text);
}
.EmojiReactionPicker__Pressable ~ button:hover {
outline: none;
background-color: var(--backgroundLight);
border-color: transparent;
}