feat: adjust svg placement and colors of comment toggle

Automattic · Mar 27, 2020 · 6b4522c · 6b4522c
1 parent 20ee8b1
commit 6b4522c
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 5 deletions.
diff --git a/newspack-theme/inc/color-patterns.php b/newspack-theme/inc/color-patterns.php
@@ -61,7 +61,8 @@ function newspack_custom_colors_css() {
 		.comment .comment-metadata > a:hover,
 		.comment .comment-metadata .comment-edit-link:hover,
 		.site-info a:hover,
-		.entry .entry-content .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color) {
+		.entry .entry-content .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color),
+		.comments-toggle:hover, .comments-toggle:focus {
 			color: ' . esc_html( newspack_color_with_contrast( $primary_color ) ) . ';
 		}
 

diff --git a/newspack-theme/sass/site/primary/_comments.scss b/newspack-theme/sass/site/primary/_comments.scss
@@ -388,24 +388,26 @@
 }
 
 .comments-toggle {
+	align-items: center;
 	background: transparent;
 	border-radius: 0;
 	border-top: 1px solid $color__border;
 	color: $color__text-main;
+	display: flex;
 	font-size: $font__size-sm;
+	justify-content: center;
 	margin-top: 0;
 	position: relative;
 	width: 100%;
 
 	svg {
-		position: relative;
-		top: 5px;
 		transform: rotate( 90deg );
 	}
 
-	&:hover {
+	&:hover,
+	&:focus {
 		background: transparent;
-		color: $color__text-main;
+		color: $color__primary;
 	}
 }