_components.dropdowns.scss

/*------------------------------------*\
    DROPDOWNS
\*------------------------------------*/
// Based on the CSS from this blog post on CSS Wizardry:
// http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/

// Predefine the variables below in order to alter and enable specific features.
$inuit-dropdown-inter-radius:   $inuit-btn-radius !default;
$inuit-dropdown-max-width:      250px;

.dropdown {
  list-style: none;
  margin-left: 0;
  overflow: visible;
  float: left;
  // width: 100%;

  &:hover,
  &:active,
  &:focus {
    & > a {
      @if ($inuit-dropdown-inter-radius == 0) {
        border-bottom-left-radius: $inuit-dropdown-inter-radius;
        border-bottom-right-radius: $inuit-dropdown-inter-radius;
      }
    }

    & > ul {
      display: block; /* Bring back on-screen when needed */
    }
  }

}

.dropdown li {
  float: left;
  position: relative;
}

.dropdown ul {
  @extend .btn;
  list-style: none;
  padding: 0;
  position: absolute;
  display: none;
  float: left;
  border: none;

  min-width: 100%;
  max-width: $inuit-dropdown-max-width;
  // min-width: 160px;
  // width: auto;

  border-top-left-radius: $inuit-dropdown-inter-radius;
  border-top-right-radius: $inuit-dropdown-inter-radius;

  @include attention() {
      background-color: $color-btn;
      border-color: $color-btn;
  }

}

.dropdown ul li {
  float: left;
  display: block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  padding: $inuit-btn-padding - $inuit-btn-border-width  double($inuit-btn-padding) - $inuit-btn-border-width; /* [7] */

  &:first-child {
    @if($inuit-dropdown-inter-radius != 0) {
      border-top-left-radius: $inuit-btn-radius;
      border-top-right-radius: $inuit-btn-radius;
    }
  }

  &:last-child {
    @if($inuit-btn-radius != 0) {
      border-bottom-left-radius: $inuit-btn-radius;
      border-bottom-right-radius: $inuit-btn-radius;
    }
  }

  @include attention() {
      background-color: darken($color-btn, 10%);
  }

}

.dropdown a {
  &,
  &:hover,
  &:active,
  &:focus {
      text-decoration: none; /* [4] */
      color: $inuit-btn-color;
  }

}

.dropdown li:hover,
.dropdown li:active,
.dropdown li:focus {
  & > a {
    border-bottom-left-radius: $inuit-dropdown-inter-radius;
    border-bottom-right-radius: $inuit-dropdown-inter-radius;
  }

  & > ul {
    display: block; /* Bring back on-screen when needed */
  }
}

.dropdown > li > a::after {
  font-family: "FontAwesome";
  content:" \f0d7";
}

.dropdown > a::after {
  font-family: "FontAwesome";
  content:" \f0d7";
}

components.dropdowns.md

Dropdowns

Pure CSS dropdowns for inuitcss, based on [this post on CSS WIzardry] (http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu). By default, the corners between the button and the dropdown have the same radius as the inuitcss button radius, but setting $inuit-dropdown-inter-radius to 0 will eliminate the radius.