1
0
mirror of https://github.com/devfake/flox.git synced 2024-11-15 22:52:32 +01:00
flox/client/assets/sass/_item.scss
2015-11-26 21:26:30 +01:00

125 lines
2.0 KiB
SCSS

.items {
float: left;
width: 100%;
min-height: 400px;
}
.item {
float: left;
width: 185px;
margin: 50px 33px 0 0;
position: relative;
&:nth-child(5n) {
margin: 50px 0 0 0;
}
}
.rating {
float: right;
width: 10px;
height: 270px;
opacity: .9;
background: silver;
.item-image-big & {
height: 450px;
}
}
.rating-1 { background: #ac1b1b; }
.rating-1-5 { background: linear-gradient(#c15e33 20%, #ac1b1b 25%); }
.rating-2 { background: #c15e33; }
.rating-2-5 { background: linear-gradient(#dea621 20%, #c15e33 25%); }
.rating-3 { background: #dea621; }
.rating-3-5 { background: linear-gradient(#73a01c 20%, #dea621 25%); }
.rating-4 { background: #73a01c; }
.rating-4-5 { background: linear-gradient($main 20%, #73a01c 25%); }
.rating-5 { background: $main; }
.item-image {
background-color: #101010;
float: left;
width: 185px;
height: 270px;
position: relative;
top: 0;
opacity: 1;
box-shadow: 0 10px 12px 5px rgba(0,0,0,.4);
transition: top .4s ease-in-out 0s, opacity .4s ease-in-out 0s, transform .15s ease-in-out 0s;
filter: blur(0);
cursor: pointer;
.light-theme & {
box-shadow: 0 10px 12px 0 rgba(0,0,0,.3);
}
.loading & {
top: -5px;
opacity: 0;
}
&:hover {
transform: translateZ(0) scale(1.05, 1.05);
}
}
.item-image-big {
width: 300px;
height: 450px;
}
.item-content {
float: left;
margin: 20px 0 0 0;
padding: 0 5px;
width: 100%;
}
.icon-no-image {
position: absolute;
top: 95px;
left: 60px;
.item-image-big & {
top: 175px;
left: 120px;
}
}
.item-rating,
.item-date {
float: left;
color: #555;
clear: both;
.light-theme & {
color: #909090;
}
}
.item-date {
cursor: help;
}
.item-title {
float: left;
clear: both;
font-size: 17px;
color: #909090;
border-bottom: 1px solid transparent;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
.light-theme & {
color: $dark;
}
&:hover,
&:active {
background: $main;
color: #fff;
}
}