Improve collapsed menu styling. see #17324.

git-svn-id: http://svn.automattic.com/wordpress/trunk@17815 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/colors-fresh.dev.css

@@ -1116,7 +1116,8 @@ table.widefat .spam a:hover,
 }
 
 #adminmenu a.menu-top,
-.folded #adminmenu li.menu-top {
+.folded #adminmenu li.menu-top,
+#adminmenu .wp-submenu .wp-submenu-head {
 	border-top-color: #f9f9f9;
 	border-bottom-color: #dfdfdf;
 }
@@ -1129,14 +1130,16 @@ table.widefat .spam a:hover,
 #adminmenu li.current a.menu-top,
 .folded #adminmenu li.wp-has-current-submenu,
 .folded #adminmenu li.current.menu-top,
-#adminmenu .wp-menu-arrow {
+#adminmenu .wp-menu-arrow,
+#adminmenu .wp-has-current-submenu .wp-submenu .wp-submenu-head {
 	background: #777; /* fallback color */
 	background:-moz-linear-gradient(bottom,	#6d6d6d, #808080);
 	background:-webkit-gradient(linear, left bottom, left top, from(#6d6d6d), to(#808080));
 }
 
 #adminmenu li.wp-has-current-submenu a.wp-has-current-submenu,
-#adminmenu li.current a.menu-top {
+#adminmenu li.current a.menu-top,
+#adminmenu .wp-has-current-submenu .wp-submenu .wp-submenu-head {
 	text-shadow: 0 -1px 0 #333;
 	color: #fff;
 	border-top-color: #808080;
@@ -1164,18 +1167,20 @@ table.widefat .spam a:hover,
 	background-color: #fff;
 }
 
-.folded #adminmenu li.menu-top,
+.folded #adminmenu .wp-submenu-wrap,
+.folded #adminmenu .wp-submenu ul {
+	border-color: #dfdfdf;
+}
+
+.folded #adminmenu .wp-submenu-wrap {
+	-moz-box-shadow: 2px 2px 5px rgba( 0, 0, 0, 0.4 );
+	-webkit-box-shadow: 2px 2px 5px rgba( 0, 0, 0, 0.4 );
+	box-shadow: 2px 2px 5px rgba( 0, 0, 0, 0.4 );
+}
+
 #adminmenu .wp-submenu .wp-submenu-head {
-	background-color: #F1F1F1;
-}
-
-.folded #adminmenu li.wp-has-current-submenu,
-.folded #adminmenu li.menu-top.current {
-	background-color: #e6e6e6;
-}
-
-#adminmenu .wp-has-current-submenu .wp-submenu .wp-submenu-head {
-	background-color: #EAEAEA;
+	border-right-color: #dfdfdf;
+	background-color: #ececec;
 }
 
 #adminmenu div.wp-submenu {

wp-admin/css/global.dev.css

@@ -91,7 +91,8 @@ table {
 #adminmenuback,
 #adminmenuwrap,
 #adminmenu,
-#adminmenu .wp-submenu ul {
+.folded #adminmenu .wp-submenu.sub-open,
+.folded #adminmenu .wp-submenu-wrap {
 	width: 145px;
 }
 

wp-admin/css/wp-admin.dev.css

@@ -1123,16 +1123,11 @@ form.upgrade .hint {
 	display: none;
 }
 
-.folded #adminmenu div.wp-submenu-head,
-body.js.folded #adminmenu li.wp-has-submenu div.sub-open {
+.folded #adminmenu div.wp-submenu-head {
 	display: block;
 }
 
 .folded #adminmenu a.menu-top,
-.folded #adminmenu .wp-submenu,
-.folded #adminmenu li.wp-has-current-submenu .wp-submenu,
-body.no-js.folded #adminmenu .open-if-no-js .wp-submenu,
-body.js.folded #adminmenu li.wp-menu-open .wp-submenu,
 body.no-js #adminmenu .wp-menu-toggle,
 .folded #adminmenu div.wp-menu-toggle {
 	display: none;
@@ -1246,16 +1241,41 @@ body.no-js #adminmenu li.wp-has-current-submenu .wp-submenu {
 	border-style: solid;
 }
 
-#adminmenu .wp-submenu .wp-submenu-head {
-	padding: 6px 4px 6px 10px;
-	cursor: default;
+.folded #adminmenu .wp-submenu {
+	display: block;
+	position: absolute;
+	top: -5px;
+	left: 26px;
+	z-index: 999;
+	width: 0;
+	padding: 0;
+	overflow: hidden;
+	-moz-transition: width 200ms ease-out;
+	-webkit-transition: width 200ms ease-out;
+	-o-transition: width 200ms ease-out;
+	transition: width 200ms ease-out;
+}
+.folded #adminmenu .wp-submenu.sub-open {
+	padding: 0 8px 8px 0;
 }
 
-.folded #adminmenu .wp-submenu {
-	position: absolute;
-	margin: -1px 0 0 28px;
-	padding: 0 8px 8px;
-	z-index: 999;
+#adminmenu .wp-submenu .wp-submenu-head {
+	padding: 6px 4px 5px 10px;
+	cursor: default;
+	border-width: 1px 0;
+	border-style: solid;
+}
+
+.folded #adminmenu .wp-submenu-wrap {
+	margin-top: 4px;
+	border-width: 0 1px 1px 0;
+	border-style: solid;
+	position: relative;
+}
+
+.folded #adminmenu .wp-submenu ul {
+	border-width: 0 0 0 1px;
+	border-style: solid;
 }
 
 .folded #adminmenu .wp-submenu a {
@@ -1379,7 +1399,7 @@ strong .post-com-count {
 }
 #collapse-button {
 	float: left;
-	margin: 8px;
+	margin: 8px 6px;
 	border-width: 1px;
 	border-style: solid;
 	-moz-border-radius: 10px;

wp-admin/menu-header.php

@@ -110,7 +110,8 @@ function _wp_menu_output( $menu, $submenu, $submenu_as_parent = true ) {
 		}
 
 		if ( !empty($submenu[$item[2]]) ) {
-			echo "\n\t<div class='wp-submenu'><div class='wp-submenu-head'>{$item[0]}</div><ul>";
+			echo "\n\t<div class='wp-submenu'><div class='wp-submenu-wrap'>";
+			echo "<div class='wp-submenu-head'>{$item[0]}</div><ul>";
 			$first = true;
 			foreach ( $submenu[$item[2]] as $sub_key => $sub_item ) {
 				if ( !current_user_can($sub_item[1]) )
@@ -163,7 +164,7 @@ function _wp_menu_output( $menu, $submenu, $submenu_as_parent = true ) {
 					echo "<li$class><a href='{$sub_item[2]}'$class$tabindex>$title</a></li>";
 				}
 			}
-			echo "</ul></div>";
+			echo "</ul></div></div>";
 		}
 		echo "</li>";
 	}

wp-includes/script-loader.php

@@ -485,13 +485,13 @@ function wp_default_styles( &$styles ) {
 	// Any rtl stylesheets that don't have a .dev version for ltr
 	$no_suffix = array( 'farbtastic' );
 
-	$styles->add( 'wp-admin', "/wp-admin/css/wp-admin$suffix.css", array(), '20110505' );
+	$styles->add( 'wp-admin', "/wp-admin/css/wp-admin$suffix.css", array(), '20110505b' );
 
 	$styles->add( 'ie', "/wp-admin/css/ie$suffix.css", array(), '20101102' );
 	$styles->add_data( 'ie', 'conditional', 'lte IE 7' );
 
 	// all colors stylesheets need to have the same query strings (cache manifest compat)
-	$colors_version = '20110505';
+	$colors_version = '20110505b';
 
 	// Register "meta" stylesheet for admin colors. All colors-* style sheets should have the same version string.
 	$styles->add( 'colors', true, array(), $colors_version );