stylus: fix sprite() so it doesn't require .n0 class

[wfpl.git] / stylus_helpers.styl

diff --git a/stylus_helpers.styl b/stylus_helpers.styl
index e6df86e..85f8d12 100644 (file)
--- a/stylus_helpers.styl
+++ b/stylus_helpers.styl
@@ -82,7 +82,8 @@ linear_scale_calc(pb, ps, cb, cs)
 // 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.2)
+       line_height = unit(line_height, em)
        text-align: justify
        & > *
                display: inline-block
@@ -149,7 +150,14 @@ sprites(image, height, count, v_offset = 0, h_offset = 0)
                        y = - (@height * n) - unit(v_offset, px)
                        background-position: (0 - unit(h_offset, px)) y
 sprite(image, height, v_offset = 0, h_offset = 0)
-       sprites(image, height, 1, v_offset, h_offset)
+       height: unit(height, px)
+       if image[1]
+               background: url(image[0])
+               background: url(image[1]), linear-gradient(transparent, transparent);
+       else
+               background-image: url(image)
+       background-repeat: no-repeat;
+       background-position: (0 - unit(h_offset, px)) (0 - unit(v_offset, px))
 
 // Styling for a variable height element with an image background where the
 // middle repeats vertically. You must split your image into three images, and
@@ -368,15 +376,14 @@ wfpl_columns_helper(top, node, selector, parent_width, expected_width)
                                left_width += v
                        if match('^((margin|padding)-right)|(border-right-width)$', k)
                                right_width += v
-                       if k != 'type' && k != 'child' && k != 'name' && k != 'outer-width' && k != 'outer_width'
+                       if k != 'type' && k != 'child' && k != 'name' && k != 'outer_width'
                                css_rules[k] = v
                for k, v in node
                        if k == 'width'
                                width = v
-                               outer_width = left_width + v + right_width
-                       if k == 'outer-width' && k == 'outer_width'
-                               outer_width = k
-                               width = v - left_width - right_width
+                       if k == 'outer_width'
+                               outer_width = v
+                               css_rules['width'] = v - left_width - right_width
                if (!width) && (!outer_width)
                        if parent_width
                                outer_width = parent_width
@@ -390,7 +397,7 @@ wfpl_columns_helper(top, node, selector, parent_width, expected_width)
                        parent_width = outer_width
                top['css'][selector] = css_rules
                for k, v in node
-                       if k != 'outer-width' && k != 'outer_width' && k != 'border-width' && k != 'border-left-width' && k != 'border-right-width'
+                       if k != 'outer_width' && k != 'border-width' && k != 'border-left-width' && k != 'border-right-width'
                                if typeof(v) == 'unit' && unit(v) == 'px'
                                        responsive_css_rules[k] = floor(unit((v / parent_width) * 100, '%'), 4)
                top['responsive_css'][selector] = responsive_css_rules