2
0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-14 18:42:30 +03:00

Restore commented out dropdown styles, get open dropdown state working again

This commit is contained in:
Mark Otto
2013-05-12 16:03:56 -07:00
parent 92adcfabb5
commit 2d10d61fde
3 changed files with 132 additions and 18 deletions
+7 -5
View File
@@ -2,10 +2,6 @@
// Dropdown menus
// --------------------------------------------------
// Remove the outline when :focus is triggered
.open > a {
outline: 0;
}
// Dropdown arrow/caret
// --------------------
@@ -107,9 +103,15 @@
// Open state for the dropdown
// ---------------------------
.open {
& > .dropdown-menu {
// Show the menu
> .dropdown-menu {
display: block;
}
// Remove the outline when :focus is triggered
> a {
outline: 0;
}
}
// Right aligned dropdowns
+68 -8
View File
@@ -28,17 +28,10 @@
}
}
// Nav states and addons
// --------------------------------------------------
// Disabled state
// -------------------------
// Gray out text
// Disabled state sets text to gray and nukes hover/tab effects
&.disabled > a {
color: @gray-light;
}
// Nuke hover effects
&.disabled > a:hover,
&.disabled > a:focus {
color: @gray-light;
@@ -46,10 +39,19 @@
background-color: transparent;
cursor: default;
}
// Space the headers out when they follow another list item (link)
+ .nav-header {
margin-top: 9px;
}
// Open dropdowns
&.open > a,
&.open > a:hover,
&.open > a:focus {
background-color: @link-color;
border-color: @link-color;
}
}
// Redeclare pull classes because of specifity
@@ -222,11 +224,69 @@
// -------------------------
.nav-tabs .dropdown-menu {
// make dropdown border overlap tab border
margin-top: -1px;
// Remove the top rounded corners here since there is a hard edge above the menu
.border-top-radius(0);
}
// Make dropdown carets use link color in navs
.nav .caret {
border-top-color: @link-color;
border-bottom-color: @link-color;
}
.nav a:hover .caret {
border-top-color: @link-hover-color;
border-bottom-color: @link-hover-color;
}
// Active dropdown links
// -------------------------
.nav .active .caret {
border-top-color: #fff;
border-bottom-color: #fff;
}
.nav-tabs .active .caret {
border-top-color: @gray;
border-bottom-color: @gray;
}
// Active:hover dropdown links
// -------------------------
.nav > .dropdown.active > a:hover {
cursor: pointer;
}
// Open dropdowns
// -------------------------
.nav-tabs .open > a,
.nav-pills .open > a,
.nav > li.dropdown.open.active > a:hover {
color: #fff;
background-color: @gray-light;
border-color: @gray-light;
}
.nav li.dropdown.open .caret,
.nav li.dropdown.open.active .caret,
.nav li.dropdown.open > a:hover .caret {
border-top-color: #fff;
border-bottom-color: #fff;
.opacity(1);
}
// Dropdowns in stacked tabs
.tabs-stacked .open > a:hover {
border-color: @gray-light;
}
/*
// Prevent IE8 from misplacing imgs
// See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989