foundation/stylus/foundation/components/dropdown.styl

You may also want to checkout:

//
// Dropdown Variables
//
$include-html-button-classes ?= $include-html-classes;

// We use these to controls height and width styles.
$f-dropdown-max-width ?= 200px;
$f-dropdown-height ?= auto;
$f-dropdown-max-height ?= none;
$f-dropdown-margin-top ?= 2px;

// We use this to control the background color
$f-dropdown-bg ?= #fff;

// We use this to set the border styles for dropdowns.
$f-dropdown-border-style ?= solid;
$f-dropdown-border-width ?= 1px;
$f-dropdown-border-color ?= darken(#fff, 20%);

// We use these to style the triangle pip.
$f-dropdown-triangle-size ?= 6px;
$f-dropdown-triangle-color ?= #fff;
$f-dropdown-triangle-side-offset ?= 10px;

// We use these to control styles for the list elements.
$f-dropdown-list-style ?= none;
$f-dropdown-font-color ?= #555;
$f-dropdown-font-size ?= emCalc(14px);
$f-dropdown-list-padding ?= emCalc(5px) emCalc(10px);
$f-dropdown-line-height ?= emCalc(18px);
$f-dropdown-list-hover-bg ?= #eeeeee;
$dropdown-mobile-default-float ?= 0;

// We use this to control the styles for when the dropdown has custom content.
$f-dropdown-content-padding ?= emCalc(20px);

//
// Dropdown Mixins
//

// NOTE: Make default max-width change between list and content types. Can add more width with classes, maybe .small, .medium, .large, etc.;

// We use this to style the dropdown container element.
dropdown-container($content=list, $triangle=true, $max-width=$f-dropdown-max-width) {
  position: absolute;
  top: -9999px;
  list-style: $f-dropdown-list-style;

  *:first-child { margin-top: 0; }
  *:last-child { margin-bottom: 0; }

  if $content == list {
    width: 100%;
    max-height: $f-dropdown-max-height;
    height: $f-dropdown-height;
    background: $f-dropdown-bg;
    border: $f-dropdown-border-style $f-dropdown-border-width $f-dropdown-border-color;
    font-size: $em-base;
    z-index: 99;
  } else if $content == content {
    padding: $f-dropdown-content-padding;
    width: 100%;
    height: $f-dropdown-height;
    max-height: $f-dropdown-max-height;
    background: $f-dropdown-bg;
    border: $f-dropdown-border-style $f-dropdown-border-width $f-dropdown-border-color;
    font-size: $em-base;
    z-index: 99;
  }

  if $triangle {
    margin-top: $f-dropdown-margin-top;

    &:before {
      css-triangle($f-dropdown-triangle-size, $f-dropdown-triangle-color, bottom);
      position: absolute;
      top: -($f-dropdown-triangle-size * 2);
      {$default-float}: $f-dropdown-triangle-side-offset;
      z-index: 99;
    }
    &:after {
      css-triangle($f-dropdown-triangle-size + 1, $f-dropdown-border-color, bottom);
      position: absolute;
      top: -(($f-dropdown-triangle-size + 1) * 2);
      {$default-float}: $f-dropdown-triangle-side-offset - 1;
      z-index: 98;
    }

    &.right:before {
      left: auto;
      right: $f-dropdown-triangle-side-offset;
    }
    &.right:after {
      left: auto;
      right: $f-dropdown-triangle-side-offset - 1;
    }
  }

  if $max-width {
    max-width: $max-width;
  } else {
    max-width: $f-dropdown-max-width;
  }

}

// We use this to style the list elements or content inside the dropdown.
dropdown-style() {
  font-size: $f-dropdown-font-size;
  cursor: $cursor-pointer-value;

  line-height: $f-dropdown-line-height;
  margin: 0;

  &:hover,
  &:focus { background: $f-dropdown-list-hover-bg; }

  a {
    display: block;
    padding: $f-dropdown-list-padding;
    color: $f-dropdown-font-color;
  }
}


if $include-html-button-classes != false {

  @media only screen and (max-width: 767px) {
    .f-dropdown {
      max-width: 100%;
      {$default-float}: $dropdown-mobile-default-float;
    }
  }

  /* Foundation Dropdowns */
  .f-dropdown {
    dropdown-container(list);
    // max-width: none;

    li {
      dropdown-style();
    }

    // You can also put custom content in these dropdowns
    &.content {
      dropdown-container(content, $triangle:false);
    }

    // Sizes
    &.tiny    { max-width: 200px; }
    &.small   { max-width: 300px; }
    &.medium  { max-width: 500px; }
    &.large   { max-width: 800px; }
  }

}