Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

reactions: Refactor CSS to prepare for longer vote_text. 

This fixes a bug where in narrow windows, long vote_text could extend
beyond the body of the reaction's allocated area.

It also provides a matching right margin around the count/name inside
the reaction pill, which looks better when we have strings inside them.
This commit is contained in:
Raghav Luthra 2022-06-30 00:27:40 +05:30 committed by Tim Abbott
parent 1b75151a97
commit 477a1b5789
1 changed files with 12 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
static/styles/reactions.css
View File

@ -5,14 +5,15 @@
user-select: none;
.message_reaction {
display: flex;
float: left;
margin: 0.15em;
padding: 0 2px 0 0;
height: 19px;
cursor: pointer;
background-color: hsl(0, 0%, 100%);
border: 1px solid hsl(194, 37%, 84%);
border-radius: 4px;
align-items: center;
&.reacted {
background-color: hsl(195, 50%, 95%);
@ -27,7 +28,7 @@
pointer-events: none;
margin: 2px 0.1em 3px;
padding: 3px;
height: 14px;
height: 13px;
border-radius: 4px;
padding-left: 0.3em;
border: 1px solid hsl(0, 0%, 73%);
@ -37,10 +38,10 @@
.emoji {
display: inline-block;
flex-shrink: 0;
vertical-align: top;
top: 0;
margin: 1px 3px;
height: 17px;
width: 17px;
position: relative;
@ -49,12 +50,12 @@
.message_reaction_count {
position: relative;
top: 4px;
top: 1px;
font-size: 90%;
display: inline-block;
vertical-align: top;
display: flex;
color: hsl(200, 100%, 40%);
margin: 0 1px 0 0;
margin: 0 3px;
padding: 2px 0;
line-height: 1em;
}
@ -71,9 +72,11 @@
}
.reaction_button {
display: flex;
align-items: center;
i {
font-size: 1em;
margin-right: 3px;
}
&:hover i {
@ -100,8 +103,7 @@
.message_reaction_count {
font-size: 1.1em;
color: hsl(0, 0%, 33%);
margin-left: 3px;
top: 0.5px;
margin-right: 0;
}
&:hover .message_reaction_count {