diff options
Diffstat (limited to 'src/components/reply_button/reply_button.vue')
| -rw-r--r-- | src/components/reply_button/reply_button.vue | 25 |
1 files changed, 20 insertions, 5 deletions
diff --git a/src/components/reply_button/reply_button.vue b/src/components/reply_button/reply_button.vue index 1b02881a..fb010278 100644 --- a/src/components/reply_button/reply_button.vue +++ b/src/components/reply_button/reply_button.vue @@ -1,8 +1,8 @@ <template> - <div> + <div class="ReplyButton"> <button v-if="loggedIn" - class="button-unstyled ReplyButton -padded -interactive" + class="button-unstyled interactive" :class="{'-active': replying}" :title="$t('tool_tip.reply')" @click.prevent="$emit('toggle')" @@ -15,10 +15,13 @@ <FAIcon v-else icon="reply" - class="ReplyButton fa-scale-110 fa-old-padding" + class="fa-scale-110 fa-old-padding" :title="$t('tool_tip.reply')" /> - <span v-if="status.replies_count > 0"> + <span + v-if="status.replies_count > 0" + class="action-counter" + > {{ status.replies_count }} </span> </div> @@ -30,13 +33,25 @@ @import '../../_variables.scss'; .ReplyButton { - &.-interactive { + display: flex; + + > :first-child { + padding: 10px; + margin: -10px -5px -10px -10px; + } + .action-counter { + pointer-events: none; + user-select: none; + } + + .interactive { &:hover .svg-inline--fa, &.-active .svg-inline--fa { color: $fallback--cBlue; color: var(--cBlue, $fallback--cBlue); } } + } </style> |