├── test ├── public │ ├── .gitignore │ └── iconic ├── cases │ ├── normalize-reset.styl │ ├── relative.css │ ├── clearfix.styl │ ├── border.styl │ ├── border.css │ ├── radial-gradient.styl │ ├── clearfix.css │ ├── text.ellipsis.styl │ ├── shadow-stroke.styl │ ├── fixed.styl │ ├── text.ellipsis.css │ ├── absolute.styl │ ├── image.styl │ ├── fixed.css │ ├── shadow-stroke.css │ ├── absolute.css │ ├── radial-gradient.css │ ├── vendor.placeholder.styl │ ├── vendor.values.styl │ ├── border-radius.styl │ ├── multiple-gradients.styl │ ├── border-radius.css │ ├── image.css │ ├── flex.styl │ ├── linear-gradient.styl │ ├── vendor.inherit.styl │ ├── vendor.initial.styl │ ├── vendor.styl │ ├── vendor.placeholder.css │ ├── multiple-gradients.css │ ├── vendor.values.css │ ├── normalize-reset.css │ ├── importance.styl │ ├── vendor.inherit.css │ ├── vendor.initial.css │ ├── vendor.css │ ├── importance.css │ ├── linear-gradient.css │ └── flex.css ├── clearfix.styl ├── color-images.styl ├── server.js ├── test.styl ├── runner.js ├── index.pug └── gradients.styl ├── index.styl ├── .gitignore ├── iconic ├── iconic_stroke.eot ├── iconic_stroke.otf ├── iconic_stroke.ttf ├── iconic.css ├── demo.html └── iconic_stroke.svg ├── lib ├── nib │ ├── text │ │ ├── shadow-stroke.styl │ │ ├── hide-text.styl │ │ ├── index.styl │ │ ├── aliases.styl │ │ ├── ellipsis.styl │ │ └── replace-text.styl │ ├── color-image.styl │ ├── border.styl │ ├── config.styl │ ├── normalize │ │ ├── tables.styl │ │ ├── embed.styl │ │ ├── links.styl │ │ ├── base.styl │ │ ├── index.styl │ │ ├── groups.styl │ │ ├── html5.styl │ │ ├── text.styl │ │ └── forms.styl │ ├── iconic.styl │ ├── index.styl │ ├── overflow.styl │ ├── size.styl │ ├── clearfix.styl │ ├── image.styl │ ├── positions.styl │ ├── border-radius.styl │ ├── reset.styl │ ├── gradients.styl │ ├── flex.styl │ └── vendor.styl ├── nib.js └── nodes │ ├── color-image.js │ ├── vendor-helpers.js │ └── gradient.js ├── .npmignore ├── .mocharc.json ├── .editorconfig ├── package.json ├── CHANGELOG.md ├── LICENSE ├── .github └── workflows │ └── ci.yml ├── README.md └── docs └── README.md /test/public/.gitignore: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /index.styl: -------------------------------------------------------------------------------- 1 | @import 'lib/nib/' 2 | -------------------------------------------------------------------------------- /test/public/iconic: -------------------------------------------------------------------------------- 1 | ../../iconic -------------------------------------------------------------------------------- /test/cases/normalize-reset.styl: -------------------------------------------------------------------------------- 1 | @import 'nib/normalize' 2 | normalize-css() 3 | -------------------------------------------------------------------------------- /test/cases/relative.css: -------------------------------------------------------------------------------- 1 | #login { 2 | position: relative; 3 | left: 10px; 4 | } 5 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | *.css 3 | !test/cases/*.css 4 | .DS_Store 5 | node_modules 6 | *.swp 7 | -------------------------------------------------------------------------------- /iconic/iconic_stroke.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stylus/nib/HEAD/iconic/iconic_stroke.eot -------------------------------------------------------------------------------- /iconic/iconic_stroke.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stylus/nib/HEAD/iconic/iconic_stroke.otf -------------------------------------------------------------------------------- /iconic/iconic_stroke.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stylus/nib/HEAD/iconic/iconic_stroke.ttf -------------------------------------------------------------------------------- /test/cases/clearfix.styl: -------------------------------------------------------------------------------- 1 | @import 'nib/clearfix' 2 | 3 | support-for-ie = true 4 | 5 | #clearfix 6 | clearfix() 7 | -------------------------------------------------------------------------------- /lib/nib/text/shadow-stroke.styl: -------------------------------------------------------------------------------- 1 | shadow-stroke(n) 2 | text-shadow: -1px -1px 0 n, 1px -1px 0 n, -1px 1px 0 n, 1px 1px 0 n 3 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | test 3 | .github 4 | CHANGELOG.md 5 | .mocharc.json 6 | .editorconfig 7 | .npmignore 8 | .gitignore 9 | -------------------------------------------------------------------------------- /lib/nib/text/hide-text.styl: -------------------------------------------------------------------------------- 1 | /* 2 | * Hide text. 3 | */ 4 | 5 | hide-text() 6 | text-indent: 101% 7 | white-space: nowrap 8 | overflow: hidden 9 | -------------------------------------------------------------------------------- /lib/nib/text/index.styl: -------------------------------------------------------------------------------- 1 | @import './aliases' 2 | @import './ellipsis' 3 | @import './hide-text' 4 | @import './replace-text' 5 | @import './shadow-stroke' 6 | -------------------------------------------------------------------------------- /test/cases/border.styl: -------------------------------------------------------------------------------- 1 | @import 'nib/border' 2 | 3 | .foo 4 | border: none 5 | border: red 6 | border: lime !important 7 | border: 1px solid red 8 | -------------------------------------------------------------------------------- /test/cases/border.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | border: none; 3 | border: 1px solid #f00; 4 | border: 1px solid #0f0 !important; 5 | border: 1px solid #f00; 6 | } 7 | -------------------------------------------------------------------------------- /test/cases/radial-gradient.styl: -------------------------------------------------------------------------------- 1 | @import 'nib/vendor' 2 | @import 'nib/gradients' 3 | 4 | body 5 | background: radial-gradient(50% 0, farthest-side, rgba(9,36,95,0.175), rgba(9,36,95,0)) 6 | -------------------------------------------------------------------------------- /.mocharc.json: -------------------------------------------------------------------------------- 1 | { 2 | "require": "chai", 3 | "reporter": "spec", 4 | "diff": true, 5 | "color": true, 6 | "exit": true, 7 | "extension": [".js"], 8 | "file": ["test/runner.js"] 9 | } 10 | -------------------------------------------------------------------------------- /lib/nib/color-image.styl: -------------------------------------------------------------------------------- 1 | color-image(color) 2 | error('node-canvas is required for color-image()') unless has-canvas 3 | colorImage = create-color-image(color) 4 | 'url(%s)' % color-data-uri(colorImage) 5 | -------------------------------------------------------------------------------- /test/cases/clearfix.css: -------------------------------------------------------------------------------- 1 | #clearfix { 2 | zoom: 1; 3 | } 4 | #clearfix:before, 5 | #clearfix:after { 6 | content: ""; 7 | display: table; 8 | } 9 | #clearfix:after { 10 | clear: both; 11 | } 12 | -------------------------------------------------------------------------------- /test/cases/text.ellipsis.styl: -------------------------------------------------------------------------------- 1 | @import 'nib/text/ellipsis' 2 | @import 'nib/overflow' 3 | 4 | button 5 | ellipsis() 6 | 7 | button 8 | ellipsis(false) 9 | 10 | button 11 | overflow: ellipsis 12 | -------------------------------------------------------------------------------- /lib/nib/text/aliases.styl: -------------------------------------------------------------------------------- 1 | /* 2 | * Alias of "nowrap". 3 | */ 4 | 5 | no-wrap = unquote('nowrap') 6 | 7 | /* 8 | * Alias of "white-space". 9 | */ 10 | 11 | whitespace() 12 | white-space: arguments 13 | -------------------------------------------------------------------------------- /test/cases/shadow-stroke.styl: -------------------------------------------------------------------------------- 1 | @import 'nib/text/shadow-stroke' 2 | 3 | button 4 | shadow-stroke(#000) 5 | 6 | button 7 | shadow-stroke(rgba(0, 0, 0, 0.5)) 8 | 9 | button 10 | shadow-stroke(red) 11 | -------------------------------------------------------------------------------- /lib/nib/border.styl: -------------------------------------------------------------------------------- 1 | /* 2 | * border: 3 | * border: ... 4 | */ 5 | 6 | border(color, args...) 7 | if color is a 'color' 8 | border: 1px solid color args 9 | else 10 | border: arguments 11 | -------------------------------------------------------------------------------- /lib/nib/config.styl: -------------------------------------------------------------------------------- 1 | /* 2 | * Support for ie defaulting to true. 3 | */ 4 | 5 | support-for-ie ?= true 6 | 7 | /* 8 | * Default vendor prefixes. 9 | */ 10 | 11 | vendor-prefixes ?= webkit moz o ms official 12 | -------------------------------------------------------------------------------- /lib/nib/text/ellipsis.styl: -------------------------------------------------------------------------------- 1 | /* 2 | * Ellipsis with wrapping disabled by default. 3 | */ 4 | 5 | ellipsis(no-wrap = true) 6 | if no-wrap 7 | white-space: nowrap 8 | overflow: hidden 9 | text-overflow: ellipsis 10 | -------------------------------------------------------------------------------- /lib/nib/text/replace-text.styl: -------------------------------------------------------------------------------- 1 | /* 2 | * Replace text with an image. 3 | */ 4 | 5 | replace-text(image, x=50%, y=50%) 6 | hide-text() 7 | background-image image 8 | background-repeat no-repeat 9 | background-position x y 10 | -------------------------------------------------------------------------------- /test/cases/fixed.styl: -------------------------------------------------------------------------------- 1 | @import 'nib/positions' 2 | 3 | #login 4 | fixed: bottom right 5 | 6 | #login 7 | fixed: top 5px left 10px 8 | 9 | #login 10 | fixed: bottom left 10px 11 | 12 | #login 13 | fixed: bottom 10px right 14 | -------------------------------------------------------------------------------- /lib/nib/normalize/tables.styl: -------------------------------------------------------------------------------- 1 | // Based in Nicolas Gallagher's git.io/normalize 2 | normalize-tables() 3 | table // Remove most spacing between table cells. 4 | border-collapse collapse 5 | border-spacing 0 6 | td, th 7 | padding 0 8 | -------------------------------------------------------------------------------- /lib/nib/normalize/embed.styl: -------------------------------------------------------------------------------- 1 | // Based in Nicolas Gallagher's git.io/normalize 2 | normalize-embed() 3 | img // No border when inside `a` in IE 8~10. 4 | border 0 5 | 6 | svg:not(:root) // Overflow should be hidden in IE 9~11. 7 | overflow hidden 8 | -------------------------------------------------------------------------------- /lib/nib/normalize/links.styl: -------------------------------------------------------------------------------- 1 | // Based in Nicolas Gallagher's git.io/normalize 2 | normalize-links() 3 | a // No gray bg color in active links in IE 10. 4 | background-color transparent 5 | &:active, &:hover 6 | outline 0 // + readability when focused. 7 | -------------------------------------------------------------------------------- /lib/nib/normalize/base.styl: -------------------------------------------------------------------------------- 1 | // Based in Nicolas Gallagher's git.io/normalize 2 | normalize-base() 3 | html // Prevent iOS text size adjust after orientation change. 4 | font-family sans-serif 5 | -ms-text-size-adjust 100% 6 | -webkit-text-size-adjust 100% 7 | body 8 | margin 0 9 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # This file is for unifying the coding style for different editors and IDEs 2 | # editorconfig.org 3 | 4 | root = true 5 | 6 | [*] 7 | end_of_line = lf 8 | charset = utf-8 9 | insert_final_newline = true 10 | trim_trailing_whitespace = true 11 | indent_style = space 12 | indent_size = 2 13 | -------------------------------------------------------------------------------- /test/cases/text.ellipsis.css: -------------------------------------------------------------------------------- 1 | button { 2 | white-space: nowrap; 3 | overflow: hidden; 4 | text-overflow: ellipsis; 5 | } 6 | button { 7 | overflow: hidden; 8 | text-overflow: ellipsis; 9 | } 10 | button { 11 | white-space: nowrap; 12 | overflow: hidden; 13 | text-overflow: ellipsis; 14 | } 15 | -------------------------------------------------------------------------------- /test/cases/absolute.styl: -------------------------------------------------------------------------------- 1 | 2 | @import 'nib/positions' 3 | 4 | #login 5 | absolute bottom right 6 | 7 | #login 8 | absolute top 5px left 10px 9 | 10 | #login 11 | absolute top 5px right 5px bottom 5px 12 | 13 | #login 14 | absolute top 15 | 16 | #login 17 | absolute top right 5px bottom left 10px 18 | -------------------------------------------------------------------------------- /test/cases/image.styl: -------------------------------------------------------------------------------- 1 | @import 'nib/image' 2 | 3 | #logo 4 | image: '/images/branding/logo.main.png' 5 | 6 | #logo 7 | image: '/images/branding/logo.main.png' 50px 100px 8 | 9 | #logo 10 | image: '/images/branding/logo.main.png' cover 11 | 12 | #logo 13 | image: '/images/branding/logo.main.png' contain 14 | -------------------------------------------------------------------------------- /lib/nib/iconic.styl: -------------------------------------------------------------------------------- 1 | iconic-stroke(path) 2 | @font-face 3 | font-family: 'IconicStroke' 4 | src: url(path + '/iconic_stroke.eot') 5 | src: local('☺'), url(path + '/iconic_stroke.ttf') format('truetype'), url(path + '/iconic_stroke.svg#iconic') format('svg') 6 | font-weight: normal 7 | font-style: normal 8 | -------------------------------------------------------------------------------- /test/cases/fixed.css: -------------------------------------------------------------------------------- 1 | #login { 2 | position: fixed; 3 | bottom: 0; 4 | right: 0; 5 | } 6 | #login { 7 | position: fixed; 8 | top: 5px; 9 | left: 10px; 10 | } 11 | #login { 12 | position: fixed; 13 | bottom: 0; 14 | left: 10px; 15 | } 16 | #login { 17 | position: fixed; 18 | bottom: 10px; 19 | right: 0; 20 | } 21 | -------------------------------------------------------------------------------- /lib/nib/index.styl: -------------------------------------------------------------------------------- 1 | @import 'border' 2 | @import 'border-radius' 3 | @import 'clearfix' 4 | @import 'color-image' 5 | @import 'flex' 6 | @import 'gradients' 7 | @import 'iconic' 8 | @import 'image' 9 | @import 'normalize' 10 | @import 'overflow' 11 | @import 'positions' 12 | @import 'reset' 13 | @import 'text' 14 | @import 'vendor' 15 | @import 'size' 16 | -------------------------------------------------------------------------------- /test/clearfix.styl: -------------------------------------------------------------------------------- 1 | @import 'nib/clearfix' 2 | 3 | support-for-ie = true 4 | 5 | #clearfix-left-only, 6 | #clearfix-left-right 7 | clearfix() 8 | background: blue 9 | div 10 | background: green 11 | margin: 10px 12 | width: 47% 13 | div.left 14 | float: left 15 | div.right 16 | float: right 17 | 18 | #clearfix-left-right 19 | margin-top: 10px 20 | -------------------------------------------------------------------------------- /test/color-images.styl: -------------------------------------------------------------------------------- 1 | @import 'nib/color-image' 2 | 3 | #color-images 4 | .rgba 5 | background: color-image(rgba(blue, 0.3)) 6 | 7 | .rgb 8 | background: color-image(rgb(200, 150, 150)) 9 | 10 | .hex 11 | background: color-image(#fff) 12 | 13 | .hexa 14 | background: color-image(#ffffff80) 15 | 16 | .hexa-short 17 | background: color-image(#0005) 18 | -------------------------------------------------------------------------------- /test/cases/shadow-stroke.css: -------------------------------------------------------------------------------- 1 | button { 2 | text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; 3 | } 4 | button { 5 | text-shadow: -1px -1px 0 rgba(0,0,0,0.5), 1px -1px 0 rgba(0,0,0,0.5), -1px 1px 0 rgba(0,0,0,0.5), 1px 1px 0 rgba(0,0,0,0.5); 6 | } 7 | button { 8 | text-shadow: -1px -1px 0 #f00, 1px -1px 0 #f00, -1px 1px 0 #f00, 1px 1px 0 #f00; 9 | } 10 | -------------------------------------------------------------------------------- /lib/nib/overflow.styl: -------------------------------------------------------------------------------- 1 | /* 2 | * Overflow utility. Maps to regular overflow, and adds an ellipsis value. 3 | * 4 | * Synopsis: 5 | * 6 | * overflow: 7 | * 8 | * Examples: 9 | * 10 | * overflow: auto 11 | * overflow: hidden 12 | * overflow: ellipsis 13 | * 14 | */ 15 | 16 | overflow() 17 | if arguments[0] == ellipsis 18 | ellipsis() 19 | else 20 | overflow: arguments 21 | -------------------------------------------------------------------------------- /test/cases/absolute.css: -------------------------------------------------------------------------------- 1 | #login { 2 | position: absolute; 3 | bottom: 0; 4 | right: 0; 5 | } 6 | #login { 7 | position: absolute; 8 | top: 5px; 9 | left: 10px; 10 | } 11 | #login { 12 | position: absolute; 13 | top: 5px; 14 | right: 5px; 15 | bottom: 5px; 16 | } 17 | #login { 18 | position: absolute; 19 | top: 0; 20 | } 21 | #login { 22 | position: absolute; 23 | top: 0; 24 | right: 5px; 25 | bottom: 0; 26 | left: 10px; 27 | } 28 | -------------------------------------------------------------------------------- /lib/nib/normalize/index.styl: -------------------------------------------------------------------------------- 1 | // Based in Nicolas Gallagher's git.io/normalize 2 | @import './base' 3 | @import './html5' 4 | @import './links' 5 | @import './text' 6 | @import './embed' 7 | @import './groups' 8 | @import './forms' 9 | @import './tables' 10 | 11 | normalize-css() 12 | normalize-base() 13 | normalize-html5() 14 | normalize-links() 15 | normalize-text() 16 | normalize-embed() 17 | normalize-groups() 18 | normalize-forms() 19 | normalize-tables() 20 | -------------------------------------------------------------------------------- /test/cases/radial-gradient.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: -webkit-radial-gradient(50% 0, farthest-side, rgba(9,36,95,0.175), rgba(9,36,95,0)); 3 | background: -moz-radial-gradient(50% 0, farthest-side, rgba(9,36,95,0.175), rgba(9,36,95,0)); 4 | background: -o-radial-gradient(50% 0, farthest-side, rgba(9,36,95,0.175), rgba(9,36,95,0)); 5 | background: -ms-radial-gradient(50% 0, farthest-side, rgba(9,36,95,0.175), rgba(9,36,95,0)); 6 | background: radial-gradient(50% 0, farthest-side, rgba(9,36,95,0.175), rgba(9,36,95,0)); 7 | } 8 | -------------------------------------------------------------------------------- /test/cases/vendor.placeholder.styl: -------------------------------------------------------------------------------- 1 | @import 'nib/vendor' 2 | 3 | $placeholderFont = Helvetica, arial, sans-serif 4 | 5 | body 6 | placeholder(color #333, font-weight normal, font-family $placeholderFont) 7 | 8 | .placeholder-red 9 | placeholder(color red,) 10 | 11 | green-placeholder() 12 | color green 13 | .placeholder-green 14 | placeholder(green-placeholder) 15 | 16 | .input-placeholder-gray 17 | input-placeholder(color gray,) 18 | 19 | textarea 20 | placeholder((font-style italic) (font-weight bold) (padding '4px 10px')) 21 | -------------------------------------------------------------------------------- /lib/nib/size.styl: -------------------------------------------------------------------------------- 1 | /* 2 | * Size utility. 3 | * 4 | * Synopsis: 5 | * 6 | * size: | 7 | * 8 | * Examples: 9 | * 10 | * size: 100% 30px 11 | * yields: 12 | * width: 100% 13 | * height: 30px 14 | * 15 | * size: 5px 16 | * yields: 17 | * width: 5px 18 | * height: 5px 19 | * 20 | */ 21 | 22 | size() 23 | if length(arguments) == 1 24 | width: arguments[0] 25 | height: arguments[0] 26 | else 27 | width: arguments[0] 28 | height: arguments[1] 29 | -------------------------------------------------------------------------------- /lib/nib/normalize/groups.styl: -------------------------------------------------------------------------------- 1 | // Based in Nicolas Gallagher's git.io/normalize 2 | normalize-groups() 3 | figure // Margin should exist in IE 8~9 / Safari. 4 | margin 1em 40px 5 | 6 | hr // Consistency between FF and others. 7 | -moz-box-sizing content-box 8 | box-sizing content-box 9 | height 0 10 | 11 | pre // Contain overflow and wrap words. 12 | overflow auto 13 | 14 | // Hack to fix odd `em`-unit font size rendering in all browsers. 15 | code, kbd, pre, samp 16 | font-family monospace, monospace 17 | font-size 1em 18 | -------------------------------------------------------------------------------- /test/cases/vendor.values.styl: -------------------------------------------------------------------------------- 1 | @import 'nib/vendor' 2 | 3 | button 4 | transition: transform 5 | 6 | button 7 | transition: transform .3s .2s linear 8 | 9 | button 10 | transition: transform cubic-bezier(1,1,1) 11 | 12 | button 13 | transition: transform 2s, width .3s linear, height 14 | 15 | button 16 | transition: height, transform 2s, width .3s linear 17 | 18 | button 19 | transition: transform 1s !important 20 | 21 | button 22 | transition: transform, height !important 23 | 24 | button 25 | transition: transform 1s, width 2s linear, cubic-bezier(1,1,1) 26 | -------------------------------------------------------------------------------- /test/cases/border-radius.styl: -------------------------------------------------------------------------------- 1 | @import 'nib/border-radius' 2 | 3 | button 4 | border-radius: 1px 2px / 3px 4px 5 | 6 | button 7 | border-radius: top left 10px 8 | 9 | button 10 | border-radius: top left 10px !important 11 | 12 | button 13 | border-radius: bottom right 5px 14 | 15 | vendor-prefixes = webkit moz official 16 | 17 | button 18 | border-radius: top left 5px bottom right 10px 19 | 20 | button 21 | border-radius: bottom 10px 22 | 23 | button 24 | border-radius: top 5px bottom 10px 25 | 26 | button 27 | border-radius: top left 5px, bottom right 10px 28 | 29 | prepend(vendor-prefixes, ms, o) 30 | 31 | button 32 | border-radius: 5px 33 | -------------------------------------------------------------------------------- /test/cases/multiple-gradients.styl: -------------------------------------------------------------------------------- 1 | @import 'nib/vendor' 2 | @import 'nib/gradients' 3 | 4 | .test1 5 | background: linear-gradient(to top, white, black), 6 | linear-gradient(to bottom, black, white) 7 | 8 | .test2 9 | background: #fff \ 10 | linear-gradient(to top, black, white) 0 0 no-repeat, 11 | linear-gradient(to bottom, black, white) 10px bottom repeat-y 12 | 13 | .test3 14 | background-image: linear-gradient(to top, white, black), 15 | url(a.png), 16 | linear-gradient(to bottom, black, white) 17 | 18 | gradient1 = linear-gradient(to top, white, black) 19 | gradient2 = linear-gradient(to bottom, black, white) 20 | 21 | .test4 22 | background: gradient2, gradient1 23 | -------------------------------------------------------------------------------- /test/cases/border-radius.css: -------------------------------------------------------------------------------- 1 | button { 2 | border-radius: 1px 2px/3px 4px; 3 | } 4 | button { 5 | border-top-left-radius: 10px; 6 | } 7 | button { 8 | border-top-left-radius: 10px !important; 9 | } 10 | button { 11 | border-bottom-right-radius: 5px; 12 | } 13 | button { 14 | border-top-left-radius: 5px; 15 | border-bottom-right-radius: 10px; 16 | } 17 | button { 18 | border-bottom-left-radius: 10px; 19 | border-bottom-right-radius: 10px; 20 | } 21 | button { 22 | border-top-left-radius: 5px; 23 | border-top-right-radius: 5px; 24 | border-bottom-left-radius: 10px; 25 | border-bottom-right-radius: 10px; 26 | } 27 | button { 28 | border-top-left-radius: 5px; 29 | border-bottom-right-radius: 10px; 30 | } 31 | button { 32 | border-radius: 5px; 33 | } 34 | -------------------------------------------------------------------------------- /lib/nib/normalize/html5.styl: -------------------------------------------------------------------------------- 1 | // Based in Nicolas Gallagher's git.io/normalize 2 | normalize-html5() 3 | // `block` display for HTML5 elements in IE 8~11 and FF. 4 | article, details, section, summary, 5 | aside, main, menu, nav, figcaption, 6 | figure, footer, header, hgroup 7 | display block 8 | 9 | audio, canvas, progress, video 10 | display inline-block // Set `inline-block` not defined in IE 8~9. 11 | vertical-align baseline // Fix v-align of `progress` in Chrome, FF, and O. 12 | 13 | audio:not([controls]) 14 | display none // Prevent displaying `audio` without controls. 15 | height 0 // Remove excess height in iOS 5 devices. 16 | 17 | [hidden], // Address `[hidden]` styling not present in IE 8~10. 18 | template // Hide the `template` element in IE 8~11, Safari, and FF < 22. 19 | display none 20 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nib", 3 | "description": "Stylus mixins and utilities", 4 | "version": "1.2.0", 5 | "license": "MIT", 6 | "repository": { 7 | "type": "git", 8 | "url": "git://github.com/stylus/nib.git" 9 | }, 10 | "peerDependencies": { 11 | "stylus": "*" 12 | }, 13 | "devDependencies": { 14 | "chai": "^4.3.6", 15 | "connect": "^3.7.0", 16 | "mocha": "^10.0.0", 17 | "pug": "^3.0.2", 18 | "serve-static": "^1.15.0", 19 | "stylus": "^0.57.0" 20 | }, 21 | "author": "TJ Holowaychuk ", 22 | "maintainers": [ 23 | { 24 | "name": "iChenLei", 25 | "email": "chenleicoder@foxmail.com" 26 | } 27 | ], 28 | "main": "lib/nib.js", 29 | "engines": { 30 | "node": "*" 31 | }, 32 | "scripts": { 33 | "test": "mocha", 34 | "test-server": "node test/server.js" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /lib/nib/clearfix.styl: -------------------------------------------------------------------------------- 1 | /* 2 | * The Magnificent Micro Clearfix 3 | * 4 | * Useful for clearing floats without structural markup. 5 | * Prevents margin-collapsing on child elements in most cases. 6 | * 7 | * Known issues: 8 | * 9 | * 1. For IE 6/7 when applied to an element that contains only left-floated 10 | * children the bottom margin on child elements will be collapsed. 11 | * 12 | * 2. For Firefox versions prior to 3.5 when applied to the first child element 13 | * of body, and the element does not have non-zero padding, extra space will 14 | * appear between the body and the first child. 15 | * 16 | * See http://nicolasgallagher.com/micro-clearfix-hack/ 17 | * and http://j.mp/bestclearfix 18 | * 19 | */ 20 | 21 | clearfix() 22 | &:before 23 | &:after 24 | content: "" 25 | display: table 26 | &:after 27 | clear: both 28 | zoom: 1 if support-for-ie 29 | -------------------------------------------------------------------------------- /test/server.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Module dependencies. 3 | */ 4 | 5 | var stylus = require('stylus'), 6 | serveStatic = require('serve-static'), 7 | connect = require('connect'), 8 | pug = require('pug'), 9 | nib = require('../'); 10 | 11 | /** 12 | * Server. 13 | */ 14 | 15 | var server = connect(); 16 | 17 | function compile(str, path) { 18 | return stylus(str) 19 | .set('filename', path) 20 | .use(nib()); 21 | } 22 | 23 | server.use(stylus.middleware({ 24 | src: __dirname 25 | , dest: __dirname + '/public' 26 | , force: true 27 | , compile: compile 28 | })); 29 | 30 | server.use(serveStatic(__dirname + '/public')); 31 | 32 | server.use(function(req, res){ 33 | pug.renderFile(__dirname + '/index.pug', function(err, str){ 34 | res.setHeader('Content-Type', 'text/html; charset=utf-8'); 35 | res.end(str); 36 | }); 37 | }); 38 | 39 | server.listen(3000); 40 | console.log('Server listening on port 3000'); 41 | -------------------------------------------------------------------------------- /lib/nib/normalize/text.styl: -------------------------------------------------------------------------------- 1 | // Based in Nicolas Gallagher's git.io/normalize 2 | normalize-text() 3 | abbr[title] // + style not present in IE 8~11, Safari, and Chrome. 4 | border-bottom 1px dotted 5 | 6 | dfn // + style not present in Safari and Chrome. 7 | font-style italic 8 | 9 | mark // + style not present in IE 8/9. 10 | background #ff0; color #000 11 | 12 | b, strong // Fix `font-weight: bolder` in FF 4+, Safari, and Chrome. 13 | font-weight bold 14 | 15 | h1 // `h1` inside `section` and `article` fix for FF 4+, Safari & Chrome. 16 | font-size 2em 17 | margin 0.67em 0 18 | 19 | small // Consistent font-size across browsers. 20 | font-size 80% 21 | 22 | sub, sup // Prevent `sub` and `sup` affecting `line-height`. 23 | font-size 75% 24 | line-height 0 25 | position relative 26 | vertical-align baseline 27 | sup 28 | top -0.5em 29 | sub 30 | bottom -0.25em 31 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | All notable changes to this project will be documented in this file. 3 | 4 | The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), 5 | and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). 6 | 7 | ## [Unreleased] 8 | 9 | ## 1.2.0 - 2022-05-17 10 | - chore: use github actions as test infra [#350](https://github.com/stylus/nib/pull/350) [@iChenLei](https://github.com/iChenLei) 11 | - feat: make stylus as peerDependencies [#350](https://github.com/stylus/nib/pull/350) [@iChenLei](https://github.com/iChenLei) 12 | - feat: use official column-fill property [#344](https://github.com/stylus/nib/pull/344) [@Sija](https://github.com/stylus/nib/pull/344) 13 | - fix: remove vendor prefix for background-size [#338](https://github.com/stylus/nib/pull/338) [@specious](https://github.com/stylus/nib/pull/338) 14 | - fix: mute nodejs v14+ warnings [#348](https://github.com/stylus/nib/pull/348) [@AlynxZhou](https://github.com/AlynxZhou) 15 | -------------------------------------------------------------------------------- /test/test.styl: -------------------------------------------------------------------------------- 1 | @import 'nib/vendor' 2 | 3 | gray = #ebebeb 4 | 5 | body 6 | padding: 50px 7 | 8 | h1, h2, h3 9 | font-family: helvetica, arial 10 | 11 | table 12 | border-collapse: collapse 13 | td 14 | padding: 3px 10px 15 | border-left: 1px solid #eee 16 | &:first-child 17 | font: 12px helvetica, arial 18 | tr:nth-child(4n) 19 | border-bottom: 1px solid #eee 20 | td 21 | padding-bottom: 15px 22 | tr:nth-child(4n+1) 23 | td 24 | padding-top: 15px 25 | 26 | #color-images 27 | width: 400 28 | height: 300 29 | background: url(http://f.cl.ly/items/0W1R2J2L3g2C2L3p1l1e/Image%202011.08.26%2011:42:20%20AM.png) center 30 | box-sizing: border-box 31 | padding-top: 130px 32 | text-align: center 33 | 34 | div 35 | display: inline-block 36 | width: 50px 37 | height: 50px 38 | margin: 0 15px 39 | box-sizing: border-box 40 | padding-top: 18px 41 | border: 1px solid #fff 42 | font: 9px Lucida Grande 43 | color: #666 44 | -------------------------------------------------------------------------------- /lib/nib/image.styl: -------------------------------------------------------------------------------- 1 | /* 2 | * Define background-image as `path` with optional width and height, adding an 3 | * @2x variant. 4 | * 5 | * affected by github.com/LearnBoost/stylus/issues/1050 and 6 | * github.com/LearnBoost/stylus/issues/1038 ... refactor when those are closed 7 | */ 8 | 9 | image(path, w = auto, h = auto, min_pixel_ratio = 1.5) 10 | background-image: url(path) 11 | 12 | s = 'all and (-webkit-min-device-pixel-ratio:' + min_pixel_ratio + '),' 13 | s = s + '(min--moz-device-pixel-ratio:' + min_pixel_ratio + '),' 14 | s = s + '(-o-min-device-pixel-ratio:' + min_pixel_ratio + '/1),' 15 | s = s + '(min-device-pixel-ratio:' + min_pixel_ratio + '),' 16 | s = s + '(min-resolution:' + unit(min_pixel_ratio*92, dpi) + '),' 17 | s = s + '(min-resolution:' + unit(min_pixel_ratio, dppx) + ')' 18 | 19 | @media s 20 | ext = extname(path) 21 | path = pathjoin(dirname(path), basename(path, ext) + '@2x' + ext) 22 | background-image: url(path) 23 | if w in (cover contain) and h == auto 24 | h = null 25 | background-size: w h 26 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2022 iChenLei 4 | Copyright (c) 2014 TJ Holowaychuk 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy of 7 | this software and associated documentation files (the "Software"), to deal in 8 | the Software without restriction, including without limitation the rights to 9 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 10 | the Software, and to permit persons to whom the Software is furnished to do so, 11 | subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in all 14 | copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 18 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 19 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 20 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 21 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /lib/nib/positions.styl: -------------------------------------------------------------------------------- 1 | // helper 2 | 3 | -pos(type, args) 4 | i = 0 5 | position: unquote(type) 6 | for j in (1..4) 7 | if length(args) > i 8 | {args[i]}: args[i + 1] is a 'unit' ? args[i += 1] : 0 9 | i += 1 10 | 11 | /* 12 | * Position utility. 13 | * 14 | * Synopsis: 15 | * 16 | * fixed: [n] [n] 17 | * 18 | * Examples: 19 | * 20 | * fixed: top left 21 | * fixed: top 5px left 22 | * fixed: top left 5px 23 | * fixed: top 5px left 5px 24 | * 25 | */ 26 | 27 | fixed() 28 | -pos('fixed', arguments) 29 | 30 | /* 31 | * Position utility. 32 | * 33 | * Synopsis: 34 | * 35 | * absolute: [n] [n] 36 | * 37 | * Examples: 38 | * 39 | * absolute: top left 40 | * absolute: top 5px left 41 | * absolute: top left 5px 42 | * absolute: top 5px left 5px 43 | * 44 | */ 45 | 46 | absolute() 47 | -pos('absolute', arguments) 48 | 49 | /* 50 | * Position utility. 51 | * 52 | * Synopsis: 53 | * 54 | * relative: [n] [n] 55 | * 56 | * Examples: 57 | * 58 | * relative: top left 59 | * relative: top 5px left 60 | * relative: top left 5px 61 | * relative: top 5px left 5px 62 | * 63 | */ 64 | 65 | relative() 66 | -pos('relative', arguments) 67 | -------------------------------------------------------------------------------- /test/runner.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Module dependencies. 3 | */ 4 | var stylus = require('stylus'), 5 | nib = require('../'), 6 | expect = require('chai').expect, 7 | fs = require('fs'); 8 | 9 | /** 10 | * Read test/cases directory and filter all `.styl` files, then remove 11 | * this extension for each file in the collection and prepare to test. 12 | */ 13 | var cases = fs.readdirSync('test/cases').filter(function(file){ 14 | return ~file.indexOf('.styl'); // bitwise flip to treat result as truthy. 15 | }).map(function(file){ 16 | return file.replace('.styl', ''); 17 | }); 18 | 19 | /* 20 | * For each `.styl` and `.css` pair in `test/cases`, compile stylus to css 21 | * and compare actual result to expected css. 22 | */ 23 | describe('integration', function(){ 24 | cases.forEach(function(test){ 25 | var name = test.replace(/[-.]/g, ' '); 26 | it(name, function(){ 27 | var path = 'test/cases/' + test + '.styl'; 28 | var styl = fs.readFileSync(path, 'utf8').replace(/\r/g, ''); 29 | var css = fs.readFileSync('test/cases/' + test + '.css', 'utf8').replace(/\r/g, '').trim(); 30 | 31 | var style = stylus(styl) 32 | .use(nib()) 33 | .set('filename', path) 34 | .define('url', stylus.url()); 35 | 36 | if (~test.indexOf('compress')) { 37 | style.set('compress', true); 38 | } 39 | 40 | style.render(function(err, actual){ 41 | if (err) throw err; 42 | expect(actual.trim()).equal(css); 43 | }); 44 | }); 45 | }); 46 | }); 47 | -------------------------------------------------------------------------------- /lib/nib.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * nib 3 | * Copyright (c) 2010 TJ Holowaychuk 4 | * MIT Licensed 5 | */ 6 | 7 | /** 8 | * Module dependencies. 9 | */ 10 | 11 | var stylus = require('stylus'), 12 | path = require('path'), 13 | nodes = stylus.nodes, 14 | utils = stylus.utils, 15 | Canvas; 16 | 17 | exports = module.exports = plugin; 18 | 19 | // conditionally expose canvas-based APIs. 20 | 21 | try { 22 | Canvas = require('canvas'); 23 | 24 | var gradient = require('./nodes/gradient'), 25 | colorImage = require('./nodes/color-image'); 26 | } catch (err) { 27 | // ignore 28 | } 29 | 30 | /** 31 | * Library version. 32 | */ 33 | 34 | exports.version = require(path.join(__dirname, '../package.json')).version; 35 | 36 | /** 37 | * Stylus path. 38 | */ 39 | 40 | exports.path = __dirname; 41 | 42 | /** 43 | * Return the plugin callback for stylus. 44 | * 45 | * @return {Function} 46 | * @api public 47 | */ 48 | 49 | function plugin() { 50 | return function(style){ 51 | style.include(__dirname); 52 | 53 | if (Canvas) { 54 | style.define('has-canvas', nodes.true); 55 | 56 | // gradients 57 | style.define('create-gradient-image', gradient.create); 58 | style.define('gradient-data-uri', gradient.dataURL); 59 | style.define('add-color-stop', gradient.addColorStop); 60 | 61 | // color images 62 | style.define('create-color-image', colorImage.create); 63 | style.define('color-data-uri', colorImage.dataURL); 64 | } else { 65 | style.define('has-canvas', nodes.false); 66 | } 67 | }; 68 | } 69 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | # Github actions workflow name 2 | name: CI 3 | 4 | # Triggers the workflow on push or pull request events 5 | on: 6 | push: 7 | branches: [main, master] 8 | tags: ['**'] 9 | pull_request: 10 | branches: 11 | - main 12 | 13 | jobs: 14 | node_tests: 15 | name: 'Test nib on ${{matrix.os}} with node${{matrix.node}}' 16 | strategy: 17 | matrix: 18 | os: [ubuntu-latest] 19 | # Latest four Nodejs LTS version 20 | node: [12, 14, 16, 18] 21 | runs-on: ${{ matrix.os }} 22 | steps: 23 | # Pull repo to test machine 24 | - uses: actions/checkout@v2 25 | # Configures the node version used on GitHub-hosted runners 26 | - uses: actions/setup-node@v2 27 | with: 28 | # The Node.js version to configure 29 | node-version: ${{ matrix.node }} 30 | # Caching dependencies to speed up workflows 31 | - name: Get npm cache directory 32 | id: npm-cache-dir 33 | run: | 34 | echo "::set-output name=dir::$(npm config get cache)" 35 | - uses: actions/cache@v2 36 | id: npm-cache # use this to check for `cache-hit` ==> if: steps.npm-cache.outputs.cache-hit != 'true' 37 | with: 38 | path: ${{ steps.npm-cache-dir.outputs.dir }} 39 | key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }} 40 | restore-keys: | 41 | ${{ runner.os }}-node- 42 | - name: Install npm dependencies 43 | run: npm install 44 | - name: Print put node & npm version 45 | # Output useful info for debugging. 46 | run: node --version && npm --version 47 | - name: Run Test 48 | run: npm test 49 | -------------------------------------------------------------------------------- /test/cases/image.css: -------------------------------------------------------------------------------- 1 | #logo { 2 | background-image: url("/images/branding/logo.main.png"); 3 | } 4 | @media all and (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5/1), (min-device-pixel-ratio: 1.5), (min-resolution: 138dpi), (min-resolution: 1.5dppx) { 5 | #logo { 6 | background-image: url("/images/branding/logo.main@2x.png"); 7 | background-size: auto auto; 8 | } 9 | } 10 | #logo { 11 | background-image: url("/images/branding/logo.main.png"); 12 | } 13 | @media all and (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5/1), (min-device-pixel-ratio: 1.5), (min-resolution: 138dpi), (min-resolution: 1.5dppx) { 14 | #logo { 15 | background-image: url("/images/branding/logo.main@2x.png"); 16 | background-size: 50px 100px; 17 | } 18 | } 19 | #logo { 20 | background-image: url("/images/branding/logo.main.png"); 21 | } 22 | @media all and (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5/1), (min-device-pixel-ratio: 1.5), (min-resolution: 138dpi), (min-resolution: 1.5dppx) { 23 | #logo { 24 | background-image: url("/images/branding/logo.main@2x.png"); 25 | background-size: cover; 26 | } 27 | } 28 | #logo { 29 | background-image: url("/images/branding/logo.main.png"); 30 | } 31 | @media all and (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5/1), (min-device-pixel-ratio: 1.5), (min-resolution: 138dpi), (min-resolution: 1.5dppx) { 32 | #logo { 33 | background-image: url("/images/branding/logo.main@2x.png"); 34 | background-size: contain; 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /lib/nib/border-radius.styl: -------------------------------------------------------------------------------- 1 | /* 2 | * Helper for border-radius(). 3 | */ 4 | 5 | -apply-border-radius(pos, importance) 6 | if length(pos) == 3 7 | // border-radius: 8 | y = pos[0] 9 | x = pos[1] 10 | // We don't use vendor for boder-radius anymore 11 | // vendor('border-radius-%s%s' % pos, pos[2], only: webkit official) 12 | {'border-%s-%s-radius' % pos}: pos[2] importance 13 | else if pos[0] in (top bottom) 14 | // border-radius: 15 | -apply-border-radius(pos[0] left pos[1], importance) 16 | -apply-border-radius(pos[0] right pos[1], importance) 17 | else if pos[0] in (left right) 18 | // border-radius: 19 | unshift(pos, top); 20 | -apply-border-radius(pos, importance) 21 | pos[0] = bottom 22 | -apply-border-radius(pos, importance) 23 | 24 | /* 25 | * border-radius supporting augmented behavior. 26 | * 27 | * Examples: 28 | * 29 | * border-radius: 2px 5px 30 | * border-radius: top 5px bottom 10px 31 | * border-radius: left 5px 32 | * border-radius: top left 5px 33 | * border-radius: top left 10px bottom right 5px 34 | * border-radius: top left 10px, bottom right 5px 35 | * 36 | */ 37 | 38 | border-radius() 39 | pos = () 40 | augmented = false 41 | importance = arguments[length(arguments) - 1] == !important ? !important : unquote('') 42 | 43 | for args in arguments 44 | for arg in args 45 | if arg is a 'ident' 46 | append(pos, arg) 47 | augmented = true 48 | else 49 | append(pos, arg) 50 | if augmented 51 | -apply-border-radius(pos, importance) 52 | pos = () 53 | border-radius pos unless augmented 54 | -------------------------------------------------------------------------------- /test/cases/flex.styl: -------------------------------------------------------------------------------- 1 | @import 'nib/vendor' 2 | @import 'nib/flex' 3 | 4 | section 5 | display: flex 6 | flex-direction: row 7 | 8 | div 9 | flex: 1 0 10 | 11 | section 12 | display: inline-flex 13 | 14 | flex-flow 15 | flex-flow row-reverse 16 | flex-flow row wrap 17 | flex-flow wrap-reverse column-reverse 18 | 19 | justify-content 20 | justify-content flex-start 21 | justify-content flex-end 22 | justify-content center 23 | justify-content space-between 24 | justify-content space-around 25 | 26 | align-items 27 | align-items flex-start 28 | align-items flex-end 29 | align-items center 30 | 31 | align-content 32 | align-content flex-start 33 | align-content flex-end 34 | align-content center 35 | align-content space-between 36 | align-content space-around 37 | 38 | flex 39 | flex 0 auto 40 | flex auto 0 41 | flex initial 42 | flex auto 43 | flex none 44 | flex 1 45 | flex 0px 0 0 46 | flex 1 2 0 47 | 48 | order 49 | order 0 50 | 51 | section 52 | display: flex !important 53 | 54 | section 55 | display: inline-flex !important 56 | // Obsolete property conditional rendering 57 | flex-version = box 58 | 59 | section 60 | display: flex 61 | flex-direction: row 62 | 63 | div 64 | flex: 1 0 65 | 66 | section 67 | display: inline-flex 68 | 69 | section 70 | display: flex !important 71 | 72 | section 73 | display: inline-flex !important 74 | 75 | // New property conditional rendering 76 | flex-version = flex 77 | 78 | section 79 | display: flex 80 | flex-direction: row 81 | 82 | div 83 | flex: 1 0 84 | 85 | section 86 | display: inline-flex 87 | 88 | section 89 | display: flex !important 90 | 91 | section 92 | display: inline-flex !important 93 | -------------------------------------------------------------------------------- /test/cases/linear-gradient.styl: -------------------------------------------------------------------------------- 1 | @import 'nib/vendor' 2 | @import 'nib/gradients' 3 | 4 | body 5 | background: linear-gradient(white, black) 6 | 7 | body 8 | background: linear-gradient(top, white, black) 9 | 10 | body 11 | background: linear-gradient(to top, white, black) 12 | 13 | body 14 | background: linear-gradient(to bottom right, white, black) 15 | 16 | body 17 | background: linear-gradient(45deg, white, black) 18 | 19 | body 20 | background: linear-gradient(-45deg, white, black) 21 | 22 | body 23 | background: linear-gradient(top left, white, red, blue, black) 24 | 25 | body 26 | background: linear-gradient(bottom right, white, black 80%) 27 | 28 | body 29 | background: linear-gradient(right bottom, white, 80% black) 30 | 31 | body 32 | background: linear-gradient(right bottom, 80% white, black) 33 | 34 | body 35 | background: linear-gradient(right bottom, 80% rgba(#000,0.5), black) 36 | 37 | body 38 | background: linear-gradient(right bottom, 80.5% hsla(0,0,0,0.5), black) 39 | 40 | body 41 | background: linear-gradient(right bottom, 80.5% hsla(0,0%,0%,0.5), black) 42 | 43 | body 44 | background: linear-gradient(right bottom, 20px white, black) 45 | 46 | vendor-prefixes = webkit moz ms o official 47 | 48 | body 49 | background: linear-gradient(top, white, black) 50 | 51 | body 52 | background: linear-gradient(top, white, black), white 53 | 54 | body 55 | border-image: linear-gradient(top, #fff, #000) 20% stretch stretch; 56 | 57 | body 58 | border-image: linear-gradient(top, #fff, #000) 20% fill stretch stretch; 59 | 60 | gradient-var = linear-gradient(40deg, red, lime) 61 | 62 | body 63 | cursor: gradient-var 64 | 65 | body 66 | list-style: gradient-var 67 | 68 | body 69 | list-style-image: gradient-var 70 | -------------------------------------------------------------------------------- /test/cases/vendor.inherit.styl: -------------------------------------------------------------------------------- 1 | @import 'nib/vendor' 2 | @import 'nib/gradients' 3 | 4 | vendor-prefixes = webkit moz official 5 | 6 | button 7 | box-shadow: inherit 8 | 9 | button 10 | opacity: inherit 11 | 12 | support-for-ie = false 13 | 14 | button 15 | opacity: inherit 16 | whitespace: inherit 17 | 18 | button 19 | animation-name: inherit; 20 | animation-delay: inherit; 21 | animation-duration: inherit; 22 | animation-iteration-count: inherit; 23 | animation-direction: inherit; 24 | animation-fill-mode: inherit; 25 | animation-play-state: inherit; 26 | animation-timing-function: inherit 27 | 28 | button 29 | animation: inherit; 30 | 31 | button 32 | appearance: inherit; 33 | 34 | section 35 | column-count: inherit; 36 | column-rule: inherit; 37 | column-gap: inherit; 38 | 39 | section 40 | column-count: inherit; 41 | column-rule-width: inherit; 42 | column-rule-style: inherit; 43 | column-rule-color: inherit; 44 | column-width: inherit; 45 | 46 | section 47 | column-count: inherit; 48 | column-rule-width: inherit; 49 | column-rule-style: inherit; 50 | column-rule-color: inherit; 51 | column-gap: inherit; 52 | 53 | prepend(vendor-prefixes, o) 54 | 55 | button 56 | background-origin: inherit; 57 | background-clip: inherit; 58 | 59 | button 60 | transition: inherit 61 | backface-visibility: inherit 62 | 63 | button 64 | transition-property: inherit 65 | transition-duration: inherit 66 | transition-timing-function: inherit 67 | transition-delay: inherit 68 | 69 | button 70 | transform: inherit 71 | 72 | button 73 | transform: inherit 74 | 75 | button 76 | perspective: inherit 77 | 78 | section 79 | border-image: inherit 80 | 81 | section 82 | border-image: inherit; 83 | 84 | p 85 | hyphens: inherit 86 | 87 | section 88 | overflow-scrolling: inherit 89 | -------------------------------------------------------------------------------- /test/cases/vendor.initial.styl: -------------------------------------------------------------------------------- 1 | @import 'nib/vendor' 2 | @import 'nib/gradients' 3 | 4 | vendor-prefixes = webkit moz official 5 | 6 | button 7 | box-shadow: initial 8 | 9 | button 10 | opacity: initial 11 | 12 | support-for-ie = false 13 | 14 | button 15 | opacity: initial 16 | whitespace: initial 17 | 18 | button 19 | animation-name: initial; 20 | animation-delay: initial; 21 | animation-duration: initial; 22 | animation-iteration-count: initial; 23 | animation-direction: initial; 24 | animation-fill-mode: initial; 25 | animation-play-state: initial; 26 | animation-timing-function: initial 27 | 28 | button 29 | animation: initial; 30 | 31 | button 32 | appearance: initial; 33 | 34 | section 35 | column-count: initial; 36 | column-rule: initial; 37 | column-gap: initial; 38 | 39 | section 40 | column-count: initial; 41 | column-rule-width: initial; 42 | column-rule-style: initial; 43 | column-rule-color: initial; 44 | column-width: initial; 45 | 46 | section 47 | column-count: initial; 48 | column-rule-width: initial; 49 | column-rule-style: initial; 50 | column-rule-color: initial; 51 | column-gap: initial; 52 | 53 | prepend(vendor-prefixes, o) 54 | 55 | button 56 | background-origin: initial; 57 | background-clip: initial; 58 | 59 | button 60 | transition: initial 61 | backface-visibility: initial 62 | 63 | button 64 | transition-property: initial 65 | transition-duration: initial 66 | transition-timing-function: initial 67 | transition-delay: initial 68 | 69 | button 70 | transform: initial 71 | 72 | button 73 | transform: initial 74 | 75 | button 76 | perspective: initial 77 | 78 | section 79 | border-image: initial 80 | 81 | section 82 | border-image: initial; 83 | 84 | p 85 | hyphens: initial 86 | 87 | section 88 | overflow-scrolling: initial 89 | -------------------------------------------------------------------------------- /lib/nodes/color-image.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Module dependencies. 3 | */ 4 | 5 | var stylus = require('stylus'), 6 | Canvas = require('canvas'), 7 | nodes = stylus.nodes, 8 | utils = stylus.utils; 9 | 10 | /** 11 | * Expose `ColorImage`. 12 | */ 13 | 14 | exports = module.exports = ColorImage; 15 | 16 | /** 17 | * Create a new `ColorImage` node with the given `color`. 18 | * 19 | * @param {Color} color node 20 | * @return {ColorImage} 21 | * @api public 22 | */ 23 | 24 | exports.create = function(color){ 25 | utils.assertColor(color); 26 | return new ColorImage(color); 27 | }; 28 | 29 | /** 30 | * Return the data URI for `colorImage`. 31 | * 32 | * @param {ColorImage} colorImage 33 | * @return {String} 34 | * @api public 35 | */ 36 | 37 | exports.dataURL = function(colorImage){ 38 | utils.assertType(colorImage, 'colorimage'); 39 | return new nodes.String(colorImage.toDataURL()); 40 | }; 41 | 42 | /** 43 | * Initialize a new `ColorImage` node with the given arguments. 44 | * 45 | * @param {Color} color node 46 | * @api private 47 | */ 48 | 49 | function ColorImage(color) { 50 | this.color = color; 51 | this.canvas = new Canvas(1, 1); 52 | this.ctx = this.canvas.getContext('2d'); 53 | this.ctx.fillStyle = color.toString(); 54 | this.ctx.fillRect(0, 0, 1, 1); 55 | } 56 | 57 | /** 58 | * Inherit from `nodes.Node.prototype`. 59 | */ 60 | 61 | ColorImage.prototype.__proto__ = nodes.Node.prototype; 62 | 63 | /** 64 | * Inspect the color. 65 | * 66 | * @return {String} 67 | * @api private 68 | */ 69 | 70 | ColorImage.prototype.toString = function(){ 71 | return 'ColorImage(' + this.color.toString() + ')'; 72 | }; 73 | 74 | /** 75 | * Return data URI string. 76 | * 77 | * @return {String} 78 | * @api private 79 | */ 80 | 81 | ColorImage.prototype.toDataURL = function(){ 82 | return this.canvas.toDataURL(); 83 | }; 84 | -------------------------------------------------------------------------------- /test/cases/vendor.styl: -------------------------------------------------------------------------------- 1 | @import 'nib/vendor' 2 | @import 'nib/gradients' 3 | 4 | vendor-prefixes = webkit moz official 5 | 6 | button 7 | box-shadow: 1px 1px 5px #eee 8 | 9 | button 10 | opacity: 0.5 11 | 12 | support-for-ie = false 13 | 14 | button 15 | opacity: 0.75 16 | whitespace: no-wrap 17 | 18 | button 19 | animation-name: myAnimation; 20 | animation-delay: 1s; 21 | animation-duration: 10s; 22 | animation-iteration-count: infinite; 23 | animation-direction: alternate; 24 | animation-fill-mode: both; 25 | animation-play-state: running; 26 | animation-timing-function: ease 27 | 28 | button 29 | animation: myAnimation 1s ease; 30 | 31 | button 32 | appearance: none; 33 | 34 | section 35 | column-count: 2; 36 | column-rule: 1px solid #bbb; 37 | column-gap: 2em; 38 | 39 | section 40 | column-count: 2; 41 | column-rule-width: 1px; 42 | column-rule-style: solid; 43 | column-rule-color: #bbb; 44 | column-width: 200px; 45 | 46 | section 47 | column-count: 2; 48 | column-rule-width: 1px; 49 | column-rule-style: solid; 50 | column-rule-color: #bbb; 51 | column-gap: 2em; 52 | 53 | prepend(vendor-prefixes, o) 54 | 55 | button 56 | background-origin: border-box, padding-box; 57 | background-clip: border-box, padding-box; 58 | 59 | button 60 | transition: all 0.1s ease-in-out 1s 61 | backface-visibility: hidden 62 | 63 | button 64 | transition-property: all 65 | transition-duration: 0.1s 66 | transition-timing-function: ease-in-out 67 | transition-delay: 1s 68 | 69 | button 70 | transform: rotateY(45deg) 71 | 72 | button 73 | transform: perspective(500px) 74 | 75 | button 76 | perspective: 500 77 | 78 | section 79 | border-image: url("image.png") 20% stretch stretch; 80 | 81 | section 82 | border-image: url("image.png") 20% fill stretch stretch; 83 | 84 | p 85 | hyphens: auto 86 | 87 | section 88 | overflow-scrolling: touch 89 | -------------------------------------------------------------------------------- /test/cases/vendor.placeholder.css: -------------------------------------------------------------------------------- 1 | body::-webkit-input-placeholder { 2 | color: #333; 3 | font-weight: normal; 4 | font-family: Helvetica, arial, sans-serif; 5 | } 6 | body:-moz-placeholder { 7 | color: #333; 8 | font-weight: normal; 9 | font-family: Helvetica, arial, sans-serif; 10 | } 11 | body::-moz-placeholder { 12 | color: #333; 13 | font-weight: normal; 14 | font-family: Helvetica, arial, sans-serif; 15 | } 16 | body:-ms-input-placeholder { 17 | color: #333; 18 | font-weight: normal; 19 | font-family: Helvetica, arial, sans-serif; 20 | } 21 | .placeholder-red::-webkit-input-placeholder { 22 | color: #f00; 23 | } 24 | .placeholder-red:-moz-placeholder { 25 | color: #f00; 26 | } 27 | .placeholder-red::-moz-placeholder { 28 | color: #f00; 29 | } 30 | .placeholder-red:-ms-input-placeholder { 31 | color: #f00; 32 | } 33 | .placeholder-green::-webkit-input-placeholder { 34 | color: #008000; 35 | } 36 | .placeholder-green:-moz-placeholder { 37 | color: #008000; 38 | } 39 | .placeholder-green::-moz-placeholder { 40 | color: #008000; 41 | } 42 | .placeholder-green:-ms-input-placeholder { 43 | color: #008000; 44 | } 45 | .input-placeholder-gray::-webkit-input-placeholder { 46 | color: #808080; 47 | } 48 | .input-placeholder-gray:-moz-placeholder { 49 | color: #808080; 50 | } 51 | .input-placeholder-gray::-moz-placeholder { 52 | color: #808080; 53 | } 54 | .input-placeholder-gray:-ms-input-placeholder { 55 | color: #808080; 56 | } 57 | textarea::-webkit-input-placeholder { 58 | font-style: italic; 59 | font-weight: bold; 60 | padding: 4px 10px; 61 | } 62 | textarea:-moz-placeholder { 63 | font-style: italic; 64 | font-weight: bold; 65 | padding: 4px 10px; 66 | } 67 | textarea::-moz-placeholder { 68 | font-style: italic; 69 | font-weight: bold; 70 | padding: 4px 10px; 71 | } 72 | textarea:-ms-input-placeholder { 73 | font-style: italic; 74 | font-weight: bold; 75 | padding: 4px 10px; 76 | } 77 | -------------------------------------------------------------------------------- /test/index.pug: -------------------------------------------------------------------------------- 1 | html 2 | head 3 | title Nib 4 | link(rel='stylesheet', href='/test.css') 5 | link(rel='stylesheet', href='/gradients.css') 6 | link(rel='stylesheet', href='/buttons.css') 7 | link(rel='stylesheet', href='/clearfix.css') 8 | link(rel='stylesheet', href='/color-images.css') 9 | script(src='/jquery.min.js') 10 | script. 11 | $(function(){ 12 | $(':button, :submit, a.button').click(function(){ 13 | return false; 14 | }); 15 | }); 16 | body 17 | h2 Gradients 18 | table#gradients 19 | - var n = 9 20 | tbody 21 | - while (n--) 22 | tr 23 | td 24 | td 25 | h2 Color images 26 | #color-images 27 | .rgba rgba() 28 | .hexa-short #0003 29 | .hexa #ffffff80 30 | .rgb rgb() 31 | .hex #fff 32 | h2 Clearfix 33 | div#clearfix-left-only 34 | div 35 | | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut commodo 36 | | turpis quis mauris tempus commodo a non tellus. Sed eu convallis 37 | | mauris. Donec scelerisque lacus quis orci viverra tincidunt. Nunc sed 38 | | risus lectus. Proin vulputate elit sed eros consectetur interdum. 39 | div#clearfix-left-right 40 | div.left 41 | | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut commodo 42 | | turpis quis mauris tempus commodo a non tellus. Sed eu convallis 43 | | mauris. Donec scelerisque lacus quis orci viverra tincidunt. Nunc sed 44 | | risus lectus. Proin vulputate elit sed eros consectetur interdum. 45 | div.right 46 | | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut commodo 47 | | turpis quis mauris tempus commodo a non tellus. Sed eu convallis 48 | | mauris. Donec scelerisque lacus quis orci viverra tincidunt. Nunc sed 49 | | risus lectus. Proin vulputate elit sed eros consectetur interdum. 50 | -------------------------------------------------------------------------------- /lib/nib/reset.styl: -------------------------------------------------------------------------------- 1 | // Based on [Eric Meyer's reset](http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/) 2 | 3 | global-reset() 4 | html, body, div, span, applet, object, iframe, 5 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 6 | a, abbr, acronym, address, big, cite, code, 7 | del, dfn, em, img, ins, kbd, q, s, samp, 8 | small, strike, strong, sub, sup, tt, var, 9 | dl, dt, dd, ol, ul, li, 10 | fieldset, form, label, legend, 11 | table, caption, tbody, tfoot, thead, tr, th, td 12 | reset-box-model() 13 | reset-font() 14 | body 15 | reset-body() 16 | ol, ul 17 | list-style: none 18 | table 19 | reset-table() 20 | caption, th, td 21 | reset-table-cell() 22 | a img 23 | border: none 24 | 25 | nested-reset() 26 | div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, 27 | pre, a, abbr, acronym, address, code, del, dfn, em, img, 28 | dl, dt, dd, ol, ul, li, fieldset, form, label, 29 | legend, caption, tbody, tfoot, thead, tr 30 | reset-box-model() 31 | reset-font() 32 | table 33 | reset-table() 34 | caption, th, td 35 | reset-table-cell() 36 | a img 37 | border: none 38 | 39 | reset-box-model() 40 | margin: 0 41 | padding: 0 42 | border: 0 43 | outline: 0 44 | 45 | reset-font() 46 | font-weight: inherit 47 | font-style: inherit 48 | font-family: inherit 49 | font-size: 100% 50 | vertical-align: baseline 51 | 52 | reset-body() 53 | line-height: 1 54 | color: black 55 | background: white 56 | 57 | reset-table() 58 | border-collapse: separate 59 | border-spacing: 0 60 | vertical-align: middle 61 | 62 | reset-table-cell() 63 | text-align: left 64 | font-weight: normal 65 | vertical-align: middle 66 | 67 | reset-html5() 68 | article, aside, canvas, details, figcaption, 69 | figure, footer, header, hgroup, menu, nav, 70 | section, summary, main 71 | reset-box-model() 72 | display: block 73 | audio, canvas, video 74 | display inline-block 75 | *display inline 76 | *zoom 1 77 | audio:not([controls]),[hidden] 78 | display none 79 | -------------------------------------------------------------------------------- /test/gradients.styl: -------------------------------------------------------------------------------- 1 | 2 | @import 'nib/gradients' 3 | 4 | #gradients tr 5 | height: 50px 6 | color: white 7 | td 8 | padding: 0 9 | width: 150px 10 | &:first-child 11 | border-right: 1px solid #fff 12 | 13 | #gradients 14 | tr:nth-child(1) 15 | td:first-child 16 | background: linear-gradient(top, yellow, blue) 17 | td:last-child 18 | background: linear-gradient-image(50px, yellow, blue) 19 | tr:nth-child(2) 20 | td:first-child 21 | background: linear-gradient(top, red, green, yellow, blue) 22 | td:last-child 23 | background: linear-gradient-image(50px, red, green, yellow, blue) 24 | tr:nth-child(3) 25 | td:first-child 26 | background: linear-gradient(top, red, green 10%, 90% yellow, blue) 27 | td:last-child 28 | background: linear-gradient-image(50px, red, green 10%, 90% yellow, blue) 29 | tr:nth-child(4) 30 | td:first-child 31 | background: linear-gradient(top, red 15, green 80%, white, 90% yellow, blue) 32 | td:last-child 33 | background: linear-gradient-image(50px, red 15, green 80%, white, 90% yellow, blue) 34 | tr:nth-child(5) 35 | td:first-child 36 | background: linear-gradient(bottom, #fff, #000) 37 | td:last-child 38 | background: linear-gradient-image(50px bottom, #fff, #000) 39 | tr:nth-child(6) 40 | td:first-child 41 | background: linear-gradient(left, #fff, #000) 42 | td:last-child 43 | background: linear-gradient-image(150px left, #fff, #000) 44 | tr:nth-child(7) 45 | td:first-child 46 | background: linear-gradient(right, #008AB4, #E9FAFF, 2% #90E4FD, #1FCBFF, 80% #008AB4) 47 | td:last-child 48 | background: linear-gradient-image(150px right, #008AB4, #E9FAFF, 2% #90E4FD, #1FCBFF, 80% #008AB4) 49 | tr:nth-child(8) 50 | td:first-child 51 | background: linear-gradient(top, red, 50% green, blue) 52 | td:last-child 53 | background: linear-gradient-image(50px top, red, 50% green, blue) 54 | tr:nth-child(9) 55 | td:first-child 56 | background: linear-gradient(50px top, red, green, yellow, blue) 57 | -------------------------------------------------------------------------------- /test/cases/multiple-gradients.css: -------------------------------------------------------------------------------- 1 | .test1 { 2 | background: -webkit-linear-gradient(bottom, #fff, #000), -webkit-linear-gradient(top, #000, #fff); 3 | background: -moz-linear-gradient(bottom, #fff, #000), -moz-linear-gradient(top, #000, #fff); 4 | background: -o-linear-gradient(bottom, #fff, #000), -o-linear-gradient(top, #000, #fff); 5 | background: -ms-linear-gradient(bottom, #fff, #000), -ms-linear-gradient(top, #000, #fff); 6 | background: linear-gradient(to top, #fff, #000), linear-gradient(to bottom, #000, #fff); 7 | } 8 | .test2 { 9 | background: #fff -webkit-linear-gradient(bottom, #000, #fff) 0 0 no-repeat, -webkit-linear-gradient(top, #000, #fff) 10px bottom repeat-y; 10 | background: #fff -moz-linear-gradient(bottom, #000, #fff) 0 0 no-repeat, -moz-linear-gradient(top, #000, #fff) 10px bottom repeat-y; 11 | background: #fff -o-linear-gradient(bottom, #000, #fff) 0 0 no-repeat, -o-linear-gradient(top, #000, #fff) 10px bottom repeat-y; 12 | background: #fff -ms-linear-gradient(bottom, #000, #fff) 0 0 no-repeat, -ms-linear-gradient(top, #000, #fff) 10px bottom repeat-y; 13 | background: #fff linear-gradient(to top, #000, #fff) 0 0 no-repeat, linear-gradient(to bottom, #000, #fff) 10px bottom repeat-y; 14 | } 15 | .test3 { 16 | background-image: -webkit-linear-gradient(bottom, #fff, #000), url("a.png"), -webkit-linear-gradient(top, #000, #fff); 17 | background-image: -moz-linear-gradient(bottom, #fff, #000), url("a.png"), -moz-linear-gradient(top, #000, #fff); 18 | background-image: -o-linear-gradient(bottom, #fff, #000), url("a.png"), -o-linear-gradient(top, #000, #fff); 19 | background-image: -ms-linear-gradient(bottom, #fff, #000), url("a.png"), -ms-linear-gradient(top, #000, #fff); 20 | background-image: linear-gradient(to top, #fff, #000), url("a.png"), linear-gradient(to bottom, #000, #fff); 21 | } 22 | .test4 { 23 | background: -webkit-linear-gradient(top, #000, #fff), -webkit-linear-gradient(bottom, #fff, #000); 24 | background: -moz-linear-gradient(top, #000, #fff), -moz-linear-gradient(bottom, #fff, #000); 25 | background: -o-linear-gradient(top, #000, #fff), -o-linear-gradient(bottom, #fff, #000); 26 | background: -ms-linear-gradient(top, #000, #fff), -ms-linear-gradient(bottom, #fff, #000); 27 | background: linear-gradient(to bottom, #000, #fff), linear-gradient(to top, #fff, #000); 28 | } 29 | -------------------------------------------------------------------------------- /lib/nib/gradients.styl: -------------------------------------------------------------------------------- 1 | @import 'config' 2 | 3 | /* 4 | * Implicit color stop position. 5 | */ 6 | 7 | pos-in-stops(i, stops) 8 | len = length(stops) 9 | if len - 1 == i 10 | 100% 11 | else if i 12 | unit(i / len * 100, '%') 13 | else 14 | 0 15 | 16 | /* 17 | * Normalize color stops: 18 | * 19 | * - (color pos) -> (pos color) 20 | * - (color) -> (implied-pos color) 21 | * 22 | */ 23 | 24 | normalize-stops(stops) 25 | stops = clone(stops) 26 | for stop, i in stops 27 | if length(stop) == 1 28 | color = stop[0] 29 | stop[0] = pos-in-stops(i, stops) 30 | stop[1] = color 31 | else if typeof(stop[1]) == 'unit' 32 | pos = stop[1] 33 | stop[1] = stop[0] 34 | stop[0] = pos 35 | stops 36 | 37 | /* 38 | * Join color stops with the given translation function. 39 | */ 40 | 41 | join-stops(stops, translate) 42 | str = '' 43 | len = length(stops) 44 | for stop, i in stops 45 | str += ', ' if i 46 | pos = stop[0] 47 | color = stop[1] 48 | str += translate(color, pos) 49 | unquote(str) 50 | 51 | /* 52 | * Standard color stop. 53 | */ 54 | 55 | std-stop(color, pos) 56 | '%s %s' % (color pos) 57 | 58 | /* 59 | * Create a linear gradient with the given start position 60 | * and variable number of color stops. 61 | * 62 | * Examples: 63 | * 64 | * background: linear-gradient(top, red, green, blue) 65 | * background: linear-gradient(bottom, red, green 50%, blue) 66 | * background: linear-gradient(bottom, red, 50% green, blue) 67 | * background: linear-gradient(bottom, red, 50% green, 90% white, blue) 68 | * 69 | */ 70 | 71 | linear-gradient(start, stops...) 72 | error('color stops required') unless length(stops) 73 | 74 | unquote('linear-gradient(' + join(', ',arguments) + ')') 75 | 76 | /* 77 | * Create a linear gradient image with the given start position 78 | * and variable number of color stops. 79 | */ 80 | 81 | linear-gradient-image(start, stops...) 82 | error('node-canvas is required for linear-gradient-image()') unless has-canvas 83 | stops = stops[0] if length(stops) == 1 84 | error('gradient image size required') unless start[0] is a 'unit' 85 | size = start[0] 86 | start = start[1] or 'top' 87 | grad = create-gradient-image(size, start) 88 | stops = normalize-stops(stops) 89 | add-color-stop(grad, stop[0], stop[1]) for stop in stops 90 | 'url(%s)' % gradient-data-uri(grad) 91 | -------------------------------------------------------------------------------- /test/cases/vendor.values.css: -------------------------------------------------------------------------------- 1 | button { 2 | -webkit-transition: -webkit-transform; 3 | -moz-transition: -moz-transform; 4 | -o-transition: -o-transform; 5 | -ms-transition: -ms-transform; 6 | transition: transform; 7 | } 8 | button { 9 | -webkit-transition: -webkit-transform 0.3s 0.2s linear; 10 | -moz-transition: -moz-transform 0.3s 0.2s linear; 11 | -o-transition: -o-transform 0.3s 0.2s linear; 12 | -ms-transition: -ms-transform 0.3s 0.2s linear; 13 | transition: transform 0.3s 0.2s linear; 14 | } 15 | button { 16 | -webkit-transition: -webkit-transform cubic-bezier(1, 1, 1); 17 | -moz-transition: -moz-transform cubic-bezier(1, 1, 1); 18 | -o-transition: -o-transform cubic-bezier(1, 1, 1); 19 | -ms-transition: -ms-transform cubic-bezier(1, 1, 1); 20 | transition: transform cubic-bezier(1, 1, 1); 21 | } 22 | button { 23 | -webkit-transition: -webkit-transform 2s, width 0.3s linear, height; 24 | -moz-transition: -moz-transform 2s, width 0.3s linear, height; 25 | -o-transition: -o-transform 2s, width 0.3s linear, height; 26 | -ms-transition: -ms-transform 2s, width 0.3s linear, height; 27 | transition: transform 2s, width 0.3s linear, height; 28 | } 29 | button { 30 | -webkit-transition: height, -webkit-transform 2s, width 0.3s linear; 31 | -moz-transition: height, -moz-transform 2s, width 0.3s linear; 32 | -o-transition: height, -o-transform 2s, width 0.3s linear; 33 | -ms-transition: height, -ms-transform 2s, width 0.3s linear; 34 | transition: height, transform 2s, width 0.3s linear; 35 | } 36 | button { 37 | -webkit-transition: -webkit-transform 1s !important; 38 | -moz-transition: -moz-transform 1s !important; 39 | -o-transition: -o-transform 1s !important; 40 | -ms-transition: -ms-transform 1s !important; 41 | transition: transform 1s !important; 42 | } 43 | button { 44 | -webkit-transition: -webkit-transform, height !important; 45 | -moz-transition: -moz-transform, height !important; 46 | -o-transition: -o-transform, height !important; 47 | -ms-transition: -ms-transform, height !important; 48 | transition: transform, height !important; 49 | } 50 | button { 51 | -webkit-transition: -webkit-transform 1s, width 2s linear, cubic-bezier(1, 1, 1); 52 | -moz-transition: -moz-transform 1s, width 2s linear, cubic-bezier(1, 1, 1); 53 | -o-transition: -o-transform 1s, width 2s linear, cubic-bezier(1, 1, 1); 54 | -ms-transition: -ms-transform 1s, width 2s linear, cubic-bezier(1, 1, 1); 55 | transition: transform 1s, width 2s linear, cubic-bezier(1, 1, 1); 56 | } 57 | -------------------------------------------------------------------------------- /lib/nib/normalize/forms.styl: -------------------------------------------------------------------------------- 1 | // Based in Nicolas Gallagher's git.io/normalize 2 | normalize-forms() 3 | // Known limitation: Chrome and Safari on OS X allow very limited 4 | // styling of `select`, unless a `border` property is set. 5 | button, input, optgroup, select, textarea 6 | color inherit // Correct color not being inherited. 7 | font inherit // Correct font properties not being inherited. 8 | margin 0 // Fix margins in FF 4+, Safari, and Chrome. 9 | 10 | button // Fix `overflow` set to `hidden` in IE 8/9/10/11. 11 | overflow visible 12 | 13 | button, select // Consistent text-transform across browsers. 14 | text-transform none 15 | 16 | // Fix WebKit bug in Android 4.0, inability to style clickable `input` in 17 | // iOS and improve usability and consistency of cursor style. 18 | button, html input[type='button'], input[type='reset'], input[type='submit'] 19 | cursor pointer 20 | -webkit-appearance button 21 | 22 | // Reset default cursor for disabled elements. 23 | button[disabled], html input[disabled] 24 | cursor default 25 | 26 | // Remove inner padding and border in FF 4+. 27 | button::-moz-focus-inner, input::-moz-focus-inner 28 | border 0 29 | padding 0 30 | 31 | input // Reset line-height again FF 4+ UA stylsheet. 32 | line-height normal 33 | 34 | // Fix box sizing and excess padding in IE 8~10 35 | input[type='checkbox'], input[type='radio'] 36 | box-sizing border-box 37 | padding 0 38 | 39 | // Fix the cursor style for Chrome's increment/decrement buttons. 40 | input[type='number']::-webkit-inner-spin-button, 41 | input[type='number']::-webkit-outer-spin-button 42 | height auto 43 | 44 | // Consistent appearance and box-sizing in Safari and Chrome. 45 | input[type='search'] 46 | -webkit-appearance textfield 47 | -moz-box-sizing content-box 48 | -webkit-box-sizing content-box 49 | box-sizing content-box 50 | 51 | // No inner padding and search cancel button in Safari and Chrome on OS X. 52 | input[type='search']::-webkit-search-cancel-button, 53 | input[type='search']::-webkit-search-decoration 54 | -webkit-appearance none 55 | 56 | fieldset // Consistent border, margin, and padding. 57 | border 1px solid #c0c0c0 58 | margin 0 2px 59 | padding 0.35em 0.625em 0.75em 60 | 61 | legend // Hack to correct `color` not being inherited in IE 8/9/10/11. 62 | border 0 63 | padding 0 64 | 65 | textarea // Remove default vertical scrollbar in IE 8~11. 66 | overflow auto 67 | 68 | optgroup // Don't inherit the `font-weight` applied above. 69 | font-weight bold 70 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Nib [![npm](https://img.shields.io/npm/v/nib)](https://www.npmjs.com/package/nib) [![npm](https://img.shields.io/npm/dm/nib.svg?sanitize=true)](https://www.npmjs.com/package/nib) [![build status](https://github.com/stylus/nib/actions/workflows/ci.yml/badge.svg?branch=main)](https://github.com/stylus/nib/actions?query=branch%3Amain) 2 | 3 | Stylus mixins, utilities, components, and gradient image generation. Don't forget to check out the [documentation](http://stylus.github.io/nib). 4 | 5 | ## Installation 6 | 7 | ```bash 8 | $ npm install nib 9 | ``` 10 | 11 | If the image generation features of Nib are desired, such as generating the linear gradient images, install [node-canvas](http://github.com/learnboost/node-canvas): 12 | 13 | ```bash 14 | $ npm install canvas 15 | ``` 16 | 17 | ## JavaScript API 18 | 19 | Below is an example of how to utilize nib and stylus with the connect framework (or express). 20 | 21 | ```javascript 22 | var connect = require('connect') 23 | , stylus = require('stylus') 24 | , nib = require('nib'); 25 | 26 | var server = connect(); 27 | 28 | function compile(str, path) { 29 | return stylus(str) 30 | .set('filename', path) 31 | .set('compress', true) 32 | .use(nib()); 33 | } 34 | 35 | server.use(stylus.middleware({ 36 | src: __dirname 37 | , compile: compile 38 | })); 39 | ``` 40 | 41 | ## Stylus API 42 | 43 | To gain access to everything nib has to offer, simply add: 44 | 45 | ```css 46 | @import 'nib' 47 | ``` 48 | 49 | Or you may also pick and choose based on the directory structure in `./lib`, for example: 50 | 51 | ```css 52 | @import 'nib/gradients' 53 | @import 'nib/overflow' 54 | @import 'nib/normalize' 55 | ``` 56 | 57 | _To be continued..._ 58 | 59 | ## More Information 60 | 61 | - Introduction [screencast](http://www.screenr.com/M6a) 62 | 63 | ## Testing 64 | 65 | You will first need to install the dependencies: 66 | 67 | ```bash 68 | $ npm install -d 69 | ``` 70 | 71 | Run the automated test cases: 72 | 73 | ```bash 74 | $ npm test 75 | ``` 76 | 77 | For visual testing run the test server: 78 | 79 | ```bash 80 | $ npm run-script test-server 81 | ``` 82 | 83 | Then visit `localhost:3000` in your browser. 84 | 85 | ## Contributors 86 | 87 | I would love more contributors. And if you have helped out, you are awesome! I want to give a huge thanks to these people: 88 | 89 | - [TJ Holowaychuk](https://github.com/tj) (Original Creator) 90 | - [Sean Lang](https://github.com/notslang) (Previous Maintainer) 91 | - [iChenLei](https://github.com/iChenLei) (Current Maintainer) 92 | - [Isaac Johnston](https://github.com/superstructor) 93 | - [Everyone Else](https://github.com/tj/nib/contributors) 94 | -------------------------------------------------------------------------------- /lib/nodes/vendor-helpers.js: -------------------------------------------------------------------------------- 1 | var RE_GRADIENT_STOPS = /([\(\,]\s*)(-?(?:\d*\.)?\d+(?:%|px|em))(\s+)((hsl|rgb)a?\([^\)]+\)|#[^\)\,]+)/g, 2 | RE_GRADIENT_VAL = /(\(\s*)(?:(-?(\d*\.)?\d+)deg|((to )?(top|bottom|left|right)( (top|bottom|left|right))?))/g, 3 | RE_GRADIENT_TYPE = /((repeating-)?(linear|radial)-gradient\()/g, 4 | RE_TRANSFORM = /\b(transform)\b/g, 5 | RE_FILL_KEYWORD = /\s*\b(fill)\b\s*/g; 6 | 7 | var DIRECTIONS = { top: 'bottom', bottom: 'top', left: 'right', right:'left' }; 8 | 9 | /** 10 | * Expose `normalize`. 11 | */ 12 | 13 | function normalize(property, value, prefix){ 14 | var result = value.toString(), 15 | args; 16 | 17 | /* Fixing the gradients */ 18 | if (~result.indexOf('gradient(')) { 19 | 20 | /* Normalize color stops */ 21 | result = result.replace(RE_GRADIENT_STOPS,'$1$4$3$2'); 22 | 23 | /* Normalize legacy gradients */ 24 | result = result.replace(RE_GRADIENT_VAL, function(){ 25 | args = [].slice.call(arguments, 1); 26 | return normalizeGradient(args, prefix); 27 | }); 28 | 29 | /* Adding prefixes to the legacy gradients */ 30 | if (prefix) result = result.replace(RE_GRADIENT_TYPE, '-' + prefix + '-$1'); 31 | } 32 | 33 | /* Adding prefixes to the `transform` values of legacy `transition` property */ 34 | if (prefix && (property == "'transition'" || property == "'transition-property'")) { 35 | result = result.replace(RE_TRANSFORM, '-' + prefix + '-$1'); 36 | } 37 | 38 | /* Removing `fill` keyword from the legacy `border-image` property */ 39 | if (prefix && (property == "'border-image'" || property == "'border-image-slice'")) { 40 | result = result.replace(RE_FILL_KEYWORD, ' '); 41 | } 42 | 43 | return result; 44 | } 45 | 46 | function normalizeGradient(parts, prefix){ 47 | /* Fix the degrees to the legacy syntax */ 48 | var val = parts[0]; 49 | 50 | // when the gradients were unprefixed, the w3c changed the way that the 51 | // angle direction is interpreted. see: 52 | // http://blogs.msdn.com/b/ie/archive/2012/06/25/unprefixed-css3-gradients-in-ie10.aspx 53 | if (parts[1]) val += (prefix ? parseFloat((Math.abs(450 - parts[1]) % 360).toFixed(3)) : parts[1]) + 'deg'; 54 | 55 | /* Fix the directions to the legacy syntax */ 56 | if (prefix && parts[4]) { 57 | // `to top` to `bottom` etc. 58 | if (parts[5]) val += DIRECTIONS[parts[5]]; 59 | if (parts[6]) val += ' ' + DIRECTIONS[parts[7]]; 60 | } else if (!prefix && !parts[4]) { 61 | // `top` to `to bottom` etc. 62 | if (parts[5]) val += 'to ' + DIRECTIONS[parts[5]]; 63 | if (parts[6]) val += ' ' + DIRECTIONS[parts[7]]; 64 | } else { 65 | if (parts[3]) val += parts[3]; 66 | } 67 | 68 | return val; 69 | } 70 | 71 | var plugin = function(){ 72 | return function(style){ 73 | var nodes = this.nodes; 74 | style.define('normalize', function(property, value, prefix) { 75 | return new nodes.Ident(normalize(property, value, prefix)); 76 | }); 77 | }; 78 | }; 79 | module.exports = plugin; 80 | -------------------------------------------------------------------------------- /test/cases/normalize-reset.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-family: sans-serif; 3 | -ms-text-size-adjust: 100%; 4 | -webkit-text-size-adjust: 100%; 5 | } 6 | body { 7 | margin: 0; 8 | } 9 | article, 10 | details, 11 | section, 12 | summary, 13 | aside, 14 | main, 15 | menu, 16 | nav, 17 | figcaption, 18 | figure, 19 | footer, 20 | header, 21 | hgroup { 22 | display: block; 23 | } 24 | audio, 25 | canvas, 26 | progress, 27 | video { 28 | display: inline-block; 29 | vertical-align: baseline; 30 | } 31 | audio:not([controls]) { 32 | display: none; 33 | height: 0; 34 | } 35 | [hidden], 36 | template { 37 | display: none; 38 | } 39 | a { 40 | background-color: transparent; 41 | } 42 | a:active, 43 | a:hover { 44 | outline: 0; 45 | } 46 | abbr[title] { 47 | border-bottom: 1px dotted; 48 | } 49 | dfn { 50 | font-style: italic; 51 | } 52 | mark { 53 | background: #ff0; 54 | color: #000; 55 | } 56 | b, 57 | strong { 58 | font-weight: bold; 59 | } 60 | h1 { 61 | font-size: 2em; 62 | margin: 0.67em 0; 63 | } 64 | small { 65 | font-size: 80%; 66 | } 67 | sub, 68 | sup { 69 | font-size: 75%; 70 | line-height: 0; 71 | position: relative; 72 | vertical-align: baseline; 73 | } 74 | sup { 75 | top: -0.5em; 76 | } 77 | sub { 78 | bottom: -0.25em; 79 | } 80 | img { 81 | border: 0; 82 | } 83 | svg:not(:root) { 84 | overflow: hidden; 85 | } 86 | figure { 87 | margin: 1em 40px; 88 | } 89 | hr { 90 | -moz-box-sizing: content-box; 91 | box-sizing: content-box; 92 | height: 0; 93 | } 94 | pre { 95 | overflow: auto; 96 | } 97 | code, 98 | kbd, 99 | pre, 100 | samp { 101 | font-family: monospace, monospace; 102 | font-size: 1em; 103 | } 104 | button, 105 | input, 106 | optgroup, 107 | select, 108 | textarea { 109 | color: inherit; 110 | font: inherit; 111 | margin: 0; 112 | } 113 | button { 114 | overflow: visible; 115 | } 116 | button, 117 | select { 118 | text-transform: none; 119 | } 120 | button, 121 | html input[type='button'], 122 | input[type='reset'], 123 | input[type='submit'] { 124 | cursor: pointer; 125 | -webkit-appearance: button; 126 | } 127 | button[disabled], 128 | html input[disabled] { 129 | cursor: default; 130 | } 131 | button::-moz-focus-inner, 132 | input::-moz-focus-inner { 133 | border: 0; 134 | padding: 0; 135 | } 136 | input { 137 | line-height: normal; 138 | } 139 | input[type='checkbox'], 140 | input[type='radio'] { 141 | box-sizing: border-box; 142 | padding: 0; 143 | } 144 | input[type='number']::-webkit-inner-spin-button, 145 | input[type='number']::-webkit-outer-spin-button { 146 | height: auto; 147 | } 148 | input[type='search'] { 149 | -webkit-appearance: textfield; 150 | -moz-box-sizing: content-box; 151 | -webkit-box-sizing: content-box; 152 | box-sizing: content-box; 153 | } 154 | input[type='search']::-webkit-search-cancel-button, 155 | input[type='search']::-webkit-search-decoration { 156 | -webkit-appearance: none; 157 | } 158 | fieldset { 159 | border: 1px solid #c0c0c0; 160 | margin: 0 2px; 161 | padding: 0.35em 0.625em 0.75em; 162 | } 163 | legend { 164 | border: 0; 165 | padding: 0; 166 | } 167 | textarea { 168 | overflow: auto; 169 | } 170 | optgroup { 171 | font-weight: bold; 172 | } 173 | table { 174 | border-collapse: collapse; 175 | border-spacing: 0; 176 | } 177 | td, 178 | th { 179 | padding: 0; 180 | } 181 | -------------------------------------------------------------------------------- /iconic/iconic.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'IconicStroke'; 3 | src: url("iconic_stroke.eot"); 4 | src: local('IconicStroke'), 5 | url("iconic_stroke.svg#iconic") format('svg'), 6 | url("iconic_stroke.otf") format('opentype'); 7 | } 8 | 9 | .iconic { 10 | color:inherit; 11 | font-family: "IconicStroke"; 12 | } 13 | 14 | a.iconic:hover { 15 | color:inherit; 16 | } 17 | 18 | .iconic.home:before { content: '!'; } 19 | .iconic.at:before { content: "@"; } 20 | .iconic.quote:before { content: '"'; } 21 | .iconic.quote-alt:before { content: "'"; } 22 | .iconic.arrow-up:before { content: "3"; } 23 | .iconic.arrow-right:before { content: "4"; } 24 | .iconic.arrow-bottom:before { content: "5"; } 25 | .iconic.arrow-left:before { content: "6"; } 26 | .iconic.arrow-up-alt:before { content: "#"; } 27 | .iconic.arrow-right-alt:before { content: "$"; } 28 | .iconic.arrow-bottom-alt:before { content: "%"; } 29 | .iconic.arrow-left-alt:before { content: "^"; } 30 | .iconic.move:before { content: "9"; } 31 | .iconic.move-vertical:before { content: "8"; } 32 | .iconic.move-horizontal:before { content: "7"; } 33 | .iconic.move-alt:before { content: "("; } 34 | .iconic.move-vertical-alt:before { content: "*"; } 35 | .iconic.move-horizontal-alt:before { content: "&"; } 36 | .iconic.cursor:before { content: ")"; } 37 | .iconic.plus:before { content: "+"; } 38 | .iconic.plus-alt:before { content: "="; } 39 | .iconic.minus:before { content: "-"; } 40 | .iconic.minus-alt:before { content: "_"; } 41 | .iconic.new-window:before { content: "1"; } 42 | .iconic.dial:before { content: "2"; } 43 | .iconic.lightbulb:before { content: "0"; } 44 | .iconic.link:before { content: "/"; } 45 | .iconic.image:before { content: "?"; } 46 | .iconic.article:before { content: ">"; } 47 | .iconic.read-more:before { content: "."; } 48 | .iconic.headphones:before { content: ","; } 49 | .iconic.equalizer:before { content: "<"; } 50 | .iconic.fullscreen:before { content: ":"; } 51 | .iconic.exit-fullscreen:before { content: ";"; } 52 | .iconic.spin:before { content: "["; } 53 | .iconic.spin-alt:before { content: "{"; } 54 | .iconic.moon:before { content: "]"; } 55 | .iconic.sun:before { content: "}"; } 56 | .iconic.map-pin:before { content: "\\"; } 57 | .iconic.pin:before { content: "|"; } 58 | .iconic.eyedropper:before { content: "~"; } 59 | .iconic.denied:before { content: "`"; } 60 | .iconic.calendar:before { content: "a"; } 61 | .iconic.calendar-alt:before { content: "A"; } 62 | .iconic.bolt:before { content: "b"; } 63 | .iconic.clock:before { content: "c"; } 64 | .iconic.document:before { content: "d"; } 65 | .iconic.book:before { content: "e"; } 66 | .iconic.book-alt:before { content: "E"; } 67 | .iconic.magnifying-glass:before { content: "f"; } 68 | .iconic.tag:before { content: "g"; } 69 | .iconic.heart:before { content: "h"; } 70 | .iconic.info:before { content: "i"; } 71 | .iconic.chat:before { content: "j"; } 72 | .iconic.chat-alt:before { content: "J"; } 73 | .iconic.key:before { content: "k"; } 74 | .iconic.unlocked:before { content: "l"; } 75 | .iconic.locked:before { content: "L"; } 76 | .iconic.mail:before { content: "m"; } 77 | .iconic.mail-alt:before { content: "M"; } 78 | .iconic.phone:before { content: "n"; } 79 | .iconic.box:before { content: "o"; } 80 | .iconic.pencil:before { content: "p"; } 81 | .iconic.pencil-alt:before { content: "P"; } 82 | .iconic.comment:before { content: "q"; } 83 | .iconic.comment-alt:before { content: "Q"; } 84 | .iconic.rss:before { content: "r"; } 85 | .iconic.star:before { content: "s"; } 86 | .iconic.trash:before { content: "t"; } 87 | .iconic.user:before { content: "u"; } 88 | .iconic.volume:before { content: "v"; } 89 | .iconic.mute:before { content: "V"; } 90 | .iconic.cog:before { content: "w"; } 91 | .iconic.cog-alt:before { content: "W"; } 92 | .iconic.x:before { content: "x"; } 93 | .iconic.x-alt:before { content: "X"; } 94 | .iconic.check:before { content: "y"; } 95 | .iconic.check-alt:before { content: "Y"; } 96 | .iconic.beaker:before { content: "z"; } 97 | .iconic.beaker-alt:before { content: "Z"; } 98 | -------------------------------------------------------------------------------- /lib/nodes/gradient.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Module dependencies. 3 | */ 4 | 5 | var stylus = require('stylus'), 6 | Canvas = require('canvas'), 7 | nodes = stylus.nodes, 8 | utils = stylus.utils; 9 | 10 | /** 11 | * Expose `Gradient`. 12 | */ 13 | 14 | exports = module.exports = Gradient; 15 | 16 | /** 17 | * Create a new `Gradient` node with the given `size` 18 | * and `start` position. 19 | * 20 | * @param {Number} size 21 | * @param {String|Ident|Literal} start 22 | * @return {Gradient} 23 | * @api public 24 | */ 25 | 26 | exports.create = function(size, start){ 27 | utils.assertType(size, 'unit', 'size'); 28 | utils.assertString(start, 'start'); 29 | return new Gradient(size.val, start.string); 30 | }; 31 | 32 | /** 33 | * Add color stop to `grad`. 34 | * 35 | * @param {Gradient} grad 36 | * @param {Unit} pos 37 | * @param {HSLA|RGBA} color 38 | * @return {Null} 39 | * @api public 40 | */ 41 | 42 | exports.addColorStop = function(grad, pos, color){ 43 | utils.assertType(grad, 'gradient', 'grad'); 44 | utils.assertType(pos, 'unit', 'pos'); 45 | utils.assertColor(color, 'color'); 46 | grad.addColorStop(pos.val / 100, color.rgba.toString()); 47 | return nodes.null; 48 | }; 49 | 50 | /** 51 | * Return the data URI for `grad`. 52 | * 53 | * @param {Gradient} grad 54 | * @return {String} 55 | * @api public 56 | */ 57 | 58 | exports.dataURL = function(grad){ 59 | utils.assertType(grad, 'gradient'); 60 | return new nodes.String(grad.toDataURL()); 61 | }; 62 | 63 | /** 64 | * Initialize a new `Gradient` node with the given `size` 65 | * and `start` position. 66 | * 67 | * @param {Number} size 68 | * @param {String} start 69 | * @api private 70 | */ 71 | 72 | function Gradient(size, start) { 73 | this.size = size; 74 | this.canvas = new Canvas(1, 1); 75 | this.setStartPosition(start); 76 | this.ctx = this.canvas.getContext('2d'); 77 | this.grad = this.ctx.createLinearGradient( 78 | this.from[0], this.from[1], 79 | this.to[0], this.to[1]); 80 | } 81 | 82 | /** 83 | * Inspect the gradient. 84 | * 85 | * @return {String} 86 | * @api private 87 | */ 88 | 89 | Gradient.prototype.toString = function(){ 90 | return 'Gradient(' + this.size + 'px ' + this.stops.map(function(stop){ 91 | return stop[0] + ' ' + stop[1]; 92 | }).join(', ') + ')'; 93 | }; 94 | 95 | /** 96 | * Set `start` position. 97 | * 98 | * @param {String} start 99 | * @api private 100 | */ 101 | 102 | Gradient.prototype.setStartPosition = function(start){ 103 | var size = this.size, 104 | canvas = this.canvas; 105 | 106 | switch (start) { 107 | case 'top': 108 | canvas.height = size; 109 | this.from = [canvas.width / 2, 0]; 110 | this.to = [canvas.width / 2, canvas.height]; 111 | break; 112 | case 'bottom': 113 | canvas.height = size; 114 | this.from = [canvas.width / 2, canvas.height]; 115 | this.to = [canvas.width / 2, 0]; 116 | break; 117 | case 'left': 118 | canvas.width = size; 119 | this.from = [0, 0]; 120 | this.to = [canvas.width, canvas.height]; 121 | break; 122 | case 'right': 123 | canvas.width = size; 124 | this.from = [canvas.width, canvas.height]; 125 | this.to = [0, 0]; 126 | break; 127 | default: 128 | throw new Error('invalid start position "' + start + '"'); 129 | } 130 | }; 131 | 132 | /** 133 | * Add color stop `pos` / `color`. 134 | * 135 | * @param {Number} pos 136 | * @param {String} color 137 | * @api private 138 | */ 139 | 140 | Gradient.prototype.addColorStop = function(pos, color){ 141 | this.grad.addColorStop(pos, color); 142 | }; 143 | 144 | /** 145 | * Return data URI string. 146 | * 147 | * @return {String} 148 | * @api private 149 | */ 150 | 151 | Gradient.prototype.toDataURL = function(){ 152 | var canvas = this.canvas, 153 | ctx = this.ctx; 154 | ctx.fillStyle = this.grad; 155 | ctx.fillRect(0, 0, canvas.width, canvas.height); 156 | return canvas.toDataURL(); 157 | }; 158 | 159 | /** 160 | * Inherit from `nodes.Node.prototype`. 161 | */ 162 | 163 | Gradient.prototype.__proto__ = nodes.Node.prototype; 164 | -------------------------------------------------------------------------------- /test/cases/importance.styl: -------------------------------------------------------------------------------- 1 | @import 'nib' 2 | 3 | .test 4 | position: relative !important 5 | top: 0 !important 6 | right: 0 !important 7 | bottom: 0 !important 8 | left: 0 !important 9 | z-index: 0 !important 10 | 11 | float: left !important 12 | clear: left !important 13 | display: none !important 14 | visibility: hidden !important 15 | overflow: hidden !important 16 | overflow-x: scroll !important 17 | overflow-y: auto !important 18 | clip: auto !important 19 | box-sizing: border-box !important 20 | 21 | margin: 0 !important 22 | margin-top: 0 !important 23 | margin-right: 0 !important 24 | margin-bottom: 0 !important 25 | margin-left: 0 !important 26 | padding: 0 !important 27 | padding-top: 0 !important 28 | padding-right: 0 !important 29 | padding-bottom: 0 !important 30 | padding-left: 0 !important 31 | 32 | width: 0 !important 33 | height: 0 !important 34 | min-width: 0 !important 35 | min-height: 0 !important 36 | max-height: 0 !important 37 | max-width: 0 !important 38 | 39 | outline: 0 !important 40 | border-collapse: collapse !important 41 | border-spacing: 0 !important 42 | border-color: #000 !important 43 | border-top-color: #000 !important 44 | border-right-color: #000 !important 45 | border-bottom-color: #000 !important 46 | border-left-color: #000 !important 47 | border-style: solid !important 48 | border-top-style: solid !important 49 | border-right-style: solid !important 50 | border-bottom-style: solid !important 51 | border-left-style: solid !important 52 | border-width: 0 !important 53 | border-top-width: 0 !important 54 | border-right-width: 0 !important 55 | border-bottom-width: 0 !important 56 | border-left-width: 0 !important 57 | border: 1px !important 58 | border-top: 1px !important 59 | border-right: 1px !important 60 | border-bottom: 1px !important 61 | border-left: 1px !important 62 | border-radius: 50% !important 63 | border-top-right-radius: 50% !important 64 | border-top-left-radius: 50% !important 65 | border-bottom-left-radius: 50% !important 66 | border-bottom-right-radius: 50% !important 67 | 68 | border-image: none !important 69 | background-attachment: fixed !important 70 | background-color: red !important 71 | background-image: none !important 72 | background-position-x: 0 !important 73 | background-position-y: 0 !important 74 | background-position: 0 !important 75 | background-repeat: no-repeat !important 76 | background-clip: border-box !important 77 | background-origin: padding-box !important 78 | background-size: 0 !important 79 | background: none !important 80 | box-shadow: 0 1px 0 #000 !important 81 | color: rgba(0,0,0,0.5) !important 82 | 83 | table-layout: fixed !important 84 | caption-side: top !important 85 | empty-cells: hide !important 86 | list-style-image: none !important 87 | list-style-position: inside !important 88 | list-style-type: disc !important 89 | list-style: none !important 90 | quotes: none !important 91 | content: "lol" !important 92 | counter-increment: none !important 93 | counter-reset: none !important 94 | 95 | vertical-align: middle !important 96 | text-align: center !important 97 | text-align-last: right !important 98 | text-decoration: none !important 99 | text-indent: 0 !important 100 | text-justify: auto !important 101 | text-outline: none !important 102 | text-transform: capitalize !important 103 | text-wrap: normal !important 104 | text-overflow: ellipsis !important 105 | text-shadow: 0 1px 0 0 #FFF !important 106 | line-height: 1.5 !important 107 | white-space: nowrap !important 108 | word-spacing: normal !important 109 | word-wrap: normal !important 110 | word-break: normal !important 111 | tab-size: 4 !important 112 | hyphens: manual !important 113 | letter-spacing: normal !important 114 | font-family: Monaco, monospace !important 115 | font-size: 21px !important 116 | font-style: italic !important 117 | font-variant: small-caps !important 118 | font-weight: bold !important 119 | font-size-adjust: none !important 120 | font-stretch: condensed !important 121 | font: normal 16px/1.25 Arial, sans-serif !important 122 | 123 | 124 | opacity: 0.5 !important 125 | opacity: 1 !important 126 | resize: both !important 127 | cursor: pointer !important 128 | 129 | unicode-bidi: normal !important 130 | direction: rtl !important 131 | 132 | break-before: auto !important 133 | break-after: auto !important 134 | break-inside: none !important 135 | orphans: 3 !important 136 | widows: 3 !important 137 | 138 | zoom: 1 !important 139 | -------------------------------------------------------------------------------- /test/cases/vendor.inherit.css: -------------------------------------------------------------------------------- 1 | button { 2 | -webkit-box-shadow: inherit; 3 | box-shadow: inherit; 4 | } 5 | button { 6 | opacity: inherit; 7 | -ms-filter: inherit; 8 | filter: inherit; 9 | } 10 | button { 11 | opacity: inherit; 12 | white-space: inherit; 13 | } 14 | button { 15 | -webkit-animation-name: inherit; 16 | -moz-animation-name: inherit; 17 | animation-name: inherit; 18 | -webkit-animation-delay: inherit; 19 | -moz-animation-delay: inherit; 20 | animation-delay: inherit; 21 | -webkit-animation-duration: inherit; 22 | -moz-animation-duration: inherit; 23 | animation-duration: inherit; 24 | -webkit-animation-iteration-count: inherit; 25 | -moz-animation-iteration-count: inherit; 26 | animation-iteration-count: inherit; 27 | -webkit-animation-direction: inherit; 28 | -moz-animation-direction: inherit; 29 | animation-direction: inherit; 30 | -webkit-animation-fill-mode: inherit; 31 | -moz-animation-fill-mode: inherit; 32 | animation-fill-mode: inherit; 33 | -webkit-animation-play-state: inherit; 34 | -moz-animation-play-state: inherit; 35 | animation-play-state: inherit; 36 | -webkit-animation-timing-function: inherit; 37 | -moz-animation-timing-function: inherit; 38 | animation-timing-function: inherit; 39 | } 40 | button { 41 | -webkit-animation: inherit; 42 | -moz-animation: inherit; 43 | animation: inherit; 44 | } 45 | button { 46 | -webkit-appearance: inherit; 47 | -moz-appearance: inherit; 48 | appearance: inherit; 49 | } 50 | section { 51 | -webkit-column-count: inherit; 52 | -moz-column-count: inherit; 53 | column-count: inherit; 54 | -webkit-column-rule: inherit; 55 | -moz-column-rule: inherit; 56 | column-rule: inherit; 57 | -webkit-column-gap: inherit; 58 | -moz-column-gap: inherit; 59 | column-gap: inherit; 60 | } 61 | section { 62 | -webkit-column-count: inherit; 63 | -moz-column-count: inherit; 64 | column-count: inherit; 65 | -webkit-column-rule-width: inherit; 66 | -moz-column-rule-width: inherit; 67 | column-rule-width: inherit; 68 | -webkit-column-rule-style: inherit; 69 | -moz-column-rule-style: inherit; 70 | column-rule-style: inherit; 71 | -webkit-column-rule-color: inherit; 72 | -moz-column-rule-color: inherit; 73 | column-rule-color: inherit; 74 | -webkit-column-width: inherit; 75 | -moz-column-width: inherit; 76 | column-width: inherit; 77 | } 78 | section { 79 | -webkit-column-count: inherit; 80 | -moz-column-count: inherit; 81 | column-count: inherit; 82 | -webkit-column-rule-width: inherit; 83 | -moz-column-rule-width: inherit; 84 | column-rule-width: inherit; 85 | -webkit-column-rule-style: inherit; 86 | -moz-column-rule-style: inherit; 87 | column-rule-style: inherit; 88 | -webkit-column-rule-color: inherit; 89 | -moz-column-rule-color: inherit; 90 | column-rule-color: inherit; 91 | -webkit-column-gap: inherit; 92 | -moz-column-gap: inherit; 93 | column-gap: inherit; 94 | } 95 | button { 96 | -webkit-background-origin: inherit; 97 | -moz-background-origin: inherit; 98 | background-origin: inherit; 99 | -webkit-background-clip: inherit; 100 | -moz-background-clip: inherit; 101 | background-clip: inherit; 102 | } 103 | button { 104 | -o-transition: inherit; 105 | -webkit-transition: inherit; 106 | -moz-transition: inherit; 107 | transition: inherit; 108 | -webkit-backface-visibility: inherit; 109 | -moz-backface-visibility: inherit; 110 | backface-visibility: inherit; 111 | } 112 | button { 113 | -o-transition-property: inherit; 114 | -webkit-transition-property: inherit; 115 | -moz-transition-property: inherit; 116 | transition-property: inherit; 117 | -o-transition-duration: inherit; 118 | -webkit-transition-duration: inherit; 119 | -moz-transition-duration: inherit; 120 | transition-duration: inherit; 121 | -o-transition-timing-function: inherit; 122 | -webkit-transition-timing-function: inherit; 123 | -moz-transition-timing-function: inherit; 124 | transition-timing-function: inherit; 125 | -o-transition-delay: inherit; 126 | -webkit-transition-delay: inherit; 127 | -moz-transition-delay: inherit; 128 | transition-delay: inherit; 129 | } 130 | button { 131 | -o-transform: inherit; 132 | -webkit-transform: inherit; 133 | -moz-transform: inherit; 134 | transform: inherit; 135 | } 136 | button { 137 | -o-transform: inherit; 138 | -webkit-transform: inherit; 139 | -moz-transform: inherit; 140 | transform: inherit; 141 | } 142 | button { 143 | -webkit-perspective: inherit; 144 | -moz-perspective: inherit; 145 | perspective: inherit; 146 | } 147 | section { 148 | -o-border-image: inherit; 149 | -webkit-border-image: inherit; 150 | -moz-border-image: inherit; 151 | border-image: inherit; 152 | } 153 | section { 154 | -o-border-image: inherit; 155 | -webkit-border-image: inherit; 156 | -moz-border-image: inherit; 157 | border-image: inherit; 158 | } 159 | p { 160 | -webkit-hyphens: inherit; 161 | -moz-hyphens: inherit; 162 | hyphens: inherit; 163 | } 164 | section { 165 | -webkit-overflow-scrolling: inherit; 166 | overflow-scrolling: inherit; 167 | } 168 | -------------------------------------------------------------------------------- /test/cases/vendor.initial.css: -------------------------------------------------------------------------------- 1 | button { 2 | -webkit-box-shadow: initial; 3 | box-shadow: initial; 4 | } 5 | button { 6 | opacity: initial; 7 | -ms-filter: initial; 8 | filter: initial; 9 | } 10 | button { 11 | opacity: initial; 12 | white-space: initial; 13 | } 14 | button { 15 | -webkit-animation-name: initial; 16 | -moz-animation-name: initial; 17 | animation-name: initial; 18 | -webkit-animation-delay: initial; 19 | -moz-animation-delay: initial; 20 | animation-delay: initial; 21 | -webkit-animation-duration: initial; 22 | -moz-animation-duration: initial; 23 | animation-duration: initial; 24 | -webkit-animation-iteration-count: initial; 25 | -moz-animation-iteration-count: initial; 26 | animation-iteration-count: initial; 27 | -webkit-animation-direction: initial; 28 | -moz-animation-direction: initial; 29 | animation-direction: initial; 30 | -webkit-animation-fill-mode: initial; 31 | -moz-animation-fill-mode: initial; 32 | animation-fill-mode: initial; 33 | -webkit-animation-play-state: initial; 34 | -moz-animation-play-state: initial; 35 | animation-play-state: initial; 36 | -webkit-animation-timing-function: initial; 37 | -moz-animation-timing-function: initial; 38 | animation-timing-function: initial; 39 | } 40 | button { 41 | -webkit-animation: initial; 42 | -moz-animation: initial; 43 | animation: initial; 44 | } 45 | button { 46 | -webkit-appearance: initial; 47 | -moz-appearance: initial; 48 | appearance: initial; 49 | } 50 | section { 51 | -webkit-column-count: initial; 52 | -moz-column-count: initial; 53 | column-count: initial; 54 | -webkit-column-rule: initial; 55 | -moz-column-rule: initial; 56 | column-rule: initial; 57 | -webkit-column-gap: initial; 58 | -moz-column-gap: initial; 59 | column-gap: initial; 60 | } 61 | section { 62 | -webkit-column-count: initial; 63 | -moz-column-count: initial; 64 | column-count: initial; 65 | -webkit-column-rule-width: initial; 66 | -moz-column-rule-width: initial; 67 | column-rule-width: initial; 68 | -webkit-column-rule-style: initial; 69 | -moz-column-rule-style: initial; 70 | column-rule-style: initial; 71 | -webkit-column-rule-color: initial; 72 | -moz-column-rule-color: initial; 73 | column-rule-color: initial; 74 | -webkit-column-width: initial; 75 | -moz-column-width: initial; 76 | column-width: initial; 77 | } 78 | section { 79 | -webkit-column-count: initial; 80 | -moz-column-count: initial; 81 | column-count: initial; 82 | -webkit-column-rule-width: initial; 83 | -moz-column-rule-width: initial; 84 | column-rule-width: initial; 85 | -webkit-column-rule-style: initial; 86 | -moz-column-rule-style: initial; 87 | column-rule-style: initial; 88 | -webkit-column-rule-color: initial; 89 | -moz-column-rule-color: initial; 90 | column-rule-color: initial; 91 | -webkit-column-gap: initial; 92 | -moz-column-gap: initial; 93 | column-gap: initial; 94 | } 95 | button { 96 | -webkit-background-origin: initial; 97 | -moz-background-origin: initial; 98 | background-origin: initial; 99 | -webkit-background-clip: initial; 100 | -moz-background-clip: initial; 101 | background-clip: initial; 102 | } 103 | button { 104 | -o-transition: initial; 105 | -webkit-transition: initial; 106 | -moz-transition: initial; 107 | transition: initial; 108 | -webkit-backface-visibility: initial; 109 | -moz-backface-visibility: initial; 110 | backface-visibility: initial; 111 | } 112 | button { 113 | -o-transition-property: initial; 114 | -webkit-transition-property: initial; 115 | -moz-transition-property: initial; 116 | transition-property: initial; 117 | -o-transition-duration: initial; 118 | -webkit-transition-duration: initial; 119 | -moz-transition-duration: initial; 120 | transition-duration: initial; 121 | -o-transition-timing-function: initial; 122 | -webkit-transition-timing-function: initial; 123 | -moz-transition-timing-function: initial; 124 | transition-timing-function: initial; 125 | -o-transition-delay: initial; 126 | -webkit-transition-delay: initial; 127 | -moz-transition-delay: initial; 128 | transition-delay: initial; 129 | } 130 | button { 131 | -o-transform: initial; 132 | -webkit-transform: initial; 133 | -moz-transform: initial; 134 | transform: initial; 135 | } 136 | button { 137 | -o-transform: initial; 138 | -webkit-transform: initial; 139 | -moz-transform: initial; 140 | transform: initial; 141 | } 142 | button { 143 | -webkit-perspective: initial; 144 | -moz-perspective: initial; 145 | perspective: initial; 146 | } 147 | section { 148 | -o-border-image: initial; 149 | -webkit-border-image: initial; 150 | -moz-border-image: initial; 151 | border-image: initial; 152 | } 153 | section { 154 | -o-border-image: initial; 155 | -webkit-border-image: initial; 156 | -moz-border-image: initial; 157 | border-image: initial; 158 | } 159 | p { 160 | -webkit-hyphens: initial; 161 | -moz-hyphens: initial; 162 | hyphens: initial; 163 | } 164 | section { 165 | -webkit-overflow-scrolling: initial; 166 | overflow-scrolling: initial; 167 | } 168 | -------------------------------------------------------------------------------- /test/cases/vendor.css: -------------------------------------------------------------------------------- 1 | button { 2 | -webkit-box-shadow: 1px 1px 5px #eee; 3 | box-shadow: 1px 1px 5px #eee; 4 | } 5 | button { 6 | opacity: 0.5; 7 | -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 8 | filter: alpha(opacity=50); 9 | } 10 | button { 11 | opacity: 0.75; 12 | white-space: nowrap; 13 | } 14 | button { 15 | -webkit-animation-name: myAnimation; 16 | -moz-animation-name: myAnimation; 17 | animation-name: myAnimation; 18 | -webkit-animation-delay: 1s; 19 | -moz-animation-delay: 1s; 20 | animation-delay: 1s; 21 | -webkit-animation-duration: 10s; 22 | -moz-animation-duration: 10s; 23 | animation-duration: 10s; 24 | -webkit-animation-iteration-count: infinite; 25 | -moz-animation-iteration-count: infinite; 26 | animation-iteration-count: infinite; 27 | -webkit-animation-direction: alternate; 28 | -moz-animation-direction: alternate; 29 | animation-direction: alternate; 30 | -webkit-animation-fill-mode: both; 31 | -moz-animation-fill-mode: both; 32 | animation-fill-mode: both; 33 | -webkit-animation-play-state: running; 34 | -moz-animation-play-state: running; 35 | animation-play-state: running; 36 | -webkit-animation-timing-function: ease; 37 | -moz-animation-timing-function: ease; 38 | animation-timing-function: ease; 39 | } 40 | button { 41 | -webkit-animation: myAnimation 1s ease; 42 | -moz-animation: myAnimation 1s ease; 43 | animation: myAnimation 1s ease; 44 | } 45 | button { 46 | -webkit-appearance: none; 47 | -moz-appearance: none; 48 | appearance: none; 49 | } 50 | section { 51 | -webkit-column-count: 2; 52 | -moz-column-count: 2; 53 | column-count: 2; 54 | -webkit-column-rule: 1px solid #bbb; 55 | -moz-column-rule: 1px solid #bbb; 56 | column-rule: 1px solid #bbb; 57 | -webkit-column-gap: 2em; 58 | -moz-column-gap: 2em; 59 | column-gap: 2em; 60 | } 61 | section { 62 | -webkit-column-count: 2; 63 | -moz-column-count: 2; 64 | column-count: 2; 65 | -webkit-column-rule-width: 1px; 66 | -moz-column-rule-width: 1px; 67 | column-rule-width: 1px; 68 | -webkit-column-rule-style: solid; 69 | -moz-column-rule-style: solid; 70 | column-rule-style: solid; 71 | -webkit-column-rule-color: #bbb; 72 | -moz-column-rule-color: #bbb; 73 | column-rule-color: #bbb; 74 | -webkit-column-width: 200px; 75 | -moz-column-width: 200px; 76 | column-width: 200px; 77 | } 78 | section { 79 | -webkit-column-count: 2; 80 | -moz-column-count: 2; 81 | column-count: 2; 82 | -webkit-column-rule-width: 1px; 83 | -moz-column-rule-width: 1px; 84 | column-rule-width: 1px; 85 | -webkit-column-rule-style: solid; 86 | -moz-column-rule-style: solid; 87 | column-rule-style: solid; 88 | -webkit-column-rule-color: #bbb; 89 | -moz-column-rule-color: #bbb; 90 | column-rule-color: #bbb; 91 | -webkit-column-gap: 2em; 92 | -moz-column-gap: 2em; 93 | column-gap: 2em; 94 | } 95 | button { 96 | -webkit-background-origin: border, padding; 97 | -moz-background-origin: border, padding; 98 | background-origin: border-box, padding-box; 99 | -webkit-background-clip: border, padding; 100 | -moz-background-clip: border, padding; 101 | background-clip: border-box, padding-box; 102 | } 103 | button { 104 | -o-transition: all 0.1s ease-in-out 1s; 105 | -webkit-transition: all 0.1s ease-in-out 1s; 106 | -moz-transition: all 0.1s ease-in-out 1s; 107 | transition: all 0.1s ease-in-out 1s; 108 | -webkit-backface-visibility: hidden; 109 | -moz-backface-visibility: hidden; 110 | backface-visibility: hidden; 111 | } 112 | button { 113 | -o-transition-property: all; 114 | -webkit-transition-property: all; 115 | -moz-transition-property: all; 116 | transition-property: all; 117 | -o-transition-duration: 0.1s; 118 | -webkit-transition-duration: 0.1s; 119 | -moz-transition-duration: 0.1s; 120 | transition-duration: 0.1s; 121 | -o-transition-timing-function: ease-in-out; 122 | -webkit-transition-timing-function: ease-in-out; 123 | -moz-transition-timing-function: ease-in-out; 124 | transition-timing-function: ease-in-out; 125 | -o-transition-delay: 1s; 126 | -webkit-transition-delay: 1s; 127 | -moz-transition-delay: 1s; 128 | transition-delay: 1s; 129 | } 130 | button { 131 | -o-transform: rotateY(45deg); 132 | -webkit-transform: rotateY(45deg); 133 | -moz-transform: rotateY(45deg); 134 | transform: rotateY(45deg); 135 | } 136 | button { 137 | -o-transform: perspective(500px); 138 | -webkit-transform: perspective(500px); 139 | -moz-transform: perspective(500px); 140 | transform: perspective(500px); 141 | } 142 | button { 143 | -webkit-perspective: 500; 144 | -moz-perspective: 500; 145 | perspective: 500; 146 | } 147 | section { 148 | -o-border-image: url("image.png") 20% stretch stretch; 149 | -webkit-border-image: url("image.png") 20% stretch stretch; 150 | -moz-border-image: url("image.png") 20% stretch stretch; 151 | border-image: url("image.png") 20% stretch stretch; 152 | } 153 | section { 154 | -o-border-image: url("image.png") 20% stretch stretch; 155 | -webkit-border-image: url("image.png") 20% stretch stretch; 156 | -moz-border-image: url("image.png") 20% stretch stretch; 157 | border-image: url("image.png") 20% fill stretch stretch; 158 | } 159 | p { 160 | -webkit-hyphens: auto; 161 | -moz-hyphens: auto; 162 | hyphens: auto; 163 | } 164 | section { 165 | -webkit-overflow-scrolling: touch; 166 | overflow-scrolling: touch; 167 | } 168 | -------------------------------------------------------------------------------- /test/cases/importance.css: -------------------------------------------------------------------------------- 1 | .test { 2 | position: relative !important; 3 | top: 0 !important; 4 | right: 0 !important; 5 | bottom: 0 !important; 6 | left: 0 !important; 7 | z-index: 0 !important; 8 | float: left !important; 9 | clear: left !important; 10 | display: none !important; 11 | visibility: hidden !important; 12 | overflow: hidden !important; 13 | overflow-x: scroll !important; 14 | overflow-y: auto !important; 15 | clip: auto !important; 16 | -webkit-box-sizing: border-box !important; 17 | -moz-box-sizing: border-box !important; 18 | box-sizing: border-box !important; 19 | margin: 0 !important; 20 | margin-top: 0 !important; 21 | margin-right: 0 !important; 22 | margin-bottom: 0 !important; 23 | margin-left: 0 !important; 24 | padding: 0 !important; 25 | padding-top: 0 !important; 26 | padding-right: 0 !important; 27 | padding-bottom: 0 !important; 28 | padding-left: 0 !important; 29 | width: 0 !important; 30 | height: 0 !important; 31 | min-width: 0 !important; 32 | min-height: 0 !important; 33 | max-height: 0 !important; 34 | max-width: 0 !important; 35 | outline: 0 !important; 36 | border-collapse: collapse !important; 37 | border-spacing: 0 !important; 38 | border-color: #000 !important; 39 | border-top-color: #000 !important; 40 | border-right-color: #000 !important; 41 | border-bottom-color: #000 !important; 42 | border-left-color: #000 !important; 43 | border-style: solid !important; 44 | border-top-style: solid !important; 45 | border-right-style: solid !important; 46 | border-bottom-style: solid !important; 47 | border-left-style: solid !important; 48 | border-width: 0 !important; 49 | border-top-width: 0 !important; 50 | border-right-width: 0 !important; 51 | border-bottom-width: 0 !important; 52 | border-left-width: 0 !important; 53 | border: 1px !important; 54 | border-top: 1px !important; 55 | border-right: 1px !important; 56 | border-bottom: 1px !important; 57 | border-left: 1px !important; 58 | border-radius: 50% !important; 59 | border-top-right-radius: 50% !important; 60 | border-top-left-radius: 50% !important; 61 | border-bottom-left-radius: 50% !important; 62 | border-bottom-right-radius: 50% !important; 63 | -webkit-border-image: none !important; 64 | -moz-border-image: none !important; 65 | -o-border-image: none !important; 66 | border-image: none !important; 67 | background-attachment: fixed !important; 68 | background-color: #f00 !important; 69 | background-image: none !important; 70 | background-position-x: 0 !important; 71 | background-position-y: 0 !important; 72 | background-position: 0 !important; 73 | background-repeat: no-repeat !important; 74 | -webkit-background-clip: border !important; 75 | -moz-background-clip: border !important; 76 | background-clip: border-box !important; 77 | -webkit-background-origin: padding !important; 78 | -moz-background-origin: padding !important; 79 | background-origin: padding-box !important; 80 | background-size: 0 !important; 81 | background: none !important; 82 | -webkit-box-shadow: 0 1px 0 #000 !important; 83 | box-shadow: 0 1px 0 #000 !important; 84 | color: rgba(0,0,0,0.5) !important; 85 | table-layout: fixed !important; 86 | caption-side: top !important; 87 | empty-cells: hide !important; 88 | list-style-image: none !important; 89 | list-style-position: inside !important; 90 | list-style-type: disc !important; 91 | list-style: none !important; 92 | quotes: none !important; 93 | content: "lol" !important; 94 | counter-increment: none !important; 95 | counter-reset: none !important; 96 | vertical-align: middle !important; 97 | text-align: center !important; 98 | text-align-last: right !important; 99 | text-decoration: none !important; 100 | text-indent: 0 !important; 101 | text-justify: auto !important; 102 | text-outline: none !important; 103 | text-transform: capitalize !important; 104 | text-wrap: normal !important; 105 | -o-text-overflow: ellipsis !important; 106 | text-overflow: ellipsis !important; 107 | text-shadow: 0 1px 0 0 #fff !important; 108 | line-height: 1.5 !important; 109 | white-space: nowrap !important; 110 | word-spacing: normal !important; 111 | word-wrap: normal !important; 112 | word-break: normal !important; 113 | -moz-tab-size: 4 !important; 114 | -o-tab-size: 4 !important; 115 | tab-size: 4 !important; 116 | -webkit-hyphens: manual !important; 117 | -moz-hyphens: manual !important; 118 | -ms-hyphens: manual !important; 119 | hyphens: manual !important; 120 | letter-spacing: normal !important; 121 | font-family: Monaco, monospace !important; 122 | font-size: 21px !important; 123 | font-style: italic !important; 124 | font-variant: small-caps !important; 125 | font-weight: bold !important; 126 | font-size-adjust: none !important; 127 | font-stretch: condensed !important; 128 | font: normal 16px/1.25 Arial, sans-serif !important; 129 | opacity: 0.5 !important; 130 | -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)" !important; 131 | filter: alpha(opacity=50) !important; 132 | opacity: 1 !important; 133 | -ms-filter: none !important; 134 | filter: none !important; 135 | resize: both !important; 136 | cursor: pointer !important; 137 | unicode-bidi: normal !important; 138 | direction: rtl !important; 139 | break-before: auto !important; 140 | break-after: auto !important; 141 | break-inside: none !important; 142 | orphans: 3 !important; 143 | widows: 3 !important; 144 | zoom: 1 !important; 145 | } 146 | -------------------------------------------------------------------------------- /iconic/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 10 | 11 | 12 |
    13 |
  • Home
    • 14 |
  • At Symbol
    • 15 |
  • Quote
    • 16 |
  • Quote (alternate)
    • 17 |
  • Arrow Up
    • 18 |
  • Arrow Right
    • 19 |
  • Arrow Bottom
    • 20 |
  • Arrow Left
    • 21 |
  • Arrow Up (alternate)
    • 22 |
  • Arrow Right (alternate)
    • 23 |
  • Arrow Bottom (alternate)
    • 24 |
  • Arrow Left (alternate)
    • 25 |
  • Move
    • 26 |
  • Move Vertical
    • 27 |
  • Move Horizontal
    • 28 |
  • Move (alternate)
    • 29 |
  • Move Vertical (alternate)
    • 30 |
  • Move Horizontal (alternate)
    • 31 |
  • Cursor
    • 32 |
  • Plus
    • 33 |
  • Plus (alternate)
    • 34 |
  • Minus
    • 35 |
  • Minus (alternate)
    • 36 |
  • New Window
    • 37 |
  • Dial
    • 38 |
  • Lightbulb
    • 39 |
  • Link
    • 40 |
  • Image
    • 41 |
  • Article
    • 42 |
  • Read More
    • 43 |
  • Headphones
    • 44 |
  • Equalizer
    • 45 |
  • Fullscreen
    • 46 |
  • Exit Fullscreen
    • 47 |
  • Spin
    • 48 |
  • Spin (alternate)
    • 49 |
  • Moon
    • 50 |
  • Sun
    • 51 |
  • Map Pin
    • 52 |
  • Pin
    • 53 |
  • Eyedropper
    • 54 |
  • Denied
    • 55 |
  • Calendar
    • 56 |
  • Calendar (alternate)
    • 57 |
  • Bolt
    • 58 |
  • Clock
    • 59 |
  • Document
    • 60 |
  • Book
    • 61 |
  • Book (alternate)
    • 62 |
  • Magnifying Glass
    • 63 |
  • Tag
    • 64 |
  • Heart
    • 65 |
  • Info
    • 66 |
  • Chat
    • 67 |
  • Chat (alternate)
    • 68 |
  • Key
    • 69 |
  • Unlocked
    • 70 |
  • Locked
    • 71 |
  • Mail
    • 72 |
  • Mail (alternate)
    • 73 |
  • Phone
    • 74 |
  • Box
    • 75 |
  • Pencil
    • 76 |
  • Pencil (alternate)
    • 77 |
  • Comment
    • 78 |
  • Comment (alternate)
    • 79 |
  • RSS
    • 80 |
  • Star
    • 81 |
  • Trash
    • 82 |
  • User
    • 83 |
  • Volume
    • 84 |
  • Mute
    • 85 |
  • Cog
    • 86 |
  • Cog (alternate)
    • 87 |
  • X
    • 88 |
  • X (alternate)
    • 89 |
  • Check
    • 90 |
  • Check (alternate)
    • 91 |
  • Beaker
    • 92 |
  • Beaker (alternate)
    • 93 |
