File diff a212449bb325 → b890802d732c
bootstrap-3.0.0/less/dropdowns.less
Show inline comments
 
new file 100644
 
//
 
// Dropdown menus
 
// --------------------------------------------------
 

	
 

	
 
// Dropdown arrow/caret
 
.caret {
 
  display: inline-block;
 
  width: 0;
 
  height: 0;
 
  margin-left: 2px;
 
  vertical-align: middle;
 
  border-top:   @caret-width-base solid @dropdown-caret-color;
 
  border-right: @caret-width-base solid transparent;
 
  border-left:  @caret-width-base solid transparent;
 
  // Firefox fix for https://github.com/twbs/bootstrap/issues/9538. Once fixed,
 
  // we can just straight up remove this.
 
  border-bottom: 0 dotted;
 
  content: "";
 
}
 

	
 
// The dropdown wrapper (div)
 
.dropdown {
 
  position: relative;
 
}
 

	
 
// Prevent the focus on the dropdown toggle when closing dropdowns
 
.dropdown-toggle:focus {
 
  outline: 0;
 
}
 

	
 
// The dropdown menu (ul)
 
.dropdown-menu {
 
  position: absolute;
 
  top: 100%;
 
  left: 0;
 
  z-index: @zindex-dropdown;
 
  display: none; // none by default, but block on "open" of the menu
 
  float: left;
 
  min-width: 160px;
 
  padding: 5px 0;
 
  margin: 2px 0 0; // override default ul
 
  list-style: none;
 
  font-size: @font-size-base;
 
  background-color: @dropdown-bg;
 
  border: 1px solid @dropdown-fallback-border; // IE8 fallback
 
  border: 1px solid @dropdown-border;
 
  border-radius: @border-radius-base;
 
  .box-shadow(0 6px 12px rgba(0,0,0,.175));
 
  background-clip: padding-box;
 

	
 
  // Aligns the dropdown menu to right
 
  &.pull-right {
 
    right: 0;
 
    left: auto;
 
  }
 

	
 
  // Dividers (basically an hr) within the dropdown
 
  .divider {
 
    .nav-divider(@dropdown-divider-bg);
 
  }
 

	
 
  // Links within the dropdown menu
 
  > li > a {
 
    display: block;
 
    padding: 3px 20px;
 
    clear: both;
 
    font-weight: normal;
 
    line-height: @line-height-base;
 
    color: @dropdown-link-color;
 
    white-space: nowrap; // prevent links from randomly breaking onto new lines
 
  }
 
}
 

	
 
// Hover/Focus state
 
.dropdown-menu > li > a {
 
  &:hover,
 
  &:focus {
 
    text-decoration: none;
 
    color: @dropdown-link-hover-color;
 
    background-color: @dropdown-link-hover-bg;
 
  }
 
}
 

	
 
// Active state
 
.dropdown-menu > .active > a {
 
  &,
 
  &:hover,
 
  &:focus {
 
    color: @dropdown-link-active-color;
 
    text-decoration: none;
 
    outline: 0;
 
    background-color: @dropdown-link-active-bg;
 
  }
 
}
 

	
 
// Disabled state
 
//
 
// Gray out text and ensure the hover/focus state remains gray
 

	
 
.dropdown-menu > .disabled > a {
 
  &,
 
  &:hover,
 
  &:focus {
 
    color: @dropdown-link-disabled-color;
 
  }
 
}
 
// Nuke hover/focus effects
 
.dropdown-menu > .disabled > a {
 
  &:hover,
 
  &:focus {
 
    text-decoration: none;
 
    background-color: transparent;
 
    background-image: none; // Remove CSS gradient
 
    .reset-filter();
 
    cursor: not-allowed;
 
  }
 
}
 

	
 
// Open state for the dropdown
 
.open {
 
  // Show the menu
 
  > .dropdown-menu {
 
    display: block;
 
  }
 

	
 
  // Remove the outline when :focus is triggered
 
  > a {
 
    outline: 0;
 
  }
 
}
 

	
 
// Dropdown section headers
 
.dropdown-header {
 
  display: block;
 
  padding: 3px 20px;
 
  font-size: @font-size-small;
 
  line-height: @line-height-base;
 
  color: @dropdown-header-color;
 
}
 

	
 
// Backdrop to catch body clicks on mobile, etc.
 
.dropdown-backdrop {
 
  position: fixed;
 
  left: 0;
 
  right: 0;
 
  bottom: 0;
 
  top: 0;
 
  z-index: @zindex-dropdown - 10;
 
}
 

	
 
// Right aligned dropdowns
 
.pull-right > .dropdown-menu {
 
  right: 0;
 
  left: auto;
 
}
 

	
 
// Allow for dropdowns to go bottom up (aka, dropup-menu)
 
//
 
// 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?
 

	
 
.dropup,
 
.navbar-fixed-bottom .dropdown {
 
  // Reverse the caret
 
  .caret {
 
    // Firefox fix for https://github.com/twbs/bootstrap/issues/9538. Once this
 
    // gets fixed, restore `border-top: 0;`.
 
    border-top: 0 dotted;
 
    border-bottom: 4px solid @dropdown-caret-color;
 
    content: "";
 
  }
 
  // Different positioning for bottom up menu
 
  .dropdown-menu {
 
    top: auto;
 
    bottom: 100%;
 
    margin-bottom: 1px;
 
  }
 
}
 

	
 

	
 
// Component alignment
 
//
 
// Reiterate per navbar.less and the modified component alignment there.
 

	
 
@media (min-width: @grid-float-breakpoint) {
 
  .navbar-right {
 
    .dropdown-menu {
 
      .pull-right > .dropdown-menu();
 
    }
 
  }
 
}