Adds in default style variation

Start of fixing #18552
WordPress · Nov 19, 2019 · 3d82e6b · 3d82e6b
1 parent fb234f5
commit 3d82e6b
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 2 deletions.
diff --git a/packages/block-library/src/navigation/index.js b/packages/block-library/src/navigation/index.js
@@ -27,6 +27,11 @@ export const settings = {
 		inserter: true,
 	},
 
+	styles: [
+		{ name: 'default', label: __( 'Default' ), isDefault: true },
+		{ name: 'dark', label: __( 'Dark' ) },
+	],
+
 	edit,
 
 	save,

diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
@@ -61,9 +61,8 @@
 		& > li > ul {
 			margin: 0;
 			position: absolute;
-			background: #fff;
 			left: 0;
-			top: 100%;
+			top: 80%;
 			min-width: max-content;
 			opacity: 0;
 			transition: all 0.5s ease;

diff --git a/packages/block-library/src/navigation/theme.scss b/packages/block-library/src/navigation/theme.scss
@@ -3,4 +3,30 @@
 	ul li {
 		list-style: none;
 	}
+
+	ul > li > ul {
+		background: #e3e3e3;
+		border-radius: 4px;
+		transition: opacity 0.15s linear, transform 0.15s linear, right 0s 0.15s;
+		transform: translateY(0.6rem);
+
+		& > a {
+			text-decoration: none;
+		}
+
+		&::before {
+			border: solid transparent;
+			border-color: rgba(227, 227, 227, 0);
+			border-bottom-color: #e3e3e3;
+			border-width: 10px;
+			bottom: 100%;
+			content: " ";
+			height: 0;
+			left: 20%;
+			margin-left: -10px;
+			width: 0;
+			position: absolute;
+			pointer-events: none;
+		}
+	}
 }