|
@import "compass/reset"; |
|
@import "compass/utilities"; |
|
@import "compass/utilities/sprites"; |
|
@import "compass/css3/background-size"; |
|
|
|
@import "stickers/*.png"; |
|
@import "stickers-retina/*.png"; |
|
@include all-stickers-sprites(true); |
|
$image-list: (sheldon, leonard, raj, penny, bbt, howard); // TODO(ssaunier): is there a way to retrieve this list programatically? |
|
|
|
@mixin retina-sprite($name, $sprites, $sprites2x, $percent) { |
|
|
|
$spritePath: sprite-path($sprites); |
|
$spriteWidth: image-width($spritePath); |
|
$spriteHeight: image-height($spritePath); |
|
$width: image-width(sprite-file($sprites, $name)); |
|
$height: image-height(sprite-file($sprites, $name)); |
|
|
|
@include background-size(ceil($spriteWidth * $percent) ceil($spriteHeight * $percent)); |
|
width: ceil($width * $percent); |
|
height: ceil($height * $percent); |
|
background-position: 0 floor(nth(sprite-position($sprites, $name), 2) * $percent); |
|
|
|
// Retina |
|
@media (#{-webkit-min-device-pixel-ratio}: #{1.5}), (#{min--moz-device-pixel-ratio}: #{1.5}), (#{-o-min-device-pixel-ratio}: #{3 / 2}), (#{min-device-pixel-ratio}: #{1.5}) { |
|
& { |
|
$position: sprite-position($sprites, $name); |
|
$position2x: sprite-position($sprites2x, $name); |
|
|
|
@if ($position != $position2x / 2) { |
|
$xpos: nth(sprite-position($sprites2x, $name), 1) * $percent / 2; |
|
$ypos: nth(sprite-position($sprites2x, $name), 2) * $percent / 2; |
|
background-position: $xpos $ypos; |
|
} |
|
|
|
background-image: sprite-url($sprites2x); |
|
} |
|
} |
|
} |
|
|
|
.stickers-sprite { |
|
display: block; |
|
border: 4px solid #EFEFEF; |
|
margin: auto; |
|
} |
|
|
|
@each $selector in $image-list { |
|
.stickers-#{$selector} { |
|
@include retina-sprite(#{$selector}, $stickers-sprites, $stickers-retina-sprites, 1); |
|
} |
|
|
|
.stickers-#{$selector}:hover, .stickers-#{$selector}.#{$selector}_hover, .stickers-#{$selector}.#{$selector}-hover { |
|
@include retina-sprite(#{$selector}_hover, $stickers-sprites, $stickers-retina-sprites, 1); |
|
} |
|
} |
|
|
|
@media (min-width: 768px) and (max-width: 979px) { |
|
@each $selector in $image-list { |
|
.stickers-#{$selector} { |
|
@include retina-sprite(#{$selector}, $stickers-sprites, $stickers-retina-sprites, 228 / 300); |
|
} |
|
|
|
.stickers-#{$selector}:hover, .stickers-#{$selector}.#{$selector}_hover, .stickers-#{$selector}.#{$selector}-hover { |
|
@include retina-sprite(#{$selector}_hover, $stickers-sprites, $stickers-retina-sprites, 228 / 300); |
|
} |
|
} |
|
} |