X-Git-Url: https://jasonwoof.com/gitweb/?p=wfpl.git;a=blobdiff_plain;f=stylus-helpers.styl;h=b3769a7db939cfd15d2c4eba233b8da8af12fbb2;hp=3d7373a58284f421133088558aa039be60ccb7c7;hb=15459c86d0996ab3037b1738a8be6efd378c1258;hpb=c25c54f65fe42aeb61caab597e2747fdc0ef1225 diff --git a/stylus-helpers.styl b/stylus-helpers.styl index 3d7373a..b3769a7 100644 --- a/stylus-helpers.styl +++ b/stylus-helpers.styl @@ -3,7 +3,7 @@ // This file contains helpers for using stylus in your project. // // Put something like this in your styl.styl: -// @require 'code/wfpl/stylus-helpers.styl' +// @require 'inc/wfpl/stylus-helpers.styl' // set units to px if it doesn't have a unit already @@ -92,24 +92,28 @@ space-evenly(line_height = 1.2em) // styl: // nav li // sprite-rollover "images/nav.png" 150 35 2 -sprites-rollover(image, width, height, count, h-offset = 0) +sprites-rollover(image, width, height, count, v-offset = 0, h-offset = 0) width: unit(width, px) height: unit(height, px) - background: transparent url(image) top left no-repeat; + background-image: url(image) + background-position: top left + background-repeat: no-repeat; for n in (0...count) &.n{n} - y = - (@height * n) - h-offset - background-position 0 y + y = - (@height * n) - unit(v-offset, px) + background-position (0 - unit(h-offset, px)) y &:hover - background-position -(@width) y + background-position (0 - unit(h-offset, px) - @width) y // see sprites-rollover -sprites(image, height, count, h-offset = 0) +sprites(image, height, count, v-offset = 0, h-offset = 0) height: unit(height, px) - background: transparent url(image) top left no-repeat; + background-image: url(image) + background-position: top left + background-repeat: no-repeat; for n in (0...count) &.n{n} - y = - (@height * n) - h-offset - background-position 0 y + y = - (@height * n) - unit(v-offset, px) + background-position (0 - unit(h-offset, px)) y // Styling for a variable height element with an image background where the // middle repeats vertically. You must split your image into three images, and