sass-site/source/assets/stylesheets/components/_lists.scss

// ===========================================================================
// LISTS



// ---------------------------------------------------------------------------
// LIST STYLE MIXINS



// FLOATED LIST ITEMS
@mixin horizontal-list($break-size: false,
                       $container-selector: "ul",
                       $list-selectors:     "li",
                       $last-list-selector: $list-selectors) {

  @if $break-size != false {
    #{$container-selector} { @extend %clearfix-#{$break-size}; }

    #{$list-selectors} { @extend %float-left-#{$break-size}; }

    #{$last-list-selector}:last-child {
      @extend %float-left-last-child-#{$break-size};
    }
  }

  @else {
    #{$container-selector} { @extend %clearfix; }

    #{$list-selectors} { @extend %float-left; }

    #{$last-list-selector}:last-child { @extend %float-left-last-child; }
  }
}



// DISPLAY: INLINE ON LIST ITEMS
@mixin horizontal-list-inline {
  li {
    display: inline-block;
    margin-right: $gutter-width;

    &:last-child { margin-right: 0; }
  }
}



// ---------------------------------------------------------------------------
// LIST SELECTORS

%content-list {
  @include reset-list;

  li {
    padding: {
         top: 1em;
      bottom: 1em;
    }
  }
}

%horizontal-list { @include horizontal-list; }

%horizontal-list-inline { @include horizontal-list-inline; }



// ---------------------------------------------------------------------------
// iPhone

@mixin components-lists-iPhone {
  %horizontal-list-iPhone { @include horizontal-list(iPhone); }

  %horizontal-description-list-iPhone {
    @include horizontal-list(iPhone, "dl", "dt, dd", "dd");
  }

  %horizontal-list-inline-iPhone { @include horizontal-list-inline; }
}



// ---------------------------------------------------------------------------
// SMALL TABLET

@mixin components-lists-small-tablet {
  %horizontal-list-small-tablet { @include horizontal-list(small-tablet); }

  %horizontal-list-inline-small-tablet { @include horizontal-list-inline; }
}