test/styles/website/_dropdown.scss

//  #   Dropdown        
//      Defines styling for dropdowns

//  *******************************************************
//  ##  Variables
//  *******************************************************

$dropdown-zindex                    : 100 !default;
$dropdown-divider-color             : $color-border !default;
$dropdown-background                : $sidebar-background !default;
$dropdown-button-color              : darken($color-button, 15%) !default;
$dropdown-border-color              : $color-border !default;
$dropdown-button-hover-color        : $color-button-hover !default;
$dropdown-border-radius             : 1px !default;


//  *******************************************************
//  ##  Dropdown div
//  *******************************************************

.dropdown
{
    position: relative;
}

.dropdown-menu
{
    position: absolute;
    top: 100%;
    left: 0;
    z-index: $dropdown-zindex;
    display: none; // none by default, but block on "open" of the menu
    float: left;
    min-width: 160px;
    padding: 0;
    margin: 2px 0 0; // override default ul
    list-style: none;
    font-size: $font-size-base;
    background-color: $dropdown-background;
    border: 1px solid $dropdown-border-color;
    border-radius: $dropdown-border-radius;
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
    background-clip: padding-box;
}

.dropdown-menu.open { display:block; }

.dropdown-menu.dropdown-left
{
    left: auto;
    right: 4%;
}

.dropdown-menu.dropdown-left .dropdown-caret {
    right: 14px;
    left: auto;
}

//  *******************************************************
//  ##  Dropdown caret
//  *******************************************************

.dropdown-caret
{
    position: absolute;
    top: -8px;
    left: 14px;
    width: 18px;
    height: 10px;
    float: left;
    overflow: hidden;
}

.dropdown-caret .caret-outer
{
    position: absolute;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 9px solid rgba(0,0,0,0.1);
    height: auto;
    left: 0;
    top: 0;
    width: auto;
    display: inline-block;
    margin-left: -1px;
}

.dropdown-caret .caret-inner
{
    position: absolute;
    display: inline-block;
    margin-top: -1px;
    top: 0;
    top: 1px;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 9px solid $dropdown-background;
}

//  *******************************************************
//  ##  Dropdown buttons
//  *******************************************************

.dropdown .buttons
{
    border-bottom: 1px solid $color-border;

    /* Clear fix */
    &:before,
    &:after
    {
        content: " ";
        display: table;
    }
    &:after
    {
       clear: both;
    }
}
   
.dropdown .buttons:last-child { border-bottom: none; }

.dropdown .button 
{
    border: 0;
    background-color: transparent;
    color: $dropdown-button-color;
    width: 100%;
    text-align: center;
    float: left;
    line-height: $line-height-base;
    padding: 8px 4px;
}

.dropdown .button:hover { color: $dropdown-button-hover-color; }

.dropdown .button:focus, 
.dropdown .button:hover
{
    outline: none;
}

.dropdown .button.size-2 { width: 50%; }
.dropdown .button.size-3 { width: 33%; }