Vulcan/client/sass/modules/_comments.scss

.comment{
	margin-left:30px;
	position:relative;
	.comment-notification{
		@include single-transition(ease-out, opacity, 400ms, 0ms);
		position:absolute;
		right:0;
		top:-20px;
		opacity:0;
		a{
			pointer-events:none;
			position:absolute;
			left:15px;
			@extend .grid-block;
			display:block;
			padding:3px 8px;
			background: #ffffff;
			white-space:nowrap;
			&:after {
				right: 100%;
				border: solid transparent;
				content: " ";
				height: 0;
				width: 0;
				position: absolute;
				pointer-events: none;
				border-color: rgba(255, 255, 255, 0);
				border-right-color: #ffffff;
				border-width: 8px;
				top: 50%;
				margin-top: -8px;
			}
			font-size:14px;
		}
	}
	.comment-body{
		@include single-transition(ease-out, opacity, 600ms, 0ms);
		opacity:1;
	}
	&.queued{
		&:after{
			position:absolute;
			display:block;
			content:" ";
			top:-6px;
			left:-30px;
			width:100%;
			height:0px;
			opacity:1;
			border-top:1px dashed black(0.2);
			padding-right:35px;
		}
		.comment-notification{
			opacity:1;
			a{
				pointer-events:auto;
			}
		}
		.comment-body{
			opacity:0;
			position:absolute;
			pointer-events:none;
			
		}
	}
}
.comment-content{
	position:relative;
	@extend .grid-block;
	@include border-radius(0 3px 3px 3px);
	font-size:14px;
}

.comment-meta{
	margin-bottom:5px;
	.comment-username, .comment-time, .comment-permalink{
		display:inline-block;
		margin-right:4px;
	}
	color:$light-text;
	.comment-permalink{
		position:relative;
		@include hide-text;
		width:20px;
		color:$light-text;
		margin:0;
		&:before{
			position:absolute;
			display:block;
			top:1px;
			left:0;
			text-indent:0;
		}
		&:hover:before{
			color:$red;
		}
	}
}
.comment-actions{
	position:absolute;
	left:-30px;
	top:0px;
	a{
		@include border-radius(0 0 0 3px);
		position:relative;
		display:block;
		height:30px;
		width:30px;
		// background:$light-blue;
		background:white;
		@include box-shadow(0 1px 1px black(0.15));
		overflow:hidden;
		@include hide-text;
		// border-right:1px solid $lightest-grey;
		&.upvote{
			@include border-radius(3px 0 0 0);
			margin-bottom:1px;
		}
		i{
			font-size:12px;
			display:block;
			position:absolute;
			height:30px;
			width:30px;
			line-height:30px;
			text-align:center;
			text-indent:0;
			// color:$light-blue2;
			color:$red;
		}
		&:hover{
			background:$highlight-color;
			i{
				color:white;
			}
		}
	}
}
.comment-new{
	@extend .grid-block;
	@extend .cf;
	.comment-field{
		margin-bottom:$grid-margin;
	}
	.comment-submit{
		@extend .cf;
	}
	.comment-page &{
		margin-left:30px;
		position: relative;
		background: #ffffff;
		&:after {
			bottom: 100%;
			border: solid transparent;
			content: " ";
			height: 0;
			width: 0;
			position: absolute;
			pointer-events: none;
			border-color: rgba(255, 255, 255, 0);
			border-bottom-color: #ffffff;
			border-width: 8px;
			left: 20px;
			margin-left: -8px;
		}
	}
}