fix dropdowns for active state in dropdown menus

This commit is contained in:
Mark Otto
2012-01-08 15:33:44 -08:00
parent ac68bc39ff
commit 4b79443bba
4 changed files with 62 additions and 15 deletions

View File

@@ -71,9 +71,8 @@
}
}
// Hover & Active states
.dropdown-menu a:hover,
.dropdown-menu .active > a {
// Hover state
.dropdown-menu li > a:hover {
color: #fff;
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
@@ -82,6 +81,14 @@
.box-shadow(@shadow);
}
// Active state
.dropdown-menu .active > a,
.dropdown-menu .active > a:hover {
color: #fff;
background-color: #999;
background-image: none; // remove the gradient
}
// Open state for the dropdown
.dropdown.open {
.dropdown-toggle {

View File

@@ -101,8 +101,8 @@
}
}
// Active state, and it's :hover to override normal :hover
.tabs .active > a,
.tabs .active > a:hover {
.tabs > .active > a,
.tabs > .active > a:hover {
color: @gray;
background-color: @white;
border: 1px solid #ddd;
@@ -183,6 +183,10 @@
.pills .dropdown-menu {
.border-radius(4px);
}
// Default dropdown links
// -------------------------
// Make carets use linkColor to start
.tabs .dropdown-toggle .caret,
.pills .dropdown-toggle .caret {
border-top-color: @linkColor;
@@ -192,12 +196,32 @@
.pills .dropdown-toggle:hover .caret {
border-top-color: @linkColorHover;
}
// Active dropdown links
// -------------------------
.tabs .active .dropdown-toggle .caret,
.pills .active .dropdown-toggle .caret {
border-top-color: #333;
}
// Active:hover dropdown links
// -------------------------
.nav > .dropdown.active > a:hover {
color: #000;
cursor: pointer;
}
// Open dropdowns
// -------------------------
.tabs .open .dropdown-toggle,
.pills .open .dropdown-toggle {
.pills .open .dropdown-toggle,
.nav > .open.active > a:hover {
color: #fff;
background-color: #999;
border-color: #999;
}
.nav .open .caret,
.nav .open.active .caret,
.nav .open a:hover .caret {
border-top-color: #fff;
.opacity(100);