X-Git-Url: https://jasonwoof.com/gitweb/?a=blobdiff_plain;f=stylus-helpers.styl;fp=stylus-helpers.styl;h=06ecac7ad643ec4838af12c02be5749380954840;hb=cff1e4736b4c968e1b8ed77065587291c8319720;hp=0000000000000000000000000000000000000000;hpb=c39c09f1cbea5b19fea3b49adbe9b6dc311a1057;p=wfpl.git 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: +// +// 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: