Added selectors for Quadrat navigation styles to support the current classes produced by the page-list block (#4151)

* Added selectors for Quadrat navigation styles to support the current classes produced by the page-list block

* Updated submenu border to match requested design

quadrat/assets/theme.css

@@ -163,14 +163,20 @@ ul ul {
 	background: transparent;
 }
 
+.wp-block-navigation .wp-block-pages-list__item .wp-block-pages-list__item__link,
+.wp-block-navigation .wp-block-navigation-link__content {
+	color: var(--wp--custom--color--foreground);
+}
+
 .wp-block-navigation .wp-block-pages-list__item .wp-block-pages-list__item__link:hover,
 .wp-block-navigation .wp-block-navigation-link__content:hover {
 	text-decoration: underline;
 }
 
+.wp-block-navigation:not(.has-background) .wp-block-navigation__container .submenu-container,
 .wp-block-navigation:not(.has-background) .wp-block-navigation__container .wp-block-navigation-link__container {
 	background-color: var(--wp--custom--color--background);
-	border-color: var(--wp--custom--color--foreground);
+	border-color: var(--wp--custom--color--secondary);
 }
 
 .wp-block-navigation .wp-block-navigation__mobile-menu-open-button {
@@ -181,6 +187,7 @@ ul ul {
 	background-color: var(--wp--custom--color--secondary);
 }
 
+.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-pages-list__item,
 .wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-link {
 	font-size: 20px;
 	line-height: 50px;
@@ -188,16 +195,29 @@ ul ul {
 	align-items: flex-end;
 }
 
+.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-pages-list__item.has-child .wp-block-pages-list__item__link,
+.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-pages-list__item.has-child .wp-block-navigation-link__content,
+.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-link.has-child .wp-block-pages-list__item__link,
 .wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-link.has-child .wp-block-navigation-link__content {
 	margin-right: 0;
 }
 
+.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-pages-list__item.has-child .submenu-container,
+.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-pages-list__item.has-child .wp-block-navigation-link__container,
+.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-link.has-child .submenu-container,
 .wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-link.has-child .wp-block-navigation-link__container {
 	margin-right: -19px;
 	padding: 0 19px 0 0;
 	border-right: 1px solid var(--wp--custom--color--foreground);
 }
 
+.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-pages-list__item.has-child .submenu-container .wp-block-pages-list__item__link,
+.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-pages-list__item.has-child .submenu-container .wp-block-navigation-link__content,
+.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-pages-list__item.has-child .wp-block-navigation-link__container .wp-block-pages-list__item__link,
+.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-pages-list__item.has-child .wp-block-navigation-link__container .wp-block-navigation-link__content,
+.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-link.has-child .submenu-container .wp-block-pages-list__item__link,
+.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-link.has-child .submenu-container .wp-block-navigation-link__content,
+.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-link.has-child .wp-block-navigation-link__container .wp-block-pages-list__item__link,
 .wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-link.has-child .wp-block-navigation-link__container .wp-block-navigation-link__content {
 	padding: 0;
 	font-size: 15px;

quadrat/sass/blocks/_navigation.scss

@@ -4,15 +4,17 @@
 	}
 	.wp-block-pages-list__item .wp-block-pages-list__item__link,
 	.wp-block-navigation-link__content {
+		color: var(--wp--custom--color--foreground);
 		&:hover {
 			text-decoration: underline;
 		}
 	}
 	&:not(.has-background) { 
 		.wp-block-navigation__container { 
+			.submenu-container,
 			.wp-block-navigation-link__container {
 				background-color: var(--wp--custom--color--background);
-				border-color: var(--wp--custom--color--foreground);
+				border-color: var(--wp--custom--color--secondary);
 			}
 		}
 	}
@@ -24,19 +26,23 @@
 	&.is-responsive .wp-block-navigation__responsive-container.is-menu-open {
 		background-color: var(--wp--custom--color--secondary);
 		&.has-modal-open {
+			.wp-block-pages-list__item,
 			.wp-block-navigation-link {
 				font-size: 20px;
 				line-height: 50px;
 				margin: 0;
 				align-items: flex-end;
 				&.has-child {
+					.wp-block-pages-list__item__link,
 					.wp-block-navigation-link__content {
 						margin-right: 0;
 					}
+					.submenu-container,
 					.wp-block-navigation-link__container{
 						margin-right: -19px;
 						padding: 0 19px 0 0;
 						border-right: 1px solid var(--wp--custom--color--foreground);
+						.wp-block-pages-list__item__link,
 						.wp-block-navigation-link__content {
 							padding: 0;
 							font-size: 15px;