148 lines
3.1 KiB
Stylus
148 lines
3.1 KiB
Stylus
// Tâmia © 2013 Artem Sapegin http://sapegin.me
|
|
// Images, sprites, Retina support
|
|
|
|
//
|
|
// Configuration
|
|
//
|
|
|
|
// Enable Retina support (default: false).
|
|
retinafy ?= false
|
|
|
|
// Path to calculate file system image path based on CSS path (default: .).
|
|
images_relative_root ?= '.'
|
|
|
|
// Default sprite image file (default: ../build/sprite.png).
|
|
sprite_image ?= '../build/sprite.png';
|
|
sprite_image = sprite_image + '?' + sprite_fingerprint if sprite_fingerprint
|
|
|
|
// Sprite step size (default: 20px).
|
|
sprite_step ?= 20px;
|
|
|
|
|
|
//
|
|
// Functions
|
|
//
|
|
|
|
// background-image with Retina variant.
|
|
//
|
|
// path - Image file path.
|
|
// x - background-position x (default: 0).
|
|
// y - background-position y (default: 0).
|
|
//
|
|
// Retina image file should be named path@2x.png.
|
|
if retinafy
|
|
image(path, x=0, y=0)
|
|
background: url(path) x y
|
|
+retina()
|
|
ext = extname(path)
|
|
hdpath = dirname(path) + '/' + basename(path, ext) + '@2x' + ext
|
|
background: url(hdpath) x y
|
|
background-size: image-size(pathjoin(images_relative_root, path))
|
|
else
|
|
image(path, x=0, y=0)
|
|
background: url(path) x y
|
|
|
|
|
|
// Sprite (to use in pseudo element).
|
|
//
|
|
// Sprite generated by grunt-squirrelsprite:
|
|
// img - Sprite image variable.
|
|
//
|
|
// Manually created sprite:
|
|
// x - Horizontal position in sprite grid.
|
|
// y - Vertical position in sprite grid.
|
|
// w - Sprite width, pixels.
|
|
// h - sprite height, pixels.
|
|
//
|
|
// Example:
|
|
//
|
|
// .elem
|
|
// sprite(sprite_pony);
|
|
//
|
|
// .elem2
|
|
// sprite(5, 6, 36, 22);
|
|
sprite(img)
|
|
if not @content and match(":(before|after)", selector())
|
|
content: ""
|
|
if not @display
|
|
display: inline-block
|
|
if length(img) > 1
|
|
image(sprite_image, img[0], img[1])
|
|
width: img[2]
|
|
height: img[3]
|
|
else
|
|
image(sprite_image, sprite-x(arguments[0]), sprite-y(arguments[1]))
|
|
width: arguments[2]
|
|
height: arguments[3]
|
|
|
|
// Horizontal position of sprite image.
|
|
//
|
|
// x - Horizontal position in sprite grid.
|
|
//
|
|
// Returns pixels.
|
|
sprite-x(x)
|
|
(-((x - 1)*sprite_step+1));
|
|
|
|
// Vertical position of sprite image.
|
|
//
|
|
// y - Vertical position in sprite grid.
|
|
//
|
|
// Returns pixels.
|
|
sprite-y(y)
|
|
(-((y - 1)*sprite_step+1));
|
|
|
|
// background-position for sprite.
|
|
//
|
|
// x - Horizontal position in sprite grid.
|
|
// y - Vertical position in sprite grid.
|
|
//
|
|
// Example:
|
|
//
|
|
// .elem
|
|
// sprite-bg()
|
|
// sprite-pos(5,6)
|
|
// sprite-pos(sprite_pony-hover)
|
|
sprite-pos(img)
|
|
if length(img) > 1
|
|
background-position: img[0] img[1]
|
|
else
|
|
background-position: sprite-x(img[0]) sprite-y(img[1])
|
|
|
|
// background-image for sprite.
|
|
//
|
|
// Sprite generated by grunt-squirrelsprite:
|
|
// img - Sprite image variable.
|
|
//
|
|
// Manually created sprite:
|
|
// x - Horizontal position in sprite grid (default: 0).
|
|
// y - Vertical position in sprite grid (default: 0).
|
|
sprite-bg(x=0, y=0)
|
|
image(sprite_image, x, x)
|
|
|
|
// Element width for sprite.
|
|
//
|
|
// Returns pixels
|
|
sprite-width(img)
|
|
img[2]
|
|
|
|
// Element height for sprite.
|
|
//
|
|
// Returns pixels
|
|
sprite-height(img)
|
|
img[3]
|
|
|
|
// Element width/height for sprite.
|
|
//
|
|
// Example:
|
|
//
|
|
// .elem
|
|
// sprite-size(sprite_pony);
|
|
sprite-size(img)
|
|
width: sprite-width(img)
|
|
height: sprite-height(img)
|
|
|
|
// Shifts element half height to top
|
|
//
|
|
sprite-shift-top(img)
|
|
margin-top: (-(round(sprite-height(img)/2)))
|