/*

Dropdowns

Toggleable, contextual menu for displaying lists of links.

Looking at just the dropdown menu, here's the required HTML. You need to wrap the dropdown's trigger and the dropdown menu within `.dropdown`. Then just create the menu.

Script required: *rapido.js*.

Markup:
<div class="dropdown">
  <a href="#" class="btn btn--default dropdown__toggle " data-toggle="dropdown">
    Dropdown
    <span class="dropdown__caret"></span>
  </a>
  <ul class="dropdown__menu ">
    <li><a tabindex="-1" href="#">Action</a></li>
    <li><a tabindex="-1" href="#">Another action</a></li>
    <li><a tabindex="-1" href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>
<div class="dropdown">
  <a href="#" class="btn btn--default dropdown__toggle " data-toggle="dropdown">
    Dropdown
    <span class="dropdown__caret"></span>
  </a>
  <ul class="dropdown__menu pull-right ">
    <li><a tabindex="-1" href="#">Action</a></li>
    <li><a tabindex="-1" href="#">Another action</a></li>
    <li><a tabindex="-1" href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>
<script>$('.dropdown').rapido_Dropdown();</script>

Include this js after including rapido.js.

    $('.dropdown').rapido_Dropdown();

**Options** (with default values):

    event:         click (click, hover)
    wrapperClass:  .dropdown
    togglerClass:  .dropdown__toggle

Styleguide 7

*/

@if $dropdowns {

    .dropdown,
    .dropdown__toggle {
        position: relative;
        @extend %display-inline-block;
    }

    .dropdown__toggle:focus { outline: 0; }

/*

Dropdown arrow/caret

A simple helper class is available to add an arrow for the dropdown button.

Markup: <span class="dropdown__caret"></span>

Styleguide 7.1

*/

    .dropdown__caret {
        @extend %caret !optional;
    }

/*

Dropdown menu

List of the links to show in the dropdown.


    <ul class="dropdown__menu ">
      <li><a tabindex="-1" href="#">Action</a></li>
      <li><a tabindex="-1" href="#">Another action</a></li>
      <li><a tabindex="-1" href="#">Something else here</a></li>
      <li class="divider"></li>
      <li><a tabindex="-1" href="#">Separated link</a></li>
    </ul>

Styleguide 7.2

*/

    .dropdown__menu {
        @extend %dropdown !optional;
        @extend .transition;
        @include border-bottom-radius($base-border-radius);
        @include opacity(0);
        @include position(absolute, 100% 0 0 0px);
        border-style: solid;
        border-width: $input-border;
        display/*\**/: none\9; // Ugly IE8 Hack
        @extend %float-left;
        list-style: none;
        margin: -$input-border 0 0 0;
        max-height: 0;
        min-width: 10em;
        overflow: hidden;
        z-index: $zindex-dropdown;
        max-width: em($dropdowns-width);


        &[data-content] { min-width: em(600px); }

        &.pull-right {
            right: 0;
            left: auto;
        }

        // Links list inside the dropdown
        > li > a,
        > li > label {
            clear: both;
            @extend %display-block;
            @extend %font-weight-normal;
            white-space: nowrap;
        }

        > li > a { padding: $dropdowns-padding;}
        > li > label { padding: nth($dropdowns-padding, 1) nth($dropdowns-padding, 2) nth($dropdowns-padding, 1) (nth($dropdowns-padding, 2) + em($checkbox-padding-left) ) ;}

        > li:last-child > a,
        > li:last-child > label {
            border-bottom: 0;
        }

    }

    .dropdown__menu > li > a:hover,
    .dropdown__menu > li > a:focus {
        @extend %text-decoration-none;
    }

    .dropdown__menu > .active > a,
    .dropdown__menu > .active > a:hover,
    .dropdown__menu > .active > a:focus {
        @extend %text-decoration-none;
        outline: 0;
    }

    .dropdown__menu > .disabled > a,
    .dropdown__menu > .disabled > a:hover,
    .dropdown__menu > .disabled > a:focus {
        color: $grayLight;
    }

    .dropdown__menu > .disabled > a:hover,
    .dropdown__menu > .disabled > a:focus {
        @extend %text-decoration-none;
        background-color: transparent;
        background-image: none;
        @extend %cursor-default;
    }

// Dropdown open

    .dropdown.open {
        z-index: $zindex-dropdown ;

        .dropdown__toggle {
            @extend %dropdown--open !optional;
            @include border-bottom-radius(0 !important);
            z-index: $zindex-dropdown + 1;
        }

        .dropdown__menu {
            @include opacity(1);
            display/*\**/: block\9; // Ugly IE8 Hack
            max-height: em($dropdowns-height);
        }

    }


}