Vulcan/client/sass/modules/_posts.scss

.posts{
	position:relative;
	.post{
		position:absolute;
		width:100%;
		@include cf;
		&.animate{
			@include single-transition(ease-out, top, 400ms, 0ms);
		}
	}
}
.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-sticky{
		display:block;
		position:absolute;
		right:20px;
		top:16px;
		font-size:24px;
		i{
			color:$light-text;
		}
		span{
			display:none;
		}
	}
	.post-heading{
		margin-bottom:0px;
		.post-title{
			font-size:20px;
			color:$text;
			font-weight:normal;
			line-height:1;
			&:visited{
				color:$grey;
			}
			&:hover{
				color:$red;
			}	
		}
		.post-domain{
			color:$light-text;
			font-size:14px;
			font-weight:normal;
		}
	}
	.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;
				pointer-events:none;
				// 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:-170px;
	top:5px;
	@extend .popover;
	&.hidden{
		display:block;
		opacity:0;
		pointer-events: none;
		left:-160px;
	}
	&: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;
		}
	}
}
.post.sticky{
	.post-content, .post-actions li a{
		background:$light-yellow;
	}
	.post-actions li a:hover{
		background:$highlight-color url("/img/bg-header.png") top center;
	}	
}
.more-button{
	position:relative;
	padding-bottom:10px;
	a{
		width:100%;
		display:block;
		height:$grid-unit;
		background:black(0.075);
		text-align:center;
		color:white;
		line-height:$grid-unit;
		font-size:24px;
		@include border-radius(3px);
	}
}