Merge pull request #4214 from Automattic/quadrat-hover-tweaks-block-pattern

Quadrat: correct hover styles for titles and squares on block pattern

quadrat/assets/theme.css

@@ -85,11 +85,13 @@
 	justify-content: flex-start;
 }
 
+.is-style-quadrat-diamond-posts .wp-block-post-title a,
 .is-style-quadrat-diamond-posts .wp-block-query-pagination a,
 .is-style-quadrat-diamond-posts .post-meta a {
 	text-decoration: none;
 }
 
+.is-style-quadrat-diamond-posts .wp-block-post-title a:hover,
 .is-style-quadrat-diamond-posts .wp-block-query-pagination a:hover,
 .is-style-quadrat-diamond-posts .post-meta a:hover {
 	text-decoration: underline;
@@ -147,7 +149,7 @@
 	left: 0;
 	z-index: -1;
 	opacity: 0;
-	transition: all 0.4s ease-in;
+	transition: opacity 0.4s ease-in-out;
 }
 
 .is-style-quadrat-diamond-posts .wp-block-post-template li:hover:before {
@@ -155,18 +157,10 @@
 }
 
 .is-style-quadrat-diamond-posts .wp-block-post-template li:nth-child(2n+1):before {
-	transform: rotate(16deg) translate(-130px, -20px);
-}
-
-.is-style-quadrat-diamond-posts .wp-block-post-template li:nth-child(2n+1):hover:before {
 	transform: rotate(-8deg) translate(-110px, 0);
 }
 
 .is-style-quadrat-diamond-posts .wp-block-post-template li:nth-child(2n+2):before {
-	transform: rotate(24deg) translate(-130px, 20px);
-}
-
-.is-style-quadrat-diamond-posts .wp-block-post-template li:nth-child(2n+2):hover:before {
 	transform: rotate(16deg) translate(-110px, 40px);
 }
 

quadrat/sass/block-styles/_query.scss

@@ -2,6 +2,8 @@
 	.post-meta {
 		justify-content: flex-start;
 	}
+
+	.wp-block-post-title,
 	.wp-block-query-pagination,
 	.post-meta {
 		a {
@@ -53,21 +55,15 @@
 				left: 0;
 				z-index: -1;
 				opacity:0;
-				transition: all 0.4s ease-in;
+				transition: opacity 0.4s ease-in-out; 
 			}
 			&:hover:before {
 				opacity:1;
 			}
 			&:nth-child(2n+1):before {
-				transform: rotate(16deg) translate(-130px, -20px);
-			}
-			&:nth-child(2n+1):hover:before {
 				transform: rotate(-8deg) translate(-110px, 0);
 			}
 			&:nth-child(2n+2):before {
-				transform: rotate(24deg) translate(-130px, 20px);
-			}
-			&:nth-child(2n+2):hover:before {
 				transform: rotate(16deg) translate(-110px, 40px);
 			}
 		}