foundation-sites/scss/components/_dropdown.scss

// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source

////
/// @group dropdown
////

/// Padding for dropdown panes.
/// @type List
$dropdown-padding: 1rem !default;

/// Background for dropdown panes.
/// @type Color
$dropdown-background: $body-background !default;

/// Border for dropdown panes.
/// @type List
$dropdown-border: 1px solid $medium-gray !default;

/// Font size for dropdown panes.
/// @type List
$dropdown-font-size: 1rem !default;

/// Width for dropdown panes.
/// @type Number
$dropdown-width: 300px !default;

/// Border radius dropdown panes.
/// @type Number
$dropdown-radius: $global-radius !default;

/// Sizes for dropdown panes. Each size is a CSS class you can apply.
/// @type Map
$dropdown-sizes: (
  tiny: 100px,
  small: 200px,
  large: 400px,
) !default;

/// Applies styles for a basic dropdown.
@mixin dropdown-container {
  position: absolute;
  z-index: 10;

  width: $dropdown-width;
  padding: $dropdown-padding;

  visibility: hidden;
  display: none;
  border: $dropdown-border;
  border-radius: $dropdown-radius;
  background-color: $dropdown-background;

  font-size: $dropdown-font-size;


  // Allow an intermittent state to do positioning before making visible.
  &.is-opening {
    display: block;
  }

  &.is-open {
    visibility: visible;
    display: block;
  }
}

@mixin foundation-dropdown {
  .dropdown-pane {
    @include dropdown-container;
  }

  @each $name, $size in $dropdown-sizes {
    .dropdown-pane.#{$name} {
      width: $size;
    }
  }
}