Update display of reactions to issues and comments ()

Modify display of reactions to issues to remove spaces and make them
feel more apart of the reactions bar rather than separate items within.
This commit is contained in:
mrsdizzie 2019-11-15 16:47:04 -05:00 committed by Lauris BH
parent e0e4473172
commit 69cfff1541
2 changed files with 24 additions and 6 deletions
public/css
web_src/less

View File

@ -789,11 +789,12 @@ i.icon.centerlock{top:1.5em}
.repository .segment.reactions.dropdown .menu>.header,.repository .select-reaction.dropdown .menu>.header{margin:.75rem 0 .5rem}
.repository .segment.reactions.dropdown .menu>.item,.repository .select-reaction.dropdown .menu>.item{float:left;padding:.5rem .5rem!important}
.repository .segment.reactions.dropdown .menu>.item img.emoji,.repository .select-reaction.dropdown .menu>.item img.emoji{margin-right:0}
.repository .segment.reactions{padding:.3em 1em}
.repository .segment.reactions .ui.label{padding:.4em}
.repository .segment.reactions .ui.label.disabled{cursor:default}
.repository .segment.reactions{padding:0;display:flex}
.repository .segment.reactions .ui.label{padding:.4em;padding-right:1em;padding-left:1em;border:0;border-right:1px solid;border-radius:0;margin:0;font-size:14px;border-color:inherit!important}
.repository .segment.reactions .ui.label.disabled{cursor:default;opacity:.5}
.repository .segment.reactions .ui.label>img{height:1.5em!important}
.repository .segment.reactions .select-reaction{float:none}
.repository .segment.reactions .ui.label.basic.blue{background-color:#f1f8ff!important;border-color:inherit!important}
.repository .segment.reactions .select-reaction{float:left;padding:.5em;padding-left:1em}
.repository .segment.reactions .select-reaction:not(.active) a{display:none}
.repository .segment.reactions:hover .select-reaction a{display:block}
.repository .ui.fluid.action.input .ui.search.action.input{flex:auto}

View File

@ -1910,13 +1910,23 @@
}
.segment.reactions {
padding: 0.3em 1em;
padding: 0;
display: flex;
.ui.label {
padding: 0.4em;
padding-right: 1em;
padding-left: 1em;
border: 0;
border-right: 1px solid;
border-radius: 0;
margin: 0;
font-size: 14px;
border-color: inherit !important;
&.disabled {
cursor: default;
opacity: 0.5;
}
> img {
@ -1924,8 +1934,15 @@
}
}
.ui.label.basic.blue {
background-color: #f1f8ff !important;
border-color: inherit !important;
}
.select-reaction {
float: none;
float: left;
padding: 0.5em;
padding-left: 1em;
&:not(.active) a {
display: none;