Auto-fold the admin menu with CSS, fixes #20642

git-svn-id: http://core.svn.wordpress.org/trunk@20749 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
azaozz
2012-05-09 03:56:40 +00:00
parent 3fc77d1465
commit 1f44403272
5 changed files with 287 additions and 25 deletions

View File

@@ -1443,6 +1443,45 @@ table.widefat .spam a:hover,
background-position: 0 -108px;
}
/* Auto-folding of the admin menu */
@media only screen and (max-width: 900px) {
#adminmenu li.menu-top {
border-top-color: #ffffff;
border-bottom-color: #cae6ff;
}
#adminmenu li.wp-has-current-submenu,
#adminmenu li.current.menu-top {
background-color: #5589AA; /* Fallback */
background-image: -ms-linear-gradient(bottom, #5589AA, #619bbb); /* IE10 */
background-image: -moz-linear-gradient(bottom, #5589AA, #619bbb); /* Firefox */
background-image: -o-linear-gradient(bottom, #5589AA, #619bbb); /* Opera */
background-image: -webkit-gradient(linear, left bottom, left top, from(#5589AA), to(#619bbb)); /* old Webkit */
background-image: -webkit-linear-gradient(bottom, #5589AA, #619bbb); /* new Webkit */
background-image: linear-gradient(bottom, #5589AA, #619bbb); /* proposed W3C Markup */
}
#adminmenu li.menu-top li:hover a {
background-image: none;
}
#adminmenu li.wp-has-current-submenu,
#adminmenu li.current.menu-top {
border-top-color: #5A8FAD;
border-bottom-color: #5589AA;
}
#adminmenu .wp-has-current-submenu .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 );
}
#collapse-button div {
background-position: 0 -108px;
}
}
/* menu and screen icons */
.icon16,
.icon32,
@@ -2437,6 +2476,19 @@ div.widgets-sortables,
background-position: 0 -72px;
}
/* Auto-folding of the admin menu for RTL */
@media only screen and (max-width: 900px) {
.rtl #adminmenu .wp-has-current-submenu .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 );
}
.rtl #collapse-button div {
background-position: 0 -72px;
}
}
/* edit image */
.rtl .meta-box-sortables .postbox:hover .handlediv {
background: transparent url(../images/arrows-vs.png) no-repeat 6px 7px;

View File

@@ -1107,16 +1107,58 @@ table.widefat .spam a:hover,
background-image: -webkit-linear-gradient(bottom, #dfdfdf, #fff); /* new Webkit */
background-image: linear-gradient(bottom, #dfdfdf, #fff); /* proposed W3C Markup */
}
#collapse-menu:hover #collapse-button {
border-color: #aaa;
}
#collapse-button div {
background: transparent url(../images/arrows.png) no-repeat 0 -72px;
}
.folded #collapse-button div {
background-position: 0 -108px;
}
/* Auto-folding of the admin menu */
@media only screen and (max-width: 900px) {
#adminmenu li.menu-top {
border-top-color: #f9f9f9;
border-bottom-color: #dfdfdf;
}
#adminmenu li.wp-has-current-submenu,
#adminmenu li.current.menu-top {
background-color: #777; /* Fallback */
background-image: -ms-linear-gradient(bottom, #6d6d6d, #808080); /* IE10 */
background-image: -moz-linear-gradient(bottom, #6d6d6d, #808080); /* Firefox */
background-image: -o-linear-gradient(bottom, #6d6d6d, #808080); /* Opera */
background-image: -webkit-gradient(linear, left bottom, left top, from(#6d6d6d), to(#808080)); /* old Webkit */
background-image: -webkit-linear-gradient(bottom, #6d6d6d, #808080); /* new Webkit */
background-image: linear-gradient(bottom, #6d6d6d, #808080); /* proposed W3C Markup */
}
#adminmenu li.menu-top li:hover a {
background-image: none;
}
#adminmenu li.wp-has-current-submenu,
#adminmenu li.current.menu-top {
border-top-color: #808080;
border-bottom-color: #6d6d6d;
}
#adminmenu .wp-has-current-submenu .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 );
}
#collapse-button div {
background-position: 0 -108px;
}
}
/* menu and screen icons */
.icon16,
.icon32,
@@ -2026,6 +2068,19 @@ div.widgets-sortables,
background-position: 0 -72px;
}
/* Auto-folding of the admin menu for RTL */
@media only screen and (max-width: 900px) {
.rtl #adminmenu .wp-has-current-submenu .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 );
}
.rtl #collapse-button div {
background-position: 0 -72px;
}
}
/* Edit Image */
.rtl .meta-box-sortables .postbox:hover .handlediv {
background: transparent url(../images/arrows.png) no-repeat 6px 7px;

View File

@@ -352,8 +352,7 @@ form.upgrade .hint {
left: 0;
}
#adminmenu li .wp-submenu,
.folded #adminmenu .wp-has-current-submenu .wp-submenu {
#adminmenu li .wp-submenu {
left: auto;
right: 146px;
}
@@ -498,6 +497,62 @@ form.upgrade .hint {
float: right;
}
/* Auto-folding of the admin menu */
@media only screen and (max-width: 900px) {
#adminmenu li .wp-submenu,
#adminmenu .wp-has-current-submenu .wp-submenu {
left: auto;
right: 26px;
}
#adminmenu li.focused.wp-has-current-submenu .wp-submenu,
#adminmenu .wp-has-current-submenu .wp-submenu.sub-open {
padding: 0 0 8px 8px;
}
.folded #adminmenu .wp-not-current-submenu li a {
padding-left: 0;
padding-right: 12px;
}
#adminmenu li li,
#adminmenu li li a {
padding-left: inherit;
padding-right: 0
}
.wp-menu-arrow {
-moz-transform: translate( -27px );
-webkit-transform: translate( -27px );
-o-transform: translate( -27px );
-ms-transform: translate( -27px );
transform: translate( -27px );
}
#adminmenu .wp-submenu ul {
border-width: 0 1px 0 0;
}
#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;
}
}
/* List table styles */
.post-com-count-wrapper {

View File

@@ -1725,6 +1725,124 @@ body.no-js #adminmenu .wp-menu-toggle,
border-radius: 10px;
}
/* Auto-folding of the admin menu */
@media only screen and (max-width: 900px) {
#wpcontent,
#footer {
margin-left: 52px;
}
#adminmenuback,
#adminmenuwrap,
#adminmenu,
#adminmenu li.menu-top {
width: 32px;
}
#adminmenu .wp-has-current-submenu .wp-submenu {
display: none;
position: absolute;
width: 145px;
z-index: 999;
overflow: hidden;
}
#adminmenu .wp-has-current-submenu .wp-submenu.sub-open {
display: block;
}
#adminmenu li .wp-submenu,
#adminmenu .wp-has-current-submenu .wp-submenu {
top: -5px;
left: 26px;
}
#adminmenu li.focused.wp-has-current-submenu .wp-submenu,
#adminmenu .wp-has-current-submenu .wp-submenu.sub-open {
padding: 0 8px 8px 0;
}
#adminmenu div.wp-submenu-head {
display: block;
}
#adminmenu a.menu-top,
#adminmenu div.wp-menu-toggle {
display: none;
}
#adminmenu div.wp-menu-image {
width: 30px;
}
#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 {
-moz-transform: translate( 33px );
-webkit-transform: translate( 33px );
-o-transform: translate( 33px );
-ms-transform: translate( 33px );
transform: translate( 33px );
}
#adminmenu li.menu-top:hover .wp-menu-arrow {
display: none;
}
#adminmenu li.current:hover .wp-menu-arrow,
#adminmenu li.menu-top.wp-menu-open:hover .wp-menu-arrow {
display: block;
z-index: 125;
}
#adminmenu li.menu-top {
border-width: 1px 0;
border-style: solid none;
}
#adminmenu .wp-submenu .wp-submenu-wrap {
margin-top: 3px;
}
#adminmenu .wp-has-current-submenu {
margin-bottom: 1px;
}
#adminmenu .wp-has-current-submenu.menu-top-last {
margin-bottom: 0;
}
#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 {
display: none;
}
}
/* List table styles */
.post-com-count-wrapper {
@@ -2084,6 +2202,10 @@ body.admin-bar {
9.0 - Dashboard
------------------------------------------------------------------------------*/
#dashboard-widgets-wrap {
margin: 0 -8px;
}
#wpbody-content .metabox-holder {
padding-top: 10px;
}