diff options
| author | Henry Jameson <me@hjkos.com> | 2020-10-19 19:38:49 +0300 |
|---|---|---|
| committer | Henry Jameson <me@hjkos.com> | 2020-10-20 20:28:11 +0300 |
| commit | 38142182774ea772aacc88f26586512d6279267f (patch) | |
| tree | d350aba1b9e19741c8219e6ae54d2fedd74cf71f /src/components/reply_button/reply_button.vue | |
| parent | 350f25016f7a42cf1775785dc0c3cb7e59bb321d (diff) | |
Some initial work on replacing icons with FA5
Diffstat (limited to 'src/components/reply_button/reply_button.vue')
| -rw-r--r-- | src/components/reply_button/reply_button.vue | 28 |
1 files changed, 24 insertions, 4 deletions
diff --git a/src/components/reply_button/reply_button.vue b/src/components/reply_button/reply_button.vue index b2904b5c..ae7b0e26 100644 --- a/src/components/reply_button/reply_button.vue +++ b/src/components/reply_button/reply_button.vue @@ -1,15 +1,19 @@ <template> <div> - <i + <FAIcon v-if="loggedIn" - class="button-icon button-reply icon-reply" + class="ReplyButton button-icon -interactive" + icon="reply" + size="lg" :title="$t('tool_tip.reply')" :class="{'-active': replying}" @click.prevent="$emit('toggle')" /> - <i + <FAIcon v-else - class="button-icon button-reply -disabled icon-reply" + icon="reply" + size="lg" + class="ReplyButton button-icon" :title="$t('tool_tip.reply')" /> <span v-if="status.replies_count > 0"> @@ -19,3 +23,19 @@ </template> <script src="./reply_button.js"></script> + +<style lang="scss"> +@import '../../_variables.scss'; + +.ReplyButton { + &.-interactive { + cursor: pointer; + + &:hover, + &.-active { + color: $fallback--cBlue; + color: var(--cBlue, $fallback--cBlue); + } + } +} +</style> |