angelovcom.net

_comments.scss (6442B)

---

 .comment-content a {
 	word-wrap: break-word;
 }
 
 .bypostauthor {
 	display: block;
 }
 
 .comments-area {
 	-webkit-hyphens: auto;
 	-moz-hyphens: auto;
 	-ms-hyphens: auto;
 	hyphens: auto;
 	margin: calc(2 * #{$size__spacing-unit}) $size__spacing-unit;
 	word-wrap: break-word;
 	@include postContentMaxWidth();
 
 	@include media(tablet) {
 		margin: calc(3 * #{$size__spacing-unit}) $size__site-margins;
 	}
 
 	& > * {
 		margin-top: calc(2 * #{$size__spacing-unit});
 		margin-bottom: calc(2 * #{$size__spacing-unit});
 
 		@include media(tablet) {
 			margin-top: calc(3 * #{$size__spacing-unit});
 			margin-bottom: calc(3 * #{$size__spacing-unit});
 		}
 	}
 
 	/* Add extra margin when the comments section is located immediately after the
 	 * post itself (this happens on pages).
 	 */
 	.entry + & {
 		margin-top: calc(3 * #{$size__spacing-unit});
 	}
 
 	.comments-title-wrap {
 
 		@include media(tablet) {
 			align-items: baseline;
 			display: flex;
 			justify-content: space-between;
 		}
 
 		.comments-title {
 			@include post-section-dash;
 			margin: 0;
 
 			@include media(tablet) {
 				flex: 1 0 calc(3 * (100vw / 12));
 			}
 		}
 
 		.discussion-meta {
 			@include media(tablet) {
 				flex: 0 0 calc(2 * (100vw / 12));
 				margin-left: #{$size__spacing-unit};
 			}
 		}
 	}
 }
 
 #comment {
 	max-width: 100%;
 	box-sizing: border-box;
 }
 
 #respond {
 	position: relative;
 
 	.comment-user-avatar {
 		margin: $size__spacing-unit 0 -#{$size__spacing-unit};
 	}
 
 	.comment .comment-form {
 		padding-left: 0;
 	}
 
 	> small {
 		display: block;
 		font-size: $font__size_base;
 		position: absolute;
 		left: calc(#{$size__spacing-unit} + 100%);
 		top: calc(-3.5 * #{$size__spacing-unit});
 		width: calc(100vw / 12 );
 	}
 }
 
 #comments {
 
 	> .comments-title:last-child {
 		display: none;
 	}
 }
 
 .comment-form-flex {
 	display: flex;
 	flex-direction: column;
 
 	.comments-title {
 		display: none;
 		margin: 0;
 		order: 1;
 	}
 
 	#respond {
 		order: 2;
 
 		+ .comments-title {
 			display: block;
 		}
 	}
 }
 
 .comment-list {
 	list-style: none;
 	padding: 0;
 
 	.children {
 		margin: 0;
 		padding: 0 0 0 $size__spacing-unit;
 	}
 
 	> .comment:first-child {
 		margin-top: 0;
 	}
 
 	.pingback,
 	.trackback {
 
 		.comment-body {
 			color: $color__text-light;
 			@include font-family( $font__heading );
 			font-size: $font__size-xs;
 			font-weight: 500;
 			margin-top: $size__spacing-unit;
 			margin-bottom: $size__spacing-unit;
 
 			a:not(.comment-edit-link) {
 				font-weight: bold;
 				font-size: $font__size-base / (1 * $font__size-ratio);
 				line-height: 1.5;
 				padding-right: #{0.5 * $size__spacing-unit};
 				display: block;
 			}
 
 			.comment-edit-link {
 				color: $color__text-light;
 				@include font-family( $font__heading );
 				font-weight: 500;
 			}
 		}
 	}
 }
 
 .comment-reply {
 
 	#respond + & {
 		display: none;
 	}
 
 	.comment-reply-link {
 		display: inline-block;
 	}
 }
 
 .comment {
 	list-style: none;
 	position: relative;
 
 	@include media(tablet) {
 		padding-left: calc(.5 * (#{$size__spacing-unit} + calc(100vw / 12 )));
 
 		&.depth-1,
 		.children {
 			padding-left: 0;
 		}
 
 		&.depth-1 {
 			margin-left: calc(3.25 * #{$size__spacing-unit});
 		}
 	}
 
 	.comment-body {
 		margin: calc(2 * #{$size__spacing-unit}) 0 0;
 	}
 
 
 	.comment-meta {
 		position: relative;
 	}
 
 	.comment-author {
 
 		.avatar {
 			float: left;
 			margin-right: $size__spacing-unit;
 			position: relative;
 
 			@include media(tablet) {
 				float: inherit;
 				margin-right: inherit;
 				position: absolute;
 				top: 0;
 				right: calc(100% + #{$size__spacing-unit});
 			}
 		}
 
 		.fn {
 			position: relative;
 			display: block;
 
 			a {
 				color: inherit;
 
 				&:hover {
 					color: $color__link-hover;
 				}
 			}
 		}
 
 		.post-author-badge {
 			border-radius: 100%;
 			display: block;
 			height: 18px;
 			position: absolute;
 			background: lighten( $color__link, 8% );
 			right: calc(100% - #{$size__spacing-unit * 2.5});
 			top: -3px;
 			width: 18px;
 
 			@include media(tablet) {
 				right: calc(100% + #{$size__spacing-unit * .75});
 			}
 
 			svg {
 				width: inherit;
 				height: inherit;
 				display: block;
 				fill: white;
 				transform: scale(0.875);
 			}
 		}
 	}
 
 	.comment-metadata {
 
 		> a,
 		.comment-edit-link {
 			display: inline;
 			font-weight: 500;
 			color: $color__text-light;
 			vertical-align: baseline;
 
 			time {
 				vertical-align: baseline;
 			}
 
 			&:hover {
 				color: $color__link-hover;
 				text-decoration: none;
 			}
 		}
 
 		> * {
 			display: inline-block;
 		}
 
 		.edit-link-sep {
 			color: $color__text-light;
 			margin: 0 0.2em;
 			vertical-align: baseline;
 		}
 
 		.edit-link {
 			color: $color__text-light;
 
 			svg {
 				transform: scale(0.8);
 				vertical-align: baseline;
 				margin-right: 0.1em;
 			}
 		}
 
 		.comment-edit-link {
 			position: relative;
 			padding-left: $size__spacing-unit;
 			margin-left: -#{$size__spacing-unit};
 			z-index: 1;
 
 			&:hover {
 				color: $color__link;
 			}
 		}
 	}
 
 	.comment-content {
 
 		margin: $size__spacing-unit 0;
 
 		@include media(desktop) {
 			padding-right: $size__spacing-unit;
 		}
 
 		> *:first-child {
 			margin-top: 0;
 		}
 
 		> *:last-child {
 			margin-bottom: 0;
 		}
 
 		blockquote {
 			margin-left: 0;
 		}
 
 		a {
 			text-decoration: underline;
 
 			&:hover {
 				text-decoration: none;
 			}
 		}
 	}
 }
 
 .comment-reply-link,
 #cancel-comment-reply-link {
 	font-weight: 500;
 
 	&:hover {
 		color: $color__link-hover;
 	}
 }
 
 .discussion-avatar-list {
 	@include clearfix;
 
 	margin: 0;
 	padding: 0;
 
 	li {
 		position: relative;
 		list-style: none;
 		margin: 0 -8px 0 0;
 		padding: 0;
 		float: left;
 	}
 
 	.comment-user-avatar {
 
 		img {
 			height: calc(1.5 * #{$size__spacing-unit});
 			width: calc(1.5 * #{$size__spacing-unit});
 		}
 	}
 }
 
 .discussion-meta {
 
 	.discussion-meta-info {
 		margin: 0;
 
 		.svg-icon {
 			vertical-align: middle;
 			fill: currentColor;
 			transform: scale( 0.6 ) scaleX(-1) translateY(-0.1em);
 			margin-left: -#{.25 * $size__spacing-unit}; // Align icon with avatars above.
 		}
 	}
 
 }
 
 .comment-form {
 
 	.comment-notes,
 	label {
 		@include font-family( $font__heading );
 		font-size: $font__size-xs;
 		color: $color__text-light;
 	}
 
 	#wp-comment-cookies-consent {
 		margin: 0 10px 0 0;
 	}
 
 	.comment-form-author,
 	.comment-form-email {
 		@include media(tablet) {
 			width: calc(50% - #{$size__spacing-unit / 2});
 			float: left;
 		}
 	}
 
 	.comment-form-email {
 		@include media(tablet) {
 			margin-left: $size__spacing-unit;
 		}
 	}
 
 	input[name="author"],
 	input[name="email"],
 	input[name="url"] {
 		display: block;
 		width: 100%;
 	}
 }