1 // This program is in the public domain within the United States. Additionally,
2 // we waive copyright and related rights in the work worldwide through the CC0
3 // 1.0 Universal public domain dedication, which can be found at
4 // http://creativecommons.org/publicdomain/zero/1.0/
6 // This file contains helpers for using stylus in your project.
8 // Put something like this in your styl.styl:
9 // @require 'inc/wfpl/stylus-helpers.styl'
12 // set units to px if it doesn't have a unit already
14 unit(i) == '' ? unit(i, px) : i
16 // transparently support vender-specific tags
18 -webkit-border-radius: arguments
19 border-radius: arguments
21 -webkit-box-shadow: arguments
24 -webkit-box-sizing: arguments
25 -moz-box-sizing: arguments
28 -webkit-user-select: arguments
29 -moz-user-select: arguments
30 -ms-user-select: arguments
31 user-select: arguments
33 // map "whitespace:" to "white-space:"
35 white-space: arguments
39 position: unquote(type)
40 for i in (0...length(args))
41 if not args[i] is a 'unit'
42 {args[i]}: args[i + 1] is a 'unit' ? args[i + 1] : 0
44 // you can pass directions and units, or just directions. Examples:
45 // absolute: top 20px left 0
49 _pos('absolute', arguments)
51 _pos('fixed', arguments)
53 _pos('relative', arguments)
55 // Specify width and height on the same line
60 // Make children of this element inline-blocks that are spaced evenly accross.
62 // To create a minimum distance between: don't use word-spacing, it's broken in
63 // firefox. Instead, try padding on the children and negative margin on the
65 space_evenly(line_height = 1.2em)
69 relative: top line_height
74 margin-bottom: -(line_height)
80 // image layout: left column has normal, right column hover versions
82 // arguments: width/height are pixel dimensions of a single sprite
84 // markup: put classes n1, n2, etc on the items.
91 // <li class="n0">home</li>
92 // <li class="n1">contact</li>
97 // sprites_rollover "images/nav.png" 150 35 2
98 sprites_rollover(image, width, height, count, v_offset = 0, h_offset = 0)
99 width: unit(width, px)
100 height: unit(height, px)
102 background: url(image[0])
103 background: url(image[1]), linear-gradient(transparent, transparent);
105 background-image: url(image)
106 background-position: top left
107 background-repeat: no-repeat;
110 y = - (@height * n) - unit(v_offset, px)
111 background-position: (0 - unit(h_offset, px)) y
113 background-position: (0 - unit(h_offset, px) - @width) y
114 sprite_rollover(image, width, height, v_offset = 0, h_offset = 0)
115 sprites_rollover(image, width, height, 1, v_offset, h_offset)
117 // see sprites_rollover
118 sprites(image, height, count, v_offset = 0, h_offset = 0)
119 height: unit(height, px)
121 background: url(image[0])
122 background: url(image[1]), linear-gradient(transparent, transparent);
124 background-image: url(image)
125 background-position: top left
126 background-repeat: no-repeat;
129 y = - (@height * n) - unit(v_offset, px)
130 background-position: (0 - unit(h_offset, px)) y
131 sprite(image, height, v_offset = 0, h_offset = 0)
132 sprites(image, height, 1, v_offset, h_offset)
134 // Styling for a variable height element with an image background where the
135 // middle repeats vertically. You must split your image into three images, and
136 // name them with "-top", "-mid" and "-bot" suffixes (right before the file
137 // extension.) then pass a filepath as the first argument to this function
138 // which does not have a suffix.
143 // i/foo-top.png (900x20)
144 // i/foo-mid.png (900xwhatever)
145 // i/foo-bot.png (900x30)
147 // dom layout: <div id="expando"><div><div><div>...</div></div></div></div>
152 // mangin: 10px auto;
154 // background_vertical_stretch("i/foo.png", 20, 30)
158 // You can (optionally) pass 1-4 additional arguments which
159 // (effectively) add padding to the inner most div. The default is to
160 // have the height and width of the inner div match exactly the outer
161 // one. Parameters you specify are relative to that (not the section
162 // filled with the "-mid" image).
163 background_vertical_stretch(image, top_height, bottom_height, top_pad = 0, right_pad = top_pad, bottom_pad = top_pad, left_pad = right_pad)
164 top_height = _px(top_height)
165 bottom_height = _px(bottom_height)
166 top_pad = _px(top_pad)
167 right_pad = _px(right_pad)
168 bottom_pad = _px(bottom_pad)
169 left_pad = _px(left_pad)
171 path = pathjoin(dirname(image), basename(image, ext))
173 // bottom image (outermost block)
174 background: transparent url(path + '-bot' + ext)
175 padding-bottom: bottom_height + 1 // +1 to prevent margin collapsing
177 background: transparent url(path + '-top' + ext) 0 0 no-repeat
178 padding-top: top_height + 1 // +1 to prevent margin collapsing
180 background: transparent url(path + '-mid' + ext) 0 0 repeat-y;
181 margin-top: -1px; // correct for above +1 from top
182 margin-bottom: -1px; // correct for above +1 from bottom
183 padding: 1px; // to prevent margin collapsing
185 // all "2px" below are to correct for 1px above padding and below
187 margin-top: 2px - top_height + top_pad
188 margin-left: left_pad - 2px
189 margin-right: right_pad - 2px
190 margin-bottom: 2px - bottom_height + bottom_pad
191 background: transparent;
203 &::-webkit-input-placeholder
205 &:-moz-placeholder // firefox 4-18
207 &::-moz-placeholder // firefox 19+
209 &:-ms-input-placeholder // ie
216 -webkit-touch-callout: none
217 -webkit-user-select: none
218 -khtml-user-select: none
219 -moz-user-select: none
220 -ms-user-select: none