Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Navigation icons with scalable sprite image
@mixin control-icon($dir, $size:76px) {
$icons-count: 4;
width: $size;
height: $size;
display: inline-block;
background: url(../img/ico-controls.png);
background-size: ($size*2) ($size*$icons-count);
background-repeat: no-repeat;
cursor: pointer;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
@if $dir == up {
background-position: 0 0;
} @else if $dir == down {
background-position: 0 (-$size);
} @else if $dir == left {
background-position: 0 (-$size*2);
} @else {
background-position: 0 (-$size*3);
}
&:hover {
@if $dir == up {
background-position: (-$size) 0;
} @else if $dir == down {
background-position: (-$size) (-$size);
} @else if $dir == left {
background-position: (-$size) (-$size*2);
} @else {
background-position: (-$size) (-$size*3);
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.