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;