Fix wc-admin nav styles after GB 11.6.0 changes (#7771)

* Fix wc-admin nav styles after GB 11.6.0 changes * log * Update changelogs/fix-nav-style Co-authored-by: Joshua T Flowers <[email protected]> * Hover fix for back button * Merge styles with existing * Fix back button size * fix whitespace issues Co-authored-by: Joshua T Flowers <[email protected]> Co-authored-by: Paul Sealock <[email protected]>
woocommerce · Oct 12, 2021 · 897f6dc · 897f6dc
1 parent 4cc9145
commit 897f6dc
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 0 deletions.
diff --git a/changelogs/fix-nav-style b/changelogs/fix-nav-style
@@ -0,0 +1,4 @@
+Significance: patch
+Type: Fix
+
+Fixed navigation menu text color after Gutenberg 11.6.0 #7771
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 -------->
 		*
@@ -71,4 +93,26 @@
 			padding: $gap $gap-smaller $gap-small $gap-smaller;
 		}
 	}
+
+	.components-navigation__menu-title,
+	.components-navigation__group-title {
+		color: #f0f0f0;
+		opacity: 1;
+	}
+
+	.components-navigation__back-button {
+		color: #949494;
+		opacity: 1;
+
+		&,
+		span {
+			font-size: 13px;
+			line-height: normal;
+		}
+
+		&:hover,
+		&:hover:not(:disabled) {
+			color: #ddd;
+		}
+	}
 }