aboutsummaryrefslogtreecommitdiff
path: root/src/components/account_actions
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/account_actions')
-rw-r--r--src/components/account_actions/account_actions.js8
-rw-r--r--src/components/account_actions/account_actions.vue35
2 files changed, 27 insertions, 16 deletions
diff --git a/src/components/account_actions/account_actions.js b/src/components/account_actions/account_actions.js
index 6d345bc7..395d6685 100644
--- a/src/components/account_actions/account_actions.js
+++ b/src/components/account_actions/account_actions.js
@@ -1,6 +1,14 @@
import { mapState } from 'vuex'
import ProgressButton from '../progress_button/progress_button.vue'
import Popover from '../popover/popover.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+ faEllipsisV
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+ faEllipsisV
+)
const AccountActions = {
props: [
diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
index 987e94b7..e3ae376e 100644
--- a/src/components/account_actions/account_actions.vue
+++ b/src/components/account_actions/account_actions.vue
@@ -1,5 +1,5 @@
<template>
- <div class="account-actions">
+ <div class="AccountActions">
<Popover
trigger="click"
placement="bottom"
@@ -63,7 +63,10 @@
slot="trigger"
class="btn btn-default ellipsis-button"
>
- <i class="icon-ellipsis trigger-button" />
+ <FAIcon
+ class="icon"
+ icon="ellipsis-v"
+ />
</div>
</Popover>
</div>
@@ -73,22 +76,22 @@
<style lang="scss">
@import '../../_variables.scss';
-.account-actions {
- margin: 0 .8em;
-}
+.AccountActions {
+ button.dropdown-item {
+ margin-left: 0;
+ }
-.account-actions button.dropdown-item {
- margin-left: 0;
-}
+ .ellipsis-button {
+ cursor: pointer;
+ width: 2.5em;
+ margin: -0.5em 0;
+ padding: 0.5em 0;
+ text-align: center;
-.account-actions .trigger-button {
- color: $fallback--lightText;
- color: var(--lightText, $fallback--lightText);
- opacity: .8;
- cursor: pointer;
- &:hover {
- color: $fallback--text;
- color: var(--text, $fallback--text);
+ &:not(:hover) .icon {
+ color: $fallback--lightText;
+ color: var(--lightText, $fallback--lightText);
+ }
}
}
</style>