JasonWoof Got questions, comments, patches, etc.? Contact Jason Woofenden
metaform: fix download_tar() (stylus not less)
[wfpl.git] / stylus-helpers.styl
index ab65706..701adfb 100644 (file)
@@ -85,31 +85,35 @@ space-evenly(line_height = 1.2em)
 //     html:
 //         <nav>
 //             <ul>
-//                 <li class="n1">home</li>
-//                 <li class="n2">contact</li>
+//                 <li class="n0">home</li>
+//                 <li class="n1">contact</li>
 //             </ul>
 //         </nav>
 //     styl:
 //         nav li
 //             sprite-rollover "images/nav.png" 150 35 2
-sprites-rollover(image, width, height, count, h-offset = 0)
+sprites-rollover(image, width, height, count, v-offset = 0, h-offset = 0)
        width: unit(width, px)
        height: unit(height, px)
-       background: transparent url(image) top left no-repeat;
-       for n in (1..count)
+       background-image: url(image)
+       background-position: top left
+       background-repeat: no-repeat;
+       for n in (0...count)
                &.n{n}
-                       y = - (@height * ( n - 1)) - h-offset
-                       background-position 0 y
+                       y = - (@height * n) - unit(v-offset, px)
+                       background-position (0 - unit(h-offset, px)) y
                        &:hover
-                               background-position -(@width) y
+                               background-position (0 - unit(h-offset, px) - @width) y
 // see sprites-rollover
-sprites(image, height, count, h-offset = 0)
+sprites(image, height, count, v-offset = 0, h-offset = 0)
        height: unit(height, px)
-       background: transparent url(image) top left no-repeat;
-       for n in (1..count)
+       background-image: url(image)
+       background-position: top left
+       background-repeat: no-repeat;
+       for n in (0...count)
                &.n{n}
-                       y = - (@height * ( n - 1)) - h-offset
-                       background-position 0 y
+                       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
@@ -174,3 +178,28 @@ 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