{"maintainers":[{"name":"seaneking","email":"sean@simpla.io"}],"keywords":["postcss","css","postcss-plugin","inputs","shadow dom,","psuedo"],"dist-tags":{"latest":"0.3.0"},"author":{"name":"Sean King","email":"sean@simpla.io"},"description":"Adds new pseudo-elements to inputs for easy cross-browser styling of their inner elements","readme":"# PostCSS Input Style\n[![NPM version][npm-image]][npm-url] [![Build Status][travis-image]][travis-url] [![Dependency Status][daviddm-image]][daviddm-url]\n\n[PostCSS][PostCSS] plugin that adds new pseudo-elements to inputs for easy cross-browser styling of their inner elements. Currently the only input supported is Range, more will be added as more vendor-specific pseudo selectors are made available.\n\nNote that the output selectors generated (below) are not grouped because if a browser finds a single selector it doesn't understand in a group, the whole group is ignored (see [Selectors Level 3][selectors]).\n\nPart of [Rucksack - CSS Superpowers](http://simplaio.github.io/rucksack).\n\n#### Range elements\nInput\n```css\ninput[type=\"range\"]::track {\n  background: #9d9d9d;\n  height: 3px;\n}\n\ninput[type=\"range\"]::thumb {\n  background: #4286be;\n  width: 16px;\n  height: 8px;\n}\n```\nOutput\n```css\ninput[type=\"range\"]::-webkit-slider-runnable-track {\n  -webkit-appearance: none;\n  background: #9d9d9d;\n  height: 3px;\n}\n\ninput[type=\"range\"]::-moz-range-track  {\n  -moz-appearance: none;\n  background: #9d9d9d;\n  height: 3px;\n}\n\ninput[type=\"range\"]::-ms-track  {\n  background: #9d9d9d;\n  height: 3px;\n}\n\ninput[type=\"range\"]::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  background: #4286be;\n  width: 16px;\n  height: 8px;\n}\n\ninput[type=\"range\"]::-moz-range-thumb {\n  -moz-appearance: none;\n  background: #4286be;\n  width: 16px;\n  height: 8px;\n}\n\ninput[type=\"range\"]::-ms-thumb {\n  background: #4286be;\n  width: 16px;\n  height: 8px;\n}\n\ninput[type=\"range\"] {\n  -webkit-appearance: none;\n}\n\ninput[type=range]::-moz-focus-outer {\n    border: 0;\n}\n```\n\n`-[vendor]-appearance: none;` is added so your custom styles apply. On webkit (Chrome, etc.) this means you must style *both* `::track` and `::thumb`, since the appearance must be set on the root element as well. The additional `::-moz-focus-outer` rule removes the nasty dotted focus outline on firefox.\n---\n\n### Usage\n\n```js\npostcss([ require('postcss-input-style') ])\n```\n\nSee [PostCSS][PostCSS] docs for examples for your environment.\n\n--\n\n### License\n\nMIT © [Sean King](https://twitter.com/seaneking)\n\n[npm-image]: https://badge.fury.io/js/postcss-input-style.svg\n[npm-url]: https://npmjs.org/package/postcss-input-style\n[travis-image]: https://travis-ci.org/seaneking/postcss-input-style.svg?branch=master\n[travis-url]: https://travis-ci.org/seaneking/postcss-input-style\n[daviddm-image]: https://david-dm.org/seaneking/postcss-input-style.svg?theme=shields.io\n[daviddm-url]: https://david-dm.org/seaneking/postcss-input-style\n[PostCSS]: https://github.com/postcss/postcss\n[selectors]: http://www.w3.org/TR/selectors/#Conformance\n","repository":{"type":"git","url":"git+https://github.com/seaneking/postcss-input-style.git"},"users":{"ahmedelgabri":true},"bugs":{"url":"https://github.com/seaneking/postcss-input-style/issues"},"license":"MIT","versions":{"0.1.0":{"name":"postcss-input-style","version":"0.1.0","description":"Adds new pseudo-elements to inputs for easy cross-browser styling of their Shadow-DOM elements","keywords":["postcss","css","postcss-plugin","inputs","shadow dom,","psuedo"],"license":"MIT","repository":{"type":"git","url":"git+https://github.com/seaneking/postcss-input-style.git"},"author":{"name":"Sean King","email":"sean@simpla.io"},"maintainers":[{"name":"Sean King","email":"sean@simpla.io","url":"http://simpla.io"}],"bugs":{"url":"https://github.com/seaneking/postcss-input-style/issues"},"homepage":"https://github.com/seaneking/postcss-input-style","dependencies":{"postcss":"^4.1.9"},"devDependencies":{"gulp-eslint":"^0.12.0","gulp-mocha":"^2.0.1","chai":"^2.3.0","gulp":"^3.8.11"},"scripts":{"test":"gulp check"},"gitHead":"88079dd64ca25f7bab182b73d68c26b9f193b25f","_id":"postcss-input-style@0.1.0","_shasum":"2b83fa264bc31a8be17e77d7974e517d1f5256bf","_from":".","_npmVersion":"2.13.0","_nodeVersion":"0.12.7","_npmUser":{"name":"seaneking","email":"sean@simpla.io"},"dist":{"shasum":"2b83fa264bc31a8be17e77d7974e517d1f5256bf","tarball":"http://nexus.dui88.com:8081/nexus/content/repositories/npm-registry/postcss-input-style/-/postcss-input-style-0.1.0.tgz"},"directories":{}},"0.2.0":{"name":"postcss-input-style","version":"0.2.0","description":"Adds new pseudo-elements to inputs for easy cross-browser styling of their Shadow-DOM elements","keywords":["postcss","css","postcss-plugin","inputs","shadow dom,","psuedo"],"license":"MIT","repository":{"type":"git","url":"git+https://github.com/seaneking/postcss-input-style.git"},"author":{"name":"Sean King","email":"sean@simpla.io"},"maintainers":[{"name":"seaneking","email":"sean@simpla.io"}],"bugs":{"url":"https://github.com/seaneking/postcss-input-style/issues"},"homepage":"https://github.com/seaneking/postcss-input-style","dependencies":{"postcss":"^4.1.9"},"devDependencies":{"gulp-eslint":"^0.12.0","gulp-mocha":"^2.0.1","chai":"^2.3.0","gulp":"^3.8.11"},"scripts":{"test":"gulp check"},"gitHead":"0d0f5e2bcd7c4597adfdee606055d82e4855faa7","_id":"postcss-input-style@0.2.0","_shasum":"0e7a6712de60bfabe150c35f0bed357e2e19db2f","_from":".","_npmVersion":"2.13.0","_nodeVersion":"0.12.7","_npmUser":{"name":"seaneking","email":"sean@simpla.io"},"dist":{"shasum":"0e7a6712de60bfabe150c35f0bed357e2e19db2f","tarball":"http://nexus.dui88.com:8081/nexus/content/repositories/npm-registry/postcss-input-style/-/postcss-input-style-0.2.0.tgz"},"directories":{}},"0.2.1":{"name":"postcss-input-style","version":"0.2.1","description":"Adds new pseudo-elements to inputs for easy cross-browser styling of their inner elements","keywords":["postcss","css","postcss-plugin","inputs","shadow dom,","psuedo"],"license":"MIT","repository":{"type":"git","url":"git+https://github.com/seaneking/postcss-input-style.git"},"author":{"name":"Sean King","email":"sean@simpla.io"},"maintainers":[{"name":"seaneking","email":"sean@simpla.io"}],"bugs":{"url":"https://github.com/seaneking/postcss-input-style/issues"},"homepage":"https://github.com/seaneking/postcss-input-style","dependencies":{"postcss":"^4.1.9"},"devDependencies":{"gulp-eslint":"^0.12.0","gulp-mocha":"^2.0.1","chai":"^2.3.0","gulp":"^3.8.11"},"scripts":{"test":"gulp check"},"gitHead":"a533502ad1a34dbbcee5ac9c70efeb0d6edb5087","_id":"postcss-input-style@0.2.1","_shasum":"729f116b4c8cb20da738b8e252848278f0a40711","_from":".","_npmVersion":"2.13.0","_nodeVersion":"0.12.7","_npmUser":{"name":"seaneking","email":"sean@simpla.io"},"dist":{"shasum":"729f116b4c8cb20da738b8e252848278f0a40711","tarball":"http://nexus.dui88.com:8081/nexus/content/repositories/npm-registry/postcss-input-style/-/postcss-input-style-0.2.1.tgz"},"directories":{}},"0.2.2":{"name":"postcss-input-style","version":"0.2.2","description":"Adds new pseudo-elements to inputs for easy cross-browser styling of their inner elements","keywords":["postcss","css","postcss-plugin","inputs","shadow dom,","psuedo"],"license":"MIT","repository":{"type":"git","url":"git+https://github.com/seaneking/postcss-input-style.git"},"author":{"name":"Sean King","email":"sean@simpla.io"},"maintainers":[{"name":"seaneking","email":"sean@simpla.io"}],"bugs":{"url":"https://github.com/seaneking/postcss-input-style/issues"},"homepage":"https://github.com/seaneking/postcss-input-style","dependencies":{"postcss":"^4.1.9"},"devDependencies":{"gulp-eslint":"^0.12.0","gulp-mocha":"^2.0.1","chai":"^2.3.0","gulp":"^3.8.11"},"scripts":{"test":"gulp check"},"gitHead":"b0a21b526b26dedf2b56f6043c37abeec6bb0a23","_id":"postcss-input-style@0.2.2","_shasum":"f8387b4663209f8f29749b22a859623ebbe89a4f","_from":".","_npmVersion":"2.13.0","_nodeVersion":"0.12.7","_npmUser":{"name":"seaneking","email":"sean@simpla.io"},"dist":{"shasum":"f8387b4663209f8f29749b22a859623ebbe89a4f","tarball":"http://nexus.dui88.com:8081/nexus/content/repositories/npm-registry/postcss-input-style/-/postcss-input-style-0.2.2.tgz"},"directories":{}},"0.2.3":{"name":"postcss-input-style","version":"0.2.3","description":"Adds new pseudo-elements to inputs for easy cross-browser styling of their inner elements","keywords":["postcss","css","postcss-plugin","inputs","shadow dom,","psuedo"],"license":"MIT","repository":{"type":"git","url":"git+https://github.com/seaneking/postcss-input-style.git"},"author":{"name":"Sean King","email":"sean@simpla.io"},"maintainers":[{"name":"seaneking","email":"sean@simpla.io"}],"bugs":{"url":"https://github.com/seaneking/postcss-input-style/issues"},"homepage":"https://github.com/seaneking/postcss-input-style","dependencies":{"postcss":"^4.1.9"},"devDependencies":{"gulp-eslint":"^0.12.0","gulp-mocha":"^2.0.1","chai":"^2.3.0","gulp":"^3.8.11"},"scripts":{"test":"gulp check"},"gitHead":"9a4072e32781b27555e45e43fe704e03e0131f99","_id":"postcss-input-style@0.2.3","_shasum":"5b2a7a15d3c27485d657e2073dc4287e857b75ef","_from":".","_npmVersion":"2.13.0","_nodeVersion":"0.12.7","_npmUser":{"name":"seaneking","email":"sean@simpla.io"},"dist":{"shasum":"5b2a7a15d3c27485d657e2073dc4287e857b75ef","tarball":"http://nexus.dui88.com:8081/nexus/content/repositories/npm-registry/postcss-input-style/-/postcss-input-style-0.2.3.tgz"},"directories":{}},"0.2.4":{"name":"postcss-input-style","version":"0.2.4","description":"Adds new pseudo-elements to inputs for easy cross-browser styling of their inner elements","keywords":["postcss","css","postcss-plugin","inputs","shadow dom,","psuedo"],"license":"MIT","repository":{"type":"git","url":"git+https://github.com/seaneking/postcss-input-style.git"},"author":{"name":"Sean King","email":"sean@simpla.io"},"maintainers":[{"name":"seaneking","email":"sean@simpla.io"}],"bugs":{"url":"https://github.com/seaneking/postcss-input-style/issues"},"homepage":"https://github.com/seaneking/postcss-input-style","dependencies":{"postcss":"^4.1.9"},"devDependencies":{"gulp-eslint":"^0.12.0","gulp-mocha":"^2.0.1","chai":"^2.3.0","gulp":"^3.8.11"},"scripts":{"test":"gulp check"},"gitHead":"b69cd6d9990c18fb5d3b077c5bac81d6455a081e","_id":"postcss-input-style@0.2.4","_shasum":"78dac259123cd11c22d8e53301c5c623ef818b3c","_from":".","_npmVersion":"2.13.0","_nodeVersion":"0.12.7","_npmUser":{"name":"seaneking","email":"sean@simpla.io"},"dist":{"shasum":"78dac259123cd11c22d8e53301c5c623ef818b3c","tarball":"http://nexus.dui88.com:8081/nexus/content/repositories/npm-registry/postcss-input-style/-/postcss-input-style-0.2.4.tgz"},"directories":{}},"0.3.0":{"name":"postcss-input-style","version":"0.3.0","description":"Adds new pseudo-elements to inputs for easy cross-browser styling of their inner elements","keywords":["postcss","css","postcss-plugin","inputs","shadow dom,","psuedo"],"license":"MIT","repository":{"type":"git","url":"git+https://github.com/seaneking/postcss-input-style.git"},"author":{"name":"Sean King","email":"sean@simpla.io"},"maintainers":[{"name":"seaneking","email":"sean@simpla.io"}],"bugs":{"url":"https://github.com/seaneking/postcss-input-style/issues"},"homepage":"https://github.com/seaneking/postcss-input-style","dependencies":{"postcss":"^5.0.0"},"devDependencies":{"gulp-eslint":"^0.12.0","gulp-mocha":"^2.0.1","chai":"^2.3.0","gulp":"^3.8.11"},"scripts":{"test":"gulp check"},"gitHead":"24d86efa62fa84ed8bec3d095f9fac7d438041b6","_id":"postcss-input-style@0.3.0","_shasum":"e3b4fdb0aa441bed1930cbb44d8ad5634cf38540","_from":".","_npmVersion":"2.13.0","_nodeVersion":"0.12.7","_npmUser":{"name":"seaneking","email":"sean@simpla.io"},"dist":{"shasum":"e3b4fdb0aa441bed1930cbb44d8ad5634cf38540","tarball":"http://nexus.dui88.com:8081/nexus/content/repositories/npm-registry/postcss-input-style/-/postcss-input-style-0.3.0.tgz"},"directories":{}}},"name":"postcss-input-style","time":{"modified":"2015-09-06T06:09:55.802Z","created":"2015-08-15T07:15:07.054Z","0.1.0":"2015-08-15T07:15:07.054Z","0.2.0":"2015-08-15T09:05:33.146Z","0.2.1":"2015-08-15T09:38:45.888Z","0.2.2":"2015-08-17T09:52:12.642Z","0.2.3":"2015-08-17T10:21:04.066Z","0.2.4":"2015-08-18T14:27:25.774Z","0.3.0":"2015-09-06T06:09:55.802Z"},"readmeFilename":"README.md","homepage":"https://github.com/seaneking/postcss-input-style"}