info@54: //
info@54: // Dropdown menus
info@54: // --------------------------------------------------
info@54: 
info@54: 
info@54: // Dropdown arrow/caret
info@54: .caret {
info@54:   display: inline-block;
info@54:   width: 0;
info@54:   height: 0;
info@54:   margin-left: 2px;
info@54:   vertical-align: middle;
info@54:   border-top:   @caret-width-base solid;
info@54:   border-right: @caret-width-base solid transparent;
info@54:   border-left:  @caret-width-base solid transparent;
info@54: }
info@54: 
info@54: // The dropdown wrapper (div)
info@54: .dropdown {
info@54:   position: relative;
info@54: }
info@54: 
info@54: // Prevent the focus on the dropdown toggle when closing dropdowns
info@54: .dropdown-toggle:focus {
info@54:   outline: 0;
info@54: }
info@54: 
info@54: // The dropdown menu (ul)
info@54: .dropdown-menu {
info@54:   position: absolute;
info@54:   top: 100%;
info@54:   left: 0;
info@54:   z-index: @zindex-dropdown;
info@54:   display: none; // none by default, but block on "open" of the menu
info@54:   float: left;
info@54:   min-width: 160px;
info@54:   padding: 5px 0;
info@54:   margin: 2px 0 0; // override default ul
info@54:   list-style: none;
info@54:   font-size: @font-size-base;
info@54:   background-color: @dropdown-bg;
info@54:   border: 1px solid @dropdown-fallback-border; // IE8 fallback
info@54:   border: 1px solid @dropdown-border;
info@54:   border-radius: @border-radius-base;
info@54:   .box-shadow(0 6px 12px rgba(0,0,0,.175));
info@54:   background-clip: padding-box;
info@54: 
info@54:   // Aligns the dropdown menu to right
info@54:   &.pull-right {
info@54:     right: 0;
info@54:     left: auto;
info@54:   }
info@54: 
info@54:   // Dividers (basically an hr) within the dropdown
info@54:   .divider {
info@54:     .nav-divider(@dropdown-divider-bg);
info@54:   }
info@54: 
info@54:   // Links within the dropdown menu
info@54:   > li > a {
info@54:     display: block;
info@54:     padding: 3px 20px;
info@54:     clear: both;
info@54:     font-weight: normal;
info@54:     line-height: @line-height-base;
info@54:     color: @dropdown-link-color;
info@54:     white-space: nowrap; // prevent links from randomly breaking onto new lines
info@54:   }
info@54: }
info@54: 
info@54: // Hover/Focus state
info@54: .dropdown-menu > li > a {
info@54:   &:hover,
info@54:   &:focus {
info@54:     text-decoration: none;
info@54:     color: @dropdown-link-hover-color;
info@54:     background-color: @dropdown-link-hover-bg;
info@54:   }
info@54: }
info@54: 
info@54: // Active state
info@54: .dropdown-menu > .active > a {
info@54:   &,
info@54:   &:hover,
info@54:   &:focus {
info@54:     color: @dropdown-link-active-color;
info@54:     text-decoration: none;
info@54:     outline: 0;
info@54:     background-color: @dropdown-link-active-bg;
info@54:   }
info@54: }
info@54: 
info@54: // Disabled state
info@54: //
info@54: // Gray out text and ensure the hover/focus state remains gray
info@54: 
info@54: .dropdown-menu > .disabled > a {
info@54:   &,
info@54:   &:hover,
info@54:   &:focus {
info@54:     color: @dropdown-link-disabled-color;
info@54:   }
info@54: }
info@54: // Nuke hover/focus effects
info@54: .dropdown-menu > .disabled > a {
info@54:   &:hover,
info@54:   &:focus {
info@54:     text-decoration: none;
info@54:     background-color: transparent;
info@54:     background-image: none; // Remove CSS gradient
info@54:     .reset-filter();
info@54:     cursor: not-allowed;
info@54:   }
info@54: }
info@54: 
info@54: // Open state for the dropdown
info@54: .open {
info@54:   // Show the menu
info@54:   > .dropdown-menu {
info@54:     display: block;
info@54:   }
info@54: 
info@54:   // Remove the outline when :focus is triggered
info@54:   > a {
info@54:     outline: 0;
info@54:   }
info@54: }
info@54: 
info@54: // Dropdown section headers
info@54: .dropdown-header {
info@54:   display: block;
info@54:   padding: 3px 20px;
info@54:   font-size: @font-size-small;
info@54:   line-height: @line-height-base;
info@54:   color: @dropdown-header-color;
info@54: }
info@54: 
info@54: // Backdrop to catch body clicks on mobile, etc.
info@54: .dropdown-backdrop {
info@54:   position: fixed;
info@54:   left: 0;
info@54:   right: 0;
info@54:   bottom: 0;
info@54:   top: 0;
info@54:   z-index: @zindex-dropdown - 10;
info@54: }
info@54: 
info@54: // Right aligned dropdowns
info@54: .pull-right > .dropdown-menu {
info@54:   right: 0;
info@54:   left: auto;
info@54: }
info@54: 
info@54: // Allow for dropdowns to go bottom up (aka, dropup-menu)
info@54: //
info@54: // Just add .dropup after the standard .dropdown class and you're set, bro.
info@54: // TODO: abstract this so that the navbar fixed styles are not placed here?
info@54: 
info@54: .dropup,
info@54: .navbar-fixed-bottom .dropdown {
info@54:   // Reverse the caret
info@54:   .caret {
info@54:     border-top: 0;
info@54:     border-bottom: @caret-width-base solid;
info@54:     content: "";
info@54:   }
info@54:   // Different positioning for bottom up menu
info@54:   .dropdown-menu {
info@54:     top: auto;
info@54:     bottom: 100%;
info@54:     margin-bottom: 1px;
info@54:   }
info@54: }
info@54: 
info@54: 
info@54: // Component alignment
info@54: //
info@54: // Reiterate per navbar.less and the modified component alignment there.
info@54: 
info@54: @media (min-width: @grid-float-breakpoint) {
info@54:   .navbar-right {
info@54:     .dropdown-menu {
info@54:       .pull-right > .dropdown-menu();
info@54:     }
info@54:   }
info@54: }
info@54: