1 // Copyright 2014 Jason Woofenden -- Public Domain (CC0)
3 // This file contains helpers for using stylus in your project.
5 // Put something like this in your styl.styl:
6 // @require 'code/wfpl/stylus-helpers.styl'
9 // set units to px if it doesn't have a unit already
11 unit(i) == '' ? unit(i, px) : i
13 // transparently support vender-specific tags
15 -webkit-border-radius: arguments
16 border-radius: arguments
18 -webkit-box-shadow: arguments
21 -webkit-box-sizing: arguments
22 -moz-box-sizing: arguments
25 -webkit-user-select: arguments
26 -moz-user-select: arguments
27 -ms-user-select: arguments
28 user-select: arguments
30 // map "whitespace:" to "white-space:"
32 white-space: arguments
36 position: unquote(type)
37 for i in (0...length(args))
38 if not args[i] is a 'unit'
39 {args[i]}: args[i + 1] is a 'unit' ? args[i + 1] : 0
41 // you can pass directions and units, or just directions. Examples:
42 // absolute: top 20px left 0
46 _pos('absolute', arguments)
48 _pos('fixed', arguments)
50 _pos('relative', arguments)
52 // Specify width and height on the same line
57 // Make children of this element inline-blocks that are spaced evenly accross.
59 // To create a minimum distance between: don't use word-spacing, it's broken in
60 // firefox. Instead, try padding on the children and negative margin on the
62 space-evenly(line_height = 1.2em)
66 relative top line_height
71 margin-bottom -(line_height)
77 // image layout: left column has normal, right column hover versions
79 // arguments: width/height are pixel dimensions of a single sprite
81 // markup: put classes n1, n2, etc on the items.
88 // <li class="n0">home</li>
89 // <li class="n1">contact</li>
94 // sprite-rollover "images/nav.png" 150 35 2
95 sprites-rollover(image, width, height, count, v-offset = 0, h-offset = 0)
96 width: unit(width, px)
97 height: unit(height, px)
98 background-image: url(image)
99 background-position: top left
100 background-repeat: no-repeat;
103 y = - (@height * n) - unit(v-offset, px)
104 background-position (0 - unit(h-offset, px)) y
106 background-position (0 - unit(h-offset, px) - @width) y
107 // see sprites-rollover
108 sprites(image, height, count, v-offset = 0, h-offset = 0)
109 height: unit(height, px)
110 background-image: url(image)
111 background-position: top left
112 background-repeat: no-repeat;
115 y = - (@height * n) - unit(v-offset, px)
116 background-position (0 - unit(h-offset, px)) y
118 // Styling for a variable height element with an image background where the
119 // middle repeats vertically. You must split your image into three images, and
120 // name them with "-top", "-mid" and "-bot" suffixes (right before the file
121 // extension.) then pass a filepath as the first argument to this function
122 // which does not have a suffix.
127 // i/foo-top.png (900x20)
128 // i/foo-mid.png (900xwhatever)
129 // i/foo-bot.png (900x30)
131 // dom layout: <div id="expando"><div><div><div>...</div></div></div></div>
136 // mangin: 10px auto;
138 // background-vertical-stretch("i/foo.png", 20, 30)
142 // You can (optionally) pass 1-4 additional arguments which
143 // (effectively) add padding to the inner most div. The default is to
144 // have the height and width of the inner div match exactly the outer
145 // one. Parameters you specify are relative to that (not the section
146 // filled with the "-mid" image).
147 background-vertical-stretch(image, top-height, bottom-height, top-pad = 0, right-pad = top-pad, bottom-pad = top-pad, left-pad = right-pad)
148 top-height = _px(top-height)
149 bottom-height = _px(bottom-height)
150 top-pad = _px(top-pad)
151 right-pad = _px(right-pad)
152 bottom-pad = _px(bottom-pad)
153 left-pad = _px(left-pad)
155 path = pathjoin(dirname(image), basename(image, ext))
157 // bottom image (outermost block)
158 background transparent url(path + '-bot' + ext)
159 padding-bottom bottom-height + 1 // +1 to prevent margin collapsing
161 background transparent url(path + '-top' + ext) 0 0 no-repeat
162 padding-top top-height + 1 // +1 to prevent margin collapsing
164 background transparent url(path + '-mid' + ext) 0 0 repeat-y;
165 margin-top -1px; // correct for above +1 from top
166 margin-bottom -1px; // correct for above +1 from bottom
167 padding 1px; // to prevent margin collapsing
169 // all "2px" below are to correct for 1px above padding and below
171 margin-top 2px - top-height + top-pad
172 margin-left: left-pad - 2px
173 margin-right: right-pad - 2px
174 margin-bottom: 2px - bottom-height + bottom-pad
175 background transparent;
187 &::-webkit-input-placeholder
189 &:-moz-placeholder // firefox 4-18
191 &::-moz-placeholder // firefox 19+
193 &:-ms-input-placeholder // ie
200 -webkit-touch-callout: none
201 -webkit-user-select: none
202 -khtml-user-select: none
203 -moz-user-select: none
204 -ms-user-select: none