stylus-helpers: fix space-evenly, add dimensions

[wfpl.git] / stylus-helpers.styl

diff --git a/stylus-helpers.styl b/stylus-helpers.styl
index 06ecac7..fc70579 100644 (file)
--- a/stylus-helpers.styl
+++ b/stylus-helpers.styl
@@ -10,16 +10,26 @@
 _px(i)
        unit(i) == '' ? unit(i, px) : i
 
-
-vendors = webkit moz o ms official
-
+// transparently support vender-specific tags
 border-radius()
-       for vendor in vendors
-               if vendor == official
-                       border-radius: arguments
-               else
-                       -{vendor}-border-radius: arguments
-// FIXME add box shadow and text shadow?
+       -webkit-border-radius: arguments
+       border-radius: arguments
+box-shadow()
+       -webkit-box-shadow: arguments
+       box-shadow: arguments
+box-sizing()
+       -webkit-box-sizing: arguments
+       -moz-box-sizing: arguments
+       box-sizing: arguments
+user-select()
+       -webkit-user-select: arguments
+       -moz-user-select: arguments
+       -ms-user-select: arguments
+       user-select: arguments
+
+// map "whitespace:" to "white-space:"
+whitespace()
+       white-space: arguments
 
 // helper function
 _pos(type, args)
@@ -31,7 +41,7 @@ _pos(type, args)
 // you can pass directions and units, or just directions. Examples:
 //     absolute: top 20px left 0
 //     fixed: top right
-//     relative: top: -4px
+//     relative: top -4px
 absolute()
        _pos('absolute', arguments)
 fixed()
@@ -39,12 +49,17 @@ fixed()
 relative()
        _pos('relative', arguments)
 
+// Specify width and height on the same line
+dimensions(w, h)
+       width: _px(w)
+       height: _px(h)
+
 // Make children of this element inline-blocks that are spaced evenly accross.
 //
 // To create a minimum distance between: don't use word-spacing, it's broken in
 // firefox. Instead, try padding on the children and negative margin on the
 // parent.
-space_evenly(line_height = 1.2em)
+space-evenly(line_height = 1.2em)
        text-align justify
        & > *
                display inline-block
@@ -79,13 +94,13 @@ space_evenly(line_height = 1.2em)
 //             sprite-rollover "images/nav.png" 150 35 2
 sprite-rollover(image, width, height, count)
        width = unit(width, px)
-       height = unit(width, px)
+       height = unit(height, px)
        width width
        height height
        background: transparent url(image) top left no-repeat;
        for n in (1..count)
                &.n{n}
-                       y = (2px - n * 35px)
+                       y = (height - n * height)
                        background-position 0 y
                        &:hover
                                background-position -(width) y