diff options
| author | Mark Otto <[email protected]> | 2012-03-22 23:09:31 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2012-03-22 23:09:31 -0700 |
| commit | ac64d9405b3f650704f2e63b52c26b9f6f792cb8 (patch) | |
| tree | 4e2b96e4db48b04d386ff90f389b20ff5cf7b450 /less | |
| parent | 50b2245be5bd7cd12d37e38a00c4978a211bdcd3 (diff) | |
| download | bootstrap-ac64d9405b3f650704f2e63b52c26b9f6f792cb8.tar.xz bootstrap-ac64d9405b3f650704f2e63b52c26b9f6f792cb8.zip | |
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.
Diffstat (limited to 'less')
| -rw-r--r-- | less/button-groups.less | 39 | ||||
| -rw-r--r-- | less/dropdowns.less | 20 | ||||
| -rw-r--r-- | less/navbar.less | 4 | ||||
| -rw-r--r-- | less/navs.less | 12 |
4 files changed, 40 insertions, 35 deletions
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; diff --git a/less/dropdowns.less b/less/dropdowns.less index 58cdb612f..b54e7eeec 100644 --- a/less/dropdowns.less +++ b/less/dropdowns.less @@ -34,7 +34,7 @@ margin-left: 2px; } .dropdown:hover .caret, -.open.dropdown .caret { +.open .caret { .opacity(100); } @@ -49,14 +49,12 @@ display: none; // none by default, but block on "open" of the menu min-width: 160px; padding: 4px 0; - margin: 0; // override default ul + margin: 1px 0 0; // override default ul list-style: none; background-color: @dropdownBackground; - border-color: #ccc; - border-color: rgba(0,0,0,.2); - border-style: solid; - border-width: 1px; - .border-radius(0 0 5px 5px); + border: 1px solid #ccc; + border: 1px solid rgba(0,0,0,.2); + .border-radius(5px); .box-shadow(0 5px 10px rgba(0,0,0,.2)); -webkit-background-clip: padding-box; -moz-background-clip: padding; @@ -99,22 +97,18 @@ // Open state for the dropdown // --------------------------- -.dropdown.open { +.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; - background: rgba(0,0,0,.3); - } .dropdown-menu { display: block; } } // Right aligned dropdowns +// --------------------------- .pull-right .dropdown-menu { left: auto; right: 0; diff --git a/less/navbar.less b/less/navbar.less index cda6721e3..eed0ff2d6 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -262,8 +262,6 @@ // Menu position and menu carets .navbar .dropdown-menu { - margin-top: 1px; - .border-radius(4px); &:before { content: ''; display: inline-block; @@ -304,7 +302,7 @@ } // Dropdown toggle caret .navbar .nav .dropdown-toggle .caret, -.navbar .nav .open.dropdown .caret { +.navbar .nav .open .caret { border-top-color: @white; border-bottom-color: @white; } diff --git a/less/navs.less b/less/navs.less index 489e1bfeb..ae187e1fb 100644 --- a/less/navs.less +++ b/less/navs.less @@ -98,12 +98,10 @@ .nav-tabs { border-bottom: 1px solid #ddd; } - // Make the list-items overlay the bottom border .nav-tabs > li { margin-bottom: -1px; } - // Actual tabs (as links) .nav-tabs > li > a { padding-top: 8px; @@ -125,6 +123,7 @@ cursor: default; } + // PILLS // ----- @@ -189,14 +188,11 @@ // DROPDOWNS // --------- -// Position the menu -.nav-tabs .dropdown-menu, -.nav-pills .dropdown-menu { - margin-top: 1px; - border-width: 1px; +.nav-tabs .dropdown-menu { + .border-radius(0 0 5px 5px); // remove the top rounded corners here since there is a hard edge above the menu } .nav-pills .dropdown-menu { - .border-radius(4px); + .border-radius(4px); // make rounded corners match the pills } // Default dropdown links |
