1
0
mirror of https://github.com/devfake/flox.git synced 2024-11-15 06:32:34 +01:00

change css for remove item

This commit is contained in:
devfake 2016-10-12 09:51:56 +02:00
parent 681dc77964
commit e5e36cbd3c
3 changed files with 26 additions and 20 deletions

View File

@ -9,8 +9,8 @@
<span class="loader smallsize-loader" v-if="rated"><i></i></span>
<i class="icon-add" v-if=" ! rated"></i>
</span>
<a href="#" class="recommend-item">Find Suggestions</a>
<span title="Delete Movie" class="remove-item" v-if="localItem.rating && auth" @click="removeItem()"><i class="icon-remove"></i></span>
<a href="#" class="recommend-item">Suggestions</a>
<span class="remove-item" v-if="localItem.rating && auth" @click="removeItem()">Delete Movie</span>
<img v-if="localItem.poster" :src="poster" class="item-image" width="185" height="278">
<span class="no-image" v-if=" ! localItem.poster"></span>
</div>

View File

@ -3,7 +3,7 @@ $main2: #f1309a;
$dark: #484848;
$rating1: #6bb01a;
$rating2: #da9527;
$rating3: #de2020;
$rating3: #cd2727;
@mixin transition($type, $type2: '') {
@if $type2 == '' {

View File

@ -43,6 +43,10 @@ main {
.recommend-item {
opacity: .9;
}
.remove-item {
opacity: .9;
}
}
}
@ -81,6 +85,10 @@ main {
.dark & {
color: #626262;
}
@include media(3) {
font-size: 13px;
}
}
.item-title {
@ -105,6 +113,10 @@ main {
&:active {
color: $main1;
}
@include media(3) {
font-size: 15px;
}
}
.item-rating {
@ -193,10 +205,6 @@ main {
text-align: center;
text-decoration: none;
opacity: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 185px;
@include transition(opacity);
@ -223,17 +231,22 @@ main {
right: 0;
opacity: 0;
background: $rating3;
padding: 12px;
padding: 3px 0;
cursor: pointer;
.dark & {
background: darken($rating3, 10%);
}
text-align: center;
font-size: 13px;
text-transform: uppercase;
color: #fff;
width: 100%;
@include transition(opacity);
&:hover {
opacity: 1;
opacity: 1 !important;
}
&:active {
opacity: .7 !important;
}
@include media(3) {
@ -241,13 +254,6 @@ main {
}
}
.icon-remove {
background: url(../../../public/assets/img/remove.png);
width: 17px;
height: 17px;
display: block;
}
.fade-enter-active {
transition: opacity .5s ease;
opacity: 1;