Skip to content

Instantly share code, notes, and snippets.

@arbales
Created Nov 14, 2012
Embed
What would you like to do?
@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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment