dropdowns.styl

// DROPDOWN MENUS
// --------------

// Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
.dropdown
  position: relative

// The caret makes the toggle a bit too tall in IE7
.dropdown-toggle
  *margin-bottom: -3px

.dropdown-toggle:active,
.open .dropdown-toggle
  outline: 0

// Dropdown arrow/caret
.caret
  display: inline-block
  width: 0
  height: 0
  text-indent: -99999px
  // IE7 won't do the border trick if there's a text indent, but it doesn't
  // do the content that text-indent is hiding, either, so we're ok.
  *text-indent: 0
  vertical-align: top
  border-left:  4px solid transparent
  border-right: 4px solid transparent
  border-top:   4px solid $black
  opacity(.30)
  content: "\2193"

.dropdown .caret
  margin-top: 8px
  margin-left: 2px

.dropdown:hover .caret,
.open.dropdown .caret
  opacity(1)

// The dropdown menu (ul)
.dropdown-menu
  position: absolute
  top: 100%
  left: 0
  z-index: $zindexDropdown
  float: left
  display: none // none by default, but block on "open" of the menu
  min-width: 160px
  _width: 160px
  padding: 4px 0
  margin: 0 // override default ul
  list-style: none
  background-color: $white
  border-color: #ccc
  border-color: rgba(0,0,0,.2)
  border-style: solid
  border-width: 1px
  border-radius(0 0 5px 5px)
  box-shadow(0 5px 10px rgba(0,0,0,.2))
  background-clip: padding-box
  *border-right-width: 2px
  *border-bottom-width: 2px

  // Allow for dropdowns to go bottom up (aka, dropup-menu)
  &.bottom-up
    top: auto
    bottom: 100%
    margin-bottom: 2px

  // Dividers (basically an hr) within the dropdown
  .divider
    height: 1px
    margin: 5px 1px
    overflow: hidden
    background-color: #e5e5e5
    border-bottom: 1px solid $white

    // IE7 needs a set width since we gave a height. Restricting just
    // to IE7 to keep the 1px left/right space in other browsers.
    // It is unclear where IE is getting the extra space that we need
    // to negative-margin away, but so it goes.
    *width: 100%
    *margin: -5px 0 5px

  // Links within the dropdown menu
  a
    display: block
    padding: 3px 15px
    clear: both
    font-weight: normal
    line-height: $baseLineHeight
    color: $gray
    white-space: nowrap

// Hover state
.dropdown-menu li > a:hover,
.dropdown-menu .active > a,
.dropdown-menu .active > a:hover
  color: $white
  text-decoration: none
  background-color: $linkColor

// Open state for the dropdown
// IE7's z-index only goes to the nearest positioned ancestor, which would
.dropdown.open
  // make the menu appear below buttons that appeared later on the page
  *z-index: $zindexDropdown

  .dropdown-toggle
    color: $white
    background: #ccc
    background: rgba(0,0,0,.3)

  .dropdown-menu
    display: block

// Typeahead
.typeahead
  margin-top: 2px // give it some space to breathe
  border-radius(4px)