.elgg-menu is no longer trivial

git-svn-id: http://code.elgg.org/elgg/trunk@8485 36083f99-b078-4883-b0ff-0f9b5a30f544

2 files changed, 32 insertions, 26 deletions

diff --git a/views/default/css/elements/layout.php b/views/default/css/elements/layout.php
index 6ae0a7a21..96f5dbebe 100644
--- a/views/default/css/elements/layout.php
+++ b/views/default/css/elements/layout.php
@@ -44,11 +44,6 @@
 	padding: 0 10px;
 }
 
-<?php // elgg logo and user avatar need to be adjusted slightly ?>
-.elgg-page-topbar img {
-	margin-top: -1px;
-}
-
 /***** PAGE MESSAGES ******/
 .elgg-system-messages {
 	position: fixed;
@@ -76,7 +71,7 @@
 	position: relative;
 }
 
-/***** PAGE BODY ******/
+/***** PAGE BODY LAYOUT ******/
 .elgg-layout {
 	min-height: 360px;
 }
@@ -126,7 +121,7 @@
 .elgg-page-footer {
 	position: relative;
 }
-.elgg-page-footer * {
+.elgg-page-footer {
 	color: #999999;
 }
 .elgg-page-footer a:hover {
diff --git a/views/default/css/elements/navigation.php b/views/default/css/elements/navigation.php
index 19998365d..a755d4108 100644
--- a/views/default/css/elements/navigation.php
+++ b/views/default/css/elements/navigation.php
@@ -83,6 +83,24 @@
 }
 
 /* ***************************************
+ * MENUS
+ *
+ * .elgg-menu does two things:
+ *   1) Vertically centers inline images and icons
+ *   2) Abstracts commonly-duplicated code used when adding "separators" to horizontal menus
+ *
+ * To make a menu horizontal:
+ * .elgg-menu-$menu > li {display:inline-block}
+ *
+ * To add separators to a horizontal menu:
+ * .elgg-menu-$menu > li:after {content: 'separator'}
+ *************************************** */
+.elgg-menu > li:after {display: inline-block}
+.elgg-menu > li:last-child:after {display:none}
+.elgg-menu > li > a {display:inline-block}
+.elgg-menu img, .elgg-menu .elgg-icon {vertical-align: middle; margin-top: -2px}
+
+/* ***************************************
 	BREADCRUMBS
 *************************************** */
 .elgg-breadcrumbs {
@@ -92,17 +110,13 @@
 	color: #bababa;
 }
 .elgg-breadcrumbs li {
-	display: inline;
+	display: inline-block;
 }
 .elgg-breadcrumbs li:after{
 	content: "\003E";
-	display: inline-block;
-	padding: 0 4px 0 4px;
+	padding: 0 4px;
 	font-weight: normal;
 }
-.elgg-breadcrumbs li:last-child:after {
-	content: "";
-}
 .elgg-breadcrumbs a {
 	color: #999999;
 }
@@ -116,8 +130,6 @@
 	left: 0;
 }
 
-
-
 /* ***************************************
 	TOPBAR MENU
 *************************************** */
@@ -134,7 +146,6 @@
 	color: #eeeeee;
 	margin-top: 2px;
 	line-height: 1.1em;
-	display: block;
 }
 
 .elgg-menu-topbar > li > a:hover {
@@ -170,7 +181,6 @@
 	font-weight: bold;
 	padding: 3px 13px 0px 13px;
 	height: 20px;
-	display: block;
 }
 .elgg-menu-site a:hover {
 	text-decoration: none;
@@ -208,6 +218,7 @@
 	float: none;
 }
 .elgg-menu-site .elgg-more:hover ul li a {
+	display: block;
 	background: white;
 	color: #555555;
 	-webkit-border-radius: 0;
@@ -285,7 +296,6 @@
 	display: block;
 }
 .elgg-menu-hover a {
-	display: block;
 	padding: 2px 8px;
 	font-size: 92%;
 }
@@ -304,18 +314,19 @@
 /* ***************************************
 	FOOTER
 *************************************** */
-.elgg-menu-footer li {
-	float: left;
+.elgg-menu-footer > li {
+	display: inline-block;
 }
-.elgg-menu-footer li:after {
+
+.elgg-menu-footer > li:after {
 	content: "\007C";
-	display: inline-block;
-	padding: 0 4px 0 4px;
-	font-weight: normal;
+	padding: 0 4px;
 }
-.elgg-menu-footer li:last-child:after {
-	content: "";
+
+.elgg-menu-footer > li > a {
+	color:#999;
 }
+
 .elgg-menu-footer.elgg-section-alt {
 	float: right;
 }
\ No newline at end of file