From 7a534068e00c59bb72be40399845099982a72064 Mon Sep 17 00:00:00 2001 From: Jason Woofenden Date: Tue, 19 May 2015 09:46:35 -0400 Subject: [PATCH] stylus: use underscore instead of hyphen --- stylus-helpers.styl | 205 ------------------------------------------------- stylus_helpers.styl | 210 +++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 210 insertions(+), 205 deletions(-) delete mode 100644 stylus-helpers.styl create mode 100644 stylus_helpers.styl diff --git a/stylus-helpers.styl b/stylus-helpers.styl deleted file mode 100644 index b3769a7..0000000 --- a/stylus-helpers.styl +++ /dev/null @@ -1,205 +0,0 @@ -// 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: -// -// 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:
...
-// -// 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 diff --git a/stylus_helpers.styl b/stylus_helpers.styl new file mode 100644 index 0000000..4a351fa --- /dev/null +++ b/stylus_helpers.styl @@ -0,0 +1,210 @@ +// 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: +// +// 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:
...
+// +// 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 -- 1.7.10.4