zhdk/madek

/**
 * ## Dropdowns `.ui-dropdown`
 *
 * .stick-right   - Right-positioned ui-drop-menu
 *
 * Styleguide 6.11

.ui-dropdown,
.ui-dropup
  position: relative

// Drop Ups

.ui-dropup .ui-drop-menu
  top: auto
  bottom: 100%
  margin-bottom: 1px
  z-index: 3000

/**
 *  Toggle
 *-----------------------------------------

.ui-drop-toggle
  &:active,
  &:focus
    background-image: none
    outline: 0

/**
 *  Menu
 *-----------------------------------------

.ui-drop-menu
  +border-radius($border-radius-s)
  +box-shadow(0 1px 3px $darken-more)
  +min-dimension(220px, auto)
  +position-top-left(100%, 0)
  display: none
  background: $mono-bright
  margin: $space-x 0
  padding: 0
  text-align: left
  z-index: 2000
  .ui-drop-item i,
  .ui-drop-icon
    margin-right: $space-x
    position: relative
    top: 2px

// Right-aligned variation

.ui-dropdown.stick-right,
.ui-dropup.stick-right
  .ui-drop-menu
    right: 0
    left: auto

// inlineblock to prevent breaking when in sequence with normal .button
.ui-dropdown.stick-right
  display: inline-block

/**
 *  Menu items
 *-----------------------------------------

// Polishing first/last child

.ui-drop-item
  display: block
  &:first-child
    +box-shadow(none)
    +border-top-radius($border-radius-m)
  &:last-child
    +box-shadow(none)
    +border-bottom-radius($border-radius-m)
    border: none

// Link style

.ui-drop-item a
  +single-text-shadow(none)
  padding: $space-x $space-s
  color: $mono-dark
  display: block
  list-style: none
  padding: $space-x $space-s
  white-space: nowrap
  &:hover
    background: $lighten-more
    color: $mono-dark
    text-decoration: none
  &:active
    +box-shadow(inset 0 1px 2px $darken)
    background: $darken-less
    color: $mono-dark

.ui-drop-item:first-child a
  +border-top-radius($border-radius-m)

.ui-drop-item:last-child a
  +border-bottom-radius($border-radius-m)