// 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
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
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
unless parent_width // should only happen at top level
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'
+ for k, v in css_rules
+ if 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
}
top.width = wfpl_columns_helper(top, hash, '', null, null)
return top
+
+// internal helper
+_pct_pos(offset, width, sheet_width)
+ if width is sheet_width
+ return 0
+ ratio = offset / (sheet_width - width)
+ if ratio is 0
+ return 0
+ return unit(ratio * 100, '%')
+
+// wfpl_spritesheets documentation/example:
+//
+// wfpl_spritesheets({
+// main: {
+// image: sha1['images/sprites.min.svg']
+// y_origin: 'bottom' // invert y coordinates below (thx inkscape)
+// w: 200 // width of document (whatever units)
+// h: 400 // height of document (whatever units)
+// sprites: {
+// ".icon": {
+// y: 399 // top (regardless of y_origin)
+// w: 48 // width of sprite (in doc coords)
+// h: 48 // height of sprite (in doc coords)
+// gap: 2 // space _between_ rows/columns
+// hover: 'right' // can be 'right' or 'down', meaning: direction to
+// // move in spritesheet to find the ":hover" graphic
+// column: 'three' 'four' 'five' 'six' // key can be 'column' or 'row'
+// // values are postfix for class names
+// }
+// ".logo": {
+// y: 100
+// w: 200
+// h: 50
+// }
+// }
+// }
+// })
+//
+// HTML:
+// <div class="logo"></span>
+// <span class="icon icon_three"></span>
+// <span class="icon icon_four"></span>
+//
+// CSS:
+// .icon
+// display: inline-block
+// width: 10%
+wfpl_spritesheets(hash)
+ for unused_name, sheet in hash
+ for selector, args in sheet.sprites
+ if sheet.y_origin is 'bottom'
+ y = sheet.h - args.y
+ else
+ y = args.y
+ if args.x
+ x = args.x
+ else
+ x = 0
+ if args.gap
+ gap = args.gap
+ else
+ gap = 0
+ w = args.w
+ h = args.h
+ if args.hover is 'right'
+ hdx = args.w + gap
+ hdy = 0
+ else if args.hover is 'down'
+ hdx = 0
+ hdy = args.h + gap
+ if not (args.column or args.row)
+ selector_before = selector + ":before"
+ {selector_before}
+ content: ''
+ display: block
+ background-position: _pct_pos(x, w, sheet.w) _pct_pos(y, h, sheet.h)
+ background-image: url((sheet['image']))
+ background-size: unit(sheet['w'] / w * 100, '%') auto
+ padding-top: unit(h / w * 100, '%')
+ selector_hover_before = selector + ":hover:before"
+ if args.hover
+ {selector_hover_before}
+ background-position: _pct_pos(x + hdx, w, sheet.w) _pct_pos(y + hdy, h, sheet.h)
+ else
+ names = ()
+ if args.column
+ dx = 0
+ dy = args.h + gap
+ for n in args.column
+ push(names, n)
+ else if args.row
+ dx = args.w + gap
+ dy = 0
+ for n in args.row
+ push(names, n)
+ d = 0
+ for postfix in names
+ selector_n_before = selector + "_" + postfix + ":before"
+ {selector_n_before}
+ background-position: _pct_pos(x + d * dx, w, sheet.w) _pct_pos(y + d * dy, h, sheet.h)
+ if args.hover
+ selector_n_hover_before = selector + "_" + postfix + ":hover:before"
+ {selector_n_hover_before}
+ background-position: _pct_pos(x + hdx + d * dx, w, sheet.w) _pct_pos(y + hdy + d * dy, h, sheet.h)
+ d += 1
+ selector_before = selector + ":before"
+ {selector_before}
+ content: ''
+ display: block
+ background-image: url((sheet['image']))
+ background-size: unit(sheet['w'] / w * 100, '%') auto
+ padding-top: unit(h / w * 100, '%')
+ return ret