mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-05 16:42:29 +03:00
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.
This commit is contained in:
+28
-11
@@ -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;
|
||||
|
||||
+7
-13
@@ -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;
|
||||
|
||||
+1
-3
@@ -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;
|
||||
}
|
||||
|
||||
+4
-8
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user