+++ /dev/null
-// 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 '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
-
-// transparently support vender-specific tags
-border-radius()
- -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)
- 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)
-
-// 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)
- 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="n0">home</li>
-// <li class="n1">contact</li>
-// </ul>
-// </nav>
-// styl:
-// nav li
-// sprite-rollover "images/nav.png" 150 35 2
-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 = - (@height * n) - unit(v-offset, px)
- background-position (0 - unit(h-offset, px)) y
- &:hover
- 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
-// 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
-
-// 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
--- /dev/null
+// 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 '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
+
+// transparently support vender-specific tags
+border-radius()
+ -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)
+ 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)
+
+// 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)
+ 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="n0">home</li>
+// <li class="n1">contact</li>
+// </ul>
+// </nav>
+// styl:
+// nav li
+// sprite_rollover "images/nav.png" 150 35 2
+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 = - (@height * n) - unit(v_offset, px)
+ background-position: (0 - unit(h_offset, px)) y
+ &:hover
+ background-position: (0 - unit(h_offset, px) - @width) y
+sprite_rollover(image, width, height, v_offset = 0, h_offset = 0)
+ sprites_rollover(image, width, height, 1, v_offset, h_offset)
+
+// 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
+sprite(image, height, v_offset = 0, h_offset = 0)
+ sprites(image, height, 1, v_offset, h_offset)
+
+// 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
+
+// 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
Got questions, comments, patches, etc.? Contact Jason Woofenden