Switch admin menus to flyouts from dropdowns. First pass, see #18382.

git-svn-id: http://svn.automattic.com/wordpress/trunk@18621 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
koopersmith
2011-08-30 01:12:26 +00:00
parent 81871e05b4
commit 51fa6f62f2
9 changed files with 159 additions and 101 deletions

File diff suppressed because one or more lines are too long

View File

@@ -1,7 +1,7 @@
/*------------------------------------------------------------------------------
Howdy! This is the CSS file that controls the
Howdy! This is the CSS file that controls the
Gray (fresh) color style on the WordPress Dashboard.
This file contains both LTR and RTL styles.
@@ -952,11 +952,27 @@ table.widefat .spam a:hover,
border-color: #dfdfdf;
}
.expanded #adminmenu li.wp-not-current-submenu:hover a.menu-top,
.expanded #adminmenu li.wp-not-current-submenu:hover .wp-menu-arrow {
background-color: #eee; /* Fallback */
background-image: -ms-linear-gradient(bottom, #ccc, #eee); /* IE10 */
background-image: -moz-linear-gradient(bottom, #ccc, #eee); /* Firefox */
background-image: -o-linear-gradient(bottom, #ccc, #eee); /* Opera */
background-image: -webkit-gradient(linear, left bottom, left top, from(#ccc), to(#eee)); /* old Webkit */
background-image: -webkit-linear-gradient(bottom, #ccc, #e4e4e4); /* new Webkit */
background-image: linear-gradient(bottom, #ccc, #eee); /* proposed W3C Markup */
border-top-color: #e4e4e4;
border-bottom-color: #ccc;
text-shadow: 0 1px 0 rgba( 255, 255, 255, 0.4 );
color: #d54e21;
}
#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu,
#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-has-current-submenu .wp-menu-arrow,
#adminmenu .current .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 */
@@ -967,6 +983,16 @@ table.widefat .spam a:hover,
background-image: linear-gradient(bottom, #6d6d6d, #808080); /* proposed W3C Markup */
}
.expanded #adminmenu li.wp-not-current-submenu li:hover a {
background-color: #eaf2fa; /* Fallback */
background-image: -ms-linear-gradient(left, #fff, #eaf2fa 30px); /* IE10 */
background-image: -moz-linear-gradient(left, #fff, #eaf2fa 30px); /* Firefox */
background-image: -o-linear-gradient(left, #fff, #eaf2fa 30px); /* Opera */
background-image: -webkit-gradient(linear, left bottom, right bottom, from(#fff), color-stop(0.1, #eaf2fa)); /* old Webkit */
background-image: -webkit-linear-gradient(left, #fff, #eaf2fa 30px); /* new Webkit */
background-image: linear-gradient(left, #fff, #eaf2fa 30px); /* proposed W3C Markup */
}
#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu,
#adminmenu li.current a.menu-top,
#adminmenu .wp-has-current-submenu .wp-submenu .wp-submenu-head {
@@ -997,12 +1023,12 @@ table.widefat .spam a:hover,
background-color: #fff;
}
.folded #adminmenu .wp-submenu-wrap,
.folded #adminmenu .wp-submenu ul {
#adminmenu .wp-submenu-wrap,
#adminmenu .wp-submenu ul {
border-color: #dfdfdf;
}
.folded #adminmenu .wp-submenu-wrap {
#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 );

File diff suppressed because one or more lines are too long

View File

@@ -77,8 +77,9 @@ TABLE OF CONTENTS:
#adminmenuback,
#adminmenuwrap,
#adminmenu,
.js.folded #adminmenu .wp-submenu.sub-open,
.js.folded #adminmenu .wp-submenu-wrap {
.js #adminmenu .wp-submenu.sub-open,
.js #adminmenu .wp-submenu-wrap,
.folded #adminmenu .wp-has-current-submenu .wp-submenu.sub-open {
width: 145px;
}
@@ -1696,12 +1697,50 @@ form.upgrade .hint {
}
#adminmenu .wp-submenu {
display: none;
list-style: none;
padding: 0;
margin: 0;
overflow: hidden;
}
#adminmenu .wp-not-current-submenu .wp-submenu,
.folded #adminmenu .wp-has-current-submenu .wp-submenu {
display: block;
position: absolute;
top: -1px;
left: 146px;
z-index: 999;
width: 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;
}
.expanded #adminmenu .wp-has-current-submenu .wp-submenu {
position: relative;
z-index: 2;
width: 145px;
top: auto;
left: auto;
right: auto;
bottom: auto;
padding: 0;
}
.expanded #adminmenu .wp-has-current-submenu .wp-submenu-wrap {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.js.folded #adminmenu .wp-submenu {
top: -5px;
left: 26px;
}
.js #adminmenu .wp-submenu.sub-open {
padding: 0 8px 8px 0;
}
#adminmenu .wp-submenu a {
@@ -1786,11 +1825,20 @@ body.no-js #adminmenu li.wp-has-current-submenu .wp-submenu {
padding-left: 12px;
}
.expanded #adminmenu li.wp-not-current-submenu li {
margin-left: 8px;
}
.expanded #adminmenu li.wp-not-current-submenu li a {
padding-left: 12px;
}
.wp-menu-arrow {
display: none;
}
#adminmenu li.wp-has-current-submenu .wp-menu-arrow,
#adminmenu li.menu-top.current .wp-menu-arrow {
#adminmenu li.menu-top.current .wp-menu-arrow,
.expanded #adminmenu li.wp-has-submenu:hover .wp-menu-arrow {
display: block;
position: absolute;
right: -9px;
@@ -1798,6 +1846,11 @@ body.no-js #adminmenu li.wp-has-current-submenu .wp-submenu {
cursor: auto;
z-index: 25;
}
.expanded #adminmenu li.menu-top:hover .wp-menu-arrow {
z-index: 1500;
}
#adminmenu .wp-menu-arrow div {
width: 15px;
height: 30px;
@@ -1845,24 +1898,6 @@ body.no-js #adminmenu li.wp-has-current-submenu .wp-submenu {
border-style: solid;
}
.js.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;
}
.js.folded #adminmenu .wp-submenu.sub-open {
padding: 0 8px 8px 0;
}
#adminmenu .wp-submenu .wp-submenu-head {
padding: 6px 4px 5px 10px;
cursor: default;
@@ -1870,9 +1905,8 @@ body.no-js #adminmenu li.wp-has-current-submenu .wp-submenu {
border-style: solid;
}
.js.folded #adminmenu .wp-submenu-wrap {
margin-top: 4px;
border-width: 0 1px 1px 0;
.js #adminmenu .wp-not-current-submenu .wp-submenu-wrap {
border-width: 1px 1px 1px 0;
border-style: solid;
position: relative;
-webkit-border-bottom-right-radius: 3px;
@@ -1885,6 +1919,11 @@ body.no-js #adminmenu li.wp-has-current-submenu .wp-submenu {
border-top-right-radius: 3px;
}
.js.folded #adminmenu .wp-submenu .wp-submenu-wrap {
margin-top: 4px;
border-width: 0 1px 1px 0;
}
.js.folded #adminmenu .wp-submenu ul {
border-width: 0 0 0 1px;
border-style: solid;