From 69cfff15416d01feec6a45c0c6554481ba6f3c1f Mon Sep 17 00:00:00 2001 From: mrsdizzie Date: Fri, 15 Nov 2019 16:47:04 -0500 Subject: [PATCH] Update display of reactions to issues and comments (#9038) Modify display of reactions to issues to remove spaces and make them feel more apart of the reactions bar rather than separate items within. --- public/css/index.css | 9 +++++---- web_src/less/_repository.less | 21 +++++++++++++++++++-- 2 files changed, 24 insertions(+), 6 deletions(-) diff --git a/public/css/index.css b/public/css/index.css index 100870c1b..7fc962796 100644 --- a/public/css/index.css +++ b/public/css/index.css @@ -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} diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index 974dd571c..14bb5e900 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -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;