engine/app/assets/stylesheets/locomotive/content_assets.scss

206 lines
4.6 KiB
SCSS

@import "compass/css3";
@import "compass/css3/border-radius";
@import "compass/css3/images";
@import "compass/css3/text-shadow";
@import "helpers";
ul.content-assets {
li.asset {
position: relative;
float: left;
width: 139px;
height: 140px;
clear: none;
margin: 0 17px 17px 0;
@include border-radius(8px);
@include box-shadow(rgba(0, 0, 0, 0.2) 0px 1px 0px 0px);
background: #ebedf4;
&.last {
margin-right: 0px;
}
h4 {
margin: 0px;
line-height: 30px;
text-align: left;
@include border-top-radius(8px);
@include background-image(linear-gradient(#ebedf4, #d7dbe7));
border-bottom: 1px solid #ccced7;
a {
@include hover-link;
margin-left: 5px;
outline: none;
font-size: 11px;
color: #1f82bc;
font-weight: bold;
}
}
.icon, .image {
width: 80px;
height: 80px;
border: 4px solid #fff;
margin: 10px 0 5px 24px;
@include box-shadow(rgba(0, 0, 0, 0.3) 3px 3px 5px 1px);
}
.image {
background: transparent image-url("locomotive/list/empty.png") repeat 0 0;
.inside {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 80px;
height: 85px;
}
} // .image
.icon {
.inside {
position: relative;
top: 24px;
width: 80px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
color: #fff;
font-size: 12px;
font-weight: bold;
text-align: center;
text-transform: uppercase;
@include single-text-shadow(rgba(0, 0, 0, 0.3), 1px, 1px, 1px);
}
&.pdf {
background: #e82f2d;
@include background-image(linear-gradient(left top, #fc4e42, #b9101d));
}
&.media {
background: #6e489c;
@include background-image(linear-gradient(left top, #ba89d1, #4f317d));
}
&.other {
background: #4a4a50;
@include background-image(linear-gradient(left top, #92939a, #28282b));
}
} // .icon
.actions {
position: absolute;
top: 8px;
right: 5px;
}
} // li.asset
}
// ul.assets {
// list-style: none;
// margin: 0px;
// padding: 0px;
// }
//
// ul.assets li.asset {
// position: relative;
// float: left;
// width: 139px;
// height: 140px;
// background: transparent url(/assets/locomotive//list/thumb.png) no-repeat 0 0;
// margin: 0 17px 17px 0;
// }
//
// ul.assets li.asset.last {
// margin-right: 0px;
// }
//
// ul.assets li.asset h4 { margin: 0px; height: 30px; border-bottom: 1px solid #ccced7; position: relative; }
//
// ul.assets li.asset h4 a {
// position: absolute;
// top: 7px;
// left: 12px;
// font-weight: bold;
// font-size: 0.6em;
// color: #1f82bc;
// text-decoration: none;
// }
//
// ul.assets li.asset h4 a:hover { text-decoration: underline; }
//
// ul.assets li.asset div.icon, ul.assets li.asset div.image {
// width: 80px;
// height: 80px;
// border: 4px solid #fff;
// margin: 10px 0 0 24px;
// box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
// -moz-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
// -webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
// }
//
// ul.assets li.asset div.image {
// background: transparent url(/assets/locomotive//list/empty.png) repeat 0 0;
// }
//
// ul.assets li.asset div.image .inside {
// display: table-cell;
// vertical-align: middle;
// text-align: center;
// width: 72px;
// height: 72px;
// }
//
// ul.assets li.asset div.icon .inside {
// position: relative;
// top: 24px;
// text-align:center;
// width: 80px;
// -webkit-transform: rotate(-45deg);
// -moz-transform: rotate(-45deg);
// font-weight: bold;
// color: #fff;
// text-shadow: 0px 1px 0px #333;
// text-transform: uppercase;
// font-size: 1.1em;
// }
//
// ul.assets li.asset div.pdf {
// background: #e82f2d;
// background: -webkit-gradient(linear, left top, right bottom, from(#fc4e42), to(#b9101d));
// background: -moz-linear-gradient(-45deg, #fc4e42, #b9101d);
// }
//
// ul.assets li.asset div.media {
// background: #6e489c;
// background: -webkit-gradient(linear, left top, right bottom, from(#ba89d1), to(#4f317d));
// background: -moz-linear-gradient(-45deg, #ba89d1, #4f317d);
// }
//
// ul.assets li.asset div.other {
// background: #4a4a50;
// background: -webkit-gradient(linear, left top, right bottom, from(#92939a), to(#28282b));
// background: -moz-linear-gradient(-45deg, #92939a, #28282b);
// }
//
//
// ul.assets li.asset div.actions {
// position: absolute;
// top: 4px;
// right: 12px;
// }