Alex/flox
1
0
Fork 0
mirror of https://github.com/devfake/flox.git synced 2024-11-15 06:32:34 +01:00
Code Issues Releases Wiki Activity

change css for remove item

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/app/components/Content/Item.vue
View File

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

2
client/resources/sass/_misc.scss vendored
View File

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

40
client/resources/sass/components/_content.scss vendored
View File

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