Menu: Simplify styling. Remove rounded corners, reduce spacing.

This commit is contained in:
Scott González 2013-10-24 14:04:00 -04:00 committed by Jörn Zaefferer
parent 874865842b
commit 9910e938aa
2 changed files with 10 additions and 23 deletions

View File

@ -10,27 +10,24 @@
*/ */
.ui-menu { .ui-menu {
list-style: none; list-style: none;
padding: 2px; padding: 0;
margin: 0; margin: 0;
display: block; display: block;
outline: none; outline: none;
} }
.ui-menu .ui-menu { .ui-menu .ui-menu {
margin-top: -3px;
position: absolute; position: absolute;
} }
.ui-menu .ui-menu-item { .ui-menu .ui-menu-item {
margin: 0; margin: 0;
display: block; display: block;
padding: 2px .4em; padding: 3px .4em;
line-height: 1.5;
min-height: 0; /* support: IE7 */ min-height: 0; /* support: IE7 */
font-weight: normal;
/* support: IE10, see #8844 */ /* support: IE10, see #8844 */
list-style-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7); list-style-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
} }
.ui-menu .ui-menu-divider { .ui-menu .ui-menu-divider {
margin: 5px -2px 5px -2px; margin: 5px 0;
height: 0; height: 0;
font-size: 0; font-size: 0;
line-height: 0; line-height: 0;
@ -38,19 +35,9 @@
} }
.ui-menu .ui-state-focus, .ui-menu .ui-state-focus,
.ui-menu .ui-state-active { .ui-menu .ui-state-active {
font-weight: normal;
margin: -1px; margin: -1px;
} }
.ui-menu .ui-state-disabled {
font-weight: normal;
margin: .4em 0 .2em;
line-height: 1.5;
}
.ui-menu .ui-state-disabled a {
cursor: default;
}
/* icon support */ /* icon support */
.ui-menu-icons { .ui-menu-icons {
position: relative; position: relative;
@ -69,6 +56,7 @@
/* right-aligned */ /* right-aligned */
.ui-menu .ui-menu-icon { .ui-menu .ui-menu-icon {
position: static; position: relative;
top: -.2em;
float: right; float: right;
} }

11
ui/jquery.ui.menu.js vendored
View File

@ -26,7 +26,7 @@ $.widget( "ui.menu", {
items: "> *", items: "> *",
menus: "ul", menus: "ul",
position: { position: {
my: "left top", my: "left-1 top",
at: "right top" at: "right top"
}, },
role: "menu", role: "menu",
@ -44,7 +44,7 @@ $.widget( "ui.menu", {
this.mouseHandled = false; this.mouseHandled = false;
this.element this.element
.uniqueId() .uniqueId()
.addClass( "ui-menu ui-widget ui-widget-content ui-corner-all" ) .addClass( "ui-menu ui-widget ui-widget-content" )
.toggleClass( "ui-menu-icons", !!this.element.find( ".ui-icon" ).length ) .toggleClass( "ui-menu-icons", !!this.element.find( ".ui-icon" ).length )
.attr({ .attr({
role: this.options.role, role: this.options.role,
@ -147,7 +147,7 @@ $.widget( "ui.menu", {
this.element this.element
.removeAttr( "aria-activedescendant" ) .removeAttr( "aria-activedescendant" )
.find( ".ui-menu" ).addBack() .find( ".ui-menu" ).addBack()
.removeClass( "ui-menu ui-widget ui-widget-content ui-corner-all ui-menu-icons" ) .removeClass( "ui-menu ui-widget ui-widget-content ui-menu-icons" )
.removeAttr( "role" ) .removeAttr( "role" )
.removeAttr( "tabIndex" ) .removeAttr( "tabIndex" )
.removeAttr( "aria-labelledby" ) .removeAttr( "aria-labelledby" )
@ -163,7 +163,7 @@ $.widget( "ui.menu", {
.removeAttr( "role" ) .removeAttr( "role" )
.removeAttr( "aria-disabled" ) .removeAttr( "aria-disabled" )
.removeUniqueId() .removeUniqueId()
.removeClass( "ui-corner-all ui-state-hover" ) .removeClass( "ui-state-hover" )
.removeAttr( "tabIndex" ) .removeAttr( "tabIndex" )
.removeAttr( "role" ) .removeAttr( "role" )
.removeAttr( "aria-haspopup" ) .removeAttr( "aria-haspopup" )
@ -292,7 +292,7 @@ $.widget( "ui.menu", {
// Initialize nested menus // Initialize nested menus
submenus.filter( ":not(.ui-menu)" ) submenus.filter( ":not(.ui-menu)" )
.addClass( "ui-menu ui-widget ui-widget-content ui-corner-all" ) .addClass( "ui-menu ui-widget ui-widget-content" )
.hide() .hide()
.attr({ .attr({
role: this.options.role, role: this.options.role,
@ -328,7 +328,6 @@ $.widget( "ui.menu", {
items.not( ".ui-menu-item, .ui-menu-divider" ) items.not( ".ui-menu-item, .ui-menu-divider" )
.addClass( "ui-menu-item" ) .addClass( "ui-menu-item" )
.uniqueId() .uniqueId()
.addClass( "ui-corner-all" )
.attr({ .attr({
tabIndex: -1, tabIndex: -1,
role: this._itemRole() role: this._itemRole()