Got questions, comments, patches, etc.?
Contact Jason Woofenden
gitweb
/
wfpl.git
/ commitdiff
commit
grep
author
committer
pickaxe
?
search:
re
summary
|
shortlog
|
log
|
commit
| commitdiff |
tree
raw
|
patch
|
inline
| side by side (parent:
47d8b47
)
stylus: expand on sprites macros
author
Jason Woofenden
<jason@jasonwoof.com>
Thu, 13 Nov 2014 23:19:17 +0000
(18:19 -0500)
committer
Jason Woofenden
<jason@jasonwoof.com>
Thu, 13 Nov 2014 23:19:17 +0000
(18:19 -0500)
stylus-helpers.styl
patch
|
blob
|
history
diff --git
a/stylus-helpers.styl
b/stylus-helpers.styl
index
fc70579
..
ab65706
100644
(file)
--- a/
stylus-helpers.styl
+++ b/
stylus-helpers.styl
@@
-92,18
+92,24
@@
space-evenly(line_height = 1.2em)
// styl:
// nav li
// sprite-rollover "images/nav.png" 150 35 2
// styl:
// nav li
// sprite-rollover "images/nav.png" 150 35 2
-sprite-rollover(image, width, height, count)
- width = unit(width, px)
- height = unit(height, px)
- width width
- height height
+sprites-rollover(image, width, height, count, h-offset = 0)
+ width: unit(width, px)
+ height: unit(height, px)
background: transparent url(image) top left no-repeat;
for n in (1..count)
&.n{n}
background: transparent url(image) top left no-repeat;
for n in (1..count)
&.n{n}
- y = (height - n * height)
+ y = - (@height * ( n - 1)) - h-offset
background-position 0 y
&:hover
background-position 0 y
&:hover
- background-position -(width) y
+ background-position -(@width) y
+// see sprites-rollover
+sprites(image, height, count, h-offset = 0)
+ height: unit(height, px)
+ background: transparent url(image) top left no-repeat;
+ for n in (1..count)
+ &.n{n}
+ y = - (@height * ( n - 1)) - h-offset
+ background-position 0 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
// Styling for a variable height element with an image background where the
// middle repeats vertically. You must split your image into three images, and