From 1996babc547690e5a98e42cb52c0a5f9d099d128 Mon Sep 17 00:00:00 2001
From: Lance Willett <lancewillett@git.wordpress.org>
Date: Tue, 3 Dec 2013 20:50:31 +0000
Subject: [PATCH] Twenty Fourteen: enhance main navigation usability by adding
 in visual indicators for existence of submenu items. Props binarymoon,
 iamtakashi. Fixes #26200.

git-svn-id: https://develop.svn.wordpress.org/trunk@26587 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-content/themes/twentyfourteen/rtl.css  | 40 +++++++++++++++-
 .../themes/twentyfourteen/style.css           | 48 ++++++++++++++++++-
 2 files changed, 85 insertions(+), 3 deletions(-)

diff --git a/src/wp-content/themes/twentyfourteen/rtl.css b/src/wp-content/themes/twentyfourteen/rtl.css
index 0a8e462e6d..b9c99b6921 100644
--- a/src/wp-content/themes/twentyfourteen/rtl.css
+++ b/src/wp-content/themes/twentyfourteen/rtl.css
@@ -533,7 +533,7 @@ td {
 
 	.primary-navigation {
 		float: left;
-		margin: 0 -10px 0 1px;
+		margin: 0 -12px 0 1px;
 	}
 
 	.primary-navigation ul ul {
@@ -559,6 +559,32 @@ td {
 		right: 100%;
 		left: auto;
 	}
+
+	.primary-navigation .menu-item-has-children > a,
+	.primary-navigation .page_item_has_children > a {
+		padding-right: 12px;
+		padding-left: 26px;
+	}
+
+	.primary-navigation .menu-item-has-children > a:after,
+	.primary-navigation .page_item_has_children > a:after {
+		right: auto;
+		left: 12px;
+	}
+
+	.primary-navigation li .menu-item-has-children > a,
+	.primary-navigation li .page_item_has_children > a {
+		padding-right: 12px;
+		padding-left: 20px;
+	}
+
+	.primary-navigation .menu-item-has-children li > a:after,
+	.primary-navigation .page_item_has_children li > a:after {
+		border-right-color: #fff;
+		border-left-color: transparent;
+		right: auto;
+		left: 8px;
+	}
 }
 
 @media screen and (min-width: 810px) {
@@ -660,6 +686,18 @@ td {
 		left: auto;
 	}
 
+	.secondary-navigation .menu-item-has-children > a {
+		padding-right: 30px;
+		padding-left: 38px;
+	}
+
+	.secondary-navigation .menu-item-has-children > a:after {
+		border-right-color: #fff;
+		border-left-color: transparent;
+		right: auto;
+		left: 26px;
+	}
+
 	.footer-sidebar .widget {
 		float: right;
 	}
diff --git a/src/wp-content/themes/twentyfourteen/style.css b/src/wp-content/themes/twentyfourteen/style.css
index 04ada4cc51..f27cc5e306 100644
--- a/src/wp-content/themes/twentyfourteen/style.css
+++ b/src/wp-content/themes/twentyfourteen/style.css
@@ -3316,7 +3316,7 @@ a.post-thumbnail:hover {
 	.primary-navigation {
 		float: right;
 		font-size: 11px;
-		margin: 0 1px 0 -10px;
+		margin: 0 1px 0 -12px;
 		padding: 0;
 		text-transform: uppercase;
 	}
@@ -3347,7 +3347,7 @@ a.post-thumbnail:hover {
 
 	.primary-navigation a {
 		display: inline-block;
-		padding: 0 10px;
+		padding: 0 12px;
 		white-space: nowrap;
 	}
 
@@ -3399,6 +3399,36 @@ a.post-thumbnail:hover {
 	.primary-navigation ul ul li.focus > ul {
 		left: 100%;
 	}
+
+	.primary-navigation .menu-item-has-children > a,
+	.primary-navigation .page_item_has_children > a {
+		padding-right: 26px;
+	}
+
+	.primary-navigation .menu-item-has-children > a:after,
+	.primary-navigation .page_item_has_children > a:after {
+		border: 4px solid transparent;
+		border-top-color: #fff;
+		content: "";
+		margin-top: -2px;
+		position: absolute;
+		top: 50%;
+		right: 12px;
+	}
+
+	.primary-navigation li .menu-item-has-children > a,
+	.primary-navigation li .page_item_has_children > a {
+		padding-right: 20px;
+		width: 168px;
+	}
+
+	.primary-navigation .menu-item-has-children li > a:after,
+	.primary-navigation .page_item_has_children li > a:after {
+		border-top-color: transparent;
+		border-left-color: #fff;
+		margin-top: -4px;
+		right: 8px;
+	}
 }
 
 @media screen and (min-width: 810px) {
@@ -3602,6 +3632,20 @@ a.post-thumbnail:hover {
 		left: 162px;
 	}
 
+	.secondary-navigation .menu-item-has-children > a {
+		padding-right: 38px;
+	}
+
+	.secondary-navigation .menu-item-has-children > a:after {
+		border: 4px solid transparent;
+		border-left-color: #fff;
+		content: "";
+		margin-top: -4px;
+		position: absolute;
+		top: 50%;
+		right: 26px;
+	}
+
 	.footer-sidebar .widget,
 	.primary-sidebar .widget {
 		font-size: 12px;