Remove space between emojis in picker

Signed-off-by: Tulir Asokan <tulir@maunium.net>
This commit is contained in:
Tulir Asokan 2019-10-20 12:31:28 +03:00
parent 10732e8e73
commit 438ad54701
2 changed files with 15 additions and 8 deletions

View File

@ -145,17 +145,22 @@ limitations under the License.
margin: 0;
}
.mx_EmojiPicker_item {
.mx_EmojiPicker_item_wrapper {
display: inline-block;
list-style: none;
width: 38px;
cursor: pointer;
}
.mx_EmojiPicker_item {
display: inline-block;
font-size: 20px;
margin: 1px;
padding: 4px 0;
width: 36px;
padding: 5px;
width: 100%;
height: 100%;
box-sizing: border-box;
text-align: center;
border-radius: 4px;
cursor: pointer;
&:hover {
background-color: $focus-bg-color;
@ -165,7 +170,7 @@ limitations under the License.
.mx_EmojiPicker_item_selected {
color: rgba(0, 0, 0, .5);
border: 1px solid $input-valid-border-color;
margin: 0;
padding: 4px;
}
.mx_EmojiPicker_category_label, .mx_EmojiPicker_preview_name {

View File

@ -33,8 +33,10 @@ class Emoji extends React.PureComponent {
<li onClick={() => onClick(emoji)}
onMouseEnter={() => onMouseEnter(emoji)}
onMouseLeave={() => onMouseLeave(emoji)}
className={`mx_EmojiPicker_item ${isSelected ? 'mx_EmojiPicker_item_selected' : ''}`}>
{emoji.unicode}
className="mx_EmojiPicker_item_wrapper">
<div className={`mx_EmojiPicker_item ${isSelected ? 'mx_EmojiPicker_item_selected' : ''}`}>
{emoji.unicode}
</div>
</li>
);
}