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
This commit is contained in:
koopersmith 2011-10-11 21:25:38 +00:00
parent 35dd66044a
commit e10f6876d4
6 changed files with 76 additions and 21 deletions

File diff suppressed because one or more lines are too long

View File

@ -954,10 +954,7 @@ table.widefat .spam a:hover,
#adminmenu li.current a.menu-top, #adminmenu li.current a.menu-top,
.folded #adminmenu li.wp-has-current-submenu, .folded #adminmenu li.wp-has-current-submenu,
.folded #adminmenu li.current.menu-top, .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 { #adminmenu .wp-has-current-submenu .wp-submenu .wp-submenu-head {
background-color: #777; /* Fallback */ background-color: #777; /* Fallback */
background-image: -ms-linear-gradient(bottom, #6d6d6d, #808080); /* IE10 */ 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 */ 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 { .folded #adminmenu li.menu-top li:hover a {
background-image: none; background-image: none;
} }

File diff suppressed because one or more lines are too long

View File

@ -1786,21 +1786,62 @@ body.no-js #adminmenu .wp-menu-toggle,
padding-left: 0; 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; cursor: auto;
z-index: 25; 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 { #adminmenu li.menu-top:hover .wp-menu-arrow {
z-index: 1001; 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, .wp-menu-arrow,
.folded #adminmenu li.menu-top:hover .wp-menu-arrow { .folded #adminmenu li.menu-top:hover .wp-menu-arrow {
display: none; display: none;
@ -1811,12 +1852,6 @@ body.no-js #adminmenu .wp-menu-toggle,
z-index: 125; 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 { #adminmenu .wp-submenu li {
padding: 0; padding: 0;
margin: 0; margin: 0;

View File

@ -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] ) ) if ( ( $parent_file && $item[2] == $parent_file ) || ( empty($typenow) && $self == $item[2] ) )
$class[] = ! empty( $submenu_items ) ? 'wp-has-current-submenu wp-menu-open' : 'current'; $class[] = ! empty( $submenu_items ) ? 'wp-has-current-submenu wp-menu-open' : 'current';
else
$class[] = 'wp-not-current-submenu';
if ( ! empty( $item[4] ) ) if ( ! empty( $item[4] ) )
$class[] = $item[4]; $class[] = $item[4];

View File

@ -431,13 +431,13 @@ function wp_default_styles( &$styles ) {
// Any rtl stylesheets that don't have a .dev version for ltr // Any rtl stylesheets that don't have a .dev version for ltr
$no_suffix = array( 'farbtastic' ); $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( 'ie', "/wp-admin/css/ie$suffix.css", array(), '20111010' );
$styles->add_data( 'ie', 'conditional', 'lte IE 7' ); $styles->add_data( 'ie', 'conditional', 'lte IE 7' );
// all colors stylesheets need to have the same query strings (cache manifest compat) // 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. // 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 ); $styles->add( 'colors', true, array('wp-admin'), $colors_version );