Vulcan/client/sass/modules/_posts.scss
2012-09-08 11:54:08 +09:00

272 lines
4.7 KiB
SCSS

.post{
position:relative;
// margin-bottom:$grid-margin;
@include cf;
}
.post-content{
position:relative;
@extend .grid-block;
padding:0;
min-height:$grid-unit - 30px;
// margin-right:240px;
margin-right:160px;
.post-info{
padding:$grid-padding - 2px $grid-padding;
margin-left:30px;
}
.post-rank{
position:absolute;
top:0px;
left:-50px;
display:block;
height:$grid-unit;
line-height:$grid-unit;
width:30px;
text-align:right;
font-size:30px;
// font-weight:bold;
color:black(0.1);
}
.post-upvote{
position:absolute;
top:0px;
bottom:0px;
.upvote-link{
height:100%;
display:table;
float:left;
width:30px;
// @include background(linear-gradient(#f3f6f8, #dfe3e5));
@include border-radius(3px 0 0 3px);
// background:$light-blue;
// @include box-shadow(inset 0 1px 0 white, inset -1px 0 1px black(0.1));
border-right:1px solid $lightest-grey;
i{
font-size:12px;
display:table-cell;
height:100%;
width:100%;
text-align:center;
// line-height:$grid-unit;
vertical-align:middle;
color:$light-blue2;
color:$red;
text-shadow:0px 1px 0px white;
&.icon-check{
display:none;
}
}
span{
display:none;
}
&.not-voted:hover{
@include box-shadow(none);
background:$highlight-color url("/img/bg-header.png") top center;
i{
color:white;
text-shadow:none;
}
}
&.voted{
cursor:default;
i.icon-up{
display:none;
}
i.icon-check{
color:$blue;
display:table-cell;
}
}
}
}
.post-heading{
margin-bottom:0px;
.post-title{
font-size:20px;
color:$text;
font-weight:normal;
line-height:1;
&:hover{
color:$red;
}
}
.post-domain{
color:$light-text;
font-size:14px;
}
}
.post-meta{
font-size:13px;
color:$light-text;
line-height:1.5;
}
}
.post-actions{
float:right;
padding:0;
li{
position:relative;
float:left;
margin-left:$grid-margin;
a{
@extend .grid-block;
background:$light-blue;
background:white;
position:relative;
display:block;
padding:0;
width:$grid-unit;
height:$grid-unit;
line-height:$grid-unit;
vertical-align:baseline;
text-align:center;
color:$light-text;
font-size:36px;
line-height:50px;
// @include background(linear-gradient(/*right top,*/ #f6f6f6, #e3e3e3));
// @include box-shadow(inset 0 1px 0 white, 0 1px 1px black(0.15));
// background:#fffce6;
// &.medium{
// background-color:red(0.05);
// }
// &.hot{
// background-color:red(0.2);
// }
// &.superhot{
// background-color:red(0.3);
// }
// &.megahot{
// background-color:red(0.5);
// }
// &.gigahot{
// background-color:red(0.8);
// }
// &.low{
// color:red(0.2);
// }
// &.medium{
// color:red(0.3);
// }
// &.hot{
// color:red(0.4);
// }
// &.superhot{
// color:red(0.6);
// }
// &.megahot{
// color:red(0.8);
// }
// &.gigahot{
// color:red(1);
// }
&.edit-link{
color:$red;
}
&.share-link{
color:$blue;
color:$yellow;
}
&.discuss-link{
color:$green;
}
&.more-link{
color:$blue;
}
&:hover{
background:$highlight-color url("/img/bg-header.png") top center;
color:white;
}
&.voted{
background:$highlight-color;
color:white;
cursor: default;
.action{
color: #fff;
}
}
.count{
position:absolute;
top:12px;
display:block;
width:100%;
height:20px;
line-height:20px;
font-size:11px;
}
.points{
display:block;
font-size:30px;
line-height:50px;
}
.action{
display:block;
height:20px;
width:100%;
line-height:20px;
position:absolute;
bottom:5px;
left:0px;
font-size:13px;
color:$light-text;
// color:$red;
}
}
}
}
.post-message{
@extend .grid-block;
padding:20px;
margin-bottom:$grid-margin;
font-size:18px;
.list &{
display:none;
}
}
.share-options{
// height:$grid-unit;
position:absolute;
// width:200px;
left:-223px;
top:5px;
@extend .popover;
&.hidden{
display:block;
opacity:0;
pointer-events: none;
left:-210px;
}
&:after, &:before {
left: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
&:after {
border-color: rgba(255, 255, 255, 0);
border-left-color: #ffffff;
border-width: 10px;
top: 20px;
margin-top: -10px;
}
&:before {
border-color: rgba(0, 0, 0, 0);
border-left-color: $red;
border-width: 11px;
top: 20px;
margin-top: -11px;
}
.buttons{
@include cf;
padding:15px 5px 5px 15px;
.button{
float:left;
margin-right:10px;
background:transparent;
padding:0px;
}
}
}