Merge styles with existing

woocommerce · Oct 11, 2021 · 2bdbb5b · 2bdbb5b
1 parent 25a39c2
commit 2bdbb5b
Showing 1 changed file with 34 additions and 36 deletions.
diff --git a/client/navigation/components/container/style.scss b/client/navigation/components/container/style.scss
@@ -2,7 +2,9 @@
 	display: grid;
 	grid-template-rows: min-content 1fr;
 	height: 100%;
+}
 
+.woocommerce-navigation .woocommerce-navigation__wrapper {
 	h2 > span {
 		width: 100%;
 	}
@@ -20,6 +22,26 @@
 	.components-navigation__item {
 		margin-bottom: 0;
 
+		.components-button {
+			opacity: 1;
+		}
+
+		&:not(:hover) {
+			.components-button {
+				color: #949494;
+			}
+		}
+		&:hover {
+			.components-button {
+				color: #ddd;
+			}
+		}
+		&.is-active {
+			.components-button {
+				color: #fff;
+			}
+		}
+
 		/*
 		* <-------- Start Temporary Code -------->
 		*
@@ -72,44 +94,20 @@
 		}
 	}
 
-	/*
-	 *  Override Gutenberg changes to the navigation component introduced in 11.6.0 by https://github.com/WordPress/gutenberg/pull/34885
-	 */
-	.components-navigation__menu {
-		.components-navigation__menu-title,
-		.components-navigation__group-title {
-			color: #f0f0f0;
-			opacity: 1;
-		}
-		.components-navigation__back-button {
-			color: #949494;
-			opacity: 1;
+	.components-navigation__menu-title,
+	.components-navigation__group-title {
+		color: #f0f0f0;
+		opacity: 1;
+	}
 
-			&:hover,
-			&:hover:not(:disabled) {
-				color: #ddd;
-			}
-		}
-		.components-navigation__item {
-			.components-button {
-				opacity: 1;
-			}
+	.components-navigation__back-button {
+		color: #949494;
+		opacity: 1;
 
-			&:not(:hover) {
-				.components-button {
-					color: #949494;
-				}
-			}
-			&:hover {
-				.components-button {
-					color: #ddd;
-				}
-			}
-			&.is-active {
-				.components-button {
-					color: #fff;
-				}
-			}
+		&:hover,
+		&:hover:not(:disabled) {
+			color: #ddd;
 		}
 	}
 }
+