use corerect classes to alter flow

WordPress · Mar 22, 2021 · 64f9fad · 64f9fad
1 parent 12de19d
commit 64f9fad
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 31 deletions.
diff --git a/packages/block-library/src/navigation/edit.js b/packages/block-library/src/navigation/edit.js
@@ -187,7 +187,7 @@ function Navigation( {
 									setResponsiveMenuOpen( false );
 								} }
 							>
-								Close
+								X
 							</Button>
 							<div id={ `${ clientId }-modal-content` }>
 								<ul { ...innerBlocksProps }></ul>

diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss
@@ -283,3 +283,9 @@ $color-control-label-height: 20px;
 		flex-direction: row-reverse; // This puts the chevron, which is hidden from screen readers, on the right.
 	}
 }
+
+.wp-block-navigation__responsive-container-close {
+	position: absolute;
+	top: 170px; // Arbitrary position to display close button below editor tools
+	right: 16px;
+}
diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
@@ -19,16 +19,25 @@
 	margin: 0;
 	padding-left: 0;
 	display: none;
+	@include break-mobile() {
+		// Horizontal layout
+		display: flex;
+		flex-wrap: wrap;
+
+		// Vertical layout
+		.is-vertical & {
+			display: block;
+		}
+	}
+
 }
 .wp-block-navigation__responsive-container {
 	display: none;
-	opacity: 0;
 	position: fixed;
 	top: 0;
 	left: 0;
 	right: 0;
 	bottom: 0;
-	transition: all 200ms;
 	background-color: #fff;
 	/*
 		arbitrary, high z-index
@@ -41,20 +50,40 @@
 	&.is-open {
 		display: flex;
 		flex-direction: column;
-		opacity: 1;
-		ul {
+		.wp-block-navigation__container {
 			display: flex;
 			flex-direction: column;
 		}
 	}
+
+	@include break-mobile() {
+		display: flex;
+		flex-direction: row;
+		position: relative;
+		background-color: inherit;
+		&.is-open {
+			flex-direction: row;
+			.wp-block-navigation__container {
+				flex-direction: row;
+			}
+		}
+	}
+}
+.wp-block-navigation__responsive-container-open {
+	@include break-mobile {
+		display: none;
+	}
 }
 .wp-block-navigation__responsive-container-close {
 	position: absolute;
-	top: 12rem;
-	right: 3rem;
+	top: 60px;
+	right: 16px;
 	font-size: 1rem;
 	background-color: #000;
 	color: #fff;
+	@include break-mobile() {
+		display: none;
+	}
 }
 // Justification.
 .items-justified-center > ul {
@@ -68,26 +97,3 @@
 .items-justified-space-between > ul {
 	justify-content: space-between;
 }
-@include break-mobile() {
-	.wp-block-navigation__responsive-container-open,
-	.wp-block-navigation__responsive-container-close {
-		display: none;
-	}
-	.wp-block-navigation__responsive-container {
-		display: flex;
-		flex-direction: row;
-		position: relative;
-		opacity: 1;
-		background-color: inherit;
-	}
-	.wp-block-navigation__container {
-		// Horizontal layout
-		display: flex;
-		flex-wrap: wrap;
-
-		// Vertical layout
-		.is-vertical & {
-			display: block;
-		}
-	}
-}
diff --git a/packages/block-library/src/page-list/style.scss b/packages/block-library/src/page-list/style.scss
@@ -102,8 +102,16 @@
 	}
 }
 
-.is-vertical .wp-block-navigation__container {
+.is-vertical .wp-block-navigation__container,
+.is-open .wp-block-navigation__container {
 	.wp-block-page-list {
 		display: block;
 	}
 }
+.is-open .wp-block-navigation__container {
+	.wp-block-page-list {
+		@include break-mobile() {
+			display: flex;
+		}
+	}
+}