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