julien/vaquant
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎨 (Account) Add contrast color to all styled component

Browse Source
This commit is contained in:
Julien Calixte
2019-10-26 22:13:01 +02:00
parent 91c98651dd
commit 44aab53963
5 changed files with 83 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/views/accounts/AccountItem.vue
View File

@@ -49,29 +49,39 @@
</article>
<div class="tabs is-toggle is-fullwidth" v-if="transactions.length">
<ul>
<li :class="{ 'is-active': activeTab === 'transaction' }">
<a href="#" @click.prevent="toggleTab('transaction')">
<li>
<a
:style="colorStyle(activeTab === 'transaction')"
href="#"
@click.prevent="toggleTab('transaction')"
>
<awe-icon icon="dollar-sign" />
</a>
</li>
<li :class="{ 'is-active': activeTab === 'tag' }" v-if="tagCount > 1">
<a href="#" @click.prevent="toggleTab('tag')">
<li v-if="tagCount > 1">
<a
:style="colorStyle(activeTab === 'tag')"
href="#"
@click.prevent="toggleTab('tag')"
>
<awe-icon icon="tag" />
</a>
</li>
<li
:class="{ 'is-active': activeTab === 'balance' }"
v-if="isMultiUser"
>
<a href="#" @click.prevent="toggleTab('balance')">
<li v-if="isMultiUser">
<a
:style="colorStyle(activeTab === 'balance')"
href="#"
@click.prevent="toggleTab('balance')"
>
<awe-icon icon="balance-scale" />
</a>
</li>
<li
:class="{ 'is-active': activeTab === 'refund' }"
v-if="isMultiUser"
>
<a href="#" @click.prevent="toggleTab('refund')">
<li v-if="isMultiUser">
<a
:style="colorStyle(activeTab === 'refund')"
href="#"
@click.prevent="toggleTab('refund')"
>
<awe-icon icon="exchange-alt" />
</a>
</li>
@@ -114,6 +124,7 @@
>
<div class="column">
<chart-balance
:account="account"
:stats="userStats"
:currency="account.mainCurrency"
/>
@@ -465,22 +476,11 @@ export default class AccountItem extends BaseAccount {
color: var(--primary-font-color);
}
table tr.is-selected {
background-color: var(--primary-color);
color: var(--primary-font-color);
}
.tabs.is-toggle {
max-width: 400pt;
margin: auto;
li.is-active {
a {
background-color: var(--primary-color);
border-color: var(--primary-color);
color: var(--primary-font-color);
}
}
}
.tabs.is-toggle {
a {
height: 35pt;