react-jwchat
Version:
This is an easy-to-use web chat component, based on react.
56 lines (55 loc) • 1.05 kB
CSS
.content {
position: relative;
}
.emoji_wrapper {
position: absolute;
bottom: -90px;
left: 30px;
display: flex;
flex-wrap: wrap;
width: 288px;
background-color: white;
border: solid 1px #aaaaaa;
border-radius: 5px;
padding: 3px;
}
.emoji_wrapper::before {
content: '';
border: solid 8px transparent;
border-right: solid 8px #aaaaaa;
position: absolute;
top: 50%;
left: -16px;
}
.emoji_wrapper::after {
content: '';
border: solid 8px transparent;
border-right: solid 8px white;
position: absolute;
top: 50%;
left: -14.5px;
}
.emoji_item {
box-sizing: border-box;
padding: 0px 7px 0px 3px;
}
.emoji_item:hover {
background-color: #f1f1f1;
border-radius: 50%;
cursor: pointer;
}
.tool_icon {
height: 20px;
width: 20px;
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
margin-right: 10px;
}
.emoji {
background-image: url('../../image/emoji_black.png');
}
.emoji:hover {
cursor: pointer;
background-image: url('../../image/emoji_light.png');
}