gistfile1.sass

@import "object/*.png"
@import "actions/*.png"
@include all-object-sprites
@include all-actions-sprites

/*
  A mixin to create sprited icons that respond to
  :hover, :active, and .active with a different image.
  Meant to be paired with icons generated in the images-neue folder.

  TODO: This really isn't object icon specific.

   Basic Usage
   - Use a basic call to the the mixin to directly style an element.
   ===========

   .contact-widget
     +mini-icon // Sets this element to 20px
     +stateful-object-icon('contact-mini')

   Yield
   -----
    .contact-widget {
      background: url('/path/to/object-icon-sprite.png') no-repeat;
      background-position: 0 -280px;
    }
    .contact-widget:focus, .contact-widget:hover,
    .contact-widget:active, .contact-widget.active {
      background-position: 0 -320px;
    }

  Advanced Usage
  - Pass the optional selector parameter to scope the icon's application.
  ==============

  .contact-list-item
    height: 100px
    width: 300px
    color: lightGrey
    // etc. The takeaway here is that you want to insert the icon
    // into a child of the element rather than the root.
    +stateful-object-icon('contact-mini', '.mini-square')

  Yield
  -----
    .contact-list-item {
      height: 100px;
      width: 300px;
      color: lightGrey;
    }
    .contact-list-item .mini-square {
      background: url('/path/to/object-icon-sprite.png') no-repeat;
      background-position: -480px;
    }
    .contact-list-item:hover .mini-square,
    .contact-list-item:active, .mini-square,
    .contact-list-item.active .mini-square {
      background-position: 0 -500px;
    }



=stateful-object-icon($name, $selector: "&", $selected-state: "highlighted")
  #{$selector}
    +object-sprite($name)
  &:focus, &:hover, &:active, &.active
    #{$selector}
      +object-sprite($name + -active)
  &.selected
    #{$selector}
      +object-sprite($name + "-#{$selected-state}")

=stateful-action-icon($name, $selector: "&")
  #{$selector}
    +actions-sprite($name)
  &:focus, &:active, &.active, &.selected
    #{$selector}
      +actions-sprite($name + -active)