From ac64d9405b3f650704f2e63b52c26b9f6f792cb8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 22 Mar 2012 23:09:31 -0700 Subject: Dropdowns overhaul: 1. Removed broken and unused dropup examples from the navs/pills docs 2. New defaults for dropdown menus: all corners are rounded and always 1px offset from top unless otherwise specified 3. Refined active and open states for button dropdowns by adding a darker background color for each button variation when opened; also changed the opened dropdown-toggle's inset shadow to match that of an :active button 4. Generalized .dropdown.open to just .open, thus removing a few lines from button-groups.less. 5. Annnnnnnnnd I think that's it. --- less/button-groups.less | 39 ++++++++++++++++++++++++++++----------- 1 file changed, 28 insertions(+), 11 deletions(-) (limited to 'less/button-groups.less') diff --git a/less/button-groups.less b/less/button-groups.less index d3e7a7490..627c067e7 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -114,24 +114,41 @@ } .btn-group.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; - - // Reposition menu on open and round all corners - .dropdown-menu { - display: block; - margin-top: 1px; - .border-radius(5px); - } + // The clickable button for toggling the menu + // Remove the gradient and set the same inset shadow as the :active state .dropdown-toggle { background-image: none; - @shadow: inset 0 1px 6px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05); + @shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05); .box-shadow(@shadow); } + + // Keep the hover's background when dropdown is open + .btn.dropdown-toggle { + background-color: @btnBackgroundHighlight; + } + .btn-primary.dropdown-toggle { + background-color: @btnPrimaryBackgroundHighlight; + } + .btn-warning.dropdown-toggle { + background-color: @btnWarningBackgroundHighlight; + } + .btn-danger.dropdown-toggle { + background-color: @btnDangerBackgroundHighlight; + } + .btn-success.dropdown-toggle { + background-color: @btnSuccessBackgroundHighlight; + } + .btn-info.dropdown-toggle { + background-color: @btnInfoBackgroundHighlight; + } + .btn-inverse.dropdown-toggle { + background-color: @btnInverseBackgroundHighlight; + } } + + // Reposition the caret .btn .caret { margin-top: 7px; -- cgit v1.2.3