<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[21574] trunk/wp-admin: Improve the layout and accessibility of the admin menu: simplify the HTML structure, move the submenus off the viewport (still visible for screen readers) instead of hiding them with display: none, make it possible to unfold the menu on small/narrow screens, see #21349</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg > ul, #logmsg > ol { margin-left: 0; margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://core.trac.wordpress.org/changeset/21574">21574</a></dd>
<dt>Author</dt> <dd>azaozz</dd>
<dt>Date</dt> <dd>2012-08-21 22:46:30 +0000 (Tue, 21 Aug 2012)</dd>
</dl>
<h3>Log Message</h3>
<pre>Improve the layout and accessibility of the admin menu: simplify the HTML structure, move the submenus off the viewport (still visible for screen readers) instead of hiding them with display: none, make it possible to unfold the menu on small/narrow screens, see <a href="http://core.trac.wordpress.org/ticket/21349">#21349</a></pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkwpadminadminheaderphp">trunk/wp-admin/admin-header.php</a></li>
<li><a href="#trunkwpadmincsscolorsclassicdevcss">trunk/wp-admin/css/colors-classic.dev.css</a></li>
<li><a href="#trunkwpadmincsscolorsfreshdevcss">trunk/wp-admin/css/colors-fresh.dev.css</a></li>
<li><a href="#trunkwpadmincssiertldevcss">trunk/wp-admin/css/ie-rtl.dev.css</a></li>
<li><a href="#trunkwpadmincssiedevcss">trunk/wp-admin/css/ie.dev.css</a></li>
<li><a href="#trunkwpadmincsswpadminrtldevcss">trunk/wp-admin/css/wp-admin-rtl.dev.css</a></li>
<li><a href="#trunkwpadmincsswpadmindevcss">trunk/wp-admin/css/wp-admin.dev.css</a></li>
<li><a href="#trunkwpadminjscommondevjs">trunk/wp-admin/js/common.dev.js</a></li>
<li><a href="#trunkwpadminmenuheaderphp">trunk/wp-admin/menu-header.php</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkwpadminadminheaderphp"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/admin-header.php (21573 => 21574)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/admin-header.php 2012-08-21 17:31:33 UTC (rev 21573)
+++ trunk/wp-admin/admin-header.php 2012-08-21 22:46:30 UTC (rev 21574)
</span><span class="lines">@@ -76,6 +76,9 @@
</span><span class="cx"> if ( get_user_setting('mfold') == 'f' )
</span><span class="cx"> $admin_body_class .= ' folded';
</span><span class="cx">
</span><ins>+if ( !get_user_setting('unfold') )
+ $admin_body_class .= ' auto-fold';
+
</ins><span class="cx"> if ( is_admin_bar_showing() )
</span><span class="cx"> $admin_body_class .= ' admin-bar';
</span><span class="cx">
</span></span></pre></div>
<a id="trunkwpadmincsscolorsclassicdevcss"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/css/colors-classic.dev.css (21573 => 21574)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/css/colors-classic.dev.css 2012-08-21 17:31:33 UTC (rev 21573)
+++ trunk/wp-admin/css/colors-classic.dev.css 2012-08-21 22:46:30 UTC (rev 21574)
</span><span class="lines">@@ -490,7 +490,7 @@
</span><span class="cx">
</span><span class="cx"> #adminmenu a:hover,
</span><span class="cx"> #adminmenu li.menu-top > a:focus,
</span><del>-#adminmenu ul.wp-submenu a:hover,
</del><ins>+#adminmenu .wp-submenu a:hover,
</ins><span class="cx"> #the-comment-list .comment a:hover,
</span><span class="cx"> #rightnow a:hover,
</span><span class="cx"> #media-upload a.del-link:hover,
</span><span class="lines">@@ -1280,7 +1280,6 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #adminmenu a.menu-top,
</span><del>-.folded #adminmenu li.menu-top,
</del><span class="cx"> #adminmenu .wp-submenu .wp-submenu-head {
</span><span class="cx"> border-top-color: #ffffff;
</span><span class="cx"> border-bottom-color: #cae6ff;
</span><span class="lines">@@ -1290,10 +1289,12 @@
</span><span class="cx"> border-color: #d1e5ee;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-#adminmenu li.menu-top:hover > a,
-#adminmenu li.menu-top.focused > a,
-#adminmenu li.menu-top > a:focus {
</del><ins>+#adminmenu a.menu-top:hover,
+#adminmenu li.opensub > a.menu-top,
+#adminmenu li.opensub > a.menu-top,
+#adminmenu li > a.menu-top:focus {
</ins><span class="cx"> background-color: #e0f1ff;
</span><ins>+ color: #d54e21;
</ins><span class="cx"> text-shadow: 0 1px 0 rgba( 255, 255, 255, 0.4 );
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -1318,7 +1319,6 @@
</span><span class="cx"> background-image: -moz-linear-gradient(bottom right, #5589aa, #619bbb);
</span><span class="cx"> background-image: -o-linear-gradient(bottom right, #5589aa, #619bbb);
</span><span class="cx"> background-image: linear-gradient(to top left, #5589aa, #619bbb);
</span><del>-
</del><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #adminmenu li.wp-not-current-submenu .wp-menu-arrow {
</span><span class="lines">@@ -1363,33 +1363,24 @@
</span><span class="cx"> color: #333;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-#adminmenu .wp-submenu ul {
</del><ins>+#adminmenu .wp-submenu,
+.folded #adminmenu a.wp-has-current-submenu:focus + .wp-submenu,
+.folded #adminmenu .wp-has-current-submenu .wp-submenu {
</ins><span class="cx"> background-color: #fff;
</span><del>-}
-
-#adminmenu .wp-submenu-wrap,
-#adminmenu .wp-submenu ul {
</del><span class="cx"> border-color: #d0dfe9;
</span><ins>+ -webkit-box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.4);
+ box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.4);
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-#adminmenu .wp-submenu-wrap,
-.folded #adminmenu .wp-has-current-submenu .wp-submenu-wrap {
- -webkit-box-shadow: 2px 2px 5px rgba( 0, 0, 0, 0.4 );
- box-shadow: 2px 2px 5px rgba( 0, 0, 0, 0.4 );
-}
-
</del><span class="cx"> #adminmenu .wp-submenu .wp-submenu-head {
</span><del>- border-right-color: #e8eff4;
- background-color: #EFF8FF;
</del><ins>+ border-right-color: #dfdfdf;
+ background-color: #e4e4e4;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-#adminmenu div.wp-submenu {
- background-color: transparent;
-}
-
</del><span class="cx"> /* collapse menu button */
</span><span class="cx"> #collapse-menu {
</span><span class="cx"> color: #A0C3D5;
</span><ins>+ border-top-color: #f9f9f9;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #collapse-menu:hover {
</span><span class="lines">@@ -1398,7 +1389,7 @@
</span><span class="cx">
</span><span class="cx"> #collapse-button {
</span><span class="cx"> border-color: #d0dfe9;
</span><del>- background: #eff8ff; /* Fallback */
</del><ins>+ background: #eff8ff;
</ins><span class="cx"> background-image: -webkit-gradient(linear, left bottom, left top, from(#eff8ff), to(#fff));
</span><span class="cx"> background-image: -webkit-linear-gradient(bottom, #eff8ff, #fff);
</span><span class="cx"> background-image: -moz-linear-gradient(bottom, #eff8ff, #fff);
</span><span class="lines">@@ -1421,37 +1412,31 @@
</span><span class="cx">
</span><span class="cx"> /* Auto-folding of the admin menu */
</span><span class="cx"> @media only screen and (max-width: 900px) {
</span><del>- #adminmenu li.menu-top {
- border-top-color: #ffffff;
- border-bottom-color: #cae6ff;
</del><ins>+ .auto-fold #adminmenu li.wp-has-current-submenu,
+ .auto-fold #adminmenu li.current.menu-top {
+ background-color: #5589AA;
+ background-image: -webkit-gradient(linear, left bottom, left top, from(#5589AA), to(#619bbb));
+ background-image: -webkit-linear-gradient(bottom, #5589AA, #619bbb);
+ background-image: -moz-linear-gradient(bottom, #5589AA, #619bbb);
+ background-image: -o-linear-gradient(bottom, #5589AA, #619bbb);
+ background-image: linear-gradient(bottom, #5589AA, #619bbb);
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- #adminmenu li.wp-has-current-submenu,
- #adminmenu li.current.menu-top {
- background: #5589aa;
- background-image: -webkit-gradient(linear, left bottom, left top, from(#5589aa), to(#619bbb));
- background-image: -webkit-linear-gradient(bottom, #5589aa, #619bbb);
- background-image: -moz-linear-gradient(bottom, #5589aa, #619bbb);
- background-image: -o-linear-gradient(bottom, #5589aa, #619bbb);
- background-image: linear-gradient(to top, #5589aa, #619bbb);
- }
-
- #adminmenu li.menu-top li:hover a {
- background-image: none;
- }
-
- #adminmenu li.wp-has-current-submenu,
- #adminmenu li.current.menu-top {
</del><ins>+ .auto-fold #adminmenu li.wp-has-current-submenu,
+ .auto-fold #adminmenu li.current.menu-top {
</ins><span class="cx"> border-top-color: #5A8FAD;
</span><span class="cx"> border-bottom-color: #5589AA;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- #adminmenu .wp-has-current-submenu .wp-submenu-wrap {
- -webkit-box-shadow: 2px 2px 5px rgba( 0, 0, 0, 0.4 );
- box-shadow: 2px 2px 5px rgba( 0, 0, 0, 0.4 );
</del><ins>+ .auto-fold #adminmenu a.wp-has-current-submenu:focus + .wp-submenu,
+ .auto-fold #adminmenu .wp-has-current-submenu .wp-submenu {
+ background-color: #fff;
+ border-color: #D0DFE9;
+ -webkit-box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.4);
+ box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.4);
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- #collapse-button div {
</del><ins>+ .auto-fold #collapse-button div {
</ins><span class="cx"> background-position: 0 -108px;
</span><span class="cx"> }
</span><span class="cx"> }
</span><span class="lines">@@ -2421,12 +2406,17 @@
</span><span class="cx"> border-left-color: #d1e5ee;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.rtl #adminmenu .wp-submenu-wrap,
-.rtl.folded #adminmenu .wp-has-current-submenu .wp-submenu-wrap{
</del><ins>+.rtl #adminmenu .wp-submenu,
+.rtl.folded #adminmenu .wp-has-current-submenu .wp-submenu {
</ins><span class="cx"> -webkit-box-shadow: -2px 2px 5px rgba( 0, 0, 0, 0.4 );
</span><span class="cx"> box-shadow: -2px 2px 5px rgba( 0, 0, 0, 0.4 );
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+.rtl #adminmenu .wp-has-current-submenu .wp-submenu {
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+
</ins><span class="cx"> /* Collapse Menu Button */
</span><span class="cx"> .rtl #collapse-button div {
</span><span class="cx"> background-position: 0 -108px;
</span><span class="lines">@@ -2438,12 +2428,12 @@
</span><span class="cx">
</span><span class="cx"> /* Auto-folding of the admin menu for RTL */
</span><span class="cx"> @media only screen and (max-width: 900px) {
</span><del>- .rtl #adminmenu .wp-has-current-submenu .wp-submenu-wrap{
</del><ins>+ .rtl.auto-fold #adminmenu .wp-has-current-submenu .wp-submenu {
</ins><span class="cx"> -webkit-box-shadow: -2px 2px 5px rgba( 0, 0, 0, 0.4 );
</span><span class="cx"> box-shadow: -2px 2px 5px rgba( 0, 0, 0, 0.4 );
</span><span class="cx"> }
</span><span class="cx">
</span><del>- .rtl #collapse-button div {
</del><ins>+ .rtl.auto-fold #collapse-button div {
</ins><span class="cx"> background-position: 0 -72px;
</span><span class="cx"> }
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkwpadmincsscolorsfreshdevcss"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/css/colors-fresh.dev.css (21573 => 21574)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/css/colors-fresh.dev.css 2012-08-21 17:31:33 UTC (rev 21573)
+++ trunk/wp-admin/css/colors-fresh.dev.css 2012-08-21 22:46:30 UTC (rev 21574)
</span><span class="lines">@@ -481,7 +481,7 @@
</span><span class="cx">
</span><span class="cx"> #adminmenu a:hover,
</span><span class="cx"> #adminmenu li.menu-top > a:focus,
</span><del>-#adminmenu ul.wp-submenu a:hover,
</del><ins>+#adminmenu .wp-submenu a:hover,
</ins><span class="cx"> #the-comment-list .comment a:hover,
</span><span class="cx"> #rightnow a:hover,
</span><span class="cx"> #media-upload a.del-link:hover,
</span><span class="lines">@@ -1013,7 +1013,6 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #adminmenu a.menu-top,
</span><del>-.folded #adminmenu li.menu-top,
</del><span class="cx"> #adminmenu .wp-submenu .wp-submenu-head {
</span><span class="cx"> border-top-color: #f9f9f9;
</span><span class="cx"> border-bottom-color: #dfdfdf;
</span><span class="lines">@@ -1023,10 +1022,11 @@
</span><span class="cx"> border-color: #dfdfdf;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-#adminmenu li.menu-top:hover > a,
-#adminmenu li.menu-top.focused > a,
-#adminmenu li.menu-top > a:focus {
</del><ins>+#adminmenu li.menu-top:hover,
+#adminmenu li.opensub > a.menu-top,
+#adminmenu li > a.menu-top:focus {
</ins><span class="cx"> background-color: #e4e4e4;
</span><ins>+ color: #d54e21;
</ins><span class="cx"> text-shadow: 0 1px 0 rgba( 255, 255, 255, 0.4 );
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -1095,33 +1095,24 @@
</span><span class="cx"> color: #333;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-#adminmenu .wp-submenu ul {
</del><ins>+#adminmenu .wp-submenu,
+.folded #adminmenu a.wp-has-current-submenu:focus + .wp-submenu,
+.folded #adminmenu .wp-has-current-submenu .wp-submenu {
</ins><span class="cx"> background-color: #fff;
</span><del>-}
-
-#adminmenu .wp-submenu-wrap,
-#adminmenu .wp-submenu ul {
</del><span class="cx"> border-color: #dfdfdf;
</span><ins>+ -webkit-box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.4);
+ box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.4);
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-#adminmenu .wp-submenu-wrap,
-.folded #adminmenu .wp-has-current-submenu .wp-submenu-wrap {
- -webkit-box-shadow: 2px 2px 5px rgba( 0, 0, 0, 0.4 );
- box-shadow: 2px 2px 5px rgba( 0, 0, 0, 0.4 );
-}
-
</del><span class="cx"> #adminmenu .wp-submenu .wp-submenu-head {
</span><del>- border-right-color: #dfdfdf;
- background-color: #ececec;
</del><ins>+ background-color: #e4e4e4;
+ color: #333;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-#adminmenu div.wp-submenu {
- background-color: transparent;
-}
-
</del><span class="cx"> /* collapse menu button */
</span><span class="cx"> #collapse-menu {
</span><span class="cx"> color: #aaa;
</span><ins>+ border-top-color: #f9f9f9;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #collapse-menu:hover {
</span><span class="lines">@@ -1152,37 +1143,31 @@
</span><span class="cx">
</span><span class="cx"> /* Auto-folding of the admin menu */
</span><span class="cx"> @media only screen and (max-width: 900px) {
</span><del>- #adminmenu li.menu-top {
- border-top-color: #f9f9f9;
- border-bottom-color: #dfdfdf;
- }
-
- #adminmenu li.wp-has-current-submenu,
- #adminmenu li.current.menu-top {
- background: #777;
</del><ins>+ .auto-fold #adminmenu li.wp-has-current-submenu,
+ .auto-fold #adminmenu li.current.menu-top {
+ background-color: #777;
</ins><span class="cx"> background-image: -webkit-gradient(linear, left bottom, left top, from(#6d6d6d), to(#808080));
</span><span class="cx"> background-image: -webkit-linear-gradient(bottom, #6d6d6d, #808080);
</span><del>- background-image: -moz-linear-gradient(bottom, #6d6d6d, #808080);
- background-image: -o-linear-gradient(bottom, #6d6d6d, #808080);
- background-image: linear-gradient(to top, #6d6d6d, #808080);
</del><ins>+ background-image: -moz-linear-gradient(bottom, #6d6d6d, #808080);
+ background-image: -o-linear-gradient(bottom, #6d6d6d, #808080);
+ background-image: linear-gradient(bottom, #6d6d6d, #808080);
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- #adminmenu li.menu-top li:hover a {
- background-image: none;
- }
-
- #adminmenu li.wp-has-current-submenu,
- #adminmenu li.current.menu-top {
</del><ins>+ .auto-fold #adminmenu li.wp-has-current-submenu,
+ .auto-fold #adminmenu li.current.menu-top {
</ins><span class="cx"> border-top-color: #808080;
</span><span class="cx"> border-bottom-color: #6d6d6d;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- #adminmenu .wp-has-current-submenu .wp-submenu-wrap {
- -webkit-box-shadow: 2px 2px 5px rgba( 0, 0, 0, 0.4 );
- box-shadow: 2px 2px 5px rgba( 0, 0, 0, 0.4 );
</del><ins>+ .auto-fold #adminmenu a.wp-has-current-submenu:focus + .wp-submenu,
+ .auto-fold #adminmenu .wp-has-current-submenu .wp-submenu {
+ background-color: #fff;
+ border-color: #dfdfdf;
+ -webkit-box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.4);
+ box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.4);
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- #collapse-button div {
</del><ins>+ .auto-fold #collapse-button div {
</ins><span class="cx"> background-position: 0 -108px;
</span><span class="cx"> }
</span><span class="cx"> }
</span><span class="lines">@@ -2069,12 +2054,17 @@
</span><span class="cx"> border-left-color: #dfdfdf;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.rtl #adminmenu .wp-submenu-wrap,
-.rtl.folded #adminmenu .wp-has-current-submenu .wp-submenu-wrap{
</del><ins>+.rtl #adminmenu .wp-submenu,
+.rtl.folded #adminmenu .wp-has-current-submenu .wp-submenu {
</ins><span class="cx"> -webkit-box-shadow: -2px 2px 5px rgba( 0, 0, 0, 0.4 );
</span><span class="cx"> box-shadow: -2px 2px 5px rgba( 0, 0, 0, 0.4 );
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+.rtl #adminmenu .wp-has-current-submenu .wp-submenu {
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+
</ins><span class="cx"> /* Collapse Menu Button */
</span><span class="cx"> .rtl #collapse-button div {
</span><span class="cx"> background-position: 0 -108px;
</span><span class="lines">@@ -2086,12 +2076,13 @@
</span><span class="cx">
</span><span class="cx"> /* Auto-folding of the admin menu for RTL */
</span><span class="cx"> @media only screen and (max-width: 900px) {
</span><del>- .rtl #adminmenu .wp-has-current-submenu .wp-submenu-wrap{
</del><ins>+ .rtl.auto-fold #adminmenu a.wp-has-current-submenu:focus + .wp-submenu,
+ .rtl.auto-fold #adminmenu .wp-has-current-submenu .wp-submenu {
</ins><span class="cx"> -webkit-box-shadow: -2px 2px 5px rgba( 0, 0, 0, 0.4 );
</span><span class="cx"> box-shadow: -2px 2px 5px rgba( 0, 0, 0, 0.4 );
</span><span class="cx"> }
</span><span class="cx">
</span><del>- .rtl #collapse-button div {
</del><ins>+ .rtl.auto-fold #collapse-button div {
</ins><span class="cx"> background-position: 0 -72px;
</span><span class="cx"> }
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkwpadmincssiertldevcss"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/css/ie-rtl.dev.css (21573 => 21574)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/css/ie-rtl.dev.css 2012-08-21 17:31:33 UTC (rev 21573)
+++ trunk/wp-admin/css/ie-rtl.dev.css 2012-08-21 22:46:30 UTC (rev 21574)
</span><span class="lines">@@ -27,8 +27,8 @@
</span><span class="cx"> width: 99%;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-#adminmenu .wp-submenu .wp-submenu .wp-submenu-wrap,
-#adminmenu .wp-menu-open .wp-submenu .wp-submenu-wrap {
</del><ins>+#adminmenu .wp-submenu .wp-submenu .wp-submenu,
+#adminmenu .wp-menu-open .wp-submenu .wp-submenu {
</ins><span class="cx"> border: 1px solid #dfdfdf;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -41,10 +41,6 @@
</span><span class="cx"> padding: 6px 10px 6px 4px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-#adminmenu .wp-menu-arrow {
- display: none !important;
-}
-
</del><span class="cx"> #wpcontent #adminmenu .wp-submenu li.wp-submenu-head {
</span><span class="cx"> padding: 3px 10px 4px 4px;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkwpadmincssiedevcss"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/css/ie.dev.css (21573 => 21574)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/css/ie.dev.css 2012-08-21 17:31:33 UTC (rev 21573)
+++ trunk/wp-admin/css/ie.dev.css 2012-08-21 22:46:30 UTC (rev 21574)
</span><span class="lines">@@ -74,12 +74,12 @@
</span><span class="cx"> margin-bottom: -2px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-#adminmenu li.wp-not-current-submenu:hover .wp-menu-arrow {
- display: none;
</del><ins>+#adminmenu .wp-menu-arrow {
+ display: none !important;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-#wpcontent #adminmenu .wp-submenu li.wp-submenu-head {
- padding: 3px 4px 4px 10px;
</del><ins>+#adminmenu .wp-submenu li.wp-submenu-head {
+ padding: 6px 4px 7px 10px;
</ins><span class="cx"> zoom: 100%;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -87,10 +87,6 @@
</span><span class="cx"> height: 30px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.js.folded #adminmenu .wp-submenu {
- margin: -1px 0 0 0;
-}
-
</del><span class="cx"> .js.folded #adminmenu li.menu-top {
</span><span class="cx"> display: block;
</span><span class="cx"> zoom: 100%;
</span></span></pre></div>
<a id="trunkwpadmincsswpadminrtldevcss"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/css/wp-admin-rtl.dev.css (21573 => 21574)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/css/wp-admin-rtl.dev.css 2012-08-21 17:31:33 UTC (rev 21573)
+++ trunk/wp-admin/css/wp-admin-rtl.dev.css 2012-08-21 22:46:30 UTC (rev 21574)
</span><span class="lines">@@ -342,6 +342,16 @@
</span><span class="cx"> 7.0 - Main Navigation (Right Menu) (RTL: Left Menu)
</span><span class="cx"> ------------------------------------------------------------------------------*/
</span><span class="cx">
</span><ins>+.folded #wpcontent {
+ margin-left: 0;
+ margin-right: 52px;
+}
+
+.folded.wp-admin #footer {
+ margin-left: 15px;
+ margin-right: 52px;
+}
+
</ins><span class="cx"> #adminmenuback,
</span><span class="cx"> #adminmenuwrap {
</span><span class="cx"> border-width: 0 0 0 1px;
</span><span class="lines">@@ -357,30 +367,24 @@
</span><span class="cx"> right: 146px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.folded #adminmenu .wp-submenu,
-.folded #adminmenu .wp-has-current-submenu .wp-submenu {
- left: auto;
- right: 26px;
-}
</del><span class="cx">
</span><del>-#adminmenu .wp-submenu.sub-open,
-#adminmenu li.focused.wp-not-current-submenu .wp-submenu,
-.folded #adminmenu li.focused.wp-has-current-submenu .wp-submenu,
</del><ins>+.folded #adminmenu .wp-submenu.sub-open,
+.folded #adminmenu .opensub .wp-submenu,
</ins><span class="cx"> .folded #adminmenu .wp-has-current-submenu .wp-submenu.sub-open,
</span><del>-.no-js #adminmenu .wp-has-submenu:hover .wp-submenu,
-.no-js.folded #adminmenu .wp-has-current-submenu:hover .wp-submenu {
- padding: 0 0 8px 8px;
</del><ins>+.folded #adminmenu .wp-has-current-submenu.opensub .wp-submenu,
+.folded #adminmenu a.menu-top:focus + .wp-submenu,
+.folded #adminmenu .wp-has-current-submenu a.menu-top:focus + .wp-submenu,
+.no-js.folded #adminmenu .wp-has-submenu:hover .wp-submenu {
+ left: auto;
+ right: 32px;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-#adminmenu div.wp-menu-image {
</del><ins>+#adminmenu div.wp-menu-image,
+.folded #adminmenu div.wp-menu-image {
</ins><span class="cx"> float: right;
</span><ins>+ width: 30px;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-#adminmenu li li {
- margin-left: 0;
- margin-right: 8px
-}
-
</del><span class="cx"> #adminmenu .wp-submenu a,
</span><span class="cx"> #adminmenu li li a,
</span><span class="cx"> .folded #adminmenu .wp-not-current-submenu li a {
</span><span class="lines">@@ -393,16 +397,6 @@
</span><span class="cx"> padding-right: 18px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.folded #adminmenu li li {
- margin-left: inherit;
- margin-right: 0
-}
-
-.folded #adminmenu li li a {
- padding-left: inherit;
- padding-right: 0
-}
-
</del><span class="cx"> .wp-menu-arrow {
</span><span class="cx"> right: 0;
</span><span class="cx">
</span><span class="lines">@@ -444,17 +438,20 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #adminmenu .wp-menu-image img {
</span><del>- float: right;
- padding: 5px 2px 0 0;
</del><ins>+ padding: 7px 7px 0 0;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #adminmenu .wp-submenu .wp-submenu-head {
</span><span class="cx"> padding: 6px 10px 5px 4px;
</span><ins>+ -webkit-border-top-right-radius: 0;
+ -webkit-border-top-left-radius: 3px;
+ border-top-right-radius: 0;
+ border-top-left-radius: 3px;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-#adminmenu li .wp-submenu-wrap {
- border-width: 1px 0 1px 1px;
- border-style: solid none solid solid;
</del><ins>+.folded #adminmenu li.wp-has-current-submenu .wp-submenu {
+ border-width: 1px;
+ border-style: solid;
</ins><span class="cx"> -webkit-border-bottom-right-radius: 0;
</span><span class="cx"> -webkit-border-bottom-left-radius: 3px;
</span><span class="cx"> -webkit-border-top-right-radius: 0;
</span><span class="lines">@@ -465,20 +462,6 @@
</span><span class="cx"> border-top-left-radius: 3px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.folded #adminmenu .wp-submenu ul {
- border-width: 0 1px 0 0;
-}
-
-.folded #adminmenu .wp-submenu a {
- padding-left: 0;
- padding-right: 10px;
-}
-
-.folded #adminmenu a.wp-has-submenu {
- margin-left: 0;
- margin-right: 40px;
-}
-
</del><span class="cx"> #adminmenu .awaiting-mod,
</span><span class="cx"> #adminmenu span.update-plugins,
</span><span class="cx"> #sidemenu li a span.update-plugins {
</span><span class="lines">@@ -493,29 +476,33 @@
</span><span class="cx">
</span><span class="cx"> /* Auto-folding of the admin menu */
</span><span class="cx"> @media only screen and (max-width: 900px) {
</span><del>- #adminmenu li .wp-submenu,
- #adminmenu .wp-has-current-submenu .wp-submenu {
- left: auto;
- right: 26px;
</del><ins>+ .auto-fold #wpcontent {
+ margin-left: 0;
+ margin-right: 52px;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- #adminmenu li.focused.wp-has-current-submenu .wp-submenu,
- #adminmenu .wp-has-current-submenu .wp-submenu.sub-open {
- padding: 0 0 8px 8px;
</del><ins>+ .auto-fold.wp-admin #footer {
+ margin-left: 15px;
+ margin-right: 52px;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- .folded #adminmenu .wp-not-current-submenu li a {
</del><ins>+ .auto-fold #adminmenu .wp-submenu.sub-open,
+ .auto-fold #adminmenu .opensub .wp-submenu,
+ .auto-fold #adminmenu .wp-has-current-submenu .wp-submenu.sub-open,
+ .auto-fold #adminmenu .wp-has-current-submenu.opensub .wp-submenu,
+ .auto-fold #adminmenu a.menu-top:focus + .wp-submenu,
+ .auto-fold #adminmenu .wp-has-current-submenu a.menu-top:focus + .wp-submenu,
+ .no-js.auto-fold #adminmenu .wp-has-submenu:hover .wp-submenu {
+ left: auto;
+ right: 32px;
+ }
+
+ .auto-fold #adminmenu .wp-not-current-submenu li a {
</ins><span class="cx"> padding-left: 0;
</span><span class="cx"> padding-right: 12px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- #adminmenu li li,
- #adminmenu li li a {
- padding-left: inherit;
- padding-right: 0
- }
-
- .wp-menu-arrow {
</del><ins>+ .auto-fold .wp-menu-arrow {
</ins><span class="cx"> -moz-transform: translate( -27px );
</span><span class="cx"> -webkit-transform: translate( -27px );
</span><span class="cx"> -o-transform: translate( -27px );
</span><span class="lines">@@ -523,29 +510,18 @@
</span><span class="cx"> transform: translate( -27px );
</span><span class="cx"> }
</span><span class="cx">
</span><del>- #adminmenu .wp-submenu ul {
- border-width: 0 1px 0 0;
</del><ins>+ .auto-fold #adminmenu li.wp-has-current-submenu .wp-submenu {
+ border-width: 1px;
+ border-style: solid;
+ -webkit-border-bottom-right-radius: 0;
+ -webkit-border-bottom-left-radius: 3px;
+ -webkit-border-top-right-radius: 0;
+ -webkit-border-top-left-radius: 3px;
+ border-bottom-right-radius: 0;
+ border-bottom-left-radius: 3px;
+ border-top-right-radius: 0;
+ border-top-left-radius: 3px;
</ins><span class="cx"> }
</span><del>-
- #adminmenu .wp-submenu a {
- padding-left: 0;
- padding-right: 10px;
- }
-
- #adminmenu a.wp-has-submenu {
- margin-left: 0;
- margin-right: 40px;
- }
-
- body #wpcontent {
- margin-left: 0;
- margin-right: 52px;
- }
-
- body .wp-admin #footer {
- margin-left: 15px;
- margin-right: 52px;
- }
</del><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> /* List table styles */
</span><span class="lines">@@ -1641,16 +1617,6 @@
</span><span class="cx"> margin-right: 165px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.folded #wpcontent {
- margin-left: 0;
- margin-right: 52px;
-}
-
-.folded.wp-admin #footer {
- margin-left: 15px;
- margin-right: 52px;
-}
-
</del><span class="cx"> #wpbody-content {
</span><span class="cx"> float: right;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkwpadmincsswpadmindevcss"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/css/wp-admin.dev.css (21573 => 21574)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/css/wp-admin.dev.css 2012-08-21 17:31:33 UTC (rev 21573)
+++ trunk/wp-admin/css/wp-admin.dev.css 2012-08-21 22:46:30 UTC (rev 21574)
</span><span class="lines">@@ -76,9 +76,7 @@
</span><span class="cx"> #adminmenuback,
</span><span class="cx"> #adminmenuwrap,
</span><span class="cx"> #adminmenu,
</span><del>-#adminmenu .wp-submenu,
-#adminmenu .wp-submenu-wrap,
-.folded #adminmenu .wp-has-current-submenu .wp-submenu {
</del><ins>+#adminmenu .wp-submenu {
</ins><span class="cx"> width: 145px;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -1330,163 +1328,157 @@
</span><span class="cx"> user-select: none;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-#adminmenu .wp-submenu {
- list-style: none;
- padding: 0;
</del><ins>+#adminmenu li {
</ins><span class="cx"> margin: 0;
</span><del>- overflow: hidden;
</del><ins>+ padding: 0;
+ cursor: pointer;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-#adminmenu li .wp-submenu,
-.folded #adminmenu .wp-has-current-submenu .wp-submenu {
- display: none;
</del><ins>+#adminmenu a {
+ display: block;
+ line-height: 18px;
+ padding: 2px 5px;
+}
+
+#adminmenu li.menu-top {
+ min-height: 28px;
+ position: relative;
+}
+
+#adminmenu .wp-submenu {
+ list-style: none;
+ padding: 4px 0;
+ margin: 0;
</ins><span class="cx"> position: absolute;
</span><del>- top: -1px;
</del><ins>+ top: -1000em;
</ins><span class="cx"> left: 146px;
</span><span class="cx"> z-index: 999;
</span><del>- overflow: hidden;
</del><ins>+ overflow: visible;
+ border-width: 1px;
+ border-style: solid;
+ -webkit-border-bottom-right-radius: 3px;
+ -webkit-border-top-right-radius: 3px;
+ border-bottom-right-radius: 3px;
+ border-top-right-radius: 3px;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-.js #adminmenu .wp-submenu.sub-open,
-.folded #adminmenu .wp-has-current-submenu .wp-submenu.sub-open,
-.no-js #adminmenu .wp-has-submenu:hover .wp-submenu,
-#adminmenu .wp-has-current-submenu .wp-submenu,
-#adminmenu li.focused .wp-submenu {
- display: block;
</del><ins>+.js #adminmenu .sub-open,
+.js #adminmenu .opensub .wp-submenu,
+#adminmenu a.menu-top:focus + .wp-submenu,
+.no-js li.wp-has-submenu:hover .wp-submenu {
+ top: -1px;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-#adminmenu .wp-has-current-submenu .wp-submenu {
</del><ins>+#adminmenu .wp-has-current-submenu .wp-submenu,
+.no-js li.wp-has-current-submenu:hover .wp-submenu,
+#adminmenu a.wp-has-current-submenu:focus + .wp-submenu,
+#adminmenu .wp-has-current-submenu .wp-submenu.sub-open,
+#adminmenu .wp-has-current-submenu.opensub .wp-submenu {
</ins><span class="cx"> position: relative;
</span><span class="cx"> z-index: 2;
</span><span class="cx"> top: auto;
</span><span class="cx"> left: auto;
</span><span class="cx"> right: auto;
</span><span class="cx"> bottom: auto;
</span><del>- padding: 0;
-}
</del><ins>+ border: 0 none;
</ins><span class="cx">
</span><del>-#adminmenu .wp-has-current-submenu .wp-submenu-wrap {
</del><span class="cx"> -webkit-box-shadow: none;
</span><span class="cx"> box-shadow: none;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.folded #adminmenu .wp-submenu,
-.folded #adminmenu .wp-has-current-submenu .wp-submenu {
- top: -5px;
- left: 26px;
-}
-
-#adminmenu .wp-submenu.sub-open,
-#adminmenu li.focused.wp-not-current-submenu .wp-submenu,
-.folded #adminmenu li.focused.wp-has-current-submenu .wp-submenu,
</del><ins>+.folded #adminmenu .wp-submenu.sub-open,
+.folded #adminmenu .opensub .wp-submenu,
</ins><span class="cx"> .folded #adminmenu .wp-has-current-submenu .wp-submenu.sub-open,
</span><del>-.no-js #adminmenu .wp-has-submenu:hover .wp-submenu,
-.no-js.folded #adminmenu .wp-has-current-submenu:hover .wp-submenu {
- padding: 0 8px 8px 0;
</del><ins>+.folded #adminmenu .wp-has-current-submenu.opensub .wp-submenu,
+.folded #adminmenu a.menu-top:focus + .wp-submenu,
+.folded #adminmenu .wp-has-current-submenu a.menu-top:focus + .wp-submenu,
+.no-js.folded #adminmenu .wp-has-submenu:hover .wp-submenu {
+ top: -1px;
+ left: 32px;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-.no-js #adminmenu .wp-has-current-submenu:hover .wp-submenu,
-#adminmenu .wp-has-current-submenu .wp-submenu {
- padding: 0;
</del><ins>+.folded #adminmenu a.wp-has-current-submenu:focus + .wp-submenu,
+.folded #adminmenu .wp-has-current-submenu .wp-submenu {
+ border-width: 1px;
+ border-style: solid;
+ position: absolute;
+ top: -1000em;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #adminmenu .wp-submenu a {
</span><span class="cx"> font-size: 12px;
</span><span class="cx"> line-height: 18px;
</span><ins>+ margin: 0;
+ padding-left: 12px;
</ins><span class="cx"> }
</span><span class="cx">
</span><ins>+#adminmenu .wp-not-current-submenu li > a {
+ padding-left: 16px;
+}
+
+#adminmenu .wp-has-current-submenu ul > li > a,
+.folded #adminmenu li.menu-top .wp-submenu > li > a {
+ padding-left: 12px;
+}
+
</ins><span class="cx"> #adminmenu a.menu-top,
</span><span class="cx"> #adminmenu .wp-submenu-head {
</span><span class="cx"> font-size: 13px;
</span><ins>+ font-weight: bold;
</ins><span class="cx"> line-height: 18px;
</span><ins>+ padding: 0;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-#adminmenu div.wp-submenu-head {
</del><ins>+#adminmenu .wp-submenu-head,
+.folded #adminmenu .wp-menu-name {
</ins><span class="cx"> display: none;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.folded #adminmenu div.wp-submenu-head {
</del><ins>+.folded #adminmenu .wp-submenu-head {
</ins><span class="cx"> display: block;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.folded #adminmenu a.menu-top {
- display: none;
-}
-
-#adminmenu div.wp-menu-image {
- float: left;
- width: 28px;
- height: 28px;
-}
-
-.folded #adminmenu div.wp-menu-image {
- width: 30px;
-}
-
-#adminmenu li {
- margin: 0;
</del><ins>+#adminmenu .wp-submenu li {
</ins><span class="cx"> padding: 0;
</span><del>- cursor: pointer;
</del><ins>+ margin: 0;
+ overflow: hidden;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-#adminmenu a {
- display: block;
- line-height: 18px;
- padding: 2px 5px;
-}
-
-#adminmenu li.menu-top {
- min-height: 29px;
- position: relative;
-}
-
</del><span class="cx"> #adminmenu a.menu-top {
</span><del>- font-weight: bold;
- line-height: 18px;
- min-width: 10em;
- padding: 5px 5px;
- border-width: 1px 0 1px;
- border-style: solid;
</del><ins>+ border-width: 1px 0;
+ border-style: solid none;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-#adminmenu li.wp-menu-open {
- border-width: 0 0 1px;
- border-style: solid;
</del><ins>+#adminmenu .wp-menu-image img {
+ padding: 7px 0 0 7px;
+ opacity: 0.6;
+ filter: alpha(opacity=60);
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-#adminmenu .wp-submenu ul {
- padding: 4px 0;
</del><ins>+#adminmenu div.wp-menu-name {
+ padding: 5px;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-#adminmenu .wp-submenu a {
- margin: 0;
</del><ins>+#adminmenu div.wp-menu-image {
+ float: left;
+ width: 28px;
+ height: 28px;
+ margin-top: -1px;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-#adminmenu li li {
- margin-left: 8px;
</del><ins>+.folded #adminmenu div.wp-menu-image {
+ width: 32px;
+ margin-top: 0;
+ position: absolute;
+ z-index: 25;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-#adminmenu .wp-submenu a,
-#adminmenu li li a,
-.folded #adminmenu .wp-not-current-submenu li a {
- padding-left: 12px;
</del><ins>+.folded #adminmenu a.menu-top {
+ height: 29px;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-#adminmenu .wp-not-current-submenu li a {
- padding-left: 18px;
-}
-
-.folded #adminmenu li li {
- margin-left: 0;
-}
-
-.folded #adminmenu li li a {
- padding-left: 0;
-}
-
</del><span class="cx"> .wp-menu-arrow {
</span><span class="cx"> display: none;
</span><del>- cursor: auto;
</del><span class="cx"> z-index: 25;
</span><span class="cx"> position: absolute;
</span><span class="cx"> right: 100%;
</span><span class="lines">@@ -1501,27 +1493,6 @@
</span><span class="cx"> transform: translate( 146px );
</span><span class="cx"> }
</span><span class="cx">
</span><del>-#adminmenu li.wp-has-current-submenu .wp-menu-arrow,
-#adminmenu li.menu-top:hover .wp-menu-arrow,
-#adminmenu li.current .wp-menu-arrow,
-#adminmenu li.focused .wp-menu-arrow,
-#adminmenu li.menu-top.wp-has-submenu:hover .wp-menu-arrow div {
- display: block;
-}
-
-#adminmenu li.wp-not-current-submenu:hover .wp-menu-arrow div {
- display: none;
-}
-
-#adminmenu li.menu-top:hover .wp-menu-arrow,
-#adminmenu li.menu-top.focused .wp-menu-arrow {
- z-index: 1001;
-}
-
-.ie8 #adminmenu li.menu-top:hover .wp-menu-arrow {
- display: none;
-}
-
</del><span class="cx"> #adminmenu .wp-menu-arrow div {
</span><span class="cx"> position: absolute;
</span><span class="cx"> top: 7px;
</span><span class="lines">@@ -1545,6 +1516,7 @@
</span><span class="cx"> height: 28px;
</span><span class="cx"> border-width: 1px 0;
</span><span class="cx"> border-style: solid;
</span><ins>+ top: 0;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .folded .wp-menu-arrow {
</span><span class="lines">@@ -1555,6 +1527,29 @@
</span><span class="cx"> transform: translate( 33px );
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+#adminmenu li.wp-has-current-submenu .wp-menu-arrow,
+#adminmenu a.menu-top:focus .wp-menu-arrow,
+.no-js #adminmenu li.wp-has-submenu:hover .wp-menu-arrow,
+#adminmenu li.current .wp-menu-arrow,
+#adminmenu li.wp-has-submenu.opensub .wp-menu-arrow {
+ display: block;
+}
+
+#adminmenu li.current .wp-menu-arrow,
+#adminmenu li.wp-menu-open .wp-menu-arrow {
+ top: 0;
+}
+
+.no-js #adminmenu li.wp-has-submenu:hover .wp-menu-arrow,
+#adminmenu .opensub a.wp-has-submenu .wp-menu-arrow,
+#adminmenu a.wp-has-submenu:focus .wp-menu-arrow {
+ z-index: 1001;
+}
+
+.ie8 #adminmenu li.menu-top:hover .wp-menu-arrow {
+ display: none;
+}
+
</ins><span class="cx"> #adminmenu .wp-not-current-submenu .wp-menu-arrow div {
</span><span class="cx"> width: 15px;
</span><span class="cx"> top: 6px;
</span><span class="lines">@@ -1563,33 +1558,17 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .wp-menu-arrow,
</span><del>-.folded #adminmenu li.menu-top:hover .wp-menu-arrow {
</del><ins>+.folded #adminmenu li.wp-not-current-submenu .wp-menu-arrow,
+.no-js #adminmenu li.wp-not-current-submenu:hover .wp-menu-arrow {
</ins><span class="cx"> display: none;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.folded #adminmenu li.current:hover .wp-menu-arrow,
-.folded #adminmenu li.menu-top.wp-menu-open:hover .wp-menu-arrow {
</del><ins>+.folded #adminmenu li.current .wp-menu-arrow,
+.folded #adminmenu li.wp-menu-open .wp-menu-arrow {
</ins><span class="cx"> display: block;
</span><del>- z-index: 125;
</del><ins>+ top: 1px;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-#adminmenu .wp-submenu li {
- padding: 0;
- margin: 0;
-}
-
-.folded #adminmenu li.menu-top {
- border-width: 1px 0;
- border-style: solid none;
-}
-
-#adminmenu .wp-menu-image img {
- float: left;
- padding: 5px 0 0 2px;
- opacity: 0.6;
- filter: alpha(opacity=60);
-}
-
</del><span class="cx"> #adminmenu li.menu-top:hover .wp-menu-image img,
</span><span class="cx"> #adminmenu li.wp-has-current-submenu .wp-menu-image img {
</span><span class="cx"> opacity: 1;
</span><span class="lines">@@ -1614,30 +1593,24 @@
</span><span class="cx">
</span><span class="cx"> #adminmenu .wp-submenu .wp-submenu-head {
</span><span class="cx"> padding: 6px 4px 5px 10px;
</span><del>- cursor: default;
</del><ins>+ margin: -4px -1px 4px;
</ins><span class="cx"> border-width: 1px 0;
</span><span class="cx"> border-style: solid;
</span><del>-}
-
-#adminmenu li .wp-submenu-wrap {
- border-width: 1px 1px 1px 0;
- border-style: solid solid solid none;
- position: relative;
- -webkit-border-bottom-right-radius: 3px;
</del><span class="cx"> -webkit-border-top-right-radius: 3px;
</span><del>- border-bottom-right-radius: 3px;
</del><span class="cx"> border-top-right-radius: 3px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-#adminmenu li.wp-menu-open .wp-submenu-wrap {
- border: 0 none;
</del><ins>+#adminmenu li.wp-menu-open {
+ border-width: 0 0 1px;
+ border-style: solid;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-.folded #adminmenu .wp-submenu .wp-submenu-wrap {
- margin-top: 3px;
</del><ins>+#adminmenu li.current,
+.folded #adminmenu li.wp-menu-open {
+ border: 0 none;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-.folded #adminmenu .wp-has-current-submenu {
</del><ins>+.folded #adminmenu li.wp-has-current-submenu {
</ins><span class="cx"> margin-bottom: 1px;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -1645,27 +1618,6 @@
</span><span class="cx"> margin-bottom: 0;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.folded #adminmenu .wp-has-current-submenu .wp-submenu-wrap {
- margin-top: 4px;
-}
-
-.folded #adminmenu .wp-submenu ul {
- border-width: 0 0 0 1px;
- border-style: solid;
-}
-
-.folded #adminmenu .wp-submenu a {
- padding-left: 10px;
-}
-
-.folded #adminmenu a.wp-has-submenu {
- margin-left: 40px;
-}
-
-#adminmenu .wp-menu-image a {
- height: 24px;
-}
-
</del><span class="cx"> #adminmenu .awaiting-mod,
</span><span class="cx"> #adminmenu span.update-plugins,
</span><span class="cx"> #sidemenu li a span.update-plugins {
</span><span class="lines">@@ -1696,6 +1648,8 @@
</span><span class="cx"> #collapse-menu {
</span><span class="cx"> font-size: 12px;
</span><span class="cx"> line-height: 34px;
</span><ins>+ border-width: 1px 0 0;
+ border-style: solid;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .folded #collapse-menu span {
</span><span class="lines">@@ -1719,66 +1673,60 @@
</span><span class="cx">
</span><span class="cx"> /* Auto-folding of the admin menu */
</span><span class="cx"> @media only screen and (max-width: 900px) {
</span><del>- #wpcontent,
- #footer {
</del><ins>+ .auto-fold #wpcontent,
+ .auto-fold #footer {
</ins><span class="cx"> margin-left: 52px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- #adminmenuback,
- #adminmenuwrap,
- #adminmenu,
- #adminmenu li.menu-top {
</del><ins>+ .auto-fold #adminmenuback,
+ .auto-fold #adminmenuwrap,
+ .auto-fold #adminmenu,
+ .auto-fold #adminmenu li.menu-top {
</ins><span class="cx"> width: 32px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- #adminmenu .wp-has-current-submenu .wp-submenu {
- display: none;
- position: absolute;
- width: 145px;
- z-index: 999;
- overflow: hidden;
</del><ins>+ .auto-fold #adminmenu .wp-submenu.sub-open,
+ .auto-fold #adminmenu .opensub .wp-submenu,
+ .auto-fold #adminmenu .wp-has-current-submenu .wp-submenu.sub-open,
+ .auto-fold #adminmenu .wp-has-current-submenu.opensub .wp-submenu,
+ .auto-fold #adminmenu a.menu-top:focus + .wp-submenu,
+ .auto-fold #adminmenu .wp-has-current-submenu a.menu-top:focus + .wp-submenu {
+ top: -1px;
+ left: 32px;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- #adminmenu .wp-has-current-submenu .wp-submenu.sub-open {
- display: block;
</del><ins>+ .auto-fold #adminmenu a.wp-has-current-submenu:focus + .wp-submenu,
+ .auto-fold #adminmenu .wp-has-current-submenu .wp-submenu {
+ border-width: 1px;
+ border-style: solid;
+ position: absolute;
+ top: -1000em;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- #adminmenu li .wp-submenu,
- #adminmenu .wp-has-current-submenu .wp-submenu {
- top: -5px;
- left: 26px;
</del><ins>+ .auto-fold #adminmenu li.menu-top .wp-submenu > li > a {
+ padding-left: 12px;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- #adminmenu li.focused.wp-has-current-submenu .wp-submenu,
- #adminmenu .wp-has-current-submenu .wp-submenu.sub-open {
- padding: 0 8px 8px 0;
</del><ins>+ .auto-fold #adminmenu .wp-menu-name {
+ display: none;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- #adminmenu div.wp-submenu-head {
</del><ins>+ .auto-fold #adminmenu .wp-submenu-head {
</ins><span class="cx"> display: block;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- #adminmenu a.menu-top {
- display: none;
</del><ins>+ .auto-fold #adminmenu div.wp-menu-image {
+ width: 32px;
+ margin-top: 0;
+ position: absolute;
+ z-index: 25;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- #adminmenu div.wp-menu-image {
- width: 30px;
</del><ins>+ .auto-fold #adminmenu a.menu-top {
+ height: 29px;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- #adminmenu .wp-not-current-submenu li a {
- padding-left: 12px;
- }
-
- #adminmenu li li {
- margin-left: 0;
- }
-
- #adminmenu li li a {
- padding-left: 0;
- }
-
- .wp-menu-arrow {
</del><ins>+ .auto-fold .wp-menu-arrow {
</ins><span class="cx"> -moz-transform: translate( 33px );
</span><span class="cx"> -webkit-transform: translate( 33px );
</span><span class="cx"> -o-transform: translate( 33px );
</span><span class="lines">@@ -1786,51 +1734,29 @@
</span><span class="cx"> transform: translate( 33px );
</span><span class="cx"> }
</span><span class="cx">
</span><del>- #adminmenu li.menu-top:hover .wp-menu-arrow {
</del><ins>+ .auto-fold #adminmenu li.wp-not-current-submenu .wp-menu-arrow {
</ins><span class="cx"> display: none;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- #adminmenu li.current:hover .wp-menu-arrow,
- #adminmenu li.menu-top.wp-menu-open:hover .wp-menu-arrow {
</del><ins>+ .auto-fold #adminmenu li.current .wp-menu-arrow,
+ .auto-fold #adminmenu li.wp-menu-open .wp-menu-arrow {
</ins><span class="cx"> display: block;
</span><del>- z-index: 125;
</del><ins>+ top: 1px;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- #adminmenu li.menu-top {
- border-width: 1px 0;
- border-style: solid none;
</del><ins>+ .auto-fold #adminmenu li.wp-menu-open {
+ border: 0 none;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- #adminmenu .wp-submenu .wp-submenu-wrap {
- margin-top: 3px;
- }
-
- #adminmenu .wp-has-current-submenu {
</del><ins>+ .auto-fold #adminmenu li.wp-has-current-submenu {
</ins><span class="cx"> margin-bottom: 1px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- #adminmenu .wp-has-current-submenu.menu-top-last {
</del><ins>+ .auto-fold #adminmenu .wp-has-current-submenu.menu-top-last {
</ins><span class="cx"> margin-bottom: 0;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- #adminmenu .wp-has-current-submenu .wp-submenu-wrap {
- margin-top: 4px;
- }
-
- #adminmenu .wp-submenu ul {
- border-width: 0 0 0 1px;
- border-style: solid;
- }
-
- #adminmenu .wp-submenu a {
- padding-left: 10px;
- }
-
- #adminmenu a.wp-has-submenu {
- margin-left: 40px;
- }
-
- #collapse-menu {
</del><ins>+ .auto-fold #collapse-menu span {
</ins><span class="cx"> display: none;
</span><span class="cx"> }
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkwpadminjscommondevjs"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/js/common.dev.js (21573 => 21574)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/js/common.dev.js 2012-08-21 17:31:33 UTC (rev 21573)
+++ trunk/wp-admin/js/common.dev.js 2012-08-21 22:46:30 UTC (rev 21574)
</span><span class="lines">@@ -161,36 +161,45 @@
</span><span class="cx">
</span><span class="cx"> $(document).ready( function() {
</span><span class="cx"> var lastClicked = false, checks, first, last, checked, menu = $('#adminmenu'),
</span><del>- pageInput = $('input.current-page'), currentPage = pageInput.val(), refresh;
</del><ins>+ pageInput = $('input.current-page'), currentPage = pageInput.val();
</ins><span class="cx">
</span><del>- // admin menu
- refresh = function(i, el){ // force the browser to refresh the tabbing index
- var node = $(el), tab = node.attr('tabindex');
- if ( tab )
- node.attr('tabindex', '0').attr('tabindex', tab);
- };
</del><ins>+ // when the menu is folded, make the fly-out submenu header clickable
+ menu.on('click.wp-submenu-head', '.wp-submenu-head', function(e){
+ $(e.target).parent().siblings('a').get(0).click();
+ });
</ins><span class="cx">
</span><del>- $('#collapse-menu', menu).click(function(){
</del><ins>+ $('#collapse-menu').on('click.collapse-menu', function(e){
</ins><span class="cx"> var body = $(document.body);
</span><span class="cx">
</span><span class="cx"> // reset any compensation for submenus near the bottom of the screen
</span><span class="cx"> $('#adminmenu div.wp-submenu').css('margin-top', '');
</span><span class="cx">
</span><del>- if ( body.hasClass('folded') ) {
- body.removeClass('folded');
- setUserSetting('mfold', 'o');
</del><ins>+ if ( $(window).width() < 900 ) {
+ if ( body.hasClass('auto-fold') ) {
+ body.removeClass('auto-fold');
+ setUserSetting('unfold', 1);
+ body.removeClass('folded');
+ deleteUserSetting('mfold');
+ } else {
+ body.addClass('auto-fold');
+ deleteUserSetting('unfold');
+ }
</ins><span class="cx"> } else {
</span><del>- body.addClass('folded');
- setUserSetting('mfold', 'f');
</del><ins>+ if ( body.hasClass('folded') ) {
+ body.removeClass('folded');
+ deleteUserSetting('mfold');
+ } else {
+ body.addClass('folded');
+ setUserSetting('mfold', 'f');
+ }
</ins><span class="cx"> }
</span><del>- return false;
</del><span class="cx"> });
</span><span class="cx">
</span><span class="cx"> $('li.wp-has-submenu', menu).hoverIntent({
</span><span class="cx"> over: function(e){
</span><span class="cx"> var b, h, o, f, m = $(this).find('.wp-submenu'), menutop, wintop, maxtop;
</span><span class="cx">
</span><del>- if ( m.is(':visible') )
</del><ins>+ if ( parseInt( m.css('top'), 10 ) > -5 )
</ins><span class="cx"> return;
</span><span class="cx">
</span><span class="cx"> menutop = $(this).offset().top;
</span><span class="lines">@@ -213,41 +222,21 @@
</span><span class="cx"> else
</span><span class="cx"> m.css('margin-top', '');
</span><span class="cx">
</span><del>- menu.find('.wp-submenu').removeClass('sub-open');
- m.addClass('sub-open');
</del><ins>+ menu.find('li.menu-top').removeClass('opensub');
+ $(this).addClass('opensub');
</ins><span class="cx"> },
</span><span class="cx"> out: function(){
</span><del>- $(this).find('.wp-submenu').removeClass('sub-open').css('margin-top', '');
</del><ins>+ $(this).removeClass('opensub').find('.wp-submenu').css('margin-top', '');
</ins><span class="cx"> },
</span><span class="cx"> timeout: 200,
</span><span class="cx"> sensitivity: 7,
</span><span class="cx"> interval: 90
</span><span class="cx"> });
</span><span class="cx">
</span><del>- // Tab to select, Enter to open sub, Esc to close sub and focus the top menu
- $('li.wp-has-submenu > a.wp-not-current-submenu', menu).bind('keydown.adminmenu', function(e){
- if ( e.which != 13 )
- return;
-
- var target = $(e.target);
-
- e.stopPropagation();
- e.preventDefault();
-
- menu.find('.wp-submenu').removeClass('sub-open');
- target.siblings('.wp-submenu').toggleClass('sub-open').find('a[role="menuitem"]').each(refresh);
- }).each(refresh);
-
- $('a[role="menuitem"]', menu).bind('keydown.adminmenu', function(e){
- if ( e.which != 27 )
- return;
-
- var target = $(e.target);
-
- e.stopPropagation();
- e.preventDefault();
-
- target.add( target.siblings() ).closest('.sub-open').removeClass('sub-open').siblings('a.wp-not-current-submenu').focus();
</del><ins>+ menu.on('focus.adminmenu', '.wp-submenu a', function(e){
+ $(e.target).closest('li.menu-top').addClass('opensub');
+ }).on('blur.adminmenu', '.wp-submenu a', function(e){
+ $(e.target).closest('li.menu-top').removeClass('opensub');
</ins><span class="cx"> });
</span><span class="cx">
</span><span class="cx"> // Move .updated and .error alert boxes. Don't move boxes designed to be inline.
</span></span></pre></div>
<a id="trunkwpadminmenuheaderphp"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/menu-header.php (21573 => 21574)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/menu-header.php 2012-08-21 17:31:33 UTC (rev 21573)
+++ trunk/wp-admin/menu-header.php 2012-08-21 22:46:30 UTC (rev 21574)
</span><span class="lines">@@ -87,9 +87,9 @@
</span><span class="cx"> $menu_file = substr( $menu_file, 0, $pos );
</span><span class="cx"> if ( ! empty( $menu_hook ) || ( ('index.php' != $submenu_items[0][2]) && file_exists( WP_PLUGIN_DIR . "/$menu_file" ) ) ) {
</span><span class="cx"> $admin_is_parent = true;
</span><del>- echo "<div class='wp-menu-image'><a href='admin.php?page={$submenu_items[0][2]}' tabindex='-1' aria-label='$aria_label'>$img</a></div>$arrow<a href='admin.php?page={$submenu_items[0][2]}'$class $aria_attributes>$title</a>";
</del><ins>+ echo "<a href='admin.php?page={$submenu_items[0][2]}'$class $aria_attributes>$arrow<div class='wp-menu-image'>$img</div><div class='wp-menu-name'>$title</div></a>";
</ins><span class="cx"> } else {
</span><del>- echo "\n\t<div class='wp-menu-image'><a href='{$submenu_items[0][2]}' tabindex='-1' aria-label='$aria_label'>$img</a></div>$arrow<a href='{$submenu_items[0][2]}'$class $aria_attributes>$title</a>";
</del><ins>+ echo "\n\t<a href='{$submenu_items[0][2]}'$class $aria_attributes>$arrow<div class='wp-menu-image'>$img</div><div class='wp-menu-name'>$title</div></a>";
</ins><span class="cx"> }
</span><span class="cx"> } elseif ( ! empty( $item[2] ) && current_user_can( $item[1] ) ) {
</span><span class="cx"> $menu_hook = get_plugin_page_hook( $item[2], 'admin.php' );
</span><span class="lines">@@ -98,15 +98,16 @@
</span><span class="cx"> $menu_file = substr( $menu_file, 0, $pos );
</span><span class="cx"> if ( ! empty( $menu_hook ) || ( ('index.php' != $item[2]) && file_exists( WP_PLUGIN_DIR . "/$menu_file" ) ) ) {
</span><span class="cx"> $admin_is_parent = true;
</span><del>- echo "\n\t<div class='wp-menu-image'><a href='admin.php?page={$item[2]}' tabindex='-1' aria-label='$aria_label'>$img</a></div>$arrow<a href='admin.php?page={$item[2]}'$class $aria_attributes>{$item[0]}</a>";
</del><ins>+ echo "\n\t<a href='admin.php?page={$item[2]}'$class $aria_attributes>$arrow<div class='wp-menu-image'>$img</div><div class='wp-menu-name'>{$item[0]}</div></a>";
</ins><span class="cx"> } else {
</span><del>- echo "\n\t<div class='wp-menu-image'><a href='{$item[2]}' tabindex='-1' aria-label='$aria_label'>$img</a></div>$arrow<a href='{$item[2]}'$class $aria_attributes>{$item[0]}</a>";
</del><ins>+ echo "\n\t<a href='{$item[2]}'$class $aria_attributes>$arrow<div class='wp-menu-image'>$img</div><div class='wp-menu-name'>{$item[0]}</div></a>";
</ins><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> if ( ! empty( $submenu_items ) ) {
</span><del>- echo "\n\t<div class='wp-submenu'><div class='wp-submenu-wrap'>";
- echo "<div class='wp-submenu-head'>{$item[0]}</div><ul>";
</del><ins>+ echo "\n\t<ul class='wp-submenu wp-submenu-wrap'>";
+ echo "<li class='wp-submenu-head'>{$item[0]}</li>";
+
</ins><span class="cx"> $first = true;
</span><span class="cx"> foreach ( $submenu_items as $sub_key => $sub_item ) {
</span><span class="cx"> if ( ! current_user_can( $sub_item[1] ) )
</span><span class="lines">@@ -160,7 +161,7 @@
</span><span class="cx"> echo "<li$class><a href='{$sub_item[2]}'$class>$title</a></li>";
</span><span class="cx"> }
</span><span class="cx"> }
</span><del>- echo "</ul></div></div>";
</del><ins>+ echo "</ul>";
</ins><span class="cx"> }
</span><span class="cx"> echo "</li>";
</span><span class="cx"> }
</span></span></pre>
</div>
</div>
</body>
</html>