Create admin menu arrows using CSS3 transforms. props chexee. see #18382, fixes #18902.

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

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

@@ -954,10 +954,7 @@ 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-has-current-submenu .wp-menu-arrow,
+#adminmenu .wp-menu-arrow,
-#adminmenu .current .wp-menu-arrow,
-#adminmenu li.wp-has-current-submenu:hover > .wp-menu-arrow,
-#adminmenu li.current:hover > .wp-menu-arrow,
 #adminmenu .wp-has-current-submenu .wp-submenu .wp-submenu-head {
 	background-color: #777; /* Fallback */
 	background-image: -ms-linear-gradient(bottom, #6d6d6d, #808080); /* IE10 */
@@ -968,6 +965,27 @@ table.widefat .spam a:hover,
 	background-image: linear-gradient(bottom, #6d6d6d, #808080); /* proposed W3C Markup */
 }
 
+#adminmenu .wp-menu-arrow div {
+	background-color: #777; /* Fallback */
+	background-image: -ms-linear-gradient(right bottom, #6d6d6d, #808080); /* IE10 */
+	background-image: -moz-linear-gradient(right bottom, #6d6d6d, #808080); /* Firefox */
+	background-image: -o-linear-gradient(right bottom, #6d6d6d, #808080); /* Opera */
+	background-image: -webkit-gradient(linear, right bottom, left top, from(#6d6d6d), to(#808080)); /* old Webkit */
+	background-image: -webkit-linear-gradient(right bottom, #6d6d6d, #808080); /* new Webkit */
+	background-image: linear-gradient(right bottom, #6d6d6d, #808080); /* proposed W3C Markup */
+}
+
+#adminmenu li.wp-not-current-submenu .wp-menu-arrow {
+	border-top-color: #f9f9f9;
+	border-bottom-color: #dfdfdf;
+	background: #E4E4E4;
+}
+
+#adminmenu li.wp-not-current-submenu .wp-menu-arrow div {
+	background: #E4E4E4;
+	border-color: #ccc;
+}
+
 .folded #adminmenu li.menu-top li:hover a {
 	background-image: none;
 }

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

@@ -1786,21 +1786,62 @@ body.no-js #adminmenu .wp-menu-toggle,
 	padding-left: 0;
 }
 
-#adminmenu li.wp-has-current-submenu .wp-menu-arrow,
+.wp-menu-arrow {
-#adminmenu li.menu-top.current .wp-menu-arrow,
+	display: none;
-#adminmenu li.wp-has-submenu:hover .wp-menu-arrow {
-	display: block;
-	position: absolute;
-	right: -9px;
-	top: 0;
 	cursor: auto;
 	z-index: 25;
+	position: absolute;
+	right: 100%;
+	margin: 0;
+	height: 30px;
+	width: 6px;
+
+	-moz-transform:    translate( 146px );
+	-webkit-transform: translate( 146px );
+	-o-transform:      translate( 146px );
+	-ms-transform:     translate( 146px );
+	transform:         translate( 146px );
+}
+
+#adminmenu li.wp-has-current-submenu .wp-menu-arrow,
+#adminmenu li.menu-top.current .wp-menu-arrow,
+#adminmenu li.wp-not-current-submenu:hover .wp-menu-arrow {
+	display: block;
 }
 
 #adminmenu li.menu-top:hover .wp-menu-arrow {
 	z-index: 1001;
 }
 
+#adminmenu .wp-menu-arrow div {
+	position: absolute;
+	top: 7px;
+	left: -1px;
+	width: 14px;
+	height: 15px;
+
+	-moz-transform:    matrix( -0.6, 1, 0.6, 1, 0, 0 );
+	-webkit-transform: matrix( -0.6, 1, 0.6, 1, 0, 0 );
+	-o-transform:      matrix( -0.6, 1, 0.6, 1, 0, 0 );
+	-ms-transform:     matrix( -0.6, 1, 0.6, 1, 0, 0 );
+	transform:         matrix( -0.6, 1, 0.6, 1, 0, 0 );
+}
+
+#adminmenu li.wp-not-current-submenu .wp-menu-arrow {
+	-webkit-transform: translate( 145px );
+	height: 28px;
+	border-width: 1px 0;
+	border-style: solid;
+}
+
+#adminmenu .wp-not-current-submenu .wp-menu-arrow div {
+	width: 15px;
+	top: 6px;
+	left: -2px;
+	border-width: 0 0 1px 1px;
+	border-style: solid;
+}
+
 .wp-menu-arrow,
 .folded #adminmenu li.menu-top:hover .wp-menu-arrow {
 	display: none;
@@ -1811,12 +1852,6 @@ body.no-js #adminmenu .wp-menu-toggle,
 	z-index: 125;
 }
 
-#adminmenu .wp-menu-arrow div {
-	width: 15px;
-	height: 30px;
-	background: url(../images/menu-arrow-frame.png) top right no-repeat;
-}
-
 #adminmenu .wp-submenu li {
 	padding: 0;
 	margin: 0;

wp-admin/menu-header.php

@@ -59,6 +59,8 @@ function _wp_menu_output( $menu, $submenu, $submenu_as_parent = true ) {
 
 		if ( ( $parent_file && $item[2] == $parent_file ) || ( empty($typenow) && $self == $item[2] ) )
 			$class[] = ! empty( $submenu_items ) ? 'wp-has-current-submenu wp-menu-open' : 'current';
+		else
+			$class[] = 'wp-not-current-submenu';
 
 		if ( ! empty( $item[4] ) )
 			$class[] = $item[4];

wp-includes/script-loader.php

@@ -431,13 +431,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(), '20111010' );
+	$styles->add( 'wp-admin', "/wp-admin/css/wp-admin$suffix.css", array(), '20111011' );
 
 	$styles->add( 'ie', "/wp-admin/css/ie$suffix.css", array(), '20111010' );
 	$styles->add_data( 'ie', 'conditional', 'lte IE 7' );
 
 	// all colors stylesheets need to have the same query strings (cache manifest compat)
-	$colors_version = '20111005a';
+	$colors_version = '20111011';
 
 	// Register "meta" stylesheet for admin colors. All colors-* style sheets should have the same version string.
 	$styles->add( 'colors', true, array('wp-admin'), $colors_version );