X-Git-Url: https://jasonwoof.com/gitweb/?a=blobdiff_plain;f=stylus-helpers.styl;h=fc70579b2de2fbebef696de99ebbca710b90791b;hb=47d8b4705be324d466c0c4d12c5f808f0a02d09b;hp=06ecac7ad643ec4838af12c02be5749380954840;hpb=cff1e4736b4c968e1b8ed77065587291c8319720;p=wfpl.git diff --git a/stylus-helpers.styl b/stylus-helpers.styl index 06ecac7..fc70579 100644 --- a/stylus-helpers.styl +++ b/stylus-helpers.styl @@ -10,16 +10,26 @@ _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 @@ -79,13 +94,13 @@ space_evenly(line_height = 1.2em) // sprite-rollover "images/nav.png" 150 35 2 sprite-rollover(image, width, height, count) width = unit(width, px) - height = unit(width, px) + height = unit(height, px) width width height height background: transparent url(image) top left no-repeat; for n in (1..count) &.n{n} - y = (2px - n * 35px) + y = (height - n * height) background-position 0 y &:hover background-position -(width) y