Merge pull request #641 from WordPress/try/navigation-block-outline

Adjust outline styles on the navigation block. Co-authored-by: carolinan <[email protected]> Co-authored-by: juanfra <[email protected]> Co-authored-by: troychaplin <[email protected]> Co-authored-by: elbsegler63 <[email protected]> Co-authored-by: Zodiac1978 <[email protected]>
WordPress · Oct 28, 2024 · a1adb16 · a1adb16
2 parents b57f165 + c278e55
commit a1adb16
Showing 1 changed file with 15 additions and 0 deletions.
diff --git a/style.css b/style.css
@@ -29,6 +29,21 @@ a {
 	outline-style: solid;
 }
 
+/* Increase the bottom margin on submenus, so that the outline is visible. */
+.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
+	margin-bottom: 3px;
+}
+
+/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
+.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
+	outline-offset: 4px;
+}
+
+/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
+.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
+	outline-offset: 0;
+}
+
 /*
  * Progressive enhancement to reduce widows and orphans
  * https://github.com/WordPress/gutenberg/issues/55190