From: Jason Woofenden <jason@jasonwoof.com>
Date: Wed, 15 Oct 2014 21:56:31 +0000 (-0400)
Subject: add stylus-helpers.styl
X-Git-Url: https://jasonwoof.com/gitweb/?p=wfpl.git;a=commitdiff_plain;h=cff1e4736b4c968e1b8ed77065587291c8319720

add stylus-helpers.styl
---

diff --git a/stylus-helpers.styl b/stylus-helpers.styl
new file mode 100644
index 0000000..06ecac7
--- /dev/null
+++ b/stylus-helpers.styl
@@ -0,0 +1,155 @@
+// Copyright 2014 Jason Woofenden -- Public Domain (CC0)
+
+// This file contains helpers for using stylus in your project.
+//
+// Put something like this in your styl.styl:
+//     @require 'code/wfpl/stylus-helpers.styl'
+
+
+// set units to px if it doesn't have a unit already
+_px(i)
+	unit(i) == '' ? unit(i, px) : i
+
+
+vendors = webkit moz o ms official
+
+border-radius()
+	for vendor in vendors
+		if vendor == official
+			border-radius: arguments
+		else
+			-{vendor}-border-radius: arguments
+// FIXME add box shadow and text shadow?
+
+// helper function
+_pos(type, args)
+	position: unquote(type)
+	for i in (0...length(args))
+		if not args[i] is a 'unit'
+			{args[i]}: args[i + 1] is a 'unit' ? args[i + 1] : 0
+
+// you can pass directions and units, or just directions. Examples:
+//     absolute: top 20px left 0
+//     fixed: top right
+//     relative: top: -4px
+absolute()
+	_pos('absolute', arguments)
+fixed()
+	_pos('fixed', arguments)
+relative()
+	_pos('relative', arguments)
+
+// 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)
+	text-align justify
+	& > *
+		display inline-block
+		relative top line_height
+	&:before
+		content ''
+		display block
+		width 100%
+		margin-bottom -(line_height)
+	&:after
+		content ''
+		display inline-block
+		width 100%
+
+// image layout: left column has normal, right column hover versions
+//
+// arguments: width/height are pixel dimensions of a single sprite
+//
+// markup: put classes n1, n2, etc on the items.
+//
+// Example
+//
+//     html:
+//         <nav>
+//             <ul>
+//                 <li class="n1">home</li>
+//                 <li class="n2">contact</li>
+//             </ul>
+//         </nav>
+//     styl:
+//         nav li
+//             sprite-rollover "images/nav.png" 150 35 2
+sprite-rollover(image, width, height, count)
+	width = unit(width, px)
+	height = unit(width, px)
+	width width
+	height height
+	background: transparent url(image) top left no-repeat;
+	for n in (1..count)
+		&.n{n}
+			y = (2px - n * 35px)
+			background-position 0 y
+			&:hover
+				background-position -(width) 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
+// name them with "-top", "-mid" and "-bot" suffixes (right before the file
+// extension.) then pass a filepath as the first argument to this function
+// which does not have a suffix.
+//
+// Example:
+//
+//     image files:
+//         i/foo-top.png  (900x20)
+//         i/foo-mid.png  (900xwhatever)
+//         i/foo-bot.png  (900x30)
+//
+//     dom layout: <div id="expando"><div><div><div>...</div></div></div></div>
+//
+//     Stylus:
+//
+//         #expando
+//            mangin: 10px auto;
+//            width: 900px;
+//            background-vertical-stretch("i/foo.png", 20, 30)
+//
+//     Notes:
+//
+//         You can (optionally) pass 1-4 additional arguments which
+//         (effectively) add padding to the inner most div. The default is to
+//         have the height and width of the inner div match exactly the outer
+//         one. Parameters you specify are relative to that (not the section
+//         filled with the "-mid" image).
+background-vertical-stretch(image, top-height, bottom-height, top-pad = 0, right-pad = top-pad, bottom-pad = top-pad, left-pad = right-pad)
+	top-height = _px(top-height)
+	bottom-height = _px(bottom-height)
+	top-pad = _px(top-pad)
+	right-pad = _px(right-pad)
+	bottom-pad = _px(bottom-pad)
+	left-pad = _px(left-pad)
+	ext = extname(image)
+	path = pathjoin(dirname(image), basename(image, ext))
+
+	// bottom image (outermost block)
+	background transparent url(path + '-bot' + ext)
+	padding-bottom bottom-height + 1 // +1 to prevent margin collapsing
+	> *
+		background transparent url(path + '-top' + ext) 0 0 no-repeat
+		padding-top top-height + 1 // +1 to prevent margin collapsing
+	> * > *
+		background transparent url(path + '-mid' + ext) 0 0 repeat-y;
+		margin-top -1px; // correct for above +1 from top
+		margin-bottom -1px; // correct for above +1 from bottom
+		padding 1px; // to prevent margin collapsing
+	> * > * > *
+		// all "2px" below are to correct for 1px above padding and below
+		padding 1px;
+		margin-top 2px - top-height + top-pad
+		margin-left: left-pad - 2px
+		margin-right: right-pad - 2px
+		margin-bottom: 2px - bottom-height + bottom-pad
+		background transparent;
+
+li-reset()
+	margin 0
+	padding 0
+	list-style none