KevinMidboe/vinlottis
1
0
Fork 0
Code Issues 8 Pull Requests 14 Packages Projects Releases Wiki Activity

Before requested hearth is grey, clicking sets colors to pink.

Browse Source
This commit is contained in:
Kevin
2020-11-02 15:14:13 +01:00
parent 554948d67c
commit 3aa989d2c1
1 changed files with 15 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/ui/RequestedWineCard.vue
View File

@@ -4,7 +4,7 @@
<div class="flex justify-end"> <div class="flex justify-end">
<div class="requested-count cursor-pointer" @click="request"> <div class="requested-count cursor-pointer" @click="request">
<span>{{ requestedElement.count }}</span> <span>{{ requestedElement.count }}</span>
<i class="icon icon--heart" /> <i class="icon icon--heart" :class="{ 'active': locallyRequested }" />
</div> </div>
</div> </div>
</template> </template>
@@ -17,10 +17,10 @@
<template v-slot:bottom> <template v-slot:bottom>
<div class="float-left request"> <div class="float-left request">
<i class="icon icon--heart request-icon"></i> <i class="icon icon--heart request-icon" :class="{ 'active': locallyRequested }"></i>
<a aria-role="button" tabindex="0" class="link" @click="request" <a aria-role="button" tabindex="0" class="link" @click="request"
:class="{ 'active': locallyRequested }"> :class="{ 'active': locallyRequested }">
Anbefal {{ locallyRequested ? 'Anbefalt' : 'Anbefal' }}
</a> </a>
</div> </div>
</template> </template>
@@ -94,26 +94,31 @@ export default {
} }
.icon--heart{ .icon--heart{
color: $link-color; color: grey;
} }
} }
.link .active { .active {
border-color: $link-color; &.link {
} border-color: $link-color
}
&.icon--heart {
color: $link-color;
}
}
.request { .request {
display: flex; display: flex;
align-items: center; align-items: center;
&-icon { &-icon {
font-size: 2rem; font-size: 1.5rem;
color: $link-color; color: grey;
} }
a { a {
margin-left: 0.75rem; margin-left: 0.5rem;
} }
} }
</style> </style>