94 | 95 | 96 | -------------------------------------------------------------------------------- /lib/nib/flex.styl: -------------------------------------------------------------------------------- 1 | /* 2 | * Vendor "display: flex" support with fallback to obsolete versions. 3 | */ 4 | 5 | flex-version ?= box flex 6 | 7 | // 8 | // 1. Display values 9 | // - http://www.w3.org/TR/css3-flexbox/#flex-containers 10 | // 11 | display(type, args...) 12 | if flex == type || inline-flex == type 13 | if box in flex-version 14 | if flex == type 15 | display: -ms-flexbox args 16 | display: vendor-value(box args, only: moz webkit) 17 | else 18 | display: -ms-inline-flexbox args 19 | display: vendor-value(inline-box args, only: moz webkit) 20 | if flex in flex-version 21 | display: vendor-value(arguments, only: webkit official) // overwrites old webkit 22 | else 23 | display: arguments 24 | 25 | /* 26 | * New syntax for browsers like Google Chrome. 27 | * Plus a translation to the old syntax, if possible. 28 | */ 29 | 30 | 31 | // 32 | // 5. Ordering and Orientation 33 | // - http://www.w3.org/TR/css3-flexbox/#ordering-and-orientation 34 | // 35 | -flex-obsolete-direction(direction) 36 | if box in flex-version 37 | if row-reverse == direction || column-reverse == direction 38 | vendor('box-direction', reverse, ignore: ms official) 39 | 40 | if row == direction || row-reverse == direction 41 | vendor('box-orient', horizontal, ignore: ms official) 42 | else if column == direction || column-reverse == direction 43 | vendor('box-orient', vertical, ignore: ms official) 44 | 45 | -flex-obsolete-wrap(value) 46 | if box in flex-version 47 | // WARN: wrap-reverse does not have a box equivalent. This will render in different manners 48 | // on box vs. flex values. 49 | if 'wrap' == value || wrap-reverse == value 50 | vendor('box-lines', multiple, ignore: ms official) 51 | else if nowrap == value 52 | vendor('box-lines', single, ignore: ms official) 53 | 54 | flex-direction(direction) 55 | // obsolete 56 | -flex-obsolete-direction(direction) 57 | 58 | // new 59 | if flex in flex-version 60 | vendor('flex-direction', arguments, only: webkit ms official) 61 | 62 | flex-wrap(value) 63 | // obsolete 64 | -flex-obsolete-wrap(value) 65 | 66 | if flex in flex-version 67 | vendor('flex-wrap', arguments, only: webkit ms official) 68 | 69 | flex-flow() 70 | // obsolete 71 | -flex-obsolete-direction(arguments[0]) 72 | -flex-obsolete-direction(arguments[1]) 73 | -flex-obsolete-wrap(arguments[0]) 74 | -flex-obsolete-wrap(arguments[1]) 75 | 76 | // new 77 | if flex in flex-version 78 | vendor('flex-flow', arguments, only: webkit ms official) 79 | 80 | 81 | order() 82 | // obsolete 83 | if box in flex-version 84 | vendor('box-ordinal-group', arguments, ignore: ms official) 85 | 86 | // new 87 | if flex in flex-version 88 | vendor('flex-order', arguments, only: ms) 89 | vendor('order', arguments, only: webkit official) 90 | 91 | 92 | // 93 | // 7. Flexibility 94 | // - http://www.w3.org/TR/css3-flexbox/#flexibility 95 | // 96 | flex-grow(growth) 97 | // obsolete 98 | if box in flex-version 99 | vendor('box-flex', growth) 100 | 101 | // new 102 | if flex in flex-version 103 | vendor('flex-grow', arguments, only: webkit official) 104 | 105 | flex-basis() 106 | if flex in flex-version 107 | vendor('flex-basis', arguments, only: webkit official) 108 | 109 | flex-shrink() 110 | if flex in flex-version 111 | vendor('flex-shrink', arguments, only: webkit official) 112 | 113 | flex(growth) 114 | 115 | // obsolete 116 | if box in flex-version 117 | shrink = 1 118 | 119 | if none == growth || initial == growth 120 | // Well known values 121 | shrink = 0 if none == growth 122 | growth = 0 123 | else if is-width(growth) == true 124 | // Basis is defined as the first parameter 125 | growth = arguments[1] || 0 126 | shrink = arguments[2] if 3 <= length(arguments) 127 | else if arguments[1] && is-width(arguments[1]) == false 128 | // Growth is first and shrink is second 129 | shrink = arguments[1] 130 | 131 | // Since we can't make the distinction between growing and shrinking in the box model, take 132 | // the one that provides the most flexibility. 133 | vendor('box-flex', max(growth, shrink), ignore: ms) 134 | 135 | // new 136 | if flex in flex-version 137 | vendor('flex', arguments, only: webkit ms official) 138 | 139 | 140 | // converts the justification alignment 141 | -convert-justify(align) 142 | if flex-start == align 143 | return start 144 | else if flex-end == align 145 | return end 146 | else if space-around == align 147 | return distribute 148 | else if space-between == align 149 | return justify 150 | else 151 | return align 152 | 153 | // 154 | // 8. Alignment 155 | // - http://www.w3.org/TR/css3-flexbox/#alignment 156 | // 157 | justify-content(align) 158 | // obsolete 159 | if box in flex-version 160 | vendor('box-pack', -convert-justify(align), ignore: ms official) 161 | 162 | // new 163 | if flex in flex-version 164 | vendor('flex-pack', -convert-justify(align), only: ms) 165 | vendor('justify-content', align, only: webkit official) 166 | 167 | align-content(align) 168 | // WARN: Obsolete spec does not allow for adjustment here 169 | if flex in flex-version 170 | vendor('flex-line-pack', -convert-justify(align), only: ms) 171 | vendor('align-content', align, only: webkit official) 172 | 173 | // converts alignment from 'flex' to normal value 174 | -convert-alignment(align) 175 | if flex-start == align 176 | return start 177 | else if flex-end == align 178 | return end 179 | else 180 | return align 181 | 182 | align-items(align) 183 | // obsolete 184 | if box in flex-version 185 | vendor('box-align', -convert-alignment(align), ignore: ms official) 186 | 187 | // new 188 | if flex in flex-version 189 | vendor('flex-align', -convert-alignment(align), only: ms) 190 | vendor('align-items', arguments, only: webkit official) 191 | 192 | align-self(align) 193 | // WARN: Obsolete spec does not allow for overriding alignment on individual items. 194 | if flex in flex-version 195 | vendor('align-self', align, only: webkit official) 196 | vendor('flex-item-align', -convert-alignment(align), only: ms) 197 | -------------------------------------------------------------------------------- /test/cases/linear-gradient.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: -webkit-linear-gradient(#fff, #000); 3 | background: -moz-linear-gradient(#fff, #000); 4 | background: -o-linear-gradient(#fff, #000); 5 | background: -ms-linear-gradient(#fff, #000); 6 | background: linear-gradient(#fff, #000); 7 | } 8 | body { 9 | background: -webkit-linear-gradient(top, #fff, #000); 10 | background: -moz-linear-gradient(top, #fff, #000); 11 | background: -o-linear-gradient(top, #fff, #000); 12 | background: -ms-linear-gradient(top, #fff, #000); 13 | background: linear-gradient(to bottom, #fff, #000); 14 | } 15 | body { 16 | background: -webkit-linear-gradient(bottom, #fff, #000); 17 | background: -moz-linear-gradient(bottom, #fff, #000); 18 | background: -o-linear-gradient(bottom, #fff, #000); 19 | background: -ms-linear-gradient(bottom, #fff, #000); 20 | background: linear-gradient(to top, #fff, #000); 21 | } 22 | body { 23 | background: -webkit-linear-gradient(top left, #fff, #000); 24 | background: -moz-linear-gradient(top left, #fff, #000); 25 | background: -o-linear-gradient(top left, #fff, #000); 26 | background: -ms-linear-gradient(top left, #fff, #000); 27 | background: linear-gradient(to bottom right, #fff, #000); 28 | } 29 | body { 30 | background: -webkit-linear-gradient(45deg, #fff, #000); 31 | background: -moz-linear-gradient(45deg, #fff, #000); 32 | background: -o-linear-gradient(45deg, #fff, #000); 33 | background: -ms-linear-gradient(45deg, #fff, #000); 34 | background: linear-gradient(45deg, #fff, #000); 35 | } 36 | body { 37 | background: -webkit-linear-gradient(135deg, #fff, #000); 38 | background: -moz-linear-gradient(135deg, #fff, #000); 39 | background: -o-linear-gradient(135deg, #fff, #000); 40 | background: -ms-linear-gradient(135deg, #fff, #000); 41 | background: linear-gradient(-45deg, #fff, #000); 42 | } 43 | body { 44 | background: -webkit-linear-gradient(top left, #fff, #f00, #00f, #000); 45 | background: -moz-linear-gradient(top left, #fff, #f00, #00f, #000); 46 | background: -o-linear-gradient(top left, #fff, #f00, #00f, #000); 47 | background: -ms-linear-gradient(top left, #fff, #f00, #00f, #000); 48 | background: linear-gradient(to bottom right, #fff, #f00, #00f, #000); 49 | } 50 | body { 51 | background: -webkit-linear-gradient(bottom right, #fff, #000 80%); 52 | background: -moz-linear-gradient(bottom right, #fff, #000 80%); 53 | background: -o-linear-gradient(bottom right, #fff, #000 80%); 54 | background: -ms-linear-gradient(bottom right, #fff, #000 80%); 55 | background: linear-gradient(to top left, #fff, #000 80%); 56 | } 57 | body { 58 | background: -webkit-linear-gradient(right bottom, #fff, #000 80%); 59 | background: -moz-linear-gradient(right bottom, #fff, #000 80%); 60 | background: -o-linear-gradient(right bottom, #fff, #000 80%); 61 | background: -ms-linear-gradient(right bottom, #fff, #000 80%); 62 | background: linear-gradient(to left top, #fff, #000 80%); 63 | } 64 | body { 65 | background: -webkit-linear-gradient(right bottom, #fff 80%, #000); 66 | background: -moz-linear-gradient(right bottom, #fff 80%, #000); 67 | background: -o-linear-gradient(right bottom, #fff 80%, #000); 68 | background: -ms-linear-gradient(right bottom, #fff 80%, #000); 69 | background: linear-gradient(to left top, #fff 80%, #000); 70 | } 71 | body { 72 | background: -webkit-linear-gradient(right bottom, rgba(0,0,0,0.5) 80%, #000); 73 | background: -moz-linear-gradient(right bottom, rgba(0,0,0,0.5) 80%, #000); 74 | background: -o-linear-gradient(right bottom, rgba(0,0,0,0.5) 80%, #000); 75 | background: -ms-linear-gradient(right bottom, rgba(0,0,0,0.5) 80%, #000); 76 | background: linear-gradient(to left top, rgba(0,0,0,0.5) 80%, #000); 77 | } 78 | body { 79 | background: -webkit-linear-gradient(right bottom, hsla(0,0%,0%,0.5) 80.5%, #000); 80 | background: -moz-linear-gradient(right bottom, hsla(0,0%,0%,0.5) 80.5%, #000); 81 | background: -o-linear-gradient(right bottom, hsla(0,0%,0%,0.5) 80.5%, #000); 82 | background: -ms-linear-gradient(right bottom, hsla(0,0%,0%,0.5) 80.5%, #000); 83 | background: linear-gradient(to left top, hsla(0,0%,0%,0.5) 80.5%, #000); 84 | } 85 | body { 86 | background: -webkit-linear-gradient(right bottom, hsla(0,0%,0%,0.5) 80.5%, #000); 87 | background: -moz-linear-gradient(right bottom, hsla(0,0%,0%,0.5) 80.5%, #000); 88 | background: -o-linear-gradient(right bottom, hsla(0,0%,0%,0.5) 80.5%, #000); 89 | background: -ms-linear-gradient(right bottom, hsla(0,0%,0%,0.5) 80.5%, #000); 90 | background: linear-gradient(to left top, hsla(0,0%,0%,0.5) 80.5%, #000); 91 | } 92 | body { 93 | background: -webkit-linear-gradient(right bottom, #fff 20px, #000); 94 | background: -moz-linear-gradient(right bottom, #fff 20px, #000); 95 | background: -o-linear-gradient(right bottom, #fff 20px, #000); 96 | background: -ms-linear-gradient(right bottom, #fff 20px, #000); 97 | background: linear-gradient(to left top, #fff 20px, #000); 98 | } 99 | body { 100 | background: -webkit-linear-gradient(top, #fff, #000); 101 | background: -moz-linear-gradient(top, #fff, #000); 102 | background: -ms-linear-gradient(top, #fff, #000); 103 | background: -o-linear-gradient(top, #fff, #000); 104 | background: linear-gradient(to bottom, #fff, #000); 105 | } 106 | body { 107 | background: -webkit-linear-gradient(top, #fff, #000), #fff; 108 | background: -moz-linear-gradient(top, #fff, #000), #fff; 109 | background: -ms-linear-gradient(top, #fff, #000), #fff; 110 | background: -o-linear-gradient(top, #fff, #000), #fff; 111 | background: linear-gradient(to bottom, #fff, #000), #fff; 112 | } 113 | body { 114 | -webkit-border-image: -webkit-linear-gradient(top, #fff, #000) 20% stretch stretch; 115 | -moz-border-image: -moz-linear-gradient(top, #fff, #000) 20% stretch stretch; 116 | -o-border-image: -o-linear-gradient(top, #fff, #000) 20% stretch stretch; 117 | border-image: linear-gradient(to bottom, #fff, #000) 20% stretch stretch; 118 | } 119 | body { 120 | -webkit-border-image: -webkit-linear-gradient(top, #fff, #000) 20% stretch stretch; 121 | -moz-border-image: -moz-linear-gradient(top, #fff, #000) 20% stretch stretch; 122 | -o-border-image: -o-linear-gradient(top, #fff, #000) 20% stretch stretch; 123 | border-image: linear-gradient(to bottom, #fff, #000) 20% fill stretch stretch; 124 | } 125 | body { 126 | cursor: -webkit-linear-gradient(50deg, #f00, #0f0); 127 | cursor: -moz-linear-gradient(50deg, #f00, #0f0); 128 | cursor: -ms-linear-gradient(50deg, #f00, #0f0); 129 | cursor: -o-linear-gradient(50deg, #f00, #0f0); 130 | cursor: linear-gradient(40deg, #f00, #0f0); 131 | } 132 | body { 133 | list-style: -webkit-linear-gradient(50deg, #f00, #0f0); 134 | list-style: -moz-linear-gradient(50deg, #f00, #0f0); 135 | list-style: -ms-linear-gradient(50deg, #f00, #0f0); 136 | list-style: -o-linear-gradient(50deg, #f00, #0f0); 137 | list-style: linear-gradient(40deg, #f00, #0f0); 138 | } 139 | body { 140 | list-style-image: -webkit-linear-gradient(50deg, #f00, #0f0); 141 | list-style-image: -moz-linear-gradient(50deg, #f00, #0f0); 142 | list-style-image: -ms-linear-gradient(50deg, #f00, #0f0); 143 | list-style-image: -o-linear-gradient(50deg, #f00, #0f0); 144 | list-style-image: linear-gradient(40deg, #f00, #0f0); 145 | } 146 | -------------------------------------------------------------------------------- /test/cases/flex.css: -------------------------------------------------------------------------------- 1 | section { 2 | display: -webkit-box; 3 | display: -moz-box; 4 | display: -webkit-flex; 5 | display: -ms-flexbox; 6 | display: box; 7 | display: flex; 8 | -webkit-box-orient: horizontal; 9 | -moz-box-orient: horizontal; 10 | -o-box-orient: horizontal; 11 | -webkit-flex-direction: row; 12 | -ms-flex-direction: row; 13 | flex-direction: row; 14 | } 15 | section div { 16 | -webkit-box-flex: 1; 17 | -moz-box-flex: 1; 18 | -o-box-flex: 1; 19 | box-flex: 1; 20 | -webkit-flex: 1 0; 21 | -ms-flex: 1 0; 22 | flex: 1 0; 23 | } 24 | section { 25 | display: -webkit-inline-box; 26 | display: -moz-inline-box; 27 | display: -webkit-inline-flex; 28 | display: -ms-inline-flexbox; 29 | display: inline-box; 30 | display: inline-flex; 31 | } 32 | flex-flow { 33 | -webkit-box-direction: reverse; 34 | -moz-box-direction: reverse; 35 | -o-box-direction: reverse; 36 | -webkit-box-orient: horizontal; 37 | -moz-box-orient: horizontal; 38 | -o-box-orient: horizontal; 39 | -webkit-flex-flow: row-reverse; 40 | -ms-flex-flow: row-reverse; 41 | flex-flow: row-reverse; 42 | -webkit-box-orient: horizontal; 43 | -moz-box-orient: horizontal; 44 | -o-box-orient: horizontal; 45 | -webkit-box-lines: multiple; 46 | -moz-box-lines: multiple; 47 | -o-box-lines: multiple; 48 | -webkit-flex-flow: row wrap; 49 | -ms-flex-flow: row wrap; 50 | flex-flow: row wrap; 51 | -webkit-box-direction: reverse; 52 | -moz-box-direction: reverse; 53 | -o-box-direction: reverse; 54 | -webkit-box-orient: vertical; 55 | -moz-box-orient: vertical; 56 | -o-box-orient: vertical; 57 | -webkit-box-lines: multiple; 58 | -moz-box-lines: multiple; 59 | -o-box-lines: multiple; 60 | -webkit-flex-flow: wrap-reverse column-reverse; 61 | -ms-flex-flow: wrap-reverse column-reverse; 62 | flex-flow: wrap-reverse column-reverse; 63 | } 64 | justify-content { 65 | -webkit-box-pack: start; 66 | -moz-box-pack: start; 67 | -o-box-pack: start; 68 | -ms-flex-pack: start; 69 | -webkit-justify-content: flex-start; 70 | justify-content: flex-start; 71 | -webkit-box-pack: end; 72 | -moz-box-pack: end; 73 | -o-box-pack: end; 74 | -ms-flex-pack: end; 75 | -webkit-justify-content: flex-end; 76 | justify-content: flex-end; 77 | -webkit-box-pack: center; 78 | -moz-box-pack: center; 79 | -o-box-pack: center; 80 | -ms-flex-pack: center; 81 | -webkit-justify-content: center; 82 | justify-content: center; 83 | -webkit-box-pack: justify; 84 | -moz-box-pack: justify; 85 | -o-box-pack: justify; 86 | -ms-flex-pack: justify; 87 | -webkit-justify-content: space-between; 88 | justify-content: space-between; 89 | -webkit-box-pack: distribute; 90 | -moz-box-pack: distribute; 91 | -o-box-pack: distribute; 92 | -ms-flex-pack: distribute; 93 | -webkit-justify-content: space-around; 94 | justify-content: space-around; 95 | } 96 | align-items { 97 | -webkit-box-align: start; 98 | -moz-box-align: start; 99 | -o-box-align: start; 100 | -ms-flex-align: start; 101 | -webkit-align-items: flex-start; 102 | align-items: flex-start; 103 | -webkit-box-align: end; 104 | -moz-box-align: end; 105 | -o-box-align: end; 106 | -ms-flex-align: end; 107 | -webkit-align-items: flex-end; 108 | align-items: flex-end; 109 | -webkit-box-align: center; 110 | -moz-box-align: center; 111 | -o-box-align: center; 112 | -ms-flex-align: center; 113 | -webkit-align-items: center; 114 | align-items: center; 115 | } 116 | align-content { 117 | -ms-flex-line-pack: start; 118 | -webkit-align-content: flex-start; 119 | align-content: flex-start; 120 | -ms-flex-line-pack: end; 121 | -webkit-align-content: flex-end; 122 | align-content: flex-end; 123 | -ms-flex-line-pack: center; 124 | -webkit-align-content: center; 125 | align-content: center; 126 | -ms-flex-line-pack: justify; 127 | -webkit-align-content: space-between; 128 | align-content: space-between; 129 | -ms-flex-line-pack: distribute; 130 | -webkit-align-content: space-around; 131 | align-content: space-around; 132 | } 133 | flex { 134 | -webkit-box-flex: 1; 135 | -moz-box-flex: 1; 136 | -o-box-flex: 1; 137 | box-flex: 1; 138 | -webkit-flex: 0 auto; 139 | -ms-flex: 0 auto; 140 | flex: 0 auto; 141 | -webkit-box-flex: 1; 142 | -moz-box-flex: 1; 143 | -o-box-flex: 1; 144 | box-flex: 1; 145 | -webkit-flex: auto 0; 146 | -ms-flex: auto 0; 147 | flex: auto 0; 148 | -webkit-box-flex: 1; 149 | -moz-box-flex: 1; 150 | -o-box-flex: 1; 151 | box-flex: 1; 152 | -webkit-flex: initial; 153 | -ms-flex: initial; 154 | flex: initial; 155 | -webkit-box-flex: 1; 156 | -moz-box-flex: 1; 157 | -o-box-flex: 1; 158 | box-flex: 1; 159 | -webkit-flex: auto; 160 | -ms-flex: auto; 161 | flex: auto; 162 | -webkit-box-flex: 0; 163 | -moz-box-flex: 0; 164 | -o-box-flex: 0; 165 | box-flex: 0; 166 | -webkit-flex: none; 167 | -ms-flex: none; 168 | flex: none; 169 | -webkit-box-flex: 1; 170 | -moz-box-flex: 1; 171 | -o-box-flex: 1; 172 | box-flex: 1; 173 | -webkit-flex: 1; 174 | -ms-flex: 1; 175 | flex: 1; 176 | -webkit-box-flex: 0; 177 | -moz-box-flex: 0; 178 | -o-box-flex: 0; 179 | box-flex: 0; 180 | -webkit-flex: 0px 0 0; 181 | -ms-flex: 0px 0 0; 182 | flex: 0px 0 0; 183 | -webkit-box-flex: 2; 184 | -moz-box-flex: 2; 185 | -o-box-flex: 2; 186 | box-flex: 2; 187 | -webkit-flex: 1 2 0; 188 | -ms-flex: 1 2 0; 189 | flex: 1 2 0; 190 | } 191 | order { 192 | -webkit-box-ordinal-group: 0; 193 | -moz-box-ordinal-group: 0; 194 | -o-box-ordinal-group: 0; 195 | -ms-flex-order: 0; 196 | -webkit-order: 0; 197 | order: 0; 198 | } 199 | section { 200 | display: -webkit-box !important; 201 | display: -moz-box !important; 202 | display: -webkit-flex !important; 203 | display: -ms-flexbox !important; 204 | display: box !important; 205 | display: flex !important; 206 | } 207 | section { 208 | display: -webkit-inline-box !important; 209 | display: -moz-inline-box !important; 210 | display: -webkit-inline-flex !important; 211 | display: -ms-inline-flexbox !important; 212 | display: inline-box !important; 213 | display: inline-flex !important; 214 | } 215 | section { 216 | display: -webkit-box; 217 | display: -moz-box; 218 | display: -ms-flexbox; 219 | display: box; 220 | -webkit-box-orient: horizontal; 221 | -moz-box-orient: horizontal; 222 | -o-box-orient: horizontal; 223 | } 224 | section div { 225 | -webkit-box-flex: 1; 226 | -moz-box-flex: 1; 227 | -o-box-flex: 1; 228 | box-flex: 1; 229 | } 230 | section { 231 | display: -webkit-inline-box; 232 | display: -moz-inline-box; 233 | display: -ms-inline-flexbox; 234 | display: inline-box; 235 | } 236 | section { 237 | display: -webkit-box !important; 238 | display: -moz-box !important; 239 | display: -ms-flexbox !important; 240 | display: box !important; 241 | } 242 | section { 243 | display: -webkit-inline-box !important; 244 | display: -moz-inline-box !important; 245 | display: -ms-inline-flexbox !important; 246 | display: inline-box !important; 247 | } 248 | section { 249 | display: -webkit-flex; 250 | display: flex; 251 | -webkit-flex-direction: row; 252 | -ms-flex-direction: row; 253 | flex-direction: row; 254 | } 255 | section div { 256 | -webkit-flex: 1 0; 257 | -ms-flex: 1 0; 258 | flex: 1 0; 259 | } 260 | section { 261 | display: -webkit-inline-flex; 262 | display: inline-flex; 263 | } 264 | section { 265 | display: -webkit-flex !important; 266 | display: flex !important; 267 | } 268 | section { 269 | display: -webkit-inline-flex !important; 270 | display: inline-flex !important; 271 | } 272 | -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | # Mixins 2 | ## Gradient 3 | Nib's gradient support is by far the largest feature it provides. Not only is the syntax extremely similar to what you would normally write, it's more forgiving, expands to vendor equivalents, and can even produce a PNG for older browsers with [node-canvas](http://github.com/learnboost/node-canvas). 4 | 5 | ```stylus 6 | body 7 | background linear-gradient(top, white, black) 8 | ``` 9 | 10 | ```css 11 | body { 12 | background: -webkit-linear-gradient(top, #fff, #000); 13 | background: -moz-linear-gradient(top, #fff, #000); 14 | background: -o-linear-gradient(top, #fff, #000); 15 | background: -ms-linear-gradient(top, #fff, #000); 16 | background: linear-gradient(to bottom, #fff, #000); 17 | } 18 | ``` 19 | 20 | ![](http://f.cl.ly/items/1q25061X2Q2U0p472L02/Screenshot.png) 21 | 22 | Any number of color stops may be provided: 23 | 24 | ```stylus 25 | body 26 | background linear-gradient(bottom left, white, red, blue, black) 27 | ``` 28 | 29 | ![](http://f.cl.ly/items/2I0k3D0A2y0n3i443g2W/Screenshot.png) 30 | 31 | Units may be placed before or after the color: 32 | 33 | ```stylus 34 | body 35 | background linear-gradient(left, 80% red, #000) 36 | background linear-gradient(top, #eee, 90% white, 10% black) 37 | ``` 38 | 39 | ![](http://f.cl.ly/items/2B1U3m0t2T1B420I3C3I/Screenshot.png) 40 | ![](http://f.cl.ly/items/1T1P1x0n1X3k132o3V0F/Screenshot.png) 41 | 42 | ## Position 43 | 44 | The position mixins `absolute`, `fixed`, and `relative` provide a shorthand variant to what is otherwise three CSS properties. The syntax is as follows: 45 | 46 | ``` 47 | fixed|absolute|relative: top|bottom [n] left|right [n] 48 | ``` 49 | 50 | The following example will default to (0,0): 51 | 52 | ```stylus 53 | #back-to-top 54 | fixed bottom right 55 | ``` 56 | 57 | ```css 58 | #back-to-top { 59 | position: fixed; 60 | bottom: 0; 61 | right: 0; 62 | } 63 | ``` 64 | 65 | You may also specify the units: 66 | 67 | ```stylus 68 | #back-to-top 69 | fixed bottom 10px right 5px 70 | ``` 71 | 72 | ```css 73 | #back-to-top { 74 | position: fixed; 75 | bottom: 10px; 76 | right: 5px; 77 | } 78 | ``` 79 | 80 | ## Clearfix 81 | Clearfixing causes containers to expand to contain floated contents. A simple example is shown [here](http://learnlayout.com/clearfix.html). 82 | 83 | The clearfix mixin takes no arguments and expands to a form that provides extremely robust browser support. 84 | 85 | ```stylus 86 | .clearfix 87 | clearfix() 88 | ``` 89 | 90 | ```css 91 | .clearfix { 92 | zoom: 1; 93 | } 94 | .clearfix:before, 95 | .clearfix:after { 96 | content: ""; 97 | display: table; 98 | } 99 | .clearfix:after { 100 | clear: both; 101 | } 102 | ``` 103 | 104 | ## Border Radius 105 | Nib's `border-radius` supports both the regular syntax as well as augmenting it to make the value more expressive. 106 | 107 | ```stylus 108 | button 109 | border-radius 1px 2px / 3px 4px 110 | 111 | button 112 | border-radius 5px 113 | 114 | button 115 | border-radius bottom 10px 116 | ``` 117 | 118 | ```css 119 | button { 120 | border-radius: 1px 2px/3px 4px; 121 | } 122 | button { 123 | border-radius: 5px; 124 | } 125 | button { 126 | border-top-left-radius: 10px; 127 | border-bottom-right-radius: 10px; 128 | } 129 | ``` 130 | 131 | ## Responsive Images 132 | The `image` mixin allows you to define a `background-image` for both the normal image, and a doubled image for devices with a higher pixel ratio such as retina displays. This works by using a @media query to serve an "@2x" version of the file. 133 | 134 | ```stylus 135 | #logo 136 | image '/images/branding/logo.main.png' 137 | 138 | #logo 139 | image '/images/branding/logo.main.png' 50px 100px 140 | ``` 141 | 142 | ```css 143 | #logo { 144 | background-image: url("/images/branding/logo.main.png"); 145 | } 146 | @media all and (-webkit-min-device-pixel-ratio: 1.5) { 147 | #logo { 148 | background-image: url("/images/branding/logo.main@2x.png"); 149 | background-size: auto auto; 150 | } 151 | } 152 | #logo { 153 | background-image: url("/images/branding/logo.main.png"); 154 | } 155 | @media all and (-webkit-min-device-pixel-ratio: 1.5) { 156 | #logo { 157 | background-image: url("/images/branding/logo.main@2x.png"); 158 | background-size: 50px 100px; 159 | } 160 | } 161 | ``` 162 | 163 | ## Ellipsis 164 | The `overflow` property is augmented with a "ellipsis" value, expanding to what you see below. 165 | 166 | ```stylus 167 | button 168 | overflow ellipsis 169 | ``` 170 | 171 | ```css 172 | button { 173 | white-space: nowrap; 174 | overflow: hidden; 175 | text-overflow: ellipsis; 176 | } 177 | ``` 178 | 179 | ## Reset 180 | Nib comes bundled with [Eric Meyer's style reset](eric-meyer) and [Nicolas Gallagher's _Normalize_](normalize) support and, you can choose to apply the global or any specifics that you wish. To view the definitions view [`reset.styl`](https://github.com/tj/nib/blob/master/lib/nib/reset.styl). 181 | 182 | [eric-meyer]: http://meyerweb.com/eric/tools/css/reset/ 183 | [normalize]: https://github.com/necolas/normalize.css 184 | 185 | > CSS Reset 186 | 187 | - `global-reset()` 188 | - `nested-reset()` 189 | - `reset-font()` 190 | - `reset-box-model()` 191 | - `reset-body()` 192 | - `reset-table()` 193 | - `reset-table-cell()` 194 | - `reset-html5()` 195 | 196 | > Normalize 197 | 198 | - `normalize-html5()` 199 | - `normalize-base()` 200 | - `normalize-links()` 201 | - `normalize-text()` 202 | - `normalize-embed()` 203 | - `normalize-groups()` 204 | - `normalize-forms()` 205 | - `normalize-tables()` 206 | - `normalize-css()` 207 | 208 | [Read more][normalize-about] about Normalize or see the original CSS [here][normalize-css]. 209 | 210 | [normalize-about]: http://nicolasgallagher.com/about-normalize-css/ 211 | [normalize-css]: https://github.com/necolas/normalize.css/blob/master/normalize.css 212 | 213 | ## Border 214 | This shorthand lets you create a border by just specifying a color, with defaults for width and style. 215 | 216 | ```stylus 217 | .foo 218 | border red 219 | ``` 220 | 221 | ```css 222 | .foo { 223 | border: 1px solid red; 224 | } 225 | ``` 226 | 227 | ## Shadow Stroke 228 | Creates a text outline using text-shadow. 229 | 230 | ```stylus 231 | .foo 232 | shadow-stroke(red) 233 | ``` 234 | 235 | ```css 236 | .foo { 237 | text-shadow: -1px -1px 0 red, 1px -1px 0 red, -1px 1px 0 red, 1px 1px 0 red; 238 | } 239 | ``` 240 | 241 | ## Size 242 | This shorthand lets you set width and height in one go. 243 | 244 | ```stylus 245 | .foo 246 | size 5em 10em 247 | ``` 248 | 249 | ```css 250 | .foo { 251 | width: 5em; 252 | height: 10em; 253 | } 254 | ``` 255 | 256 | ## Transparent Mixins 257 | These mixins expand vendor prefixes but do not modify the behavior of the property. 258 | 259 | For example: 260 | 261 | ```stylus 262 | * 263 | box-sizing border-box 264 | ``` 265 | 266 | ```css 267 | * { 268 | -webkit-box-sizing: border-box; 269 | -moz-box-sizing: border-box; 270 | box-sizing: border-box; 271 | } 272 | ``` 273 | 274 | Here is the full list of properties for which Nib provides transparent mixins: 275 | 276 | - box-shadow 277 | - radial-gradient 278 | - user-select 279 | - column-count 280 | - column-gap 281 | - column-rule 282 | - column-rule-color 283 | - column-rule-width 284 | - column-rule-style 285 | - column-width 286 | - transform 287 | - border-image 288 | - transition 289 | - transition-property 290 | - transition-duration 291 | - transition-timing-function 292 | - transition-delay 293 | - backface-visibility 294 | - opacity 295 | - box-sizing 296 | - box-orient 297 | - box-flex 298 | - box-flex-group 299 | - box-align 300 | - box-pack 301 | - box-direction 302 | - animation 303 | - animation-name 304 | - animation-duration 305 | - animation-delay 306 | - animation-direction 307 | - animation-iteration-count 308 | - animation-timing-function 309 | - animation-play-state 310 | - animation-fill-mode 311 | - hyphens 312 | - appearance 313 | 314 | # Aliases 315 | These aliases are provided purely for convenience. 316 | 317 | official | aliases 318 | ----------- | ---------- 319 | nowrap | no-wrap 320 | white-space | whitespace 321 | -------------------------------------------------------------------------------- /lib/nib/vendor.styl: -------------------------------------------------------------------------------- 1 | use('../nodes/vendor-helpers.js') 2 | @import 'config' 3 | 4 | /* 5 | * Alias "nowrap" as "no-wrap". 6 | */ 7 | 8 | no-wrap = unquote('nowrap') 9 | 10 | /* 11 | * Helper to find out if a given value is a width 12 | */ 13 | 14 | is-width(val) 15 | if auto == val 16 | return true 17 | else if val && 'unit' == type(val) 18 | // Stylus does not short circuit so we need to perform this as a distinct 19 | // operation to prevent errors 20 | return '' != unit(val) 21 | return false 22 | 23 | /* 24 | * Vendor support for the given prop / arguments, optionally specifying the 25 | * only prefixes to utilize, or those which should be ignored. 26 | */ 27 | 28 | vendor(prop, args, only = null, ignore = null, vendor-property = true) 29 | need_normalize = !vendor-property or prop in ('transition' 'transition-property' 'border-image' 'border-image-slice') 30 | for prefix in vendor-prefixes 31 | unless (only and !(prefix in only)) or (ignore and prefix in ignore) 32 | if official == prefix 33 | if need_normalize 34 | {prop}: normalize(prop,('%s' % args)) 35 | else 36 | {prop}: args 37 | else 38 | newprop = prop 39 | newprop = '-' + prefix + '-' + prop if vendor-property 40 | 41 | if need_normalize 42 | {newprop}: normalize(prop,('%s' % args),prefix) 43 | else 44 | {newprop}: args 45 | /* 46 | * Vendorize the given value. 47 | */ 48 | 49 | vendor-value(arg, only = null, ignore = null) 50 | prop = current-property[0] 51 | for prefix in vendor-prefixes 52 | unless (only and !(prefix in only)) or (ignore and prefix in ignore) or official == prefix 53 | add-property(prop, '-%s-%s' % (prefix arg)) 54 | arg 55 | 56 | /* 57 | * Vendor "box-shadow" support. 58 | */ 59 | 60 | box-shadow() 61 | vendor('box-shadow', arguments, only: webkit official) 62 | 63 | /* 64 | * Vendor "user-select" support. 65 | */ 66 | 67 | user-select() 68 | vendor('user-select', arguments, only: webkit moz ms official) 69 | 70 | /* 71 | * Vendor "column-count" support. 72 | */ 73 | 74 | column-count() 75 | vendor('column-count', arguments, only: webkit moz official) 76 | 77 | /* 78 | * Vendor "column-gap" support. 79 | */ 80 | 81 | column-gap() 82 | vendor('column-gap', arguments, only: webkit moz official) 83 | 84 | /* 85 | * Vendor "column-rule" support. 86 | */ 87 | 88 | column-rule() 89 | vendor('column-rule', arguments, only: webkit moz official) 90 | 91 | /* 92 | * Vendor "column-rule-color" support. 93 | */ 94 | 95 | column-rule-color() 96 | vendor('column-rule-color', arguments, only: webkit moz official) 97 | 98 | /* 99 | * Vendor "column-rule-width" support. 100 | */ 101 | 102 | column-rule-width() 103 | vendor('column-rule-width', arguments, only: webkit moz official) 104 | 105 | /* 106 | * Vendor "column-rule-style" support. 107 | */ 108 | 109 | column-rule-style() 110 | vendor('column-rule-style', arguments, only: webkit moz official) 111 | 112 | /* 113 | * Vendor "column-width" support. 114 | */ 115 | 116 | column-width() 117 | vendor('column-width', arguments, only: webkit moz official) 118 | 119 | /* 120 | * Vendor "column-span" support. 121 | */ 122 | 123 | column-span() 124 | vendor('column-span', arguments, only: webkit official) 125 | 126 | /* 127 | * Vendor "column-fill" support. 128 | */ 129 | 130 | column-fill() 131 | vendor('column-fill', arguments, only: moz official) 132 | 133 | /* 134 | * Legacy syntax support for background-clip and background-origin 135 | */ 136 | 137 | legacy-bg-values(property, args) 138 | legacy_args = () 139 | importance = unquote('') 140 | for subargs in args 141 | for arg in subargs 142 | if arg in (border-box padding-box content-box) 143 | arg = unquote('border') if arg == border-box 144 | arg = unquote('padding') if arg == padding-box 145 | arg = unquote('content') if arg == content-box 146 | if arg != '!important' 147 | push(legacy_args,arg) 148 | else 149 | importance = !important 150 | vendor(property, unquote(join(', ',legacy_args)) importance, only: moz webkit) 151 | 152 | /* 153 | * Vendor "background-clip" support. 154 | */ 155 | 156 | background-clip() 157 | if arguments[0] == text 158 | vendor('background-clip', arguments, only: webkit) 159 | else 160 | legacy-bg-values('background-clip', arguments) 161 | background-clip: arguments 162 | 163 | /* 164 | * Vendor "background-origin" support. 165 | */ 166 | 167 | background-origin() 168 | legacy-bg-values('background-origin', arguments) 169 | background-origin: arguments 170 | 171 | /* 172 | * Vendor "transform" support. 173 | */ 174 | 175 | transform() 176 | vendor('transform', arguments) 177 | 178 | /* 179 | * Vendor "transform-origin" support. 180 | */ 181 | transform-origin() 182 | vendor('transform-origin', arguments) 183 | 184 | /* 185 | * Vendor "transform-style" support. 186 | */ 187 | 188 | transform-style() 189 | vendor('transform-style', arguments) 190 | 191 | /* 192 | * Vendor "border-image" support. 193 | */ 194 | 195 | border-image() 196 | vendor('border-image', arguments, only: webkit moz o official) 197 | 198 | /* 199 | * Vendor "transition" support. 200 | */ 201 | 202 | transition() 203 | vendor('transition', arguments) 204 | 205 | /* 206 | * Vendor "transition-property" support. 207 | */ 208 | 209 | transition-property() 210 | vendor('transition-property', arguments) 211 | 212 | /* 213 | * Vendor "transition-duration" support. 214 | */ 215 | 216 | transition-duration() 217 | vendor('transition-duration', arguments) 218 | 219 | /* 220 | * Vendor "transition-timing-function" support. 221 | */ 222 | 223 | transition-timing-function() 224 | vendor('transition-timing-function', arguments) 225 | 226 | /* 227 | * Vendor "transition-delay" support. 228 | */ 229 | 230 | transition-delay() 231 | vendor('transition-delay', arguments) 232 | 233 | /* 234 | * Vendor "backface-visibility" support. 235 | */ 236 | 237 | backface-visibility() 238 | vendor('backface-visibility', arguments, only: webkit moz ms official) 239 | 240 | /* 241 | * Vendor "perspective" support. 242 | */ 243 | 244 | perspective() 245 | if mixin 246 | vendor('perspective', arguments, only: webkit moz ms official) 247 | else 248 | 'perspective(%s)' % arguments 249 | 250 | /* 251 | * Vendor "perspective-origin" support. 252 | */ 253 | 254 | perspective-origin() 255 | vendor('perspective-origin', arguments, only: webkit moz ms official) 256 | 257 | /* 258 | * Opacity with conditional IE support. 259 | */ 260 | 261 | opacity(n, args...) 262 | opacity: n args 263 | if support-for-ie 264 | if n == inherit or n == initial 265 | -ms-filter: n args 266 | filter: n args 267 | else 268 | val = round(n * 100) 269 | if val == 100 270 | -ms-filter: none args 271 | filter: none args 272 | else 273 | -ms-filter: '"progid:DXImageTransform.Microsoft.Alpha(Opacity=%s)"' % val args 274 | filter: 'alpha(opacity=%s)' % val args 275 | 276 | /* 277 | * Vendor "text-size-adjust" 278 | */ 279 | 280 | text-size-adjust() 281 | vendor('text-size-adjust', arguments) 282 | 283 | /* 284 | * Alias the "white-space" property. 285 | */ 286 | 287 | whitespace() 288 | white-space: arguments 289 | 290 | /* 291 | * Vendor "box-sizing" support. 292 | */ 293 | 294 | box-sizing() 295 | vendor('box-sizing', arguments, only: webkit moz official) 296 | 297 | /* 298 | * Vendor "box-orient" support. 299 | */ 300 | 301 | box-orient() 302 | vendor('box-orient', arguments, only: webkit moz official) 303 | 304 | /* 305 | * Vendor "box-flex-group" support. 306 | */ 307 | 308 | box-flex-group() 309 | vendor('box-flex-group', arguments, only: webkit moz official) 310 | 311 | /* 312 | * Vendor "box-ordinal-group" support. 313 | */ 314 | 315 | box-ordinal-group() 316 | vendor('box-ordinal-group', arguments, only: webkit moz ms official) 317 | 318 | 319 | /* 320 | * Vendor "box-align" support. 321 | */ 322 | 323 | box-align() 324 | vendor('box-align', arguments, only: webkit moz ms official) 325 | 326 | /* 327 | * Vendor "box-pack" support. 328 | */ 329 | 330 | box-pack() 331 | vendor('box-pack', arguments, only: webkit moz ms official) 332 | 333 | /* 334 | * Vendor "box-direction" support. 335 | */ 336 | 337 | box-direction() 338 | vendor('box-direction', arguments, only: webkit moz ms official) 339 | 340 | /* 341 | * Vendor "animation" support. 342 | */ 343 | 344 | animation() 345 | vendor('animation', arguments) 346 | 347 | 348 | /* 349 | * Vendor "animation-name" support. 350 | */ 351 | 352 | animation-name() 353 | vendor('animation-name', arguments) 354 | 355 | /* 356 | * Vendor "animation-duration" support. 357 | */ 358 | 359 | animation-duration() 360 | vendor('animation-duration', arguments) 361 | 362 | /* 363 | * Vendor "animation-delay" support. 364 | */ 365 | 366 | animation-delay() 367 | vendor('animation-delay', arguments) 368 | 369 | /* 370 | * Vendor "animation-direction" support. 371 | */ 372 | 373 | animation-direction() 374 | vendor('animation-direction', arguments) 375 | 376 | /* 377 | * Vendor "animation-iteration-count" support. 378 | */ 379 | 380 | animation-iteration-count() 381 | vendor('animation-iteration-count', arguments) 382 | 383 | /* 384 | * Vendor "animation-timing-function" support. 385 | */ 386 | 387 | animation-timing-function() 388 | vendor('animation-timing-function', arguments) 389 | 390 | /* 391 | * Vendor "animation-play-state" support. 392 | */ 393 | 394 | animation-play-state() 395 | vendor('animation-play-state', arguments) 396 | 397 | /* 398 | * Vendor "animation-fill-mode" support. 399 | */ 400 | 401 | animation-fill-mode() 402 | vendor('animation-fill-mode', arguments) 403 | 404 | /* 405 | * Vendor "hyphens" support. 406 | */ 407 | 408 | hyphens() 409 | vendor('hyphens', arguments, only: webkit moz ms official) 410 | 411 | /* 412 | * Vendor "appearance" support. 413 | */ 414 | 415 | appearance() 416 | vendor('appearance', arguments, only: webkit moz official) 417 | 418 | /* 419 | * Vendor "tab-size" support. 420 | */ 421 | 422 | tab-size() 423 | vendor('tab-size', arguments, only: moz o official) 424 | 425 | /* 426 | * Vendor "overflow-scrolling" support. 427 | */ 428 | 429 | overflow-scrolling() 430 | vendor('overflow-scrolling', arguments, only: webkit official) 431 | 432 | /* 433 | * Vendor "text-overflow" support, , -o- for opera 9.* - 10.* 434 | */ 435 | 436 | text-overflow() 437 | vendor('text-overflow', arguments, only: official o) 438 | 439 | /* 440 | * Vendor "text-size-adjust" support. 441 | */ 442 | text-size-adjust() 443 | vendor('text-size-adjust', arguments, only: official webkit ms) 444 | 445 | /* 446 | * Vendor "font-smoothing" support, webkit only. 447 | */ 448 | font-smoothing() 449 | vendor('font-smoothing', arguments, only: webkit) 450 | 451 | 452 | /** 453 | * Vendor input-placeholder/placeholder support. 454 | * 455 | * Examples: 456 | * // Default syntax 457 | * body 458 | * placeholder(color #333, font-weight normal) 459 | * 460 | * // The comma is important 461 | * .placeholder-red 462 | * placeholder(color red,) 463 | * 464 | * // We can pass a function 465 | * green-placeholder() 466 | * color green 467 | * .placeholder-green 468 | * placeholder(green-placeholder) 469 | * 470 | * // We can pass a hash 471 | * textarea 472 | * placeholder((font-style italic) (font-weight bold) (padding '4px 10px')) 473 | */ 474 | placeholder() 475 | for v in ':-webkit-input' '-moz' ':-moz' '-ms-input' 476 | &:{v}-placeholder 477 | for pair in arguments 478 | if typeof(pair) == 'function' 479 | pair() 480 | else if pair is not null && pair[0] is not null 481 | {pair[0]}: type(pair[1]) == 'string' ? s(pair[1]) : pair[1] 482 | input-placeholder = placeholder 483 | 484 | /* 485 | * Vendor background support (gradients). 486 | */ 487 | 488 | background() 489 | if match('-gradient\(', ''+arguments) 490 | vendor('background', arguments, vendor-property: false) 491 | else 492 | background arguments 493 | 494 | background-image() 495 | if match('-gradient\(', ''+arguments) 496 | vendor('background-image', arguments, vendor-property: false) 497 | else 498 | background-image arguments 499 | 500 | cursor() 501 | if match('-gradient\(', ''+arguments) 502 | vendor('cursor', arguments, vendor-property: false) 503 | else 504 | cursor arguments 505 | 506 | list-style() 507 | if match('-gradient\(', ''+arguments) 508 | vendor('list-style', arguments, vendor-property: false) 509 | else 510 | list-style arguments 511 | 512 | list-style-image() 513 | if match('-gradient\(', ''+arguments) 514 | vendor('list-style-image', arguments, vendor-property: false) 515 | else 516 | list-style-image arguments 517 | -------------------------------------------------------------------------------- /iconic/iconic_stroke.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 10 | 11 | 12 | 13 | 15 | 17 | 19 | 21 | 23 | 24 | 26 | 27 | 29 | 30 | 32 | 33 | 35 | 39 | 42 | 43 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 55 | 57 | 59 | 62 | 64 | 66 | 67 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 84 | 85 | 88 | 89 | 90 | 91 | 92 | 95 | 96 | 97 | 98 | 99 | 100 | 103 | 105 | 107 | 110 | 112 | 115 | 117 | 119 | 121 | 124 | 127 | 128 | 130 | 131 | 132 | 134 | 136 | 138 | 140 | 144 | 147 | 150 | 151 | 153 | 154 | 156 | 159 | 162 | 163 | 168 | 170 | 172 | 175 | 176 | 177 | 179 | 181 | 185 | 189 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | 288 | 289 | 290 | 291 | 292 | 293 | 294 | 295 | 296 | 297 | 298 | 299 | 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | 309 | 310 | 311 | 312 | 313 | 314 | 315 | 316 | 317 | 318 | 319 | 320 | 321 | 322 | 323 | 324 | 325 | 326 | 327 | 328 | 329 | 330 | 331 | 332 | 333 | 334 | 335 | 336 | 337 | 338 | 339 | 340 | 341 | 342 | 343 | 344 | 345 | 346 | 347 | 348 | 349 | 350 | 351 | 352 | 353 | 354 | 355 | 356 | 357 | 358 | 359 | 360 | 361 | 362 | 363 | 364 | 365 | 366 | 367 | 368 | 369 | 370 | 371 | 372 | 373 | 374 | 375 | 376 | 377 | 378 | 379 | 380 | 381 | 382 | 383 | 384 | 385 | 386 | 387 | 388 | 389 | 390 | 391 | 392 | 393 | 394 | --------------------------------------------------------------------------------