// 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; } }
}