Navigation: Try adding minimal animation to overlay. (#43851)

WordPress · Sep 6, 2022 · ee52971 · ee52971
1 parent 1cf52f0
commit ee52971
Showing 1 changed file with 17 additions and 1 deletion.
diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
@@ -430,6 +430,16 @@ button.wp-block-navigation-item__content {
  * Mobile menu.
  */
 
+@keyframes overlay-menu__fade-in-animation {
+	from {
+		opacity: 0;
+		top: 0.5em;
+	}
+	to {
+		opacity: 1;
+		top: 0;
+	}
+}
 .wp-block-navigation__responsive-container {
 	display: none;
 	position: fixed;
@@ -467,6 +477,11 @@ button.wp-block-navigation-item__content {
 		flex-direction: column;
 		background-color: inherit;
 
+		// Animation.
+		animation: overlay-menu__fade-in-animation 0.1s ease-out;
+		animation-fill-mode: forwards;
+		@include reduce-motion("animation");
+
 		// Try to inherit any root paddings set, so the X can align to a top-right aligned menu.
 		padding-top: var(--wp--style--root--padding-top, 2rem);
 		padding-right: var(--wp--style--root--padding-right, 2rem);
@@ -674,7 +689,8 @@ button.wp-block-navigation-item__content {
 }
 
 // Adjust open dialog top margin when admin-bar is visible.
-.has-modal-open .admin-bar .wp-block-navigation__responsive-dialog {
+// Needs to be scoped to .is-menu-open, or it will shift the position of any other navigations that may be present.
+.has-modal-open .admin-bar .is-menu-open .wp-block-navigation__responsive-dialog {
 	margin-top: $admin-bar-height-big;
 
 	// Handle smaller admin-bar.