// 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 // 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: // // styl: // nav li // sprite-rollover "images/nav.png" 150 35 2 sprites-rollover(image, width, height, count, h-offset = 0) width: unit(width, px) height: unit(height, px) background: transparent url(image) top left no-repeat; for n in (0...count) &.n{n} y = - (@height * n) - h-offset background-position 0 y &:hover background-position -(@width) y // see sprites-rollover sprites(image, height, count, h-offset = 0) height: unit(height, px) background: transparent url(image) top left no-repeat; for n in (0...count) &.n{n} y = - (@height * n) - h-offset background-position 0 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:
...
// // 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