1
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-12 16:44:17 +02:00

addressing #9189 manually, part 2: dropdown header and disabled link colors (and refactor commenting styles)

This commit is contained in:
Mark Otto
2013-08-11 17:47:30 -07:00
parent 8b76e0d0f0
commit 58b90dae15
2 changed files with 9 additions and 15 deletions

View File

@@ -4,7 +4,6 @@
// Dropdown arrow/caret // Dropdown arrow/caret
// --------------------
.caret { .caret {
display: inline-block; display: inline-block;
width: 0; width: 0;
@@ -18,13 +17,11 @@
} }
// The dropdown wrapper (div) // The dropdown wrapper (div)
// --------------------------
.dropdown { .dropdown {
position: relative; position: relative;
} }
// The dropdown menu (ul) // The dropdown menu (ul)
// ----------------------
.dropdown-menu { .dropdown-menu {
position: absolute; position: absolute;
top: 100%; top: 100%;
@@ -67,7 +64,6 @@
} }
// Hover/Focus state // Hover/Focus state
// -----------
.dropdown-menu > li > a { .dropdown-menu > li > a {
&:hover, &:hover,
&:focus { &:focus {
@@ -79,7 +75,6 @@
} }
// Active state // Active state
// ------------
.dropdown-menu > .active > a { .dropdown-menu > .active > a {
&, &,
&:hover, &:hover,
@@ -93,13 +88,14 @@
} }
// Disabled state // Disabled state
// -------------- //
// Gray out text and ensure the hover/focus state remains gray // Gray out text and ensure the hover/focus state remains gray
.dropdown-menu > .disabled > a { .dropdown-menu > .disabled > a {
&, &,
&:hover, &:hover,
&:focus { &:focus {
color: @gray-light; color: @dropdown-link-disabled-color;
} }
} }
// Nuke hover/focus effects // Nuke hover/focus effects
@@ -115,7 +111,6 @@
} }
// Open state for the dropdown // Open state for the dropdown
// ---------------------------
.open { .open {
// Show the menu // Show the menu
> .dropdown-menu { > .dropdown-menu {
@@ -129,19 +124,15 @@
} }
// Dropdown section headers // Dropdown section headers
// ---------------------------
.dropdown-header { .dropdown-header {
display: block; display: block;
padding: 3px 20px; padding: 3px 20px;
font-size: @font-size-small; font-size: @font-size-small;
line-height: @line-height-base; line-height: @line-height-base;
color: @gray-light; color: @dropdown-header-color;
} }
// Backdrop to catch body clicks on mobile, etc. // Backdrop to catch body clicks on mobile, etc.
// ---------------------------
.dropdown-backdrop { .dropdown-backdrop {
position: fixed; position: fixed;
left: 0; left: 0;
@@ -152,16 +143,16 @@
} }
// Right aligned dropdowns // Right aligned dropdowns
// ---------------------------
.pull-right > .dropdown-menu { .pull-right > .dropdown-menu {
right: 0; right: 0;
left: auto; left: auto;
} }
// Allow for dropdowns to go bottom up (aka, dropup-menu) // Allow for dropdowns to go bottom up (aka, dropup-menu)
// ------------------------------------------------------ //
// Just add .dropup after the standard .dropdown class and you're set, bro. // Just add .dropup after the standard .dropdown class and you're set, bro.
// TODO: abstract this so that the navbar fixed styles are not placed here? // TODO: abstract this so that the navbar fixed styles are not placed here?
.dropup, .dropup,
.navbar-fixed-bottom .dropdown { .navbar-fixed-bottom .dropdown {
// Reverse the caret // Reverse the caret

View File

@@ -163,6 +163,9 @@
@dropdown-link-hover-color: #fff; @dropdown-link-hover-color: #fff;
@dropdown-link-hover-bg: @dropdown-link-active-bg; @dropdown-link-hover-bg: @dropdown-link-active-bg;
@dropdown-link-disabled-color: @gray-light;
@dropdown-header-color: @gray-light;
@dropdown-caret-color: #000; @dropdown-caret-color: #000;