From 152cbf1c7d9a2136f513a7911c71604cd04bb448 Mon Sep 17 00:00:00 2001
From: "Michael P. Pfeiffer" <frontdevde@users.noreply.github.com>
Date: Tue, 29 Oct 2019 18:21:56 +0100
Subject: [PATCH] Navigation: Explore default frontend styles (#18094)

* try basic version of varia theme styles as default

* Add class to show submenu indicator

* adjustments for small viewports
---
 .../src/navigation-menu/style.scss            | 119 ++++++++++++++++++
 packages/block-library/src/style.scss         |   1 +
 2 files changed, 120 insertions(+)
 create mode 100644 packages/block-library/src/navigation-menu/style.scss

diff --git a/packages/block-library/src/navigation-menu/style.scss b/packages/block-library/src/navigation-menu/style.scss
new file mode 100644
index 00000000000000..3c2222ef59f252
--- /dev/null
+++ b/packages/block-library/src/navigation-menu/style.scss
@@ -0,0 +1,119 @@
+.wp-block-navigation-menu {
+
+	& > ul {
+		display: block;
+		list-style: none;
+		margin: 0;
+		max-width: none;
+		padding-left: 0;
+		position: relative;
+
+		@include break-small {
+			display: flex;
+			flex-wrap: wrap;
+		}
+
+		ul {
+			padding-left: 0;
+		}
+
+		li {
+			position: relative;
+			z-index: 1;
+
+			&:hover,
+			&:focus-within {
+				cursor: pointer;
+				z-index: 99999;
+			}
+
+			// Submenu Display
+			&:hover > ul,
+			&:focus-within > ul,
+			& ul:hover,
+			& ul:focus {
+				visibility: visible;
+				opacity: 1;
+				display: block;
+			}
+		}
+
+		& > li {
+
+			& > a {
+				padding-left: 0;
+
+				@include break-small {
+					padding-left: 16px;
+				}
+			}
+
+			&:first-of-type > a {
+				padding-left: 0;
+			}
+
+			&:last-of-type > a {
+				padding-right: 0;
+			}
+		}
+
+		// Sub-menus Flyout
+		& > li > ul {
+			margin: 0;
+			position: absolute;
+			background: #fff;
+			box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.2);
+			left: 0;
+			top: 100%;
+			min-width: max-content;
+			opacity: 0;
+			transition: all 0.5s ease;
+			visibility: hidden;
+
+			ul {
+				width: 100%;
+			}
+		}
+	}
+
+	// Menu Link
+	a {
+		display: block;
+		padding: 16px;
+	}
+
+	// Sub-menu depth indicators
+	ul ul {
+
+		list-style: none;
+		margin-left: 0;
+		// Reset the counter for each UL
+		counter-reset: nested-list;
+
+		li a {
+
+			padding-top: 8px;
+			padding-bottom: 8px;
+
+			&::before {
+				// Increment the dashes
+				counter-increment: nested-list;
+				// Insert dashes with spaces in between
+				content: "\2013\00a0" counters(nested-list, "\2013\00a0", none);
+			}
+		}
+	}
+
+	// Top-level sub-menu indicators
+	& .has-sub-menu > a {
+
+		&::after {
+			content: "\00a0\25BC";
+			display: inline-block;
+			font-size: 0.6rem;
+			height: inherit;
+			width: inherit;
+		}
+	}
+
+}
diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss
index d32050bfd1c4b9..3fd7e3c2b8e041 100644
--- a/packages/block-library/src/style.scss
+++ b/packages/block-library/src/style.scss
@@ -11,6 +11,7 @@
 @import "./latest-comments/style.scss";
 @import "./latest-posts/style.scss";
 @import "./media-text/style.scss";
+@import "./navigation-menu/style.scss";
 @import "./paragraph/style.scss";
 @import "./pullquote/style.scss";
 @import "./quote/style.scss";