diff --git a/extensions/tags/js/src/common/helpers/tagIcon.js b/extensions/tags/js/src/common/helpers/tagIcon.js index 670606777..5838cd971 100644 --- a/extensions/tags/js/src/common/helpers/tagIcon.js +++ b/extensions/tags/js/src/common/helpers/tagIcon.js @@ -1,8 +1,14 @@ +import classList from 'flarum/utils/classList'; + export default function tagIcon(tag, attrs = {}, settings = {}) { const hasIcon = tag && tag.icon(); const { useColor = true } = settings; - attrs.className = 'icon TagIcon '+ (attrs.className || '') + ' ' + (hasIcon ? tag.icon() : 'default'); + attrs.className = classList([ + attrs.className, + 'icon', + hasIcon ? tag.icon() : 'TagIcon' + ]); if (tag) { attrs.style = attrs.style || {}; diff --git a/extensions/tags/less/common/TagIcon.less b/extensions/tags/less/common/TagIcon.less index 15680ba2f..a2a3a0481 100644 --- a/extensions/tags/less/common/TagIcon.less +++ b/extensions/tags/less/common/TagIcon.less @@ -1,19 +1,14 @@ .TagIcon { + border-radius: @border-radius; width: 16px; height: 16px; display: inline-block; + vertical-align: -3px; margin-left: 1px; - text-align: center; - font-size: 1rem; + background: @control-bg; &.untagged { border: 1px dotted @muted-color; background: transparent; } - - &.default { - border-radius: @border-radius; - background: @control-bg; - vertical-align: -3px; - } } diff --git a/extensions/tags/less/forum/TagDiscussionModal.less b/extensions/tags/less/forum/TagDiscussionModal.less index 1e6d2d645..4cabde2cf 100644 --- a/extensions/tags/less/forum/TagDiscussionModal.less +++ b/extensions/tags/less/forum/TagDiscussionModal.less @@ -107,15 +107,24 @@ &.active { background: @control-bg; } + + .icon::before { + display: inline-block; + width: 16px; + text-align: center; + vertical-align: middle; + } + &.selected { .icon::before { .fa(); content: @fa-var-check !important; - color: @muted-color !important; + color: @muted-color; font-size: 14px; - width: 100%; text-align: center; + vertical-align: 1px; } + &.colored .TagIcon:before { color: #fff; } @@ -123,6 +132,7 @@ .TagIcon { vertical-align: top; margin-top: 3px; + margin-left: 0; } } }