From dc2deb9a1b1995bbabee91bfd579d9b466fe78f2 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Thu, 26 Jan 2012 21:48:46 -0800 Subject: moving structure around + more work on builder... --- less/dropdowns.less | 110 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 110 insertions(+) create mode 100644 less/dropdowns.less (limited to 'less/dropdowns.less') diff --git a/less/dropdowns.less b/less/dropdowns.less new file mode 100644 index 000000000..06114b254 --- /dev/null +++ b/less/dropdowns.less @@ -0,0 +1,110 @@ +// DROPDOWN MENUS +// -------------- + +// Use the .menu class on any
  • element within the topbar or ul.tabs and you'll get some superfancy dropdowns +.dropdown { + position: relative; +} +// Dropdown arrow/caret +.caret { + display: inline-block; + width: 0; + height: 0; + text-indent: -99999px; + vertical-align: top; + border-left: 4px solid transparent; + border-right: 4px solid transparent; + border-top: 4px solid @black; + .opacity(30); + content: "\2193"; +} +.dropdown .caret { + margin-top: 8px; + margin-left: 2px; + *margin-top: 7px; +} +.dropdown:hover .caret, +.open.dropdown .caret { + .opacity(100); +} +// The dropdown menu (ul) +.dropdown-menu { + position: absolute; + top: 100%; + z-index: @zindexDropdown; + float: left; + display: none; // none by default, but block on "open" of the menu + min-width: 160px; + max-width: 220px; + _width: 160px; + padding: 4px 0; + margin: 0; // override default ul + list-style: none; + background-color: @white; + border-color: #ccc; + border-color: rgba(0,0,0,.2); + border-style: solid; + border-width: 1px; + .border-radius(0 0 5px 5px); + .box-shadow(0 5px 10px rgba(0,0,0,.2)); + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; + zoom: 1; // do we need this? + *border-right-width: 2px; + *border-bottom-width: 2px; + + // Allow for dropdowns to go bottom up (aka, dropup-menu) + &.bottom-up { + top: auto; + bottom: 100%; + margin-bottom: 2px; + } + + // Dividers (basically an hr) within the dropdown + .divider { + height: 1px; + margin: 5px 1px; + overflow: hidden; + background-color: #e5e5e5; + border-bottom: 1px solid @white; + } + + // Links within the dropdown menu + a { + display: block; + padding: 3px 15px; + clear: both; + font-weight: normal; + line-height: 18px; + color: @gray; + white-space: nowrap; + } +} + +// Hover state +.dropdown-menu li > a:hover, +.dropdown-menu .active > a, +.dropdown-menu .active > a:hover { + color: @white; + text-decoration: none; + background-color: @linkColor; +} + +// Open state for the dropdown +.dropdown.open { + .dropdown-toggle { + color: @white; + background: #ccc; + background: rgba(0,0,0,.3); + } + .dropdown-menu { + display: block; + } +} + +// Typeahead +.typeahead { + margin-top: 2px; // give it some space to breathe + .border-radius(4px); +} -- cgit v1.2.3 From 8328987b15e0bb9e1c2ee1bd90e8dee9843f0ea7 Mon Sep 17 00:00:00 2001 From: Pete Hopkins Date: Fri, 27 Jan 2012 16:06:58 -0500 Subject: IE7 fixes for split buttons and dropdowns --- less/dropdowns.less | 21 +++++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) (limited to 'less/dropdowns.less') diff --git a/less/dropdowns.less b/less/dropdowns.less index 06114b254..e73b056e9 100644 --- a/less/dropdowns.less +++ b/less/dropdowns.less @@ -5,12 +5,19 @@ .dropdown { position: relative; } +.dropdown .dropdown-toggle { + // The caret makes the toggle a bit too tall in IE7 + *margin-bottom: -3px; +} // Dropdown arrow/caret .caret { display: inline-block; width: 0; height: 0; text-indent: -99999px; + // IE7 won't do the border trick if there's a text indent, but it doesn't + // do the content that text-indent is hiding, either, so we're ok. + *text-indent: 0; vertical-align: top; border-left: 4px solid transparent; border-right: 4px solid transparent; @@ -21,7 +28,6 @@ .dropdown .caret { margin-top: 8px; margin-left: 2px; - *margin-top: 7px; } .dropdown:hover .caret, .open.dropdown .caret { @@ -31,6 +37,7 @@ .dropdown-menu { position: absolute; top: 100%; + left: 0; z-index: @zindexDropdown; float: left; display: none; // none by default, but block on "open" of the menu @@ -50,7 +57,6 @@ -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; - zoom: 1; // do we need this? *border-right-width: 2px; *border-bottom-width: 2px; @@ -68,6 +74,13 @@ overflow: hidden; background-color: #e5e5e5; border-bottom: 1px solid @white; + + // IE7 needs a set width since we gave a height. Restricting just + // to IE7 to keep the 1px left/right space in other browsers. + // It is unclear where IE is getting the extra space that we need + // to negative-margin away, but so it goes. + *width: 100%; + *margin: -5px 0 5px; } // Links within the dropdown menu @@ -93,6 +106,10 @@ // Open state for the dropdown .dropdown.open { + // IE7's z-index only goes to the nearest positioned ancestor, which would + // make the menu appear below buttons that appeared later on the page + *z-index: @zindexDropdown; + .dropdown-toggle { color: @white; background: #ccc; -- cgit v1.2.3 From 28ba9d69c82895bbd9a1d66cea855119f4aba349 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 28 Jan 2012 11:21:39 -0800 Subject: nav, buttons, and docs updates to account for outline: 0; on :active --- less/dropdowns.less | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'less/dropdowns.less') diff --git a/less/dropdowns.less b/less/dropdowns.less index e73b056e9..83f535ae8 100644 --- a/less/dropdowns.less +++ b/less/dropdowns.less @@ -5,10 +5,14 @@ .dropdown { position: relative; } -.dropdown .dropdown-toggle { +.dropdown-toggle { // The caret makes the toggle a bit too tall in IE7 *margin-bottom: -3px; } +.dropdown-toggle:active, +.open .dropdown-toggle { + outline: 0; +} // Dropdown arrow/caret .caret { display: inline-block; -- cgit v1.2.3