X-Git-Url: https://jasonwoof.com/gitweb/?p=wfpl.git;a=blobdiff_plain;f=stylus-helpers.styl;h=b3769a7db939cfd15d2c4eba233b8da8af12fbb2;hp=06ecac7ad643ec4838af12c02be5749380954840;hb=15459c86d0996ab3037b1738a8be6efd378c1258;hpb=cff1e4736b4c968e1b8ed77065587291c8319720

diff --git a/stylus-helpers.styl b/stylus-helpers.styl
index 06ecac7..b3769a7 100644
--- a/stylus-helpers.styl
+++ b/stylus-helpers.styl
@@ -3,23 +3,33 @@
 // This file contains helpers for using stylus in your project.
 //
 // Put something like this in your styl.styl:
-//     @require 'code/wfpl/stylus-helpers.styl'
+//     @require 'inc/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
-
+// 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
@@ -70,25 +85,35 @@ space_evenly(line_height = 1.2em)
 //     html:
 //         <nav>
 //             <ul>
-//                 <li class="n1">home</li>
-//                 <li class="n2">contact</li>
+//                 <li class="n0">home</li>
+//                 <li class="n1">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)
+sprites-rollover(image, width, height, count, v-offset = 0, h-offset = 0)
+	width: unit(width, px)
+	height: unit(height, px)
+	background-image: url(image)
+	background-position: top left
+	background-repeat: no-repeat;
+	for n in (0...count)
 		&.n{n}
-			y = (2px - n * 35px)
-			background-position 0 y
+			y = - (@height * n) - unit(v-offset, px)
+			background-position (0 - unit(h-offset, px)) y
 			&:hover
-				background-position -(width) y
+				background-position (0 - unit(h-offset, px) - @width) y
+// see sprites-rollover
+sprites(image, height, count, v-offset = 0, h-offset = 0)
+	height: unit(height, px)
+	background-image: url(image)
+	background-position: top left
+	background-repeat: no-repeat;
+	for n in (0...count)
+		&.n{n}
+			y = - (@height * n) - unit(v-offset, px)
+			background-position (0 - unit(h-offset, px)) 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
@@ -153,3 +178,28 @@ li-reset()
 	margin 0
 	padding 0
 	list-style none
+
+// Example:
+//     input
+//         +placeholder()
+//             color: red
+placeholder()
+	&::-webkit-input-placeholder
+		{block}
+	&:-moz-placeholder // firefox 4-18
+		{block}
+	&::-moz-placeholder // firefox 19+
+		{block}
+	&:-ms-input-placeholder // ie
+		{block}
+
+// Example:
+//     div.button
+//         noselect()
+noselect()
+	-webkit-touch-callout: none
+	-webkit-user-select: none
+	-khtml-user-select: none
+	-moz-user-select: none
+	-ms-user-select: none
+	user-select: none