inversed colors on comments buttons

Automattic · May 24, 2021 · d97042d · d97042d
1 parent 5a2a355
commit d97042d
Show file tree

Hide file tree

Showing 2 changed files with 172 additions and 4 deletions.
diff --git a/quadrat/assets/theme.css b/quadrat/assets/theme.css
diff --git a/quadrat/sass/blocks/_post-comments.scss b/quadrat/sass/blocks/_post-comments.scss
@@ -1,15 +1,30 @@
+@import "../../../blank-canvas-blocks/sass/blocks/button";
+
 .wp-block-post-comments {
 
 	font-size: var(--wp--preset--font-size--normal);
 	line-height: var(--wp--custom--line-height--body);
 
 	.reply a {
+
+		@include button-border-styles;
+		--wp--custom--button--color--text: var(--wp--custom--button--hover--color--text);
+		--wp--custom--button--color--background: var(--wp--custom--button--hover--color--background);
+		--wp--custom--button--border--color: var(--wp--custom--button--hover--color--text);
+
 		& ,
 		&:hover,
 		&:focus,
 		&:active {
-			font-size: 1em;
-			line-height: 1.2;
+			line-height: 1;
+		}
+		&:not(.has-background):not(.has-text-color) {
+			&:hover,
+			&:focus,
+			&.has-focus {
+				--wp--custom--button--color--text: var(--wp--custom--button--hover--color--background);
+				--wp--custom--button--color--background: var(--wp--custom--button--hover--color--text);
+			}
 		}
 	}