react-emoji-textarea
Version:
📝 React component displaying emoji automatically.
57 lines • 1.22 kB
CSS
.Emoji-Textarea *{
box-sizing: border-box;
}
.Emoji-Textarea{
border: 1px solid #e1e4e8;
display: flex;
flex-direction: column;
margin: 5px;
max-width: 500px;
}
.Emoji-Textarea textarea{
border-radius: 5px 5px 0px 0px;
border: none;
font-size: medium;
height: 300px;
outline: none;
padding: 20px;
resize: none;
width: 100%;
}
.Emoji-Textarea button.Emoji-Submit{
background: #2ea44f;
border-color: rgba(27,31,35,.15);
box-shadow: 0 1px 0 rgba(27,31,35,.1), inset 0 1px 0 hsla(0,0%,100%,.03);
border: none;
border-radius: 5px;
color: white;
font-weight: bold;
margin-left: auto;
padding: 5px 16px;
width: max-content;
}
.Emoji-Textarea .Emoji{
border-radius: 0px 0px 5px 5px;
padding: 20px;
text-align: right;
width: 100%;
}
.Emoji-Textarea .Emoji svg{
cursor: pointer;
}
.Emoji-Textarea .Emoji .Emoji-Grid{
cursor: pointer;
display: flex;
flex-wrap: wrap;
justify-content: center;
overflow-y: hidden;
}
.Emoji-Textarea .Emoji .Emoji-Grid span{
border: 1px solid #e1e4e8;
margin: 2px;
padding: 2px 10px;
border-radius: 5px;
}
.Emoji .Emoji-Off{
opacity: 0.2;
}