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

move item into own scss file

Browse Source
This commit is contained in:
devfake 2015-07-30 09:49:19 +02:00
parent 478c642a27
commit 405cef27f2
4 changed files with 119 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
client/assets/sass/_content.scss
View File

@ -69,124 +69,6 @@
}
}
.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-2 { background: #c15e33; }
.rating-3 { background: #dea621; }
.rating-4 { background: #73a01c; }
.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);
.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-date {
float: left;
clear: both;
color: #555;
font-size: 15px;
cursor: help;
.light-theme & {
color: #909090;
}
}
.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;
}
}
.icon-content-load,
.icon-box-load {
background: url(../img/content-load.gif) no-repeats;

1
client/assets/sass/app.scss
View File

@ -8,5 +8,6 @@
'header',
'content',
'item',
'modal',
'footer';

117
client/assets/sass/item.scss Normal file
View File

@ -0,0 +1,117 @@
.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-2 { background: #c15e33; }
.rating-3 { background: #dea621; }
.rating-4 { background: #73a01c; }
.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);
.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-date {
float: left;
clear: both;
color: #555;
font-size: 15px;
cursor: help;
.light-theme & {
color: #909090;
}
}
.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;
}
}

2
public/assets/css/app.css
View File

File diff suppressed because one or more lines are too long