diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..3c3629e
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/.travis.yml b/.travis.yml
new file mode 100644
index 0000000..6e5919d
--- /dev/null
+++ b/.travis.yml
@@ -0,0 +1,3 @@
+language: node_js
+node_js:
+ - "0.10"
diff --git a/Gruntfile.js b/Gruntfile.js
new file mode 100644
index 0000000..e21c763
--- /dev/null
+++ b/Gruntfile.js
@@ -0,0 +1,99 @@
+module.exports = function(grunt) {
+ /**
+ * Load tasks
+ */
+ grunt.loadNpmTasks('lesshat-devstack');
+ grunt.loadNpmTasks('grunt-prompt');
+
+ /**
+ * Grunt config
+ */
+ grunt.initConfig({
+ pkg: grunt.file.readJSON('package.json'),
+
+ generator: {
+ settings: {
+ mixin_name: null,
+ default_value: null,
+ vendors: null
+ }
+ },
+
+ version: {
+ settings: {
+ version: null
+ }
+ },
+
+ prompt: {
+ version: {
+ options: {
+ questions: [{
+ config: 'version.settings.version',
+ type: 'input',
+ validate: function(value) {
+ return (value && true);
+ },
+ message: 'LESS Hat next version number? Current is ' + '<%= pkg.version %>'.green + ':',
+ }],
+ }
+ },
+ generate: {
+ options: {
+ questions: [{
+ config: 'generator.settings.mixin_name',
+ type: 'input',
+ message: 'What is the name of new mixin? (e.g. animationDelay)',
+ filter: function(value) {
+ grunt.config('generator.settings.mixin_css_name', value.replace(/([A-Z])/g, function(upperCase) {
+ return '-' + upperCase.toLowerCase();
+ }));
+ grunt.config('generator.settings.mixin_name | firstLetter', value[0].toUpperCase() + value.slice(1));
+ return value[0].toLowerCase() + value.slice(1);
+ },
+ validate: function(value) {
+ if (/[a-z0-9]+/i.test(value)) {
+ return true;
+ } else {
+ return 'Please fill only valid characters [a-zA-Z0-9].';
+ }
+ }
+ }, {
+ config: 'generator.settings.vendors',
+ type: 'checkbox',
+ message: 'For which browsers is this mixin?',
+ choices: [{
+ name: 'webkit'
+ }, {
+ name: 'moz'
+ }, {
+ name: 'opera'
+ }, {
+ name: 'ms',
+ }]
+ }, {
+ config: 'generator.settings.default_value',
+ type: 'input',
+ default: 'none',
+ filter: function(value) {
+ return '\'' + value + '\'';
+ },
+ message: 'What is default value of the mixin? Optional – you can skip',
+ }]
+ }
+ }
+ }
+
+ });
+
+ /**
+ * Register tasks
+ */
+
+ grunt.registerTask('version', ['prompt:version', 'iterate', 'build', 'mixins_update']);
+ grunt.registerTask('dev', ['build', 'test']);
+ grunt.registerTask('generate', ['prompt:generate', 'generator']);
+ grunt.registerTask('contrib', ['build', 'test', 'mixins_update', 'prefix', 'documentation']);
+ grunt.registerTask('default', ['version','build', 'test', 'mixins_update', 'prefix', 'documentation']);
+
+};
diff --git a/LICENSE b/LICENSE
index f45b78b..fd5a4c8 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,14 +1,17 @@
-MIT License
+The MIT License
+
+Copyright (c) 2013 Petr Brzek
-Copyright (c) 2012
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
+
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
@@ -16,29 +19,3 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
-
-
-BSD License
-
-Copyright (c) 2012
-All rights reserved.
-Redistribution and use in source and binary forms, with or without
-modification, are permitted provided that the following conditions are met:
- * Redistributions of source code must retain the above copyright
- notice, this list of conditions and the following disclaimer.
- * Redistributions in binary form must reproduce the above copyright
- notice, this list of conditions and the following disclaimer in the
- documentation and/or other materials provided with the distribution.
- * Neither the name of the Organization nor the
- names of its contributors may be used to endorse or promote products
- derived from this software without specific prior written permission.
-THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
-ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
-WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
-DISCLAIMED. IN NO EVENT SHALL COPYRIGHT HOLDER BE LIABLE FOR ANY
-DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
-(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
-LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
-ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
-SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
\ No newline at end of file
diff --git a/README-template.md b/README-template.md
new file mode 100644
index 0000000..ad511a3
--- /dev/null
+++ b/README-template.md
@@ -0,0 +1,229 @@
+
+
+# LESS Hat 2.0 [](https://travis-ci.org/csshat/lesshat)
+
+
+
+
+---
+**[Download latest](https://raw.github.com/PetrBrzek/LESSHat/master/build/lesshat.less)** (or **[Prefixed](https://raw.github.com/PetrBrzek/LESSHat/master/build/lesshat-prefixed.less)**) **|**
+**[Get Starded](#get-started) |**
+**[Contribute](#contribute) |**
+**[Documentation](#documentation) |**
+
+---
+ folder.
+* **Bower** – is like NPM for frontend. NPM is like Gems for JavaScript. I could go on forever…
+* **package.json** – contains meta data for NPM.
+
+### Structure of LESS Hat mixins
+1. **Global prefix configuration**:
+
+ @webkit: true;
+ @moz: true;
+ @opera: true;
+ @ms: true;
+ @w3c: true;
+
+ If you for example don't want to generate prefixes for opera, just turn it to false.
+
+2. **Typical LESS Hat mixin**:
+
+ .supermixin(...) {
+
+ @webkit_local: true;
+ @w3c_local: true;
+
+ @process: ~`(function(){})()`;
+
+ .result (@arguments, @signal, @boolean, @local_boolean) when (@boolean = true) and (@local_boolean = true) {
+ .inception (@signal, @arguments) when (@signal = 1) and not (@process = 08121991) { -webkit-border-radius: @process; }
+ .inception (@signal, @arguments) when (@signal = 1) and (@process = 08121991) {}
+ .inception (@signal, @arguments) when (@signal = 3) and not (@process = 08121991) { border-radius: @process; }
+ .inception (@signal, @arguments) when (@signal = 3) and (@process = 08121991) {}
+ .inception(@signal, @arguments);
+ }
+
+ .result (@arguments, @signal, @boolean, @local_boolean) when not (@boolean = true), not (@local_boolean = true) {}
+
+ .result(@arguments, 1, @webkit, @webkit_local);
+ .result(@arguments, 3, @w3c, @w3c_local);
+ }
+
+ At the top, there are a local prefix configurations. So you can turn off/on browser for one specific mixin. This is quite useful.
+
+ In @process variable is all magic. Please don't edit javascrpt directly in .less file. Instead use [lesshat-devstack](https://github.com/csshat/lesshat-devstack).
+
+ If you call mixin without arguments, some mixins return CSS default value for specific property, but some mixins return magic number *08121991* (Yeah, it's like Lost, TV series, but numbers are different) and because of that LESS CSS generates nothing.
+
+ **Why 08121991 and not just 0 (zero)?**
+ Some CSS properties have zero as default value. So we need more difficult number.
+
+3. **Use (almost) every property without interpolation!**
+
+ Correct mixin calling:
+
+ .background-image(linear-gradient(to bottom, #fb83fa 0%,#e93cec 100%))
+
+ Incorrect calling:
+
+ .background-image(~'linear-gradient(to bottom, #fb83fa 0%,#e93cec 100%)')
+
+ Unfortunately, there are exceptions:
+
+ .keyframes(~'');
+ .calc(~'');
+ .selection(~'');
+
+ // in some cases you have to interpolate border-radius or LESS CSS begins to play on calculator
+ .border-radius(~'20px / 40px');
+
+
+
+## folder.
+* **Bower** – is like NPM for frontend. NPM is like Gems for JavaScript. I could go on forever…
+* **package.json** – contains meta data for NPM.
+
+### Structure of LESS Hat mixins
+1. **Global prefix configuration**:
+
+ @webkit: true;
+ @moz: true;
+ @opera: true;
+ @ms: true;
+ @w3c: true;
+
+ If you for example don't want to generate prefixes for opera, just turn it to false.
+
+2. **Typical LESS Hat mixin**:
+
+ .supermixin(...) {
+
+ @webkit_local: true;
+ @w3c_local: true;
+
+ @process: ~`(function(){})()`;
+
+ .result (@arguments, @signal, @boolean, @local_boolean) when (@boolean = true) and (@local_boolean = true) {
+ .inception (@signal, @arguments) when (@signal = 1) and not (@process = 08121991) { -webkit-border-radius: @process; }
+ .inception (@signal, @arguments) when (@signal = 1) and (@process = 08121991) {}
+ .inception (@signal, @arguments) when (@signal = 3) and not (@process = 08121991) { border-radius: @process; }
+ .inception (@signal, @arguments) when (@signal = 3) and (@process = 08121991) {}
+ .inception(@signal, @arguments);
+ }
+
+ .result (@arguments, @signal, @boolean, @local_boolean) when not (@boolean = true), not (@local_boolean = true) {}
+
+ .result(@arguments, 1, @webkit, @webkit_local);
+ .result(@arguments, 3, @w3c, @w3c_local);
+ }
+
+ At the top, there are a local prefix configurations. So you can turn off/on browser for one specific mixin. This is quite useful.
+
+ In @process variable is all magic. Please don't edit javascrpt directly in .less file. Instead use [lesshat-devstack](https://github.com/csshat/lesshat-devstack).
+
+ If you call mixin without arguments, some mixins return CSS default value for specific property, but some mixins return magic number *08121991* (Yeah, it's like Lost, TV series, but numbers are different) and because of that LESS CSS generates nothing.
+
+ **Why 08121991 and not just 0 (zero)?**
+ Some CSS properties have zero as default value. So we need more difficult number.
+
+3. **Use (almost) every property without interpolation!**
+
+ Correct mixin calling:
+
+ .background-image(linear-gradient(to bottom, #fb83fa 0%,#e93cec 100%))
+
+ Incorrect calling:
+
+ .background-image(~'linear-gradient(to bottom, #fb83fa 0%,#e93cec 100%)')
+
+ Unfortunately, there are exceptions:
+
+ .keyframes(~'');
+ .calc(~'');
+ .selection(~'');
+
+ // in some cases you have to interpolate border-radius or LESS CSS begins to play on calculator
+ .border-radius(~'20px / 40px');
+
+
+
+## , …)
+
+**Tips and tricks:**
+
+If you omit units after time argument, `animation-delay` is trying to be smart and add properly value.
+
+ if (time > 10) {
+ time += 'ms';
+ } else {
+ time += 's';
+ }
+
+**Example:**
+
+ div {
+ .animation-delay(2, 200);
+ }
+
+ // Result
+ div {
+ -webkit-animation-delay: 2s, 200ms;
+ -moz-animation-delay: 2s, 200ms;
+ -opera-animation-delay: 2s, 200ms;
+ animation-delay: 2s, 200ms;
+ }
+
+
+
+### , …)
+
+**Example:**
+
+ div {
+ .animation-direction(reverse, alternate);
+ }
+
+ // Result
+ div {
+ -webkit-animation-direction: reverse, alternate;
+ -moz-animation-direction: reverse, alternate;
+ -opera-animation-direction: reverse, alternate;
+ animation-direction: reverse, alternate;
+ }
+
+
+
+### , …)
+
+**Tips and tricks:**
+
+If you omit units after time argument, `animation-duration` is trying to be smart and add proper value.
+
+ if (time > 10) {
+ time += 'ms';
+ } else {
+ time += 's';
+ }
+
+**Example:**
+
+ div {
+ .animation-duration(2000);
+ }
+
+ // Result
+ div {
+ -webkit-animation-duration: 2000ms;
+ -moz-animation-duration: 2000ms;
+ -opera-animation-duration: 2000ms;
+ animation-duration: 2000ms;
+ }
+
+
+
+### , …)
+
+**Example:**
+
+ div {
+ .animation-fill-mode(forwards);
+ }
+
+ // Result
+ div {
+ -webkit-animation-fill-mode: forwards;
+ -moz-animation-fill-mode: forwards;
+ -opera-animation-fill-mode: forwards;
+ animation-fill-mode: forwards;
+ }
+
+
+
+### , …)
+
+**Example:**
+
+ div {
+ .animation-iteration-count(3);
+ }
+
+ // Result
+ div {
+ -webkit-animation-iteration-count: 3;
+ -moz-animation-iteration-count: 3;
+ -opera-animation-iteration-count: 3;
+ animation-iteration-count: 3;
+ }
+
+
+
+### , …)
+
+**Example:**
+
+ div {
+ .animation-name(animation-1, animation-2);
+ }
+
+ // Result
+ div {
+ -webkit-animation-name: animation-1, animation-2;
+ -moz-animation-name: animation-1, animation-2;
+ -opera-animation-name: animation-1, animation-2;
+ animation-name: animation-1, animation-2;
+ }
+
+
+
+### , …)
+
+**Example:**
+
+ div {
+ .animation-play-state(paused);
+ }
+
+ // Result
+ div {
+ -webkit-animation-play-state: paused;
+ -moz-animation-play-state: paused;
+ -opera-animation-play-state: paused;
+ animation-play-state: paused;
+ }
+
+
+
+### , …)
+
+**Example:**
+
+ div {
+ .animation-timing-function(cubic-bezier(0.1, 0.7, 1.0, 0.1));
+ }
+
+ // Result
+ div {
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
+ -moz-animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
+ -opera-animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
+ animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
+ }
+
+
+
+### )
+
+**Example:**
+
+ div {
+ .appearance();
+ }
+
+ // Result
+ div {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ }
+
+
+
+### )
+
+**Example:**
+
+ div {
+ .background-clip(padding-box);
+ }
+
+ // Result
+ div {
+ -webkit-background-clip: padding-box;
+ -moz-background-clip: padding-box;
+ background-clip: padding-box;
+ }
+
+
+
+### ` which represents a linear|radial gradient of colors. The result of this function is an object of the CSS `` data type. Like any other gradient, a CSS linear gradient is not a CSS `` but an image with no intrinsic dimensions; that is, it has neither natural or preferred size, nor ratio. Its concrete size will match the one of the element it applies to.
+
+Resources: **[WebPlatform](http://docs.webplatform.org/wiki/css/functions/linear-gradient)**, **[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient)**
+
+**Syntax:**
+
+Default value: none
+
+ .background-image(, ...)
+
+**Tips and tricks:**
+
+The `background-image` mixin is the most robust mixin of all.
+It generates `SVG` for Internet Explorer 9, old webkit, moz and opera syntax.
+Always use W3C syntax for the mixin. It can recalculate angle for older syntax, transform `to top` to `bottom` syntax and it can omit SVG syntax if it's impossible to express SVG e.g. when you call mixin with 55deg.
+If you call mixin without arguments, LESS Hat does not generate anything.
+Great online gradient [generator](http://www.colorzilla.com/gradient-editor/).
+
+
+**Example:**
+
+ div {
+ .background-image(linear-gradient(to bottom, #fb83fa 0%,#e93cec 100%));
+ }
+
+ // Result
+ div {
+ background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmYjgzZmEiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2U5M2NlYyIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
+ background-image: -webkit-linear-gradient(top, #fb83fa 0%, #e93cec 100%);
+ background-image: -moz-linear-gradient(top, #fb83fa 0%, #e93cec 100%);
+ background-image: -o-linear-gradient(top, #fb83fa 0%, #e93cec 100%);
+ background-image: linear-gradient(to bottom, #fb83fa 0%, #e93cec 100%);
+ }
+
+
+
+### )
+
+**Example:**
+
+ div {
+ .background-origin(content-box);
+ }
+
+ // Result
+ div {
+ -webkit-background-origin: content-box;
+ -moz-background-origin: content-box;
+ background-origin: content-box;
+ }
+
+
+
+### , ...)
+
+**Tips and tricks:**
+
+If you omit units, `background-size` adds `px` automatically.
+
+**Example:**
+
+ div {
+ .background-size(cover, 100%);
+ }
+
+ // Result
+ div {
+ -webkit-background-size: cover, 100%;
+ -moz-background-size: cover, 100%;
+ background-size: cover, 100%;
+ }
+
+
+
+### MDN **
+
+**Syntax:**
+
+Default value: 0
+
+ .blur(length)
+
+**Tips and tricks:**
+
+If you omit units, `blur` adds `px` automatically.
+
+**Example:**
+
+ div {
+ .blur(5px);
+ }
+
+ // Result
+ div {
+ -webkit-filter: blur(5px);
+ -moz-filter: blur(5px);
+ -ms-filter: blur(5px);
+ filter: blur(5px);
+ }
+
+
+
+### MDN **
+
+**Syntax:**
+
+Default value: 0
+
+ .brightness(amount)
+
+**Example:**
+
+ div {
+ .brightness(0.5);
+ }
+
+ // Result
+ div {
+ -webkit-filter: brightness(0.5);
+ -moz-filter: brightness(0.5);
+ -ms-filter: brightness(0.5);
+ filter: brightness(0.5);
+ }
+
+
+
+### `, ``, ``, ``, ``, or `` is required.With calc(), you can perform calculations to determine CSS property values.
+
+**THIS MIXIN MUST BE INTERPOLATED ~''**
+The `-lh-property: 0` junk line of code is a neccesary sacrifice due to the hack nature of this set of mixins. (via [less-properties](https://github.com/borodean/less-properties))
+
+Resources: **[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/calc)**
+
+**Syntax:**
+
+ .calc(, ~'')
+
+**Example:**
+
+ div {
+ .calc(width, ~'100% - 33px');
+ }
+
+ // Result
+ div {
+ -lh-property: 0;
+ width:-webkit-calc(100% - 33px);
+ width:-moz-calc(100% - 33px);
+ width:calc(100% - 33px);
+ }
+
+### | auto)
+
+**Example:**
+
+ div {
+ .column-count(3);
+ }
+
+ // Result
+ div {
+ -webkit-column-count: 0.5;
+ -moz-column-count: 0.5;
+ column-count: 0.5;
+ }
+
+
+
+### | normal)
+
+**Tips and tricks:**
+
+ If you omit units, `column-gap` adds `px` automatically.
+
+**Example:**
+
+ div {
+ .column-gap(30);
+ }
+
+ // Result
+ div {
+ -webkit-column-gap: 30px;
+ -moz-column-gap: 30px;
+ column-gap: 30px;
+ }
+
+
+
+### | | )
+
+**Tips and tricks:**
+
+ If you omit units, `column-rule` adds `px` automatically.
+
+**Example:**
+
+ div {
+ .column-rule(5 outset #ff00ff);
+ }
+
+ // Result
+ div {
+ -webkit-column-rule: 5px outset #ff00ff;
+ -moz-column-rule: 5px outset #ff00ff;
+ column-rule: 5px outset #ff00ff;
+ }
+
+
+
+### | auto)
+
+**Tips and tricks:**
+
+ If you omit units, `column-width` adds `px` automatically.
+
+**Example:**
+
+ div {
+ .column-width(100px);
+ }
+
+ // Result
+ div {
+ -webkit-column-width: 100px;
+ -moz-column-width: 100px;
+ column-width: 100px;
+ }
+
+
+
+### | )
+
+**Tips and tricks:**
+
+ If you omit units for column-width argument, `columns` adds `px` to it automatically.
+
+**Example:**
+
+ div {
+ .columns(100 3);
+ }
+
+ // Result
+ div {
+ -webkit-columns: 100px 3;
+ -moz-columns: 100px 3;
+ columns: 100px 3;
+ }
+
+
+
+### MDN **
+
+**Syntax:**
+
+Default value: 100%
+
+ .contrast()
+
+**Tips and tricks:**
+
+ If you omit units, `contrast` adds `%` automatically.
+
+**Example:**
+
+ div {
+ .contrast(200);
+ }
+
+ // Result
+ div {
+ -webkit-filter: contrast(200%);
+ -moz-filter: contrast(200%);
+ -ms-filter: contrast(200%);
+ filter: contrast(200%);
+ }
+
+
+
+### | )
+
+**Example:**
+
+ div {
+ .display(flex);
+ }
+
+ // Result
+ div {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: -webkit-flex;
+ display: -moz-box;
+ }
+
+
+
+### MDN **
+
+**Syntax:**
+
+ .drop-shadow( [ | | ])
+
+**Tips and tricks:**
+
+ If you omit units, `drop-shadow` adds `px` automatically.
+
+**Example:**
+
+ div {
+ .drop-shadow(16 16 10 black);
+ }
+
+ // Result
+ div {
+ -webkit-filter: drop-shadow(16px 16px 10px #000000);
+ -moz-filter: drop-shadow(16px 16px 10px #000000);
+ -ms-filter: drop-shadow(16px 16px 10px #000000);
+ filter: drop-shadow(16px 16px 10px #000000);
+ }
+
+
+
+### *)
+
+**Example:**
+
+ div {
+ .filter(grayscale(0.5) blur(10px));
+ }
+
+ // Result
+ div {
+ -webkit-filter: grayscale(0.5) blur(10px);
+ -moz-filter: grayscale(0.5) blur(10px);
+ -ms-filter: grayscale(0.5) blur(10px);
+ filter: grayscale(0.5) blur(10px);
+ }
+
+
+
+### | ])
+
+**Example:**
+
+ div {
+ .flex(1 3 100px);
+ }
+
+ // Result
+ div {
+ -webkit-box-flex: 1;
+ -moz-box-flex: 1;
+ -webkit-flex: 1 3 100px;
+ -ms-flex: 1 3 100px;
+ flex: 1 3 100px;
+ }
+
+
+
+### )
+
+**Tips and tricks:**
+
+ If you omit units, `flex-basis` adds `px` automatically.
+
+**Example:**
+
+ div {
+ .flex-basis(100);
+ }
+
+ // Result
+ div {
+ -webkit-flex-basis: 100;
+ flex-basis: 100px;
+ }
+
+
+
+### )
+
+**Example:**
+
+ div {
+ .flex-grow(2);
+ }
+
+ // Result
+ div {
+ -webkit-flex-grow: 2;
+ flex-grow: 2;
+ }
+
+
+
+### )
+
+**Example:**
+
+ div {
+ .flex-shrink(2);
+ }
+
+ // Result
+ div {
+ -webkit-flex-shrink: 2;
+ flex-shrink: 2;
+ }
+
+
+
+### MDN **
+
+**Syntax:**
+
+Default value: 0
+
+ .grayscale()
+
+**Tips and tricks:**
+
+ If you omit units, `grayscale` adds `%` automatically.
+
+**Example:**
+
+ div {
+ .grayscale(50);
+ }
+
+ // Result
+ div {
+ -webkit-filter: grayscale(50%);
+ -moz-filter: grayscale(50%);
+ -ms-filter: grayscale(50%);
+ filter: grayscale(50%);
+ }
+
+
+
+### MDN **
+
+**Syntax:**
+
+Default value: 0
+
+ .hue-rotate()
+
+**Tips and tricks:**
+
+ If you omit units, `hue-rotate` adds `deg` automatically.
+
+**Example:**
+
+ div {
+ .hue-rotate(50);
+ }
+
+ // Result
+ div {
+ -webkit-filter: hue-rotate(50deg);
+ -moz-filter: hue-rotate(50deg);
+ -ms-filter: hue-rotate(50deg);
+ filter: hue-rotate(50deg);
+ }
+
+
+
+### MDN **
+
+**Syntax:**
+
+Default value: 0
+
+ .invert()
+
+**Tips and tricks:**
+
+ If you omit units, `invert` adds `%` automatically.
+
+**Example:**
+
+ div {
+ .invert(100);
+ }
+
+ // Result
+ div {
+ -webkit-filter: invert(100%);
+ -moz-filter: invert(100%);
+ -ms-filter: invert(100%);
+ filter: invert(100%);
+ }
+
+
+
+### , ')
+
+**Tips and tricks:**
+
+ Properties inside `` are automatically prefixed, if it's needed.
+
+**Example:**
+
+ .keyframes(~'animationName, 0%{ transform: scale(1.5); color: blue; } 100%{ transform: scale(2); color: red }');
+
+ // Result
+ lesshat-selector {-lh-property: 0; }
+ @-webkit-keyframes animationName{ 0%{ -webkit-transform: scale(1.5); color: blue; } 100%{ -webkit-transform: scale(2); color: red }}
+ @-moz-keyframes animationName{ 0%{ -moz-transform: scale(1.5); color: blue; } 100%{ -moz-transform: scale(2); color: red }}
+ @-o-keyframes animationName{ 0%{ -o-transform: scale(1.5); color: blue; } 100%{ -o-transform: scale(2); color: red }}
+ @keyframes animationName{ 0%{ transform: scale(1.5); color: blue; } 100%{ transform: scale(2); color: red };}
+
+
+
+### )
+
+**Tips and tricks:**
+
+ You can enable old filter syntax for IE6, just set `@ms_local: true`.
+
+**Example:**
+
+ div {
+ .opacity(.5);
+ }
+
+ // Result
+ div {
+ -webkit-opacity: 0.5;
+ -moz-opacity: 0.5;
+ opacity: 0.5;
+ }
+
+
+
+### )
+
+**Example:**
+
+ div {
+ .order(1);
+ }
+
+ // Result
+ div {
+ -webkit-box-ordinal-group: 1;
+ -moz-box-ordinal-group: 1;
+ -ms-flex-order: 1;
+ -webkit-order: 1;
+ order: 1;
+ }
+
+
+
+### )
+
+**Tips and tricks:**
+
+ If you omit units, `perspective` adds `px` automatically.
+
+**Example:**
+
+ div {
+ .perspective(1000);
+ }
+
+ // Result
+ div {
+ -moz-perspective: 1000px;
+ -webkit-perspective: 1000px;
+ perspective: 1000px;
+ }
+
+
+
+### | | constants | inherit)
+
+**Tips and tricks:**
+
+ If you omit units, `perspective-origin` adds `%` automatically.
+
+**Example:**
+
+ div {
+ .perspective-origin(top left);
+ }
+
+ // Result
+ div {
+ -moz-perspective-origin: top left;
+ -webkit-perspective-origin: top left;
+ perspective-origin: top left;
+ }
+
+
+
+### , [])
+
+**Example:**
+
+ div {
+ .placeholder(#666666);
+ }
+
+ // Result
+ div::-webkit-input-placeholder {
+ color: #666666;
+ }
+ div:-moz-placeholder {
+ color: #666666;
+ }
+ div::-moz-placeholder {
+ color: #666666;
+ }
+ div:-ms-input-placeholder {
+ color: #666666;
+ }
+
+ // In root (outside of selectors)
+ .placeholder(#333333);
+
+ // Result
+ ::-webkit-input-placeholder {
+ color: #666666;
+ }
+ :-moz-placeholder {
+ color: #666666;
+ }
+ ::-moz-placeholder {
+ color: #666666;
+ }
+ :-ms-input-placeholder {
+ color: #666666;
+ }
+
+ // In root (outside of selectors)
+ .placeholder(#333333, textarea);
+
+ // Result
+ textarea::-webkit-input-placeholder {
+ color: #666666;
+ }
+ textarea:-moz-placeholder {
+ color: #666666;
+ }
+ textarea::-moz-placeholder {
+ color: #666666;
+ }
+ textarea:-ms-input-placeholder {
+ color: #666666;
+ }
+
+
+
+### )
+
+**Tips and tricks:**
+
+ If you omit units, `rotate` adds `deg` automatically.
+
+**Example:**
+
+ div {
+ .rotate(45);
+ }
+
+ // Result
+ div {
+ -webkit-transform: rotate(45deg);
+ -moz-transform: rotate(45deg);
+ -opera-transform: rotate(45deg);
+ -ms-transform: rotate(45deg);
+ transform: rotate(45deg);
+ }
+
+
+### MDN **
+
+**Syntax:**
+
+Default value: 0, 0, 0, 0
+
+ .rotate3d(, , , )
+
+**Tips and tricks:**
+
+ If you omit angle unit, `rotate3d` adds `deg` automatically.
+
+**Example:**
+
+ div {
+ .rotate3d(1, 0, 0, 50);
+ }
+
+ // Result
+ div {
+ -webkit-transform: rotate3d(1, 0, 0, 50deg);
+ -moz-transform: rotate3d(1, 0, 0, 50deg);
+ -opera-transform: rotate3d(1, 0, 0, 50deg);
+ -ms-transform: rotate3d(1, 0, 0, 50deg);
+ transform: rotate3d(1, 0, 0, 50deg);
+ }
+
+
+
+### )
+
+**Tips and tricks:**
+
+ If you omit units, `rotateX` adds `deg` automatically.
+
+**Example:**
+
+ div {
+ .rotateX(45);
+ }
+
+ // Result
+ div {
+ -webkit-transform: rotateX(45deg);
+ -moz-transform: rotateX(45deg);
+ -opera-transform: rotateX(45deg);
+ -ms-transform: rotateX(45deg);
+ transform: rotateX(45deg);
+ }
+
+
+### )
+
+**Tips and tricks:**
+
+ If you omit units, `rotateY` adds `deg` automatically.
+
+**Example:**
+
+ div {
+ .rotateY(45);
+ }
+
+ // Result
+ div {
+ -webkit-transform: rotateY(45deg);
+ -moz-transform: rotateY(45deg);
+ -opera-transform: rotateY(45deg);
+ -ms-transform: rotateY(45deg);
+ transform: rotateY(45deg);
+ }
+
+
+### )
+
+**Tips and tricks:**
+
+ If you omit units, `rotateZ` adds `deg` automatically.
+
+**Example:**
+
+ div {
+ .rotateZ(45);
+ }
+
+ // Result
+ div {
+ -webkit-transform: rotateZ(45deg);
+ -moz-transform: rotateZ(45deg);
+ -opera-transform: rotateZ(45deg);
+ -ms-transform: rotateZ(45deg);
+ transform: rotateZ(45deg);
+ }
+
+
+
+### MDN **
+
+ **Syntax:**
+
+ Default value: 100%
+
+ .saturate()
+
+ **Tips and tricks:**
+
+ If you omit units, `saturate` adds `%` automatically.
+
+ **Example:**
+
+ div {
+ .saturate(45);
+ }
+
+ // Result
+ div {
+ -webkit-filter: saturate(45deg);
+ -moz-filter: saturate(45deg);
+ -ms-filter: saturate(45deg);
+ filter: saturate(45deg);
+ }
+
+
+
+### [, ])
+
+**Example:**
+
+ div {
+ .scale(2);
+ }
+
+ // Result
+ div {
+ -webkit-transform: scale(2);
+ -moz-transform: scale(2);
+ -opera-transform: scale(2);
+ -ms-transform: scale(2);
+ transform: scale(2);
+ }
+
+
+### MDN **
+
+**Syntax:**
+
+Default value: 1, 1, 1
+
+ .scale3d(, , )
+
+**Example:**
+
+ div {
+ .scale3d(1.5, .2, 3);
+ }
+
+ // Result
+ div {
+ -webkit-transform: scale3d(1.5, 0.2, 3);
+ -moz-transform: scale3d(1.5, 0.2, 3);
+ -opera-transform: scale3d(1.5, 0.2, 3);
+ -ms-transform: scale3d(1.5, 0.2, 3);
+ transform: scale3d(1.5, 0.2, 3);
+ }
+
+
+
+### )
+
+**Example:**
+
+ div {
+ .scaleX(1.5);
+ }
+
+ // Result
+ div {
+ -webkit-transform: scaleX(1.5);
+ -moz-transform: scaleX(1.5);
+ -opera-transform: scaleX(1.5);
+ -ms-transform: scaleX(1.5);
+ transform: scaleX(1.5);
+ }
+
+
+### )
+
+**Example:**
+
+ div {
+ .scaleY(1.5);
+ }
+
+ // Result
+ div {
+ -webkit-transform: scaleY(1.5);
+ -moz-transform: scaleY(1.5);
+ -opera-transform: scaleY(1.5);
+ -ms-transform: scaleY(1.5);
+ transform: scaleY(1.5);
+ }
+
+
+### MDN **
+
+**Syntax:**
+
+Default value: 1
+
+ .scaleZ()
+
+**Example:**
+
+ div {
+ .scaleZ(1.5);
+ }
+
+ // Result
+ div {
+ -webkit-transform: scaleZ(1.5);
+ -moz-transform: scaleZ(1.5);
+ -opera-transform: scaleZ(1.5);
+ -ms-transform: scaleZ(1.5);
+ transform: scaleZ(1.5);
+ }
+
+
+
+### [, ])
+
+**Example:**
+
+ .selection(~'color: blue; background: red');
+
+ // Result
+ lesshat-selector {-lh-property: 0;}
+ ::selection{color: blue; background: red}
+ ::-moz-selection{color: blue; background: red;}
+
+
+
+### MDN **
+
+**Syntax:**
+
+ .sepia()
+
+**Tips and tricks:**
+
+ If you omit units, `sepia` adds `%` automatically.
+
+**Example:**
+
+ div {
+ .sepia(50);
+ }
+
+ // Result
+ div {
+ -webkit-filter: sepia(50%);
+ -moz-filter: sepia(50%);
+ filter: sepia(50%);
+ }
+
+
+
+### , [])
+
+**Tips and tricks:**
+
+ When you call mixin with only one argument, second will be the same.
+ Also you can omit units and `size` adds it automatically.
+
+**Example:**
+
+ div {
+ .size(50);
+ }
+
+ // Result
+ div {
+ width: 50px;
+ height: 50px;
+ }
+
+
+
+### [, ])
+
+**Tips and tricks:**
+
+ If you omit units, `skew` adds `%` automatically.
+
+**Example:**
+
+ div {
+ .skew(20, 30);
+ }
+
+ // Result
+ div {
+ -webkit-transform: skew(20deg, 30deg);
+ -moz-transform: skew(20deg, 30deg);
+ -opera-transform: skew(20deg, 30deg);
+ -ms-transform: skew(20deg, 30deg);
+ transform: skew(20deg, 30deg);
+ }
+
+
+### )
+
+**Tips and tricks:**
+
+ If you omit units, `skewX` adds `%` automatically.
+
+**Example:**
+
+ div {
+ .skewX(20);
+ }
+
+ // Result
+ div {
+ -webkit-transform: skewX(20deg);
+ -moz-transform: skewX(20deg);
+ -opera-transform: skewX(20deg);
+ -ms-transform: skewX(20deg);
+ transform: skewX(20deg);
+ }
+
+
+### )
+
+**Tips and tricks:**
+
+ If you omit units, `skewY` adds `%` automatically.
+
+**Example:**
+
+ div {
+ .skewY(20);
+ }
+
+ // Result
+ div {
+ -webkit-transform: skewY(20deg);
+ -moz-transform: skewY(20deg);
+ -opera-transform: skewY(20deg);
+ -ms-transform: skewY(20deg);
+ transform: skewY(20deg);
+ }
+
+
+
+### +)
+
+**Tips and tricks:**
+
+ If you omit units, `transform` can adds correct unit automatically.
+
+ translate: 'px',
+ rotate: 'deg',
+ rotate3d: 'deg',
+ skew: 'deg'
+
+**Example:**
+
+ div {
+ .transform(scale(.5) translate(10, 20));
+ }
+
+ // Result
+ div {
+ -webkit-transform: scale(.5) translate(10, 20);
+ -moz-transform: scale(.5) translate(10, 20);
+ -opera-transform: scale(.5) translate(10, 20);
+ -ms-transform: scale(.5) translate(10, 20);
+ transform: scale(.5) translate(10, 20);
+ }
+
+
+
+### | | )
+
+**Tips and tricks:**
+
+ If you omit units, `transform-origin` adds `%` automatically.
+
+**Example:**
+
+ div {
+ .transform-origin(50 50);
+ }
+
+ // Result
+ div {
+ -webkit-transform-origin: 50% 50%;
+ -moz-transform-origin: 50% 50%;
+ -opera-transform-origin: 50% 50%;
+ -ms-transform-origin: 50% 50%;
+ transform-origin: 50% 50%;
+ }
+
+
+
+### ] | | | )
+
+**Tips and tricks:**
+
+ If you omit units after time argument, `transition` is trying to be smart and add properly value.
+
+ if (time > 10) {
+ time += 'ms';
+ } else {
+ time += 's';
+ }
+
+ And also properties inside `transition` definition are automatically prefixed, if it is needed.
+
+**Example:**
+
+ div {
+ .transition(box-shadow 0.2s linear, color .4s .2s ease);
+ }
+
+ // Result
+ div {
+ -webkit-transition: -webkit-box-shadow 0.2s linear, color 0.4s 0.2s ease;
+ -moz-transition: -moz-box-shadow 0.2s linear, color 0.4s 0.2s ease;
+ -o-transition: box-shadow 0.2s linear, color 0.4s 0.2s ease;
+ transition: box-shadow 0.2s linear, color 0.4s 0.2s ease;
+ }
+
+
+
+### )
+
+**Tips and tricks:**
+
+ If you omit units after time argument, `transition-delay` is trying to be smart and add properly value.
+
+ if (time > 10) {
+ time += 'ms';
+ } else {
+ time += 's';
+ }
+
+**Example:**
+
+ div {
+ .transition-delay(200);
+ }
+
+ // Result
+ div {
+ -webkit-transition-delay: 200ms;
+ -moz-transition-delay: 200ms;
+ -o-transition-delay: 200ms;
+ transition-delay: 200ms;
+ }
+
+
+
+### )
+
+**Tips and tricks:**
+
+ If you omit units after time argument, `transition-duration` is trying to be smart and add properly value.
+
+ if (time > 10) {
+ time += 'ms';
+ } else {
+ time += 's';
+ }
+
+**Example:**
+
+ div {
+ .transition-duration(6);
+ }
+
+ // Result
+ div {
+ -webkit-transition-duration: 6s;
+ -moz-transition-duration: 6s;
+ -o-transition-duration: 6s;
+ transition-duration: 6s;
+ }
+
+
+
+### | all | none)
+
+**Tips and tricks:**
+
+ And also properties inside `transition-property` definition are automatically prefixed, if it is needed.
+
+**Example:**
+
+ div {
+ .transition-property(box-shadow);
+ }
+
+ // Result
+ div {
+ -webkit-transition-property: -webkit-box-shadow;
+ -moz-transition-property: -moz-box-shadow;
+ -o-transition-property: box-shadow;
+ transition-property: box-shadow;
+ }
+
+
+
+### , ...)
+
+**Example:**
+
+ div {
+ .transition-timing-function(cubic-bezier(0,0,1,1), ease);
+ }
+
+ // Result
+ div {
+ -webkit-transition-timing-function: cubic-bezier(0, 0, 1, 1), ease;
+ -moz-transition-timing-function: cubic-bezier(0, 0, 1, 1), ease;
+ -o-transition-timing-function: cubic-bezier(0, 0, 1, 1), ease;
+ transition-timing-function: cubic-bezier(0, 0, 1, 1), ease;
+ }
+
+
+
+### [, ])
+
+**Tips and tricks:**
+
+ If you omit units, `translate` adds `px` automatically.
+
+**Example:**
+
+ div {
+ .translate(200);
+ }
+
+ // Result
+ div {
+ -webkit-transform: translate(200px);
+ -moz-transform: translate(200px);
+ -o-transform: translate(200px);
+ transform: translate(200px);
+ }
+
+
+### MDN **
+
+**Syntax:**
+
+ Default value: 0
+
+ .translate3d(, , )
+
+**Tips and tricks:**
+
+ If you omit units, `translate3d` adds `px` automatically.
+
+**Example:**
+
+ div {
+ .translate3d(20, 30, 10);
+ }
+
+ // Result
+ div {
+ -webkit-transform: translate3d(20px, 30px, 10px);
+ -moz-transform: translate3d(20px, 30px, 10px);
+ -o-transform: translate3d(20px, 30px, 10px);
+ transform: translate3d(20px, 30px, 10px);
+ }
+
+
+
+### )
+
+**Tips and tricks:**
+
+ If you omit units, `translateX` adds `px` automatically.
+
+**Example:**
+
+ div {
+ .translateX(20);
+ }
+
+ // Result
+ div {
+ -webkit-transform: translateX(20px);
+ -moz-transform: translateX(20px);
+ -o-transform: translateX(20px);
+ transform: translateX(20px);
+ }
+
+
+### )
+
+**Tips and tricks:**
+
+ If you omit units, `translateY` adds `px` automatically.
+
+**Example:**
+
+ div {
+ .translateY(20);
+ }
+
+ // Result
+ div {
+ -webkit-transform: translateY(20px);
+ -moz-transform: translateY(20px);
+ -o-transform: translateY(20px);
+ transform: translateY(20px);
+ }
+
+
+### )
+
+**Tips and tricks:**
+
+ If you omit units, `translateZ` adds `px` automatically.
+
+**Example:**
+
+ div {
+ .translateZ(20);
+ }
+
+ // Result
+ div {
+ -webkit-transform: translateZ(20px);
+ -moz-transform: translateZ(20px);
+ -o-transform: translateZ(20px);
+ transform: translateZ(20px);
+ }
+
+
+
+### ',svg_start:'',linear_gradient_start:'",radial_gradient_end:"",rect_linear:' "};if(gradients.length){gradients.forEach(function(value){var obj={};Object.keys(values).some(function(inner_val){return value.indexOf(inner_val)>=0?(obj.svg_direction=values[inner_val],!0):(obj.svg_direction=!1,void 0)}),/linear/.test(value)?obj.svg_type="linear":/radial/.test(value)&&(obj.svg_type="radial");var colors_count=value.match(/rgb|#[a-zA-Z0-9]|hsl/g).length;if(obj.svg_stops=[],value.match(/#[a-zA-Z0-9]/g)&&value.match(/#[a-zA-Z0-9]/g).length==colors_count)if(value.match(/#[a-zA-Z0-9]+\s+(\d+%)/g)&&value.match(/#[a-zA-Z0-9]+\s+(\d+%)/g).length==colors_count)value.match(/#[a-zA-Z0-9]+\s+(\d+%)/g).forEach(function(inner_val){inner_val=inner_val.split(" "),obj.svg_stops.push('',svg_start:'',linear_gradient_start:'",radial_gradient_end:"",rect_linear:' "};if(gradients.length){gradients.forEach(function(value){var obj={};Object.keys(values).some(function(inner_val){return value.indexOf(inner_val)>=0?(obj.svg_direction=values[inner_val],!0):(obj.svg_direction=!1,void 0)}),/linear/.test(value)?obj.svg_type="linear":/radial/.test(value)&&(obj.svg_type="radial");var colors_count=value.match(/rgb|#[a-zA-Z0-9]|hsl/g).length;if(obj.svg_stops=[],value.match(/#[a-zA-Z0-9]/g)&&value.match(/#[a-zA-Z0-9]/g).length==colors_count)if(value.match(/#[a-zA-Z0-9]+\s+(\d+%)/g)&&value.match(/#[a-zA-Z0-9]+\s+(\d+%)/g).length==colors_count)value.match(/#[a-zA-Z0-9]+\s+(\d+%)/g).forEach(function(inner_val){inner_val=inner_val.split(" "),obj.svg_stops.push('');if(f.test(d[q])&&!j.test(d[q])||l.test(d[q])||/180deg/.test(d[q])){var r=null;l.test(d[q])?r=l:/180deg/.test(d[q])?r=/180deg/:r=f,d[q]=d[q].replace(r,'')}else if(g.test(d[q])&&!k.test(d[q])||m.test(d[q])||/270deg/.test(d[q])){var r=null;m.test(d[q])?r=m:/270deg/.test(d[q])?r=/270deg/:r=g,d[q]=d[q].replace(r,'')}else if(h.test(d[q])&&!l.test(d[q])||j.test(d[q])||/[^\d]0deg/.test(d[q])){var r=null;j.test(d[q])?r=j:/0deg/.test(d[q])?r=/0deg/:r=h,d[q]=d[q].replace(r,'')}else if(i.test(d[q])&&!m.test(d[q])||k.test(d[q])||/90deg/.test(d[q])){var r=null;k.test(d[q])?r=k:/90deg/.test(d[q])?r=/90deg/:r=i,d[q]=d[q].replace(r,'')}else n.test(d[q])&&!o.test(d[q])?d[q]=d[q].replace(n,''):o.test(d[q])?d[q]=d[q].replace(o,''):c=!1}try{"".trim(),b=!0}catch(s){b=!1}b&&(d[q]=d[q].trim());if(/linear/.test(d[q])||/radial/.test(d[q])){d[q]=d[q].slice(0,-1),d[q]="url(data:image/svg+xml;base64--"+d[q]+' )';var t=d.join("@@@"),u=t.match(/rgba?\(\d+,\s*\d+,\s*\d+,\s*(?:0|1|\.\d+|0\.\d+)\)\s*\d*%*/g)||0,v=t.match(/hsla?\(\d+,\s*\d+%,\s*\d+%,\s*(?:0|1|\.\d+|0\.\d+)\)\s*\d*%*/g)||0,w=[],x=[];for(var y=0;y').replace(//),I=K(I.join("")),C[J]=C[J].replace(/(<\?xml.*<\/svg>)/,I)}catch(s){}return c?C:C=!1,C?C.toString():C})()`;
- @backgroundMoz: ~`(function(){var a,b,c,d,e,f,g,h,i,j,k;a="@{arguments}",c=null,d=a.split(/,(?=\s*(?:linear|radial))/g),e=d.length,k=/to\s*top/,j=/to\s*right/,h=/to\s*bottom/,i=/to\s*left/,b=/\d*deg/,f=0;while(f 5),(@signal < 1) { error: "Signal is out of range"; }
- .inception(@signal, @arguments);
- }
- .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
-
- .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
- // -- this comment must be here because of LESS bug
- .result(@arguments, @mozSignal, @moz, @mozLocal);
- // --
- .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
- }
-
- // element{ .background-origin(content-box); }
-
-
-// .background-size
-
- .background-size(...){
-
- // Local config for disabling properties
-
- @w3cLocal: true; // Unprefixed W3C syntax
- @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
- @mozLocal: true; // Firefox 4+
-
- @processing: ~`(function(){ var arg = "@{arguments}".replace("[","").replace("]","") || "none"; if( !/^\w*%?([ X])/.test(arg) ) { arg = arg.replace(/,/g,"") } return arg; })()`;
-
- .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
- .inception (@signal, @arguments) when (@signal = 1) { -webkit-background-size: @processing;}
- .inception (@signal, @arguments) when (@signal = 2) { -moz-background-size: @processing;}
- .inception (@signal, @arguments) when (@signal = 5) { background-size: @processing;}
- .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
- .inception(@signal, @arguments);
- }
- .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
-
- .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
- // -- this comment must be here because of LESS bug
- .result(@arguments, @mozSignal, @moz, @mozLocal);
- // --
- .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
- }
-
- // element{ .background-size(50% auto); }
-
-
-// .border-radius
-
- .border-radius(@arguments:0) {
-
- // Local config for disabling properties
-
- @w3cLocal: true; // Unprefixed W3C syntax
- @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
- @mozLocal: true; // Firefox 4+
-
- .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
- .inception (@signal, @arguments) when (@signal = 1) { -webkit-border-radius: @arguments; -webkit-background-clip: padding-box;}
- .inception (@signal, @arguments) when (@signal = 2) { -moz-border-radius: @arguments; -moz-background-clip: padding;}
- .inception (@signal, @arguments) when (@signal = 5) { border-radius: @arguments; background-clip: padding-box; }
- .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
- .inception(@signal, @arguments);
- }
- .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
-
- .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
- // -- this comment must be here because of LESS bug
- .result(@arguments, @mozSignal, @moz, @mozLocal);
- // --
- .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
- }
-
- // element{ .border-radius(10px); } // all corner rounded
- // element{ .border-radius(~"10px / 20px"); } // NEED TO BE ESCAPED OR LESS DEVIDE IT! Horizontal and vertical rounded differently
- // element{ .border-radius(0 10px 0 0); } // only top right corner rounded
-
-
-// .border-top-left-radius
-
- .border-top-left-radius(@arguments:0) {
-
- // Local config for disabling properties
-
- @w3cLocal: true; // Unprefixed W3C syntax
- @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
- @mozLocal: true; // Firefox 4+
-
- .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
- .inception (@signal, @arguments) when (@signal = 1) { -webkit-border-top-left-radius: @arguments; -webkit-background-clip: padding-box;}
- .inception (@signal, @arguments) when (@signal = 2) { -moz-border-radius-topleft: @arguments; -moz-background-clip: padding;}
- .inception (@signal, @arguments) when (@signal = 5) { border-top-left-radius: @arguments; background-clip: padding-box; }
- .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
- .inception(@signal, @arguments);
- }
- .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
-
- .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
- // -- this comment must be here because of LESS bug
- .result(@arguments, @mozSignal, @moz, @mozLocal);
- // --
- .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
- }
-
- // element{ .border-top-left-radius(10px); }
-
-
-// .border-top-right-radius
-
- .border-top-right-radius(@arguments:0) {
-
- // Local config for disabling properties
-
- @w3cLocal: true; // Unprefixed W3C syntax
- @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
- @mozLocal: true; // Firefox 4+
-
- .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
- .inception (@signal, @arguments) when (@signal = 1) { -webkit-border-top-right-radius: @arguments; -webkit-background-clip: padding-box;}
- .inception (@signal, @arguments) when (@signal = 2) { -moz-border-radius-topright: @arguments; -moz-background-clip: padding;}
- .inception (@signal, @arguments) when (@signal = 5) { border-top-right-radius: @arguments; background-clip: padding-box; }
- .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
- .inception(@signal, @arguments);
- }
- .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
-
- .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
- // -- this comment must be here because of LESS bug
- .result(@arguments, @mozSignal, @moz, @mozLocal);
- // --
- .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
- }
-
- // element{ .border-top-right-radius(10px); }
-
-
-// .border-bottom-left-radius
-
- .border-bottom-left-radius(@arguments:0) {
-
- // Local config for disabling properties
-
- @w3cLocal: true; // Unprefixed W3C syntax
- @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
- @mozLocal: true; // Firefox 4+
-
- .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
- .inception (@signal, @arguments) when (@signal = 1) { -webkit-border-bottom-left-radius: @arguments; -webkit-background-clip: padding-box;}
- .inception (@signal, @arguments) when (@signal = 2) { -moz-border-radius-bottomleft: @arguments; -moz-background-clip: padding;}
- .inception (@signal, @arguments) when (@signal = 5) { border-bottom-left-radius: @arguments; background-clip: padding-box; }
- .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
- .inception(@signal, @arguments);
- }
- .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
-
- .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
- // -- this comment must be here because of LESS bug
- .result(@arguments, @mozSignal, @moz, @mozLocal);
- // --
- .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
- }
-
- // element{ .border-bottom-left-radius(10px); }
-
-
-// .border-bottom-right-radius
-
- .border-bottom-right-radius(@arguments:0) {
-
- // Local config for disabling properties
-
- @w3cLocal: true; // Unprefixed W3C syntax
- @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
- @mozLocal: true; // Firefox 4+
-
- .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
- .inception (@signal, @arguments) when (@signal = 1) { -webkit-border-bottom-right-radius: @arguments; -webkit-background-clip: padding-box;}
- .inception (@signal, @arguments) when (@signal = 2) { -moz-border-radius-bottomright: @arguments; -moz-background-clip: padding;}
- .inception (@signal, @arguments) when (@signal = 5) { border-bottom-right-radius: @arguments; background-clip: padding-box; }
- .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
- .inception(@signal, @arguments);
- }
- .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
-
- .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
- // -- this comment must be here because of LESS bug
- .result(@arguments, @mozSignal, @moz, @mozLocal);
- // --
- .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
- }
-
- // element{ .border-bottom-right-radius(10px); }
-
-
-// .border-image
-
- .border-image(@arguments:none){
-
- // Local config for disabling properties
-
- @w3cLocal: true; // Unprefixed W3C syntax
- @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
- @mozLocal: true; // Firefox 4+
- @operaLocal: true; // Opera 10.5+
-
- .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
- .inception (@signal, @arguments) when (@signal = 1) { -webkit-border-image: @arguments;}
- .inception (@signal, @arguments) when (@signal = 2) { -moz-border-image: @arguments;}
- .inception (@signal, @arguments) when (@signal = 3) { -o-border-image: @arguments;}
- .inception (@signal, @arguments) when (@signal = 5) { border-image: @arguments; }
- .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
- .inception(@signal, @arguments);
- }
- .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
-
- .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
- // -- this comment must be here because of LESS bug
- .result(@arguments, @mozSignal, @moz, @mozLocal);
- // --
- .result(@arguments, @operaSignal, @opera, @operaLocal);
- // --
- .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
- }
-
- // element{ .border-image(url(border.png) 30 30 round); }
-
-
-// .box-shadow
-
- .box-shadow(...){
-
- // Local config for disabling properties
-
- @w3cLocal: true; // Unprefixed W3C syntax
- @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
- @mozLocal: true; // Firefox 4+
-
- @processing: ~`(function(){ var arg = "@{arguments}".replace("[","").replace("]","") || "none"; if( !/^#?\w*%?([ X])/.test(arg) ) { arg = arg.replace(/,(?=[^()]*\))/g,'--').replace(/,/g,"").replace(/--/g,','); } return arg; })()`;
-
- .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
- .inception (@signal, @arguments) when (@signal = 1) { -webkit-box-shadow: @processing;}
- .inception (@signal, @arguments) when (@signal = 2) { -moz-box-shadow: @processing;}
- .inception (@signal, @arguments) when (@signal = 5) { box-shadow: @processing;}
- .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
- .inception(@signal, @arguments);
- }
- .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
-
- .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
- // -- this comment must be here because of LESS bug
- .result(@arguments, @mozSignal, @moz, @mozLocal);
- // --
- .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
- }
-
- // element{ .box-shadow(0 1px 10px rgba(20,20,20,0.5), 0 1px 10px rgba(20,20,20,0.5)); }
-
-
-// .box-sizing
-
- .box-sizing(@arguments:content-box){
-
- // Local config for disabling properties
-
- @w3cLocal: true; // Unprefixed W3C syntax
- @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
- @mozLocal: true; // Firefox 4+
-
- .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
- .inception (@signal, @arguments) when (@signal = 1) { -webkit-box-sizing: @arguments;}
- .inception (@signal, @arguments) when (@signal = 2) { -moz-box-sizing: @arguments;}
- .inception (@signal, @arguments) when (@signal = 5) { box-sizing: @arguments;}
- .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
- .inception(@signal, @arguments);
- }
- .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
-
- .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
- // -- this comment must be here because of LESS bug
- .result(@arguments, @mozSignal, @moz, @mozLocal);
- // --
- .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
- }
-
- // element{ .box-sizing(border-box); }
-
-
-// .columns
-
- .columns(@arguments:auto auto){
-
- // Local config for disabling properties
-
- @w3cLocal: true; // Unprefixed W3C syntax
- @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
- @mozLocal: true; // Firefox 4+
-
- .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
- .inception (@signal, @arguments) when (@signal = 1) { -webkit-columns: @arguments;}
- .inception (@signal, @arguments) when (@signal = 2) { -moz-columns: @arguments;}
- .inception (@signal, @arguments) when (@signal = 5) { columns: @arguments;}
- .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
- .inception(@signal, @arguments);
- }
- .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
-
- .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
- // -- this comment must be here because of LESS bug
- .result(@arguments, @mozSignal, @moz, @mozLocal);
- // --
- .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
- }
-
- // element{ .columns(100px 3); }
-
-
-// .column-count
-
- .column-count(@arguments:auto){
-
- // Local config for disabling properties
-
- @w3cLocal: true; // Unprefixed W3C syntax
- @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
- @mozLocal: true; // Firefox 4+
-
- .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
- .inception (@signal, @arguments) when (@signal = 1) { -webkit-column-count: @arguments;}
- .inception (@signal, @arguments) when (@signal = 2) { -moz-column-count: @arguments;}
- .inception (@signal, @arguments) when (@signal = 5) { column-count: @arguments;}
- .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
- .inception(@signal, @arguments);
- }
- .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
-
- .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
- // -- this comment must be here because of LESS bug
- .result(@arguments, @mozSignal, @moz, @mozLocal);
- // --
- .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
- }
-
- // element{ .column-count(3); }
-
-
-// .column-gap
-
- .column-gap(@arguments:normal){
-
- // Local config for disabling properties
-
- @w3cLocal: true; // Unprefixed W3C syntax
- @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
- @mozLocal: true; // Firefox 4+
-
- .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
- .inception (@signal, @arguments) when (@signal = 1) { -webkit-column-gap: @arguments;}
- .inception (@signal, @arguments) when (@signal = 2) { -moz-column-gap: @arguments;}
- .inception (@signal, @arguments) when (@signal = 5) { column-gap: @arguments;}
- .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
- .inception(@signal, @arguments);
- }
- .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
-
- .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
- // -- this comment must be here because of LESS bug
- .result(@arguments, @mozSignal, @moz, @mozLocal);
- // --
- .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
- }
-
- // element{ .column-gap(40px); }
-
-
-// .column-rule
-
- .column-rule(@arguments:medium none black){
-
- // Local config for disabling properties
-
- @w3cLocal: true; // Unprefixed W3C syntax
- @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
- @mozLocal: true; // Firefox 4+
-
- .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
- .inception (@signal, @arguments) when (@signal = 1) { -webkit-column-rule: @arguments;}
- .inception (@signal, @arguments) when (@signal = 2) { -moz-column-rule: @arguments;}
- .inception (@signal, @arguments) when (@signal = 5) { column-rule: @arguments;}
- .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
- .inception(@signal, @arguments);
- }
- .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
-
- .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
- // -- this comment must be here because of LESS bug
- .result(@arguments, @mozSignal, @moz, @mozLocal);
- // --
- .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
- }
-
- // element{ .column-rule(3px outset #ff00ff); }
-
-
-// .column-width
-
- .column-width(@arguments:auto){
-
- // Local config for disabling properties
-
- @w3cLocal: true; // Unprefixed W3C syntax
- @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
- @mozLocal: true; // Firefox 4+
-
- .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
- .inception (@signal, @arguments) when (@signal = 1) { -webkit-column-width: @arguments;}
- .inception (@signal, @arguments) when (@signal = 2) { -moz-column-width: @arguments;}
- .inception (@signal, @arguments) when (@signal = 5) { column-width: @arguments;}
- .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
- .inception(@signal, @arguments);
- }
- .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
-
- .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
- // -- this comment must be here because of LESS bug
- .result(@arguments, @mozSignal, @moz, @mozLocal);
- // --
- .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
- }
-
- // element{ .column-width(100px); }
-
-
-// .font-face
-
- .font-face(@fontname, @fontfile) {
-
- font-family: "@{fontname}";
- src: url("@{fontfile}-webfont.eot");
- src: url("@{fontfile}-webfont.eot?#iefix") format("embedded-opentype"),
- url("@{fontfile}-webfont.woff") format("woff"),
- url("@{fontfile}-webfont.ttf") format("truetype"),
- url("@{fontfile}-webfont.svg#@{fontname}") format("svg");
- font-weight: normal;
- font-style: normal;
- }
-
- // element{ .font-face(ZendaRegular, zenda-webfont); }
-
-
-// .opacity
-
- .opacity(@arguments:1){
-
- // Local config for disabling properties
-
- @w3cLocal: true; // Unprefixed W3C syntax
- @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
- @mozLocal: true; // Firefox 4+
-
- .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
- .inception (@signal, @arguments) when (@signal = 1) { -webkit-opacity: @arguments;}
- .inception (@signal, @arguments) when (@signal = 2) { -moz-opacity: @arguments;}
- .inception (@signal, @arguments) when (@signal = 5) { opacity: @arguments;}
- .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
- .inception(@signal, @arguments);
- }
- .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
-
- .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
- // -- this comment must be here because of LESS bug
- .result(@arguments, @mozSignal, @moz, @mozLocal);
- // --
- .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
- }
-
- // element{ .opacity(.5); }
-
-
-// .perspective
-
- .perspective(@arguments:none){
-
- // Local config for disabling properties
-
- @w3cLocal: true; // Unprefixed W3C syntax
- @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
- @mozLocal: true; // Firefox 4+
-
- .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
- .inception (@signal, @arguments) when (@signal = 1) { -webkit-perspective: @arguments;}
- .inception (@signal, @arguments) when (@signal = 2) { -moz-perspective: @arguments;}
- .inception (@signal, @arguments) when (@signal = 5) { perspective: @arguments;}
- .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
- .inception(@signal, @arguments);
- }
- .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
-
- .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
- // -- this comment must be here because of LESS bug
- .result(@arguments, @mozSignal, @moz, @mozLocal);
- // --
- .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
- }
-
- // element{ .perspective(350px); }
-
-
-// .perspective-origin
-
- .perspective-origin(@arguments:50% 50%){
-
- // Local config for disabling properties
-
- @w3cLocal: true; // Unprefixed W3C syntax
- @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
- @mozLocal: true; // Firefox 4+
-
- .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
- .inception (@signal, @arguments) when (@signal = 1) { -webkit-perspective-origin: @arguments;}
- .inception (@signal, @arguments) when (@signal = 2) { -moz-perspective-origin: @arguments;}
- .inception (@signal, @arguments) when (@signal = 5) { perspective-origin: @arguments;}
- .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
- .inception(@signal, @arguments);
- }
- .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
-
- .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
- // -- this comment must be here because of LESS bug
- .result(@arguments, @mozSignal, @moz, @mozLocal);
- // --
- .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
- }
-
- // element{ .perspective-origin(top left); }
-
-
-// .size
-
- .size(@square){
- width: @square;
- height: @square;
- }
-
- .size(@width, @height){
- width: @width;
- height: @height;
- }
-
- // element{ .size(10px); } // render width:10px; height:10px;
- // element{ .size(10px, 20px); } // render width:10px; height: 20px;
-
-
-// .transform
-
- .transform(@arguments:none, ...){
-
- // Local config for disabling properties
-
- @w3cLocal: true; // Unprefixed W3C syntax
- @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
- @mozLocal: true; // Firefox 4+
- @operaLocal: true; // Opera 10.5+
- @msLocal: true; // IE 10+
-
- .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
- .inception (@signal, @arguments) when (@signal = 1) { -webkit-transform: @arguments;}
- .inception (@signal, @arguments) when (@signal = 2) { -moz-transform: @arguments;}
- .inception (@signal, @arguments) when (@signal = 3) { -o-transform: @arguments;}
- .inception (@signal, @arguments) when (@signal = 4) { -ms-transform: @arguments;}
- .inception (@signal, @arguments) when (@signal = 5) { transform: @arguments;}
- .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
- .inception(@signal, @arguments);
- }
- .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
-
- .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
- // -- this comment must be here because of LESS bug
- .result(@arguments, @mozSignal, @moz, @mozLocal);
- // --
- .result(@arguments, @operaSignal, @opera, @operaLocal);
- // --
- .result(@arguments, @msSignal, @ms, @msLocal);
- // --
- .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
- }
-
- // element{ .transform(scale(.5) translate(10px, 20px)); }
-
-
-// .transform-origin
-
- .transform-origin(@arguments:50% 50% 0){
-
- // Local config for disabling properties
-
- @w3cLocal: true; // Unprefixed W3C syntax
- @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
- @mozLocal: true; // Firefox 4+
- @operaLocal: true; // Opera 10.5+
- @msLocal: true; // IE 10+
-
- .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
- .inception (@signal, @arguments) when (@signal = 1) { -webkit-transform-origin: @arguments;}
- .inception (@signal, @arguments) when (@signal = 2) { -moz-transform-origin: @arguments;}
- .inception (@signal, @arguments) when (@signal = 3) { -o-transform-origin: @arguments;}
- .inception (@signal, @arguments) when (@signal = 4) { -ms-transform-origin: @arguments;}
- .inception (@signal, @arguments) when (@signal = 5) { transform-origin: @arguments;}
- .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
- .inception(@signal, @arguments);
- }
- .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
-
- .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
- // -- this comment must be here because of LESS bug
- .result(@arguments, @mozSignal, @moz, @mozLocal);
- // --
- .result(@arguments, @operaSignal, @opera, @operaLocal);
- // --
- .result(@arguments, @msSignal, @ms, @msLocal);
- // --
- .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
- }
-
- // element{ .transform-origin(20% 40%); }
-
-
-// .transform-style
-
- .transform-style(@arguments:flat){
-
- // Local config for disabling properties
-
- @w3cLocal: true; // Unprefixed W3C syntax
- @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
- @mozLocal: true; // Firefox 4+
- @msLocal: true; // IE 10+
-
- .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
- .inception (@signal, @arguments) when (@signal = 1) { -webkit-transform-style: @arguments;}
- .inception (@signal, @arguments) when (@signal = 2) { -moz-transform-style: @arguments;}
- .inception (@signal, @arguments) when (@signal = 4) { -ms-transform-style: @arguments;}
- .inception (@signal, @arguments) when (@signal = 5) { transform-style: @arguments;}
- .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
- .inception(@signal, @arguments);
- }
- .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
-
- .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
- // -- this comment must be here because of LESS bug
- .result(@arguments, @mozSignal, @moz, @mozLocal);
- // --
- .result(@arguments, @msSignal, @ms, @msLocal);
- // --
- .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
- }
-
- // element{ .transform-style(preserve-3d); }
-
-
-// .translate
-
- .translate(@x:0, @y:0){
-
- // Local config for disabling properties
-
- @w3cLocal: true; // Unprefixed W3C syntax
- @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
- @mozLocal: true; // Firefox 4+
- @operaLocal: true; // Opera 10.5+
- @msLocal: true; // IE 10+
-
- .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
- .inception (@signal, @arguments) when (@signal = 1) { -webkit-transform: translate(@x, @y);}
- .inception (@signal, @arguments) when (@signal = 2) { -moz-transform: translate(@x, @y);}
- .inception (@signal, @arguments) when (@signal = 3) { -o-transform: translate(@x, @y);}
- .inception (@signal, @arguments) when (@signal = 4) { -ms-transform: translate(@x, @y);}
- .inception (@signal, @arguments) when (@signal = 5) { transform: translate(@x, @y);}
- .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
- .inception(@signal, @arguments);
- }
- .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
-
- .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
- // -- this comment must be here because of LESS bug
- .result(@arguments, @mozSignal, @moz, @mozLocal);
- // --
- .result(@arguments, @operaSignal, @opera, @operaLocal);
- // --
- .result(@arguments, @msSignal, @ms, @msLocal);
- // --
- .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
- }
-
- // element{ .translate(100px); }
- // element{ .translate(100px, 50px); }
-
-
-// .translate3d
-
- .translate3d(@x:0, @y:0, @z:0){
-
- // Local config for disabling properties
-
- @w3cLocal: true; // Unprefixed W3C syntax
- @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
- @mozLocal: true; // Firefox 4+
- @operaLocal: true; // Opera 10.5+
- @msLocal: true; // IE 10+
-
- .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
- .inception (@signal, @arguments) when (@signal = 1) { -webkit-transform: translate3d(@x, @y, @z);}
- .inception (@signal, @arguments) when (@signal = 2) { -moz-transform: translate3d(@x, @y, @z);}
- .inception (@signal, @arguments) when (@signal = 3) { -o-transform: translate3d(@x, @y, @z);}
- .inception (@signal, @arguments) when (@signal = 4) { -ms-transform: translate3d(@x, @y, @z);}
- .inception (@signal, @arguments) when (@signal = 5) { transform: translate3d(@x, @y, @z);}
- .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
- .inception(@signal, @arguments);
- }
- .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
-
- .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
- // -- this comment must be here because of LESS bug
- .result(@arguments, @mozSignal, @moz, @mozLocal);
- // --
- .result(@arguments, @operaSignal, @opera, @operaLocal);
- // --
- .result(@arguments, @msSignal, @ms, @msLocal);
- // --
- .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
- }
-
- // element{ .translate3d(10px, 20px, 30px); }
-
-
-// .translateX
-
- .translateX(@x:0){
-
- // Local config for disabling properties
-
- @w3cLocal: true; // Unprefixed W3C syntax
- @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
- @mozLocal: true; // Firefox 4+
- @operaLocal: true; // Opera 10.5+
- @msLocal: true; // IE 10+
-
- .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
- .inception (@signal, @arguments) when (@signal = 1) { -webkit-transform: translateX(@x);}
- .inception (@signal, @arguments) when (@signal = 2) { -moz-transform: translateX(@x);}
- .inception (@signal, @arguments) when (@signal = 3) { -o-transform: translateX(@x);}
- .inception (@signal, @arguments) when (@signal = 4) { -ms-transform: translateX(@x);}
- .inception (@signal, @arguments) when (@signal = 5) { transform: translateX(@x);}
- .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
- .inception(@signal, @arguments);
- }
- .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
-
- .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
- // -- this comment must be here because of LESS bug
- .result(@arguments, @mozSignal, @moz, @mozLocal);
- // --
- .result(@arguments, @operaSignal, @opera, @operaLocal);
- // --
- .result(@arguments, @msSignal, @ms, @msLocal);
- // --
- .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
- }
-
- // element{ .translateX(10px); }
-
-
-// .translateY
-
- .translateY(@y:0){
-
- // Local config for disabling properties
-
- @w3cLocal: true; // Unprefixed W3C syntax
- @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
- @mozLocal: true; // Firefox 4+
- @operaLocal: true; // Opera 10.5+
- @msLocal: true; // IE 10+
-
- .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
- .inception (@signal, @arguments) when (@signal = 1) { -webkit-transform: translateY(@y);}
- .inception (@signal, @arguments) when (@signal = 2) { -moz-transform: translateY(@y);}
- .inception (@signal, @arguments) when (@signal = 3) { -o-transform: translateY(@y);}
- .inception (@signal, @arguments) when (@signal = 4) { -ms-transform: translateY(@y);}
- .inception (@signal, @arguments) when (@signal = 5) { transform: translateY(@y);}
- .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
- .inception(@signal, @arguments);
- }
- .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
-
- .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
- // -- this comment must be here because of LESS bug
- .result(@arguments, @mozSignal, @moz, @mozLocal);
- // --
- .result(@arguments, @operaSignal, @opera, @operaLocal);
- // --
- .result(@arguments, @msSignal, @ms, @msLocal);
- // --
- .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
- }
-
- // element{ .translateY(15px); }
-
-
-// .translateZ
-
- .translateZ(@z:0){
-
- // Local config for disabling properties
-
- @w3cLocal: true; // Unprefixed W3C syntax
- @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
- @mozLocal: true; // Firefox 4+
- @operaLocal: true; // Opera 10.5+
- @msLocal: true; // IE 10+
-
- .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
- .inception (@signal, @arguments) when (@signal = 1) { -webkit-transform: translateZ(@z);}
- .inception (@signal, @arguments) when (@signal = 2) { -moz-transform: translateZ(@z);}
- .inception (@signal, @arguments) when (@signal = 3) { -o-transform: translateZ(@z);}
- .inception (@signal, @arguments) when (@signal = 4) { -ms-transform: translateZ(@z);}
- .inception (@signal, @arguments) when (@signal = 5) { transform: translateZ(@z);}
- .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
- .inception(@signal, @arguments);
- }
- .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
-
- .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
- // -- this comment must be here because of LESS bug
- .result(@arguments, @mozSignal, @moz, @mozLocal);
- // --
- .result(@arguments, @operaSignal, @opera, @operaLocal);
- // --
- .result(@arguments, @msSignal, @ms, @msLocal);
- // --
- .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
- }
-
- // element{ .translateZ(32px); }
-
-
-// .scale
-
- .scale(@x:1){
-
- // Local config for disabling properties
-
- @w3cLocal: true; // Unprefixed W3C syntax
- @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
- @mozLocal: true; // Firefox 4+
- @operaLocal: true; // Opera 10.5+
- @msLocal: true; // IE 10+
-
- .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
- .inception (@signal, @arguments) when (@signal = 1) { -webkit-transform: scale(@x);}
- .inception (@signal, @arguments) when (@signal = 2) { -moz-transform: scale(@x);}
- .inception (@signal, @arguments) when (@signal = 3) { -o-transform: scale(@x);}
- .inception (@signal, @arguments) when (@signal = 4) { -ms-transform: scale(@x);}
- .inception (@signal, @arguments) when (@signal = 5) { transform: scale(@x);}
- .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
- .inception(@signal, @arguments);
- }
- .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
-
- .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
- // -- this comment must be here because of LESS bug
- .result(@arguments, @mozSignal, @moz, @mozLocal);
- // --
- .result(@arguments, @operaSignal, @opera, @operaLocal);
- // --
- .result(@arguments, @msSignal, @ms, @msLocal);
- // --
- .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
- }
-
- .scale(@x, @y){
-
- // Local config for disabling properties
-
- @w3cLocal: true; // Unprefixed W3C syntax
- @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
- @mozLocal: true; // Firefox 4+
- @operaLocal: true; // Opera 10.5+
- @msLocal: true; // IE 10+
-
- .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
- .inception (@signal, @arguments) when (@signal = 1) { -webkit-transform: scale(@x, @y);}
- .inception (@signal, @arguments) when (@signal = 2) { -moz-transform: scale(@x, @y);}
- .inception (@signal, @arguments) when (@signal = 3) { -o-transform: scale(@x, @y);}
- .inception (@signal, @arguments) when (@signal = 4) { -ms-transform: scale(@x, @y);}
- .inception (@signal, @arguments) when (@signal = 5) { transform: scale(@x, @y);}
- .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
- .inception(@signal, @arguments);
- }
- .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
-
- .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
- // -- this comment must be here because of LESS bug
- .result(@arguments, @mozSignal, @moz, @mozLocal);
- // --
- .result(@arguments, @operaSignal, @opera, @operaLocal);
- // --
- .result(@arguments, @msSignal, @ms, @msLocal);
- // --
- .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
- }
-
- // element{ .scale(2); }
- // element{ .scale(2, 1); }
-
-
-// .scale3d
-
- .scale3d(@x:1, @y:1, @z:1){
-
- // Local config for disabling properties
-
- @w3cLocal: true; // Unprefixed W3C syntax
- @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
- @mozLocal: true; // Firefox 4+
- @operaLocal: true; // Opera 10.5+
- @msLocal: true; // IE 10+
-
- .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
- .inception (@signal, @arguments) when (@signal = 1) { -webkit-transform: scale3d(@x, @y, @z);}
- .inception (@signal, @arguments) when (@signal = 2) { -moz-transform: scale3d(@x, @y, @z);}
- .inception (@signal, @arguments) when (@signal = 3) { -o-transform: scale3d(@x, @y, @z);}
- .inception (@signal, @arguments) when (@signal = 4) { -ms-transform: scale3d(@x, @y, @z);}
- .inception (@signal, @arguments) when (@signal = 5) { transform: scale3d(@x, @y, @z);}
- .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
- .inception(@signal, @arguments);
- }
- .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
-
- .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
- // -- this comment must be here because of LESS bug
- .result(@arguments, @mozSignal, @moz, @mozLocal);
- // --
- .result(@arguments, @operaSignal, @opera, @operaLocal);
- // --
- .result(@arguments, @msSignal, @ms, @msLocal);
- // --
- .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
- }
-
- // element{ .scale3d(1, 2, 1); }
-
-
-// .scaleX
-
- .scaleX(@x:1){
-
- // Local config for disabling properties
-
- @w3cLocal: true; // Unprefixed W3C syntax
- @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
- @mozLocal: true; // Firefox 4+
- @operaLocal: true; // Opera 10.5+
- @msLocal: true; // IE 10+
-
- .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
- .inception (@signal, @arguments) when (@signal = 1) { -webkit-transform: scaleX(@x);}
- .inception (@signal, @arguments) when (@signal = 2) { -moz-transform: scaleX(@x);}
- .inception (@signal, @arguments) when (@signal = 3) { -o-transform: scaleX(@x);}
- .inception (@signal, @arguments) when (@signal = 4) { -ms-transform: scaleX(@x);}
- .inception (@signal, @arguments) when (@signal = 5) { transform: scaleX(@x);}
- .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
- .inception(@signal, @arguments);
- }
- .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
-
- .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
- // -- this comment must be here because of LESS bug
- .result(@arguments, @mozSignal, @moz, @mozLocal);
- // --
- .result(@arguments, @operaSignal, @opera, @operaLocal);
- // --
- .result(@arguments, @msSignal, @ms, @msLocal);
- // --
- .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
- }
-
- // element{ .scaleX(1.5); }
-
-
-// .scaleY
-
- .scaleY(@y:1){
-
- // Local config for disabling properties
-
- @w3cLocal: true; // Unprefixed W3C syntax
- @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
- @mozLocal: true; // Firefox 4+
- @operaLocal: true; // Opera 10.5+
- @msLocal: true; // IE 10+
-
- .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
- .inception (@signal, @arguments) when (@signal = 1) { -webkit-transform: scaleY(@y);}
- .inception (@signal, @arguments) when (@signal = 2) { -moz-transform: scaleY(@y);}
- .inception (@signal, @arguments) when (@signal = 3) { -o-transform: scaleY(@y);}
- .inception (@signal, @arguments) when (@signal = 4) { -ms-transform: scaleY(@y);}
- .inception (@signal, @arguments) when (@signal = 5) { transform: scaleY(@y);}
- .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
- .inception(@signal, @arguments);
- }
- .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
-
- .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
- // -- this comment must be here because of LESS bug
- .result(@arguments, @mozSignal, @moz, @mozLocal);
- // --
- .result(@arguments, @operaSignal, @opera, @operaLocal);
- // --
- .result(@arguments, @msSignal, @ms, @msLocal);
- // --
- .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
- }
-
- // element{ .scaleX(1.5); }
-
-
-// .scaleZ
-
- .scaleZ(@z:1){
-
- // Local config for disabling properties
-
- @w3cLocal: true; // Unprefixed W3C syntax
- @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
- @mozLocal: true; // Firefox 4+
- @operaLocal: true; // Opera 10.5+
- @msLocal: true; // IE 10+
-
- .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
- .inception (@signal, @arguments) when (@signal = 1) { -webkit-transform: scaleZ(@z);}
- .inception (@signal, @arguments) when (@signal = 2) { -moz-transform: scaleZ(@z);}
- .inception (@signal, @arguments) when (@signal = 3) { -o-transform: scaleZ(@z);}
- .inception (@signal, @arguments) when (@signal = 4) { -ms-transform: scaleZ(@z);}
- .inception (@signal, @arguments) when (@signal = 5) { transform: scaleZ(@z);}
- .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
- .inception(@signal, @arguments);
- }
- .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
-
- .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
- // -- this comment must be here because of LESS bug
- .result(@arguments, @mozSignal, @moz, @mozLocal);
- // --
- .result(@arguments, @operaSignal, @opera, @operaLocal);
- // --
- .result(@arguments, @msSignal, @ms, @msLocal);
- // --
- .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
- }
-
- // element{ .scaleZ(2.7); }
-
-
-// .rotate
-
- .rotate(@angle:0){
-
- // Local config for disabling properties
-
- @w3cLocal: true; // Unprefixed W3C syntax
- @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
- @mozLocal: true; // Firefox 4+
- @operaLocal: true; // Opera 10.5+
- @msLocal: true; // IE 10+
-
- .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
- .inception (@signal, @arguments) when (@signal = 1) { -webkit-transform: rotate(@angle);}
- .inception (@signal, @arguments) when (@signal = 2) { -moz-transform: rotate(@angle);}
- .inception (@signal, @arguments) when (@signal = 3) { -o-transform: rotate(@angle);}
- .inception (@signal, @arguments) when (@signal = 4) { -ms-transform: rotate(@angle);}
- .inception (@signal, @arguments) when (@signal = 5) { transform: rotate(@angle);}
- .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
- .inception(@signal, @arguments);
- }
- .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
-
- .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
- // -- this comment must be here because of LESS bug
- .result(@arguments, @mozSignal, @moz, @mozLocal);
- // --
- .result(@arguments, @operaSignal, @opera, @operaLocal);
- // --
- .result(@arguments, @msSignal, @ms, @msLocal);
- // --
- .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
- }
-
- // element{ .rotate(45deg); }
-
-
-// .rotate3d
-
- .rotate3d(@x:0, @y:0, @z: 0, @angle:0){
-
- // Local config for disabling properties
-
- @w3cLocal: true; // Unprefixed W3C syntax
- @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
- @mozLocal: true; // Firefox 4+
- @operaLocal: true; // Opera 10.5+
- @msLocal: true; // IE 10+
-
- .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
- .inception (@signal, @arguments) when (@signal = 1) { -webkit-transform: rotate3d(@x, @y, @z, @angle);}
- .inception (@signal, @arguments) when (@signal = 2) { -moz-transform: rotate3d(@x, @y, @z, @angle);}
- .inception (@signal, @arguments) when (@signal = 3) { -o-transform: rotate3d(@x, @y, @z, @angle);}
- .inception (@signal, @arguments) when (@signal = 4) { -ms-transform: rotate3d(@x, @y, @z, @angle);}
- .inception (@signal, @arguments) when (@signal = 5) { transform: rotate3d(@x, @y, @z, @angle);}
- .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
- .inception(@signal, @arguments);
- }
- .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
-
- .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
- // -- this comment must be here because of LESS bug
- .result(@arguments, @mozSignal, @moz, @mozLocal);
- // --
- .result(@arguments, @operaSignal, @opera, @operaLocal);
- // --
- .result(@arguments, @msSignal, @ms, @msLocal);
- // --
- .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
- }
-
- // element{ .rotate3d(1, 2.0, 3.0, 10deg); }
-
-
-// .rotateX
-
- .rotateX(@angle:0){
-
- // Local config for disabling properties
-
- @w3cLocal: true; // Unprefixed W3C syntax
- @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
- @mozLocal: true; // Firefox 4+
- @operaLocal: true; // Opera 10.5+
- @msLocal: true; // IE 10+
-
- .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
- .inception (@signal, @arguments) when (@signal = 1) { -webkit-transform: rotateX(@angle);}
- .inception (@signal, @arguments) when (@signal = 2) { -moz-transform: rotateX(@angle);}
- .inception (@signal, @arguments) when (@signal = 3) { -o-transform: rotateX(@angle);}
- .inception (@signal, @arguments) when (@signal = 4) { -ms-transform: rotateX(@angle);}
- .inception (@signal, @arguments) when (@signal = 5) { transform: rotateX(@angle);}
- .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
- .inception(@signal, @arguments);
- }
- .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
-
- .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
- // -- this comment must be here because of LESS bug
- .result(@arguments, @mozSignal, @moz, @mozLocal);
- // --
- .result(@arguments, @operaSignal, @opera, @operaLocal);
- // --
- .result(@arguments, @msSignal, @ms, @msLocal);
- // --
- .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
- }
-
- // element{ .rotateX(63deg); }
-
-
-// .rotateY
-
- .rotateY(@angle:0){
-
- // Local config for disabling properties
-
- @w3cLocal: true; // Unprefixed W3C syntax
- @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
- @mozLocal: true; // Firefox 4+
- @operaLocal: true; // Opera 10.5+
- @msLocal: true; // IE 10+
-
- .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
- .inception (@signal, @arguments) when (@signal = 1) { -webkit-transform: rotateY(@angle);}
- .inception (@signal, @arguments) when (@signal = 2) { -moz-transform: rotateY(@angle);}
- .inception (@signal, @arguments) when (@signal = 3) { -o-transform: rotateY(@angle);}
- .inception (@signal, @arguments) when (@signal = 4) { -ms-transform: rotateY(@angle);}
- .inception (@signal, @arguments) when (@signal = 5) { transform: rotateY(@angle);}
- .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
- .inception(@signal, @arguments);
- }
- .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
-
- .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
- // -- this comment must be here because of LESS bug
- .result(@arguments, @mozSignal, @moz, @mozLocal);
- // --
- .result(@arguments, @operaSignal, @opera, @operaLocal);
- // --
- .result(@arguments, @msSignal, @ms, @msLocal);
- // --
- .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
- }
-
- // element{ .rotateY(24deg); }
-
-
-// .rotateZ
-
- .rotateZ(@angle:0){
-
- // Local config for disabling properties
-
- @w3cLocal: true; // Unprefixed W3C syntax
- @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
- @mozLocal: true; // Firefox 4+
- @operaLocal: true; // Opera 10.5+
- @msLocal: true; // IE 10+
-
- .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
- .inception (@signal, @arguments) when (@signal = 1) { -webkit-transform: rotateZ(@angle);}
- .inception (@signal, @arguments) when (@signal = 2) { -moz-transform: rotateZ(@angle);}
- .inception (@signal, @arguments) when (@signal = 3) { -o-transform: rotateZ(@angle);}
- .inception (@signal, @arguments) when (@signal = 4) { -ms-transform: rotateZ(@angle);}
- .inception (@signal, @arguments) when (@signal = 5) { transform: rotateZ(@angle);}
- .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
- .inception(@signal, @arguments);
- }
- .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
-
- .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
- // -- this comment must be here because of LESS bug
- .result(@arguments, @mozSignal, @moz, @mozLocal);
- // --
- .result(@arguments, @operaSignal, @opera, @operaLocal);
- // --
- .result(@arguments, @msSignal, @ms, @msLocal);
- // --
- .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
- }
-
- // element{ .rotateZ(280deg); }
-
-
-// .skew
-
- .skew(@angle:0){
-
- // Local config for disabling properties
-
- @w3cLocal: true; // Unprefixed W3C syntax
- @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
- @mozLocal: true; // Firefox 4+
- @operaLocal: true; // Opera 10.5+
- @msLocal: true; // IE 10+
-
- .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
- .inception (@signal, @arguments) when (@signal = 1) { -webkit-transform: skew(@angle);}
- .inception (@signal, @arguments) when (@signal = 2) { -moz-transform: skew(@angle);}
- .inception (@signal, @arguments) when (@signal = 3) { -o-transform: skew(@angle);}
- .inception (@signal, @arguments) when (@signal = 4) { -ms-transform: skew(@angle);}
- .inception (@signal, @arguments) when (@signal = 5) { transform: skew(@angle);}
- .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
- .inception(@signal, @arguments);
- }
- .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
-
- .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
- // -- this comment must be here because of LESS bug
- .result(@arguments, @mozSignal, @moz, @mozLocal);
- // --
- .result(@arguments, @operaSignal, @opera, @operaLocal);
- // --
- .result(@arguments, @msSignal, @ms, @msLocal);
- // --
- .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
- }
-
- // element{ .skew(20deg); }
-
-
-// .skewX
-
- .skewX(@angle:0){
-
- // Local config for disabling properties
-
- @w3cLocal: true; // Unprefixed W3C syntax
- @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
- @mozLocal: true; // Firefox 4+
- @operaLocal: true; // Opera 10.5+
- @msLocal: true; // IE 10+
-
- .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
- .inception (@signal, @arguments) when (@signal = 1) { -webkit-transform: skewX(@angle);}
- .inception (@signal, @arguments) when (@signal = 2) { -moz-transform: skewX(@angle);}
- .inception (@signal, @arguments) when (@signal = 3) { -o-transform: skewX(@angle);}
- .inception (@signal, @arguments) when (@signal = 4) { -ms-transform: skewX(@angle);}
- .inception (@signal, @arguments) when (@signal = 5) { transform: skewX(@angle);}
- .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
- .inception(@signal, @arguments);
- }
- .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
-
- .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
- // -- this comment must be here because of LESS bug
- .result(@arguments, @mozSignal, @moz, @mozLocal);
- // --
- .result(@arguments, @operaSignal, @opera, @operaLocal);
- // --
- .result(@arguments, @msSignal, @ms, @msLocal);
- // --
- .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
- }
-
- // element{ .skewX(24deg); }
-
-
-// .skewY
-
- .skewY(@angle:0){
-
- // Local config for disabling properties
-
- @w3cLocal: true; // Unprefixed W3C syntax
- @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
- @mozLocal: true; // Firefox 4+
- @operaLocal: true; // Opera 10.5+
- @msLocal: true; // IE 10+
-
- .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
- .inception (@signal, @arguments) when (@signal = 1) { -webkit-transform: skewY(@angle);}
- .inception (@signal, @arguments) when (@signal = 2) { -moz-transform: skewY(@angle);}
- .inception (@signal, @arguments) when (@signal = 3) { -o-transform: skewY(@angle);}
- .inception (@signal, @arguments) when (@signal = 4) { -ms-transform: skewY(@angle);}
- .inception (@signal, @arguments) when (@signal = 5) { transform: skewY(@angle);}
- .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
- .inception(@signal, @arguments);
- }
- .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
-
- .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
- // -- this comment must be here because of LESS bug
- .result(@arguments, @mozSignal, @moz, @mozLocal);
- // --
- .result(@arguments, @operaSignal, @opera, @operaLocal);
- // --
- .result(@arguments, @msSignal, @ms, @msLocal);
- // --
- .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
- }
-
- // element{ .skewY(36deg); }
-
-
-// .transition
-
- .transition(...){
-
- // Local config for disabling properties
-
- @w3cLocal: true; // Unprefixed W3C syntax
- @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
- @mozLocal: true; // Firefox 4+
- @operaLocal: true; // Opera 10.5+
- @msLocal: true; // IE 10+
-
- @transitionWebkit: ~`(function(){var a,b,c,d,e,f,g;a="@{arguments}".split(","),c=["background-size","border-","box-shadow","column","transform"],d=c.length,e=a,f=!1,b=a.length;for(var h=0;h 5),(@signal < 1) { error: "Signal is out of range"; }
- .inception(@signal, @arguments);
- }
- .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
-
- .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
- // -- this comment must be here because of LESS bug
- .result(@arguments, @mozSignal, @moz, @mozLocal);
- // --
- .result(@arguments, @operaSignal, @opera, @operaLocal);
- // --
- .result(@arguments, @msSignal, @ms, @msLocal);
- // --
- .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
- }
-
- // element{ .transition(transform 3s linear); }
-
-
-// .transition-property
-
- .transition-property(...){
-
- // Local config for disabling properties
-
- @w3cLocal: true; // Unprefixed W3C syntax
- @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
- @mozLocal: true; // Firefox 4+
- @operaLocal: true; // Opera 10.5+
- @msLocal: true; // IE 10+
-
- @transitionWebkit: ~`(function(){var a,b,c,d,e,f,g;a="@{arguments}".split(","),c=["background-size","border-","box-shadow","column","transform"],d=c.length,e=a,f=!1,b=a.length;for(var h=0;h 5),(@signal < 1) { error: "Signal is out of range"; }
- .inception(@signal, @arguments);
- }
- .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
-
- .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
- // -- this comment must be here because of LESS bug
- .result(@arguments, @mozSignal, @moz, @mozLocal);
- // --
- .result(@arguments, @operaSignal, @opera, @operaLocal);
- // --
- .result(@arguments, @msSignal, @ms, @msLocal);
- // --
- .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
- }
-
- // element{ .transition-property(width, height); }
-
-
-// .transition-duration
-
- .transition-duration(...){
-
- // Local config for disabling properties
-
- @w3cLocal: true; // Unprefixed W3C syntax
- @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
- @mozLocal: true; // Firefox 4+
- @operaLocal: true; // Opera 10.5+
- @msLocal: true; // IE 10+
-
- @processing: ~`(function(){ var arg = "@{arguments}" || "0"; try{ var hasComma = arg.match(/,/g).length > 1 ? true : false; } catch (e) {} if (hasComma === true) arg = arg.replace(/,/g,""); arg = arg.replace("[","").replace("]",""); return arg; }())`;
-
- .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
- .inception (@signal, @arguments) when (@signal = 1) { -webkit-transition-duration: @processing; }
- .inception (@signal, @arguments) when (@signal = 2) { -moz-transition-duration: @processing; }
- .inception (@signal, @arguments) when (@signal = 3) { -o-transition-duration: @processing; }
- .inception (@signal, @arguments) when (@signal = 5) { transition-duration: @processing; }
- .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
- .inception(@signal, @arguments);
- }
- .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
-
- .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
- // -- this comment must be here because of LESS bug
- .result(@arguments, @mozSignal, @moz, @mozLocal);
- // --
- .result(@arguments, @operaSignal, @opera, @operaLocal);
- // --
- .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
- }
-
- // element{ .transition-duration(250ms); }
-
-
-// .transition-timing-function
-
- .transition-timing-function(...){
-
- // Local config for disabling properties
-
- @w3cLocal: true; // Unprefixed W3C syntax
- @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
- @mozLocal: true; // Firefox 4+
- @operaLocal: true; // Opera 10.5+
- @msLocal: true; // IE 10+
-
- @processing: ~`(function(){ var arg = "@{arguments}" || "ease"; arg = arg.replace("[","").replace("]",""); return arg; }())`;
-
- .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
- .inception (@signal, @arguments) when (@signal = 1) { -webkit-transition-timing-function: @processing; }
- .inception (@signal, @arguments) when (@signal = 2) { -moz-transition-timing-function: @processing; }
- .inception (@signal, @arguments) when (@signal = 3) { -o-transition-timing-function: @processing; }
- .inception (@signal, @arguments) when (@signal = 5) { transition-timing-function: @processing; }
- .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
- .inception(@signal, @arguments);
- }
- .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
-
- .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
- // -- this comment must be here because of LESS bug
- .result(@arguments, @mozSignal, @moz, @mozLocal);
- // --
- .result(@arguments, @operaSignal, @opera, @operaLocal);
- // --
- .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
- }
-
- // element{ .transition-timing-function(cubic-bezier(0,0,1,1)); }
-
-
-// .transition-delay
-
- .transition-delay(...){
-
- // Local config for disabling properties
-
- @w3cLocal: true; // Unprefixed W3C syntax
- @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
- @mozLocal: true; // Firefox 4+
- @operaLocal: true; // Opera 10.5+
- @msLocal: true; // IE 10+
-
- @processing: ~`(function(){ var arg = "@{arguments}" || "0"; arg = arg.replace("[","").replace("]",""); return arg; }())`;
-
- .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
- .inception (@signal, @arguments) when (@signal = 1) { -webkit-transition-delay: @processing; }
- .inception (@signal, @arguments) when (@signal = 2) { -moz-transition-delay: @processing; }
- .inception (@signal, @arguments) when (@signal = 3) { -o-transition-delay: @processing; }
- .inception (@signal, @arguments) when (@signal = 5) { transition-delay: @processing; }
- .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
- .inception(@signal, @arguments);
- }
- .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
-
- .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
- // -- this comment must be here because of LESS bug
- .result(@arguments, @mozSignal, @moz, @mozLocal);
- // --
- .result(@arguments, @operaSignal, @opera, @operaLocal);
- // --
- .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
- }
-
- // element{ .transition-delay(2s); }
-
-
-// .user-select
-
- .user-select(@arguments:auto){
-
- // Local config for disabling properties
-
- @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
- @mozLocal: true; // Firefox 4+
- @msLocal: true; // IE 10+
-
- .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
- .inception (@signal, @arguments) when (@signal = 1) { -webkit-user-select: @arguments; }
- .inception (@signal, @arguments) when (@signal = 2) { -moz-user-select: @arguments; }
- .inception (@signal, @arguments) when (@signal = 4) { -ms-user-select: @arguments; }
- .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
- .inception(@signal, @arguments);
- }
- .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
-
- .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
- // -- this comment must be here because of LESS bug
- .result(@arguments, @mozSignal, @moz, @mozLocal);
- // --
- .result(@arguments, @msSignal, @ms, @msLocal);
- }
-
- // element{ .user-select(text); }
-
-
-// DEPRECATED mixins (must be supported because of old version of CSS Hat)
-
- // .gradient (renamed background-image)
-
- .gradient(...){
-
- // Local config for disabling properties
-
- @svg: true; // SVG gradient for IE9
- @mozLocal: true; // Firefox 4+
- @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
- @operaLocal: true; // Opera 10.5+
- @w3cLocal: true; // Unprefixed W3C syntax
-
- @backgroundSVG: ~`(function(){function G(a){var b="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",c,d,e,f,g,h,i,j,k=0,l=0,m="",n=[];if(!a)return a;do c=a.charCodeAt(k++),d=a.charCodeAt(k++),e=a.charCodeAt(k++),j=c<<16|d<<8|e,f=j>>18&63,g=j>>12&63,h=j>>6&63,i=j&63,n[l++]=b.charAt(f)+b.charAt(g)+b.charAt(h)+b.charAt(i);while(k');if(f.test(d[q])&&!j.test(d[q])||l.test(d[q])||/180deg/.test(d[q])){var r=null;l.test(d[q])?r=l:/180deg/.test(d[q])?r=/180deg/:r=f,d[q]=d[q].replace(r,'')}else if(g.test(d[q])&&!k.test(d[q])||m.test(d[q])||/270deg/.test(d[q])){var r=null;m.test(d[q])?r=m:/270deg/.test(d[q])?r=/270deg/:r=g,d[q]=d[q].replace(r,'')}else if(h.test(d[q])&&!l.test(d[q])||j.test(d[q])||/[^\d]0deg/.test(d[q])){var r=null;j.test(d[q])?r=j:/0deg/.test(d[q])?r=/0deg/:r=h,d[q]=d[q].replace(r,'')}else if(i.test(d[q])&&!m.test(d[q])||k.test(d[q])||/90deg/.test(d[q])){var r=null;k.test(d[q])?r=k:/90deg/.test(d[q])?r=/90deg/:r=i,d[q]=d[q].replace(r,'')}else n.test(d[q])&&!o.test(d[q])?d[q]=d[q].replace(n,''):o.test(d[q])?d[q]=d[q].replace(o,''):c=!1}try{"".trim(),b=!0}catch(s){b=!1}b&&(d[q]=d[q].trim());if(/linear/.test(d[q])||/radial/.test(d[q])){d[q]=d[q].slice(0,-1),d[q]="url(data:image/svg+xml;base64--"+d[q]+' )';var t=d.join("@@@"),u=t.match(/rgba?\(\d+,\s*\d+,\s*\d+,\s*(?:0|1|\.\d+|0\.\d+)\)\s*\d*%*/g)||0,v=t.match(/hsla?\(\d+,\s*\d+%,\s*\d+%,\s*(?:0|1|\.\d+|0\.\d+)\)\s*\d*%*/g)||0,w=[],x=[];for(var y=0;y ").replace(/radial-gradient[^<]+/g,'').replace(//),E=G(E.join("")),C[F]=C[F].replace(/(<\?xml.*<\/svg>)/,E)}catch(s){}return c?C:C=!1,C?C.toString().replace(/\[/g,"").replace(/\]/g,""):C}())`;
- @backgroundMoz: ~`(function(){var a,b,c,d,e,f,g,h,i,j,k;a="@{arguments}",c=null,d=a.split(/,(?=\s*(?:linear|radial))/g),e=d.length,k=/to\s*top/,j=/to\s*right/,h=/to\s*bottom/,i=/to\s*left/,b=/\d*deg/,f=0;while(f • align-content
+**Summary:**
+
+The CSS align-content property aligns a flex container's lines within the flex container when there is an extra space on the cross-axis. This property has no effect on the single line flexible boxes.
+
+Resources: **[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)**, **[CSS-Tricks](http://css-tricks.com/almanac/properties/a/align-content/)**
+
+**Syntax:**
+
+Default value: stretch
+
+ .align-content(flex-start | flex-end | center | space-between | space-around | stretch)
+
+**Example:**
+
+ div {
+ .align-content(flex-start);
+ }
+
+ // Result
+ div {
+ -webkit-align-content: flex-start;
+ -ms-flex-line-pack: start;
+ align-content: flex-start;
+ }
+
+
diff --git a/mixins/align-content/test.js b/mixins/align-content/test.js
new file mode 100644
index 0000000..36a39b7
--- /dev/null
+++ b/mixins/align-content/test.js
@@ -0,0 +1,12 @@
+var assert = require('assert');
+
+describe('align-content', function() {
+
+ /**
+ * If you want to test this code, comment 'alignContent.result' from align-content.js
+ */
+ // it('should return start', function (done) {
+ // test.alignContent.ms('flex-start', 'start', done);
+ // });
+
+});
diff --git a/mixins/align-items/align-items.js b/mixins/align-items/align-items.js
new file mode 100644
index 0000000..a011204
--- /dev/null
+++ b/mixins/align-items/align-items.js
@@ -0,0 +1,79 @@
+/**
+ * AlignItems mixin
+ */
+
+var alignItems = function alignItems(value) {
+ value = value || 'stretch';
+
+ return value;
+};
+
+alignItems.olderWebkit = function olderWebkitalignItems(value) {
+ value = value || 'stretch';
+
+ if (value == 'flex-start') {
+ value = 'start';
+ }
+ else if (value == 'flex-end') {
+ value = 'end';
+ }
+
+ return value;
+};
+
+alignItems.moz = function mozalignItems(value) {
+ value = value || 'stretch';
+
+ if (value == 'flex-start') {
+ value = 'start';
+ }
+ else if (value == 'flex-end') {
+ value = 'end';
+ }
+
+ return value;
+};
+
+alignItems.ms = function msalignItems(value) {
+ value = value || 'stretch';
+
+ if (value == 'flex-start') {
+ value = 'start';
+ }
+ else if (value == 'flex-end') {
+ value = 'end';
+ }
+
+ return value;
+};
+
+/**
+ * Older syntax have different properties
+ */
+
+ alignItems.result = {
+ olderwebkit: {
+ property: '-webkit-box-align',
+ prefixed: false
+ },
+ moz: {
+ property: '-moz-box-align',
+ prefixed: false
+ },
+ ms: {
+ property: '-ms-flex-align',
+ prefixed: false
+ }
+ };
+
+/**
+ * For which browsers is this mixin specified
+ */
+
+alignItems.vendors = ['olderwebkit','moz','webkit','ms'];
+
+/**
+ * Export mixin
+ */
+
+module.exports = alignItems;
diff --git a/mixins/align-items/align-items.md b/mixins/align-items/align-items.md
new file mode 100644
index 0000000..6774bfe
--- /dev/null
+++ b/mixins/align-items/align-items.md
@@ -0,0 +1,29 @@
+### , …)
+
+**Tips and tricks:**
+
+If you omit units after time argument, `animation-delay` is trying to be smart and add properly value.
+
+ if (time > 10) {
+ time += 'ms';
+ } else {
+ time += 's';
+ }
+
+**Example:**
+
+ div {
+ .animation-delay(2, 200);
+ }
+
+ // Result
+ div {
+ -webkit-animation-delay: 2s, 200ms;
+ -moz-animation-delay: 2s, 200ms;
+ -opera-animation-delay: 2s, 200ms;
+ animation-delay: 2s, 200ms;
+ }
+
+
diff --git a/mixins/animation-delay/test.js b/mixins/animation-delay/test.js
new file mode 100644
index 0000000..a3bd75d
--- /dev/null
+++ b/mixins/animation-delay/test.js
@@ -0,0 +1,17 @@
+var assert = require('assert');
+
+describe('animation-delay', function() {
+
+ it('should return the same value', function(done) {
+ test.animationDelay('2s, 4s', '2s, 4s', done);
+ });
+
+ it('should return the same value', function(done) {
+ test.animationDelay('200ms', '200ms', done);
+ });
+
+ it('should return numbers with second and milisecond value', function(done) {
+ test.animationDelay('9, 200', '9s, 200ms', done);
+ });
+
+});
diff --git a/mixins/animation-direction/animation-direction.js b/mixins/animation-direction/animation-direction.js
new file mode 100644
index 0000000..07ab6a8
--- /dev/null
+++ b/mixins/animation-direction/animation-direction.js
@@ -0,0 +1,19 @@
+/**
+ * animationDirection mixin
+ */
+
+var animationDirection = function animationDirection(value) {
+ return value || 'normal';
+};
+
+/**
+ * For which browsers is this mixin specified
+ */
+
+animationDirection.vendors = ['webkit', 'moz', 'opera'];
+
+/**
+ * Export mixin
+ */
+
+module.exports = animationDirection;
\ No newline at end of file
diff --git a/mixins/animation-direction/animation-direction.md b/mixins/animation-direction/animation-direction.md
new file mode 100644
index 0000000..f3ff9be
--- /dev/null
+++ b/mixins/animation-direction/animation-direction.md
@@ -0,0 +1,28 @@
+### , …)
+
+**Example:**
+
+ div {
+ .animation-direction(reverse, alternate);
+ }
+
+ // Result
+ div {
+ -webkit-animation-direction: reverse, alternate;
+ -moz-animation-direction: reverse, alternate;
+ -opera-animation-direction: reverse, alternate;
+ animation-direction: reverse, alternate;
+ }
+
+
diff --git a/mixins/animation-direction/test.js b/mixins/animation-direction/test.js
new file mode 100644
index 0000000..687f7bb
--- /dev/null
+++ b/mixins/animation-direction/test.js
@@ -0,0 +1,13 @@
+var assert = require('assert');
+
+describe('animation-direction', function() {
+
+ it('should return the same value', function(done) {
+ test.animationDirection('reverse', 'reverse', done);
+ });
+
+ it('should return the same value', function(done) {
+ test.animationDirection('reverse, alternate', 'reverse, alternate', done);
+ });
+
+});
\ No newline at end of file
diff --git a/mixins/animation-duration/animation-duration.js b/mixins/animation-duration/animation-duration.js
new file mode 100644
index 0000000..240f16f
--- /dev/null
+++ b/mixins/animation-duration/animation-duration.js
@@ -0,0 +1,36 @@
+/**
+ * animationDuration mixin
+ */
+
+var animationDuration = function animationDuration(value) {
+ value = value || '0';
+ var valueRegex = /ms|s/gi;
+ var numWithoutValue = /(?:\s|^)(\d+\.?\d*)(?![^(]*\)|\w|%)/gi;
+
+ if (!valueRegex.test(value) && value !== '0') {
+ value = value.replace(numWithoutValue, function(match) {
+
+ if (parseFloat(match, 10) > 10) {
+ match += 'ms';
+ } else {
+ match += 's';
+ }
+
+ return match;
+ });
+ }
+
+ return value;
+};
+
+/**
+ * For which browsers is this mixin specified
+ */
+
+animationDuration.vendors = ['webkit', 'moz', 'opera'];
+
+/**
+ * Export mixin
+ */
+
+module.exports = animationDuration;
diff --git a/mixins/animation-duration/animation-duration.md b/mixins/animation-duration/animation-duration.md
new file mode 100644
index 0000000..018a088
--- /dev/null
+++ b/mixins/animation-duration/animation-duration.md
@@ -0,0 +1,38 @@
+### , …)
+
+**Tips and tricks:**
+
+If you omit units after time argument, `animation-duration` is trying to be smart and add proper value.
+
+ if (time > 10) {
+ time += 'ms';
+ } else {
+ time += 's';
+ }
+
+**Example:**
+
+ div {
+ .animation-duration(2000);
+ }
+
+ // Result
+ div {
+ -webkit-animation-duration: 2000ms;
+ -moz-animation-duration: 2000ms;
+ -opera-animation-duration: 2000ms;
+ animation-duration: 2000ms;
+ }
+
+
diff --git a/mixins/animation-duration/test.js b/mixins/animation-duration/test.js
new file mode 100644
index 0000000..c9cc941
--- /dev/null
+++ b/mixins/animation-duration/test.js
@@ -0,0 +1,21 @@
+var assert = require('assert');
+
+describe('animation-duration', function() {
+
+ it('should return the same value', function(done) {
+ test.animationDuration('2s', '2s', done);
+ });
+
+ it('should return the same value', function(done) {
+ test.animationDuration('200ms, 400ms', '200ms, 400ms', done);
+ });
+
+ it('should return number with ms', function(done) {
+ test.animationDuration('2000', '2000ms', done);
+ });
+
+ it('should return number with s', function(done) {
+ test.animationDuration('5', '5s', done);
+ });
+
+});
\ No newline at end of file
diff --git a/mixins/animation-fill-mode/animation-fill-mode.js b/mixins/animation-fill-mode/animation-fill-mode.js
new file mode 100644
index 0000000..be093ac
--- /dev/null
+++ b/mixins/animation-fill-mode/animation-fill-mode.js
@@ -0,0 +1,19 @@
+/**
+ * animationFillMode mixin
+ */
+
+var animationFillMode = function animationFillMode(value) {
+ return value || 'none';
+};
+
+/**
+ * For which browsers is this mixin specified
+ */
+
+animationFillMode.vendors = ['webkit', 'moz', 'opera'];
+
+/**
+ * Export mixin
+ */
+
+module.exports = animationFillMode;
\ No newline at end of file
diff --git a/mixins/animation-fill-mode/animation-fill-mode.md b/mixins/animation-fill-mode/animation-fill-mode.md
new file mode 100644
index 0000000..b87e9b6
--- /dev/null
+++ b/mixins/animation-fill-mode/animation-fill-mode.md
@@ -0,0 +1,28 @@
+### , …)
+
+**Example:**
+
+ div {
+ .animation-fill-mode(forwards);
+ }
+
+ // Result
+ div {
+ -webkit-animation-fill-mode: forwards;
+ -moz-animation-fill-mode: forwards;
+ -opera-animation-fill-mode: forwards;
+ animation-fill-mode: forwards;
+ }
+
+
diff --git a/mixins/animation-fill-mode/test.js b/mixins/animation-fill-mode/test.js
new file mode 100644
index 0000000..8515ff8
--- /dev/null
+++ b/mixins/animation-fill-mode/test.js
@@ -0,0 +1,13 @@
+var assert = require('assert');
+
+describe('animation-fill-mode', function() {
+
+ it('should return the same value', function(done) {
+ test.animationFillMode('forwards', 'forwards', done);
+ });
+
+ it('should return the same value', function(done) {
+ test.animationFillMode('forwards, both', 'forwards, both', done);
+ });
+
+});
\ No newline at end of file
diff --git a/mixins/animation-iteration-count/animation-iteration-count.js b/mixins/animation-iteration-count/animation-iteration-count.js
new file mode 100644
index 0000000..9a96b2d
--- /dev/null
+++ b/mixins/animation-iteration-count/animation-iteration-count.js
@@ -0,0 +1,19 @@
+/**
+ * animationIterationCount mixin
+ */
+
+var animationIterationCount = function animationIterationCount(value) {
+ return value || '0';
+};
+
+/**
+ * For which browsers is this mixin specified
+ */
+
+animationIterationCount.vendors = ['webkit', 'moz', 'opera'];
+
+/**
+ * Export mixin
+ */
+
+module.exports = animationIterationCount;
\ No newline at end of file
diff --git a/mixins/animation-iteration-count/animation-iteration-count.md b/mixins/animation-iteration-count/animation-iteration-count.md
new file mode 100644
index 0000000..64f1b84
--- /dev/null
+++ b/mixins/animation-iteration-count/animation-iteration-count.md
@@ -0,0 +1,28 @@
+### , …)
+
+**Example:**
+
+ div {
+ .animation-iteration-count(3);
+ }
+
+ // Result
+ div {
+ -webkit-animation-iteration-count: 3;
+ -moz-animation-iteration-count: 3;
+ -opera-animation-iteration-count: 3;
+ animation-iteration-count: 3;
+ }
+
+
diff --git a/mixins/animation-iteration-count/test.js b/mixins/animation-iteration-count/test.js
new file mode 100644
index 0000000..48eb43e
--- /dev/null
+++ b/mixins/animation-iteration-count/test.js
@@ -0,0 +1,13 @@
+var assert = require('assert');
+
+describe('animation-iteration-count', function() {
+
+ it('should return the same value', function(done) {
+ test.animationIterationCount('3', '3', done);
+ });
+
+ it('should return the same value', function(done) {
+ test.animationIterationCount('11, 44', '11, 44', done);
+ });
+
+});
\ No newline at end of file
diff --git a/mixins/animation-name/animation-name.js b/mixins/animation-name/animation-name.js
new file mode 100644
index 0000000..3a27d65
--- /dev/null
+++ b/mixins/animation-name/animation-name.js
@@ -0,0 +1,19 @@
+/**
+ * animationName mixin
+ */
+
+var animationName = function animationName(value) {
+ return value || 'none';
+};
+
+/**
+ * For which browsers is this mixin specified
+ */
+
+animationName.vendors = ['webkit', 'moz', 'opera'];
+
+/**
+ * Export mixin
+ */
+
+module.exports = animationName;
\ No newline at end of file
diff --git a/mixins/animation-name/animation-name.md b/mixins/animation-name/animation-name.md
new file mode 100644
index 0000000..4065cfb
--- /dev/null
+++ b/mixins/animation-name/animation-name.md
@@ -0,0 +1,28 @@
+### , …)
+
+**Example:**
+
+ div {
+ .animation-name(animation-1, animation-2);
+ }
+
+ // Result
+ div {
+ -webkit-animation-name: animation-1, animation-2;
+ -moz-animation-name: animation-1, animation-2;
+ -opera-animation-name: animation-1, animation-2;
+ animation-name: animation-1, animation-2;
+ }
+
+
diff --git a/mixins/animation-name/test.js b/mixins/animation-name/test.js
new file mode 100644
index 0000000..e066ba2
--- /dev/null
+++ b/mixins/animation-name/test.js
@@ -0,0 +1,13 @@
+var assert = require('assert');
+
+describe('animation-name', function() {
+
+ it('should return the same value', function(done) {
+ test.animationName('brutalAnimation', 'brutalAnimation', done);
+ });
+
+ it('should return the same value', function(done) {
+ test.animationName('anim-1, anim-2, anim-3', 'anim-1, anim-2, anim-3', done);
+ });
+
+});
\ No newline at end of file
diff --git a/mixins/animation-play-state/animation-play-state.js b/mixins/animation-play-state/animation-play-state.js
new file mode 100644
index 0000000..5e12c82
--- /dev/null
+++ b/mixins/animation-play-state/animation-play-state.js
@@ -0,0 +1,19 @@
+/**
+ * animationPlayState mixin
+ */
+
+var animationPlayState = function animationPlayState(value) {
+ return value || 'running';
+};
+
+/**
+ * For which browsers is this mixin specified
+ */
+
+animationPlayState.vendors = ['webkit', 'moz', 'opera'];
+
+/**
+ * Export mixin
+ */
+
+module.exports = animationPlayState;
\ No newline at end of file
diff --git a/mixins/animation-play-state/animation-play-state.md b/mixins/animation-play-state/animation-play-state.md
new file mode 100644
index 0000000..abf0a77
--- /dev/null
+++ b/mixins/animation-play-state/animation-play-state.md
@@ -0,0 +1,28 @@
+### , …)
+
+**Example:**
+
+ div {
+ .animation-play-state(paused);
+ }
+
+ // Result
+ div {
+ -webkit-animation-play-state: paused;
+ -moz-animation-play-state: paused;
+ -opera-animation-play-state: paused;
+ animation-play-state: paused;
+ }
+
+
diff --git a/mixins/animation-play-state/test.js b/mixins/animation-play-state/test.js
new file mode 100644
index 0000000..a13db13
--- /dev/null
+++ b/mixins/animation-play-state/test.js
@@ -0,0 +1,14 @@
+var assert = require('assert');
+
+describe('animation-play-state', function() {
+
+ it('should return the same value', function(done) {
+ test.animationPlayState('running', 'running', done);
+ });
+
+ it('should return the default value running', function(done) {
+ test.animationPlayState('', 'running', done);
+ });
+
+
+});
\ No newline at end of file
diff --git a/mixins/animation-timing-function/animation-timing-function.js b/mixins/animation-timing-function/animation-timing-function.js
new file mode 100644
index 0000000..8da0c57
--- /dev/null
+++ b/mixins/animation-timing-function/animation-timing-function.js
@@ -0,0 +1,19 @@
+/**
+ * animationTimingFunction mixin
+ */
+
+var animationTimingFunction = function animationTimingFunction(value) {
+ return value || 'ease';
+};
+
+/**
+ * For which browsers is this mixin specified
+ */
+
+animationTimingFunction.vendors = ['webkit', 'moz', 'opera'];
+
+/**
+ * Export mixin
+ */
+
+module.exports = animationTimingFunction;
\ No newline at end of file
diff --git a/mixins/animation-timing-function/animation-timing-function.md b/mixins/animation-timing-function/animation-timing-function.md
new file mode 100644
index 0000000..43f57b7
--- /dev/null
+++ b/mixins/animation-timing-function/animation-timing-function.md
@@ -0,0 +1,28 @@
+### , …)
+
+**Example:**
+
+ div {
+ .animation-timing-function(cubic-bezier(0.1, 0.7, 1.0, 0.1));
+ }
+
+ // Result
+ div {
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
+ -moz-animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
+ -opera-animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
+ animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
+ }
+
+
diff --git a/mixins/animation-timing-function/test.js b/mixins/animation-timing-function/test.js
new file mode 100644
index 0000000..e3dc255
--- /dev/null
+++ b/mixins/animation-timing-function/test.js
@@ -0,0 +1,13 @@
+var assert = require('assert');
+
+describe('animation-timing-function', function() {
+
+ it('should return the same value', function(done) {
+ test.animationTimingFunction('cubic-bezier(0.42,0,0.58,1)', 'cubic-bezier(0.42, 0, 0.58, 1)', done);
+ });
+
+ it('should return the same value', function(done) {
+ test.animationTimingFunction('cubic-bezier(0.42,0,0.58,1), cubic-bezier(0.42,0,0.58,1)', 'cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1)', done);
+ });
+
+});
\ No newline at end of file
diff --git a/mixins/animation/animation.js b/mixins/animation/animation.js
new file mode 100644
index 0000000..b8d7f73
--- /dev/null
+++ b/mixins/animation/animation.js
@@ -0,0 +1,25 @@
+/**
+ * Animation mixin
+ */
+
+var animation = function animation(value) {
+ value = value || 'none';
+
+ if (/^[-a-zA-Z0-9]*,/.test(value)) {
+ value = value.replace(/(?:,)(?![^(]*\))/g, '');
+ }
+
+ return value;
+};
+
+/**
+ * For which browsers is this mixin specified
+ */
+
+animation.vendors = ['webkit', 'moz', 'opera'];
+
+/**
+ * Export mixin
+ */
+
+module.exports = animation;
\ No newline at end of file
diff --git a/mixins/animation/animation.md b/mixins/animation/animation.md
new file mode 100644
index 0000000..4f94fbd
--- /dev/null
+++ b/mixins/animation/animation.md
@@ -0,0 +1,28 @@
+### )
+
+**Example:**
+
+ div {
+ .appearance();
+ }
+
+ // Result
+ div {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ }
+
+
diff --git a/mixins/appearance/test.js b/mixins/appearance/test.js
new file mode 100644
index 0000000..5f591ba
--- /dev/null
+++ b/mixins/appearance/test.js
@@ -0,0 +1,13 @@
+var assert = require('assert');
+
+describe('appearance', function() {
+
+ it('should return the same value', function(done) {
+ test.appearance('button', 'button', done);
+ });
+
+ it('should return the default value none', function(done) {
+ test.appearance('', 'none', done);
+ });
+
+});
\ No newline at end of file
diff --git a/mixins/backface-visibility/backface-visibility.js b/mixins/backface-visibility/backface-visibility.js
new file mode 100644
index 0000000..36b3124
--- /dev/null
+++ b/mixins/backface-visibility/backface-visibility.js
@@ -0,0 +1,19 @@
+/**
+ * backfaceVisibility mixin
+ */
+
+var backfaceVisibility = function backfaceVisibility(value) {
+ return value || 'visible';
+};
+
+/**
+ * For which browsers is this mixin specified
+ */
+
+backfaceVisibility.vendors = ['webkit', 'moz', 'opera', 'ms'];
+
+/**
+ * Export mixin
+ */
+
+module.exports = backfaceVisibility;
\ No newline at end of file
diff --git a/mixins/backface-visibility/backface-visibility.md b/mixins/backface-visibility/backface-visibility.md
new file mode 100644
index 0000000..55b87eb
--- /dev/null
+++ b/mixins/backface-visibility/backface-visibility.md
@@ -0,0 +1,29 @@
+### )
+
+**Example:**
+
+ div {
+ .background-clip(padding-box);
+ }
+
+ // Result
+ div {
+ -webkit-background-clip: padding-box;
+ -moz-background-clip: padding-box;
+ background-clip: padding-box;
+ }
+
+
diff --git a/mixins/background-clip/test.js b/mixins/background-clip/test.js
new file mode 100644
index 0000000..0663945
--- /dev/null
+++ b/mixins/background-clip/test.js
@@ -0,0 +1,9 @@
+var assert = require('assert');
+
+describe('background-clip', function() {
+
+ it('should return the same value', function(done) {
+ test.backgroundClip('padding-box', 'padding-box', done);
+ });
+
+});
\ No newline at end of file
diff --git a/mixins/background-image/background-image.js b/mixins/background-image/background-image.js
new file mode 100644
index 0000000..428df36
--- /dev/null
+++ b/mixins/background-image/background-image.js
@@ -0,0 +1,376 @@
+/**
+ * BackgroundImage mixin
+ */
+
+var backgroundImage = function backgroundImage(value) {
+ value = value || 08121991;
+ if (value == 08121991) {
+ return value;
+ }
+ var values = {
+ top: 'to bottom',
+ right: 'to left',
+ bottom: 'to top',
+ left: 'to right'
+ };
+
+ var values_keys = Object.keys(values);
+ values_keys.some(function(el) {
+ if (value.indexOf(el) >= 0 && !(new RegExp('to\\s+' + el, 'g')).test(value)) {
+ value = value.replace(new RegExp(el), values[el]);
+ return true;
+ }
+ });
+
+ return value;
+};
+
+backgroundImage.webkit = function backgroundImageWebkit(value) {
+ value = value || 08121991;
+ if (value == 08121991) {
+ return value;
+ }
+ var values = {
+ 'to bottom': 'top',
+ 'to left': 'right',
+ 'to top': 'bottom',
+ 'to right': 'left',
+ 'ellipse at center': 'center, ellipse cover',
+ 'circle closest-side': 'center center, circle contain',
+ 'circle farthest-corner': 'center center, circle cover',
+ 'circle farthest-side': 'center center, circle cover',
+ 'ellipse closest-side': 'center center, ellipse contain',
+ 'ellipse farthest-corner': 'center center, ellipse cover',
+ 'ellipse farthest-side': 'center center, ellipse cover'
+ };
+ var radial_regexp = /(radial-gradient\()([a-z- ]+)at\s+(\w+)\s*(\w*)/g;
+
+ var values_keys = Object.keys(values);
+ values_keys.some(function(el) {
+ var radial_values = null;
+ if (value.indexOf(el) >= 0) {
+ value = value.replace(new RegExp(el + '(?![ a-z0-9])', 'g'), values[el]);
+ return true;
+ }
+ if (radial_regexp.test(value)) {
+ value = value.replace(radial_regexp, function(match, sub, sub2, sub3, sub4) {
+ return sub.trim() + sub3.trim() + ' ' + sub4.trim() + ',' + sub2.replace(/closest-side/g, 'contain').replace(/farthest-corner/g, 'cover').trim();
+ })
+ }
+ });
+
+ value = value.replace(/(\d+)\s*deg/g, function(match, sub) {
+ return 90 - sub + 'deg';
+ }).replace(/(linear|radial)-gradient/g, '-webkit-$1-gradient');
+
+ return value;
+};
+
+backgroundImage.moz = function backgroundImageMoz(value) {
+ value = value || 08121991;
+ if (value == 08121991) {
+ return value;
+ }
+ var values = {
+ 'to bottom': 'top',
+ 'to left': 'right',
+ 'to top': 'bottom',
+ 'to right': 'left',
+ 'ellipse at center': 'center, ellipse cover',
+ 'circle closest-side': 'center center, circle contain',
+ 'circle farthest-corner': 'center center, circle cover',
+ 'circle farthest-side': 'center center, circle cover',
+ 'ellipse closest-side': 'center center, ellipse contain',
+ 'ellipse farthest-corner': 'center center, ellipse cover',
+ 'ellipse farthest-side': 'center center, ellipse cover'
+ };
+ var radial_regexp = /(radial-gradient\()([a-z- ]+)at\s+(\w+)\s*(\w*)/g;
+
+ var values_keys = Object.keys(values);
+ values_keys.some(function(el) {
+ var radial_values = null;
+ if (value.indexOf(el) >= 0) {
+ value = value.replace(new RegExp(el + '(?![ a-z0-9])', 'g'), values[el]);
+ return true;
+ }
+ if (radial_regexp.test(value)) {
+ value = value.replace(radial_regexp, function(match, sub, sub2, sub3, sub4) {
+ return sub.trim() + sub3.trim() + ' ' + sub4.trim() + ',' + sub2.replace(/closest-side/g, 'contain').replace(/farthest-corner/g, 'cover').trim();
+ })
+ }
+ });
+
+ value = value.replace(/(\d+)\s*deg/g, function(match, sub) {
+ return 90 - sub + 'deg';
+ }).replace(/(linear|radial)-gradient/g, '-moz-$1-gradient');
+
+ return value;
+};
+
+backgroundImage.opera = function backgroundImageOpera(value) {
+ value = value || 08121991;
+ if (value == 08121991) {
+ return value;
+ }
+ var values = {
+ 'to bottom': 'top',
+ 'to left': 'right',
+ 'to top': 'bottom',
+ 'to right': 'left',
+ 'ellipse at center': 'center, ellipse cover',
+ 'circle closest-side': 'center center, circle contain',
+ 'circle farthest-corner': 'center center, circle cover',
+ 'circle farthest-side': 'center center, circle cover',
+ 'ellipse closest-side': 'center center, ellipse contain',
+ 'ellipse farthest-corner': 'center center, ellipse cover',
+ 'ellipse farthest-side': 'center center, ellipse cover'
+ };
+ var radial_regexp = /(radial-gradient\()([a-z- ]+)at\s+(\w+)\s*(\w*)/g;
+
+ var values_keys = Object.keys(values);
+ values_keys.some(function(el) {
+ var radial_values = null;
+ if (value.indexOf(el) >= 0) {
+ value = value.replace(new RegExp(el + '(?![ a-z0-9])', 'g'), values[el]);
+ return true;
+ }
+ if (radial_regexp.test(value)) {
+ value = value.replace(radial_regexp, function(match, sub, sub2, sub3, sub4) {
+ return sub.trim() + sub3.trim() + ' ' + sub4.trim() + ',' + sub2.replace(/closest-side/g, 'contain').replace(/farthest-corner/g, 'cover').trim();
+ })
+ }
+ });
+
+ value = value.replace(/(\d+)\s*deg/g, function(match, sub) {
+ return 90 - sub + 'deg';
+ }).replace(/(linear|radial)-gradient/g, '-o-$1-gradient');
+
+ return value;
+};
+
+backgroundImage.ms = function backgroundImageMs(value) {
+ value = value || 08121991;
+ if (value == 08121991) {
+ return value;
+ }
+ var gradients = /linear|radial/g.test(value) && value.split(/,(?=\s*(?:linear|radial))/g);
+ var svg_gradients = [];
+ var values = {
+ 'to bottom': 'x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\"',
+ 'to left': 'x1=\"100%\" y1=\"0%\" x2=\"0%\" y2=\"0%\"',
+ 'to top': 'x1=\"0%\" y1=\"100%\" x2=\"0%\" y2=\"0%\"',
+ 'to right': 'x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\"',
+ get 'top' () {
+ return this['to bottom'];
+ },
+ get '180deg' () {
+ return this['to bottom'];
+ },
+ get 'right' () {
+ return this['to left'];
+ },
+ get '270deg' () {
+ return this['to left'];
+ },
+ get 'bottom' () {
+ return this['to top'];
+ },
+ get '0deg' () {
+ return this['to top']
+ },
+ get 'left' () {
+ return this['to right'];
+ },
+ get '90deg' () {
+ return this['to right'];
+ },
+ '-45deg': 'x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\"',
+ '45deg': 'x1=\"0%\" y1=\"100%\" x2=\"100%\" y2=\"0%\"',
+ 'ellipse at center': 'cx=\"50%\" cy=\"50%\" r=\"75%\"'
+ };
+ var svg = {
+ uri_data: 'url(data:image/svg+xml;base64,',
+ xml: '',
+ svg_start: '',
+ linear_gradient_start: '',
+ radial_gradient_end: ' ',
+ rect_linear: '');
+ });
+ } else {
+ var shares = Math.floor(100 / (value.match(/#[a-zA-Z0-9]/g).length - 1));
+ value.match(/#[a-zA-Z0-9]+/g).forEach(function(inner_val, index) {
+ obj.svg_stops.push('');
+ });
+ }
+ }
+ // Rgb(a)
+ if (value.match(/rgba?\(\d+,\s*\d+,\s*\d+(?:,\s*(0|1|\.\d+|0\.\d+))?\)/g) && (value.match(/(?:rgb|rgba)?\(\d+,\s*\d+,\s*\d+(?:,\s*(0|1|\.\d+|0\.\d+))?\)/g).length == colors_count)) {
+ // Are there percentages?
+ if (value.match(/rgba?\(\d+,\s*\d+,\s*\d+(?:,\s*(0|1|\.\d+|0\.\d+))?\)\s+\d+%+/g) && (value.match(/rgba?\(\d+,\s*\d+,\s*\d+(?:,\s*(0|1|\.\d+|0\.\d+))?\)\s+\d+%+/g).length) == colors_count) {
+ value.replace(/rgba?\((\d+,\s*\d+,\s*\d+)(?:,\s*(0|1|\.\d+|0\.\d+))?\)\s+(\d+%)+/g, function(match, sub, sub_2, sub_3) {
+ obj.svg_stops.push('` which represents a linear|radial gradient of colors. The result of this function is an object of the CSS `` data type. Like any other gradient, a CSS linear gradient is not a CSS `` but an image with no intrinsic dimensions; that is, it has neither natural or preferred size, nor ratio. Its concrete size will match the one of the element it applies to.
+
+Resources: **[WebPlatform](http://docs.webplatform.org/wiki/css/functions/linear-gradient)**, **[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient)**
+
+**Syntax:**
+
+Default value: none
+
+ .background-image(, ...)
+
+**Tips and tricks:**
+
+The `background-image` mixin is the most robust mixin of all.
+It generates `SVG` for Internet Explorer 9, old webkit, moz and opera syntax.
+Always use W3C syntax for the mixin. It can recalculate angle for older syntax, transform `to top` to `bottom` syntax and it can omit SVG syntax if it's impossible to express SVG e.g. when you call mixin with 55deg.
+If you call mixin without arguments, LESS Hat does not generate anything.
+Great online gradient [generator](http://www.colorzilla.com/gradient-editor/).
+
+
+**Example:**
+
+ div {
+ .background-image(linear-gradient(to bottom, #fb83fa 0%,#e93cec 100%));
+ }
+
+ // Result
+ div {
+ background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmYjgzZmEiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2U5M2NlYyIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
+ background-image: -webkit-linear-gradient(top, #fb83fa 0%, #e93cec 100%);
+ background-image: -moz-linear-gradient(top, #fb83fa 0%, #e93cec 100%);
+ background-image: -o-linear-gradient(top, #fb83fa 0%, #e93cec 100%);
+ background-image: linear-gradient(to bottom, #fb83fa 0%, #e93cec 100%);
+ }
+
+
diff --git a/mixins/background-image/test.js b/mixins/background-image/test.js
new file mode 100644
index 0000000..f089fd4
--- /dev/null
+++ b/mixins/background-image/test.js
@@ -0,0 +1,29 @@
+var assert = require('assert');
+
+describe('background-image', function () {
+
+ /**
+ * If you want to test gradients, just remove 'prefixed: false' from background-image.js file
+ */
+
+ // it('should return the same value', function (done) {
+ // test.backgroundImage('linear-gradient(right, #1e5799 0%, #7db9e8 100%)', 'linear-gradient(to left, #1e5799 0%, #7db9e8 100%)', done);
+ // });
+
+ // it('should add prefix and return the value', function (done) {
+ // test.backgroundImage.webkit('linear-gradient(to right, #1e5799 0%, #7db9e8 100%)', '-webkit-linear-gradient(left, #1e5799 0%, #7db9e8 100%)', done);
+ // });
+
+ // it('should convert angle for older webkit syntax', function (done) {
+ // test.backgroundImage.webkit('linear-gradient(40deg, #1e5799 0%, #7db9e8 100%)', '-webkit-linear-gradient(50deg, #1e5799 0%, #7db9e8 100%)', done);
+ // });
+
+ // it('should convert new radial gradient syntax to older version', function (done) {
+ // test.backgroundImage.webkit('radial-gradient(circle closest-side at 20px 30px, #000000 0%, #ffffff 25%)', '-webkit-radial-gradient(20px 30px,circle contain, #000000 0%, #ffffff 25%)', done);
+ // });
+
+ // it('should add prefix, convert new radial gradient syntax to older version and convert angle for linear gradient', function (done) {
+ // test.backgroundImage.webkit('radial-gradient(circle closest-side at 20px 30px, #000000 0%, #ffffff 25%), linear-gradient(40deg, #1e5799 0%, #7db9e8 100%)', '-webkit-radial-gradient(20px 30px,circle contain, #000000 0%, #ffffff 25%), -webkit-linear-gradient(50deg, #1e5799 0%, #7db9e8 100%)', done);
+ // });
+
+});
\ No newline at end of file
diff --git a/mixins/background-origin/background-origin.js b/mixins/background-origin/background-origin.js
new file mode 100644
index 0000000..7d78eb2
--- /dev/null
+++ b/mixins/background-origin/background-origin.js
@@ -0,0 +1,19 @@
+/**
+ * backgroundOrigin mixin
+ */
+
+var backgroundOrigin = function backgroundOrigin(value) {
+ return value || 'padding-box';
+};
+
+/**
+ * For which browsers is this mixin specified
+ */
+
+backgroundOrigin.vendors = ['webkit', 'moz'];
+
+/**
+ * Export mixin
+ */
+
+module.exports = backgroundOrigin;
\ No newline at end of file
diff --git a/mixins/background-origin/background-origin.md b/mixins/background-origin/background-origin.md
new file mode 100644
index 0000000..c98b977
--- /dev/null
+++ b/mixins/background-origin/background-origin.md
@@ -0,0 +1,27 @@
+### )
+
+**Example:**
+
+ div {
+ .background-origin(content-box);
+ }
+
+ // Result
+ div {
+ -webkit-background-origin: content-box;
+ -moz-background-origin: content-box;
+ background-origin: content-box;
+ }
+
+
diff --git a/mixins/background-origin/test.js b/mixins/background-origin/test.js
new file mode 100644
index 0000000..25702a3
--- /dev/null
+++ b/mixins/background-origin/test.js
@@ -0,0 +1,9 @@
+var assert = require('assert');
+
+describe('background-origin', function() {
+
+ it('should return the same value', function(done) {
+ test.backgroundOrigin('content-box', 'content-box', done);
+ });
+
+});
\ No newline at end of file
diff --git a/mixins/background-size/background-size.js b/mixins/background-size/background-size.js
new file mode 100644
index 0000000..06e2634
--- /dev/null
+++ b/mixins/background-size/background-size.js
@@ -0,0 +1,29 @@
+/**
+ * backgroundSize mixin
+ */
+
+var backgroundSize = function backgroundSize(value) {
+ value = value || 'auto auto';
+ var numRegex = /\d/gi;
+ var numWithoutValue = /(?:\s|^)(\d+\.?\d*)(?![^(]*\)|\w|%)/gi;
+
+ if (numRegex.test(value)) {
+ value = value.replace(numWithoutValue, function(match) {
+ return match + 'px';
+ });
+ }
+
+ return value;
+};
+
+/**
+ * For which browsers is this mixin specified
+ */
+
+backgroundSize.vendors = ['webkit', 'moz'];
+
+/**
+ * Export mixin
+ */
+
+module.exports = backgroundSize;
diff --git a/mixins/background-size/background-size.md b/mixins/background-size/background-size.md
new file mode 100644
index 0000000..9034741
--- /dev/null
+++ b/mixins/background-size/background-size.md
@@ -0,0 +1,31 @@
+### , ...)
+
+**Tips and tricks:**
+
+If you omit units, `background-size` adds `px` automatically.
+
+**Example:**
+
+ div {
+ .background-size(cover, 100%);
+ }
+
+ // Result
+ div {
+ -webkit-background-size: cover, 100%;
+ -moz-background-size: cover, 100%;
+ background-size: cover, 100%;
+ }
+
+
diff --git a/mixins/background-size/test.js b/mixins/background-size/test.js
new file mode 100644
index 0000000..13c5cbb
--- /dev/null
+++ b/mixins/background-size/test.js
@@ -0,0 +1,13 @@
+var assert = require('assert');
+
+describe('background-size', function() {
+
+ it('should return the same value', function(done) {
+ test.backgroundSize('cover, 100%', 'cover, 100%', done);
+ });
+
+ it('should return numbers with px', function(done) {
+ test.backgroundSize('400, 300', '400px, 300px', done);
+ });
+
+});
\ No newline at end of file
diff --git a/mixins/blur/blur.js b/mixins/blur/blur.js
new file mode 100644
index 0000000..a343912
--- /dev/null
+++ b/mixins/blur/blur.js
@@ -0,0 +1,38 @@
+/**
+ * Blur mixin
+ */
+
+var blur = function blur(value) {
+ value = value || '0';
+ var numRegex = /\d/gi;
+ var numWithoutValue = /(?:\s|^)(\d+\.?\d*)(?![^(]*\)|\w|%)/gi;
+
+ if (numRegex.test(value)) {
+ value = value.replace(numWithoutValue, function(match) {
+ return match + 'px';
+ });
+ }
+
+ return value;
+};
+
+/**
+ * Result settings
+ */
+
+blur.result = {
+ property: 'filter',
+ value: 'blur({{ result }})',
+};
+
+/**
+ * For which browsers is this mixin specified
+ */
+
+blur.vendors = ['webkit', 'moz', 'ms'];
+
+/**
+ * Export mixin
+ */
+
+module.exports = blur;
diff --git a/mixins/blur/blur.md b/mixins/blur/blur.md
new file mode 100644
index 0000000..d98c9c7
--- /dev/null
+++ b/mixins/blur/blur.md
@@ -0,0 +1,32 @@
+### MDN **
+
+**Syntax:**
+
+Default value: 0
+
+ .blur(length)
+
+**Tips and tricks:**
+
+If you omit units, `blur` adds `px` automatically.
+
+**Example:**
+
+ div {
+ .blur(5px);
+ }
+
+ // Result
+ div {
+ -webkit-filter: blur(5px);
+ -moz-filter: blur(5px);
+ -ms-filter: blur(5px);
+ filter: blur(5px);
+ }
+
+
diff --git a/mixins/blur/test.js b/mixins/blur/test.js
new file mode 100644
index 0000000..2c81281
--- /dev/null
+++ b/mixins/blur/test.js
@@ -0,0 +1,10 @@
+var assert = require('assert');
+
+describe('blur', function() {
+
+ it('should return the same value', function(done) {
+ test.resultProperty = 'filter';
+ test.blur('10', 'blur(10px)', done);
+ });
+
+});
\ No newline at end of file
diff --git a/mixins/border-bottom-left-radius/border-bottom-left-radius.js b/mixins/border-bottom-left-radius/border-bottom-left-radius.js
new file mode 100644
index 0000000..b56e0e8
--- /dev/null
+++ b/mixins/border-bottom-left-radius/border-bottom-left-radius.js
@@ -0,0 +1,53 @@
+/**
+ * borderBottomLeftRadius mixin
+ */
+
+var borderBottomLeftRadius = function borderBottomLeftRadius(value) {
+ value = value || '0';
+ var numRegex = /\d/gi;
+ var numWithoutValue = /(?:\s|^)(\d+\.?\d*)(?![^(]*\)|\w|%)/gi;
+
+ if (/^[-a-zA-Z0-9]*,/.test(value)) {
+ value = value.replace(/(?:,)(?![^(]*\))/g, '');
+ }
+
+ if (numRegex.test(value)) {
+ value = value.replace(numWithoutValue, function(match) {
+ return match + 'px';
+ });
+ }
+
+ return value;
+};
+
+/**
+ * Syntax property for moz is non-standard
+ */
+
+borderBottomLeftRadius.result = {
+ moz: {
+ property: 'border-radius-bottomleft',
+ }
+};
+
+/**
+ * For which browsers is this mixin specified
+ */
+
+borderBottomLeftRadius.vendors = ['webkit', 'moz'];
+
+/**
+ * Append CSS
+ */
+
+borderBottomLeftRadius.appendCSS = {
+ all: 'background-clip: padding-box',
+ webkit: '-webkit-background-clip: padding-box',
+ moz: '-moz-background-clip: padding'
+};
+
+/**
+ * Export mixin
+ */
+
+module.exports = borderBottomLeftRadius;
diff --git a/mixins/border-bottom-left-radius/border-bottom-left-radius.md b/mixins/border-bottom-left-radius/border-bottom-left-radius.md
new file mode 100644
index 0000000..e22d5f7
--- /dev/null
+++ b/mixins/border-bottom-left-radius/border-bottom-left-radius.md
@@ -0,0 +1,33 @@
+### MDN **
+
+**Syntax:**
+
+Default value: 0
+
+ .brightness(amount)
+
+**Example:**
+
+ div {
+ .brightness(0.5);
+ }
+
+ // Result
+ div {
+ -webkit-filter: brightness(0.5);
+ -moz-filter: brightness(0.5);
+ -ms-filter: brightness(0.5);
+ filter: brightness(0.5);
+ }
+
+
diff --git a/mixins/brightness/test.js b/mixins/brightness/test.js
new file mode 100644
index 0000000..a33ed42
--- /dev/null
+++ b/mixins/brightness/test.js
@@ -0,0 +1,10 @@
+var assert = require('assert');
+
+describe('brightness', function() {
+
+ it('should return the same value', function(done) {
+ test.resultProperty = 'filter';
+ test.brightness('.5', 'brightness(0.5)', done);
+ });
+
+});
\ No newline at end of file
diff --git a/mixins/calc/calc.js b/mixins/calc/calc.js
new file mode 100644
index 0000000..6db6ea6
--- /dev/null
+++ b/mixins/calc/calc.js
@@ -0,0 +1,86 @@
+/**
+ * Keyframes mixin
+ */
+
+var calc = function calc(value) {
+
+ // States
+ // 1 - all
+ // 2 - webkit, moz
+ // 3 - webkit, w3c
+ // 4 - webkit
+ // 5 - moz, w3c
+ // 6 - moz
+ // 7 - w3c
+
+ value = value || 08121991;
+ var state = '@{state}';
+ var value_temp = value;
+ if (value == 08121991) {
+ return value;
+ }
+
+ switch (state) {
+ case '1':
+ syntax('-webkit-calc', 'start');
+ syntax('-moz-calc');
+ syntax('calc');
+ break;
+ case '2':
+ syntax('-webkit-calc', 'start');
+ syntax('-moz-calc');
+ break;
+ case '3':
+ syntax('-webkit-calc', 'start');
+ syntax('calc');
+ break;
+ case '4':
+ syntax('-webkit-calc', 'start');
+ break;
+ case '5':
+ syntax('-moz-calc', 'start');
+ syntax('calc');
+ break;
+ case '6':
+ syntax('-moz-calc', 'start');
+ break;
+ case '7':
+ syntax('calc', 'start');
+ break;
+ }
+
+ function syntax(property, start) {
+ var end = ');\n';
+ var definition = value_temp.split(',');
+ var syntax = definition[0] + ':' + property + '(' + (definition[1].trim() || 0) + end;
+
+ if (start == 'start') {
+ value = '0;\n' + syntax;
+ } else {
+ value = value + syntax;
+ }
+ }
+
+ value = value.replace(/;$/g,'');
+
+ return value;
+};
+
+
+/**
+ * We want totally custom result definition, because calc mixin is tricky one (not recommended, it's not testable)
+ */
+
+calc.result = 'result.less';
+
+/**
+ * For which browsers is this mixin specified
+ */
+
+calc.vendors = ['webkit', 'moz'];
+
+/**
+ * Export mixin
+ */
+
+module.exports = calc;
diff --git a/mixins/calc/calc.md b/mixins/calc/calc.md
new file mode 100644
index 0000000..ef04061
--- /dev/null
+++ b/mixins/calc/calc.md
@@ -0,0 +1,27 @@
+### `, ``, ``, ``, ``, or `` is required.With calc(), you can perform calculations to determine CSS property values.
+
+**THIS MIXIN MUST BE INTERPOLATED ~''**
+The `-lh-property: 0` junk line of code is a neccesary sacrifice due to the hack nature of this set of mixins. (via [less-properties](https://github.com/borodean/less-properties))
+
+Resources: **[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/calc)**
+
+**Syntax:**
+
+ .calc(, ~'')
+
+**Example:**
+
+ div {
+ .calc(width, ~'100% - 33px');
+ }
+
+ // Result
+ div {
+ -lh-property: 0;
+ width:-webkit-calc(100% - 33px);
+ width:-moz-calc(100% - 33px);
+ width:calc(100% - 33px);
+ }
diff --git a/mixins/calc/result.less b/mixins/calc/result.less
new file mode 100644
index 0000000..0167678
--- /dev/null
+++ b/mixins/calc/result.less
@@ -0,0 +1,18 @@
+ @state: 69; // Yeah totally random number
+
+ .inception (@arguments) when (@webkit_local = true) and (@moz_local = true) and (@w3c_local = true) and not (@process = 08121991) { @state: 1; -lh-property: @process; }
+ .inception (@arguments) when (@webkit_local = true) and (@moz_local = true) and (@w3c_local = true) and (@process = 08121991) {}
+ .inception (@arguments) when (@webkit_local = true) and (@moz_local = true) and not (@w3c_local = true) and not (@process = 08121991) { @state: 2; -lh-property: @process; }
+ .inception (@arguments) when (@webkit_local = true) and (@moz_local = true) and not (@w3c_local = true) and (@process = 08121991) {}
+ .inception (@arguments) when (@webkit_local = true) and not (@moz_local = true) and (@w3c_local = true) and not (@process = 08121991) { @state: 3; -lh-property: @process; }
+ .inception (@arguments) when (@webkit_local = true) and not (@moz_local = true) and (@w3c_local = true) and (@process = 08121991) {}
+ .inception (@arguments) when (@webkit_local = true) and not (@moz_local = true) and not (@w3c_local = true) and not (@process = 08121991) { @state: 4; -lh-property: @process; }
+ .inception (@arguments) when (@webkit_local = true) and not (@moz_local = true) and not (@w3c_local = true) and (@process = 08121991) {}
+ .inception (@arguments) when not (@webkit_local = true) and (@moz_local = true) and (@w3c_local = true) and not (@process = 08121991) { @state: 5; -lh-property: @process; }
+ .inception (@arguments) when not (@webkit_local = true) and (@moz_local = true) and (@w3c_local = true) and (@process = 08121991) {}
+ .inception (@arguments) when not (@webkit_local = true) and (@moz_local = true) and not (@w3c_local = true) and not (@process = 08121991) { @state: 6; -lh-property: @process; }
+ .inception (@arguments) when not (@webkit_local = true) and (@moz_local = true) and not (@w3c_local = true) and (@process = 08121991) {}
+ .inception (@arguments) when not (@webkit_local = true) and not (@moz_local = true) and (@w3c_local = true) and not (@process = 08121991) { @state: 7; -lh-property: @process; }
+ .inception (@arguments) when not (@webkit_local = true) and not (@moz_local = true) and (@w3c_local = true) and (@process = 08121991) {}
+ .inception (@arguments) when not (@webkit_local = true) and not (@moz_local = true) and not (@w3c_local = true) {}
+ .inception(@arguments);
diff --git a/mixins/column-count/column-count.js b/mixins/column-count/column-count.js
new file mode 100644
index 0000000..c2e5b44
--- /dev/null
+++ b/mixins/column-count/column-count.js
@@ -0,0 +1,22 @@
+/**
+ * ColumnCount mixin
+ */
+
+var columnCount = function columnCount(value) {
+ value = value || 'auto';
+
+ return value;
+};
+
+/**
+ * For which browsers is this mixin specified
+ */
+
+columnCount.vendors = ['webkit', 'moz'];
+
+
+/**
+ * Export mixin
+ */
+
+module.exports = columnCount;
\ No newline at end of file
diff --git a/mixins/column-count/column-count.md b/mixins/column-count/column-count.md
new file mode 100644
index 0000000..5b18d47
--- /dev/null
+++ b/mixins/column-count/column-count.md
@@ -0,0 +1,27 @@
+### | auto)
+
+**Example:**
+
+ div {
+ .column-count(3);
+ }
+
+ // Result
+ div {
+ -webkit-column-count: 0.5;
+ -moz-column-count: 0.5;
+ column-count: 0.5;
+ }
+
+
diff --git a/mixins/column-count/test.js b/mixins/column-count/test.js
new file mode 100644
index 0000000..811dfa4
--- /dev/null
+++ b/mixins/column-count/test.js
@@ -0,0 +1,9 @@
+var assert = require('assert');
+
+describe('column-count', function() {
+
+ it('should return the same value ', function(done) {
+ test.columnCount('3', '3', done);
+ });
+
+});
\ No newline at end of file
diff --git a/mixins/column-gap/column-gap.js b/mixins/column-gap/column-gap.js
new file mode 100644
index 0000000..b30a4c9
--- /dev/null
+++ b/mixins/column-gap/column-gap.js
@@ -0,0 +1,30 @@
+/**
+ * ColumnGap mixin
+ */
+
+var columnGap = function columnGap(value) {
+ value = value || 'normal';
+ var numRegex = /\d/gi;
+ var numWithoutValue = /(?:\s|^)(\d+\.?\d*)(?![^(]*\)|\w|%)/gi;
+
+ if (numRegex.test(value)) {
+ value = value.replace(numWithoutValue, function(match) {
+ return match + 'px';
+ });
+ }
+
+ return value;
+};
+
+/**
+ * For which browsers is this mixin specified
+ */
+
+columnGap.vendors = ['webkit', 'moz'];
+
+
+/**
+ * Export mixin
+ */
+
+module.exports = columnGap;
diff --git a/mixins/column-gap/column-gap.md b/mixins/column-gap/column-gap.md
new file mode 100644
index 0000000..4015182
--- /dev/null
+++ b/mixins/column-gap/column-gap.md
@@ -0,0 +1,31 @@
+### | normal)
+
+**Tips and tricks:**
+
+ If you omit units, `column-gap` adds `px` automatically.
+
+**Example:**
+
+ div {
+ .column-gap(30);
+ }
+
+ // Result
+ div {
+ -webkit-column-gap: 30px;
+ -moz-column-gap: 30px;
+ column-gap: 30px;
+ }
+
+
diff --git a/mixins/column-gap/test.js b/mixins/column-gap/test.js
new file mode 100644
index 0000000..0630b84
--- /dev/null
+++ b/mixins/column-gap/test.js
@@ -0,0 +1,13 @@
+var assert = require('assert');
+
+describe('column-gap', function() {
+
+ it('should return the same value', function(done) {
+ test.columnGap('40px', '40px', done);
+ });
+
+ it('should add default unit and return the same value', function(done) {
+ test.columnGap('22', '22px', done);
+ });
+
+});
\ No newline at end of file
diff --git a/mixins/column-rule/column-rule.js b/mixins/column-rule/column-rule.js
new file mode 100644
index 0000000..56d5f66
--- /dev/null
+++ b/mixins/column-rule/column-rule.js
@@ -0,0 +1,34 @@
+/**
+ * ColumnRule mixin
+ */
+
+var columnRule = function columnRule(value) {
+ value = value || 'medium none black';
+ var numRegex = /\d/gi;
+ var numWithoutValue = /(?:\s|^)(\d+\.?\d*)(?![^(]*\)|\w|%)/gi;
+
+ if (/^[-a-zA-Z0-9]*,/.test(value)) {
+ value = value.replace(/(?:,)(?![^(]*\))/g, '');
+ }
+
+ if (numRegex.test(value)) {
+ value = value.replace(numWithoutValue, function(match) {
+ return match + 'px';
+ });
+ }
+
+ return value;
+};
+
+/**
+ * For which browsers is this mixin specified
+ */
+
+columnRule.vendors = ['webkit', 'moz'];
+
+
+/**
+ * Export mixin
+ */
+
+module.exports = columnRule;
diff --git a/mixins/column-rule/column-rule.md b/mixins/column-rule/column-rule.md
new file mode 100644
index 0000000..082ac8d
--- /dev/null
+++ b/mixins/column-rule/column-rule.md
@@ -0,0 +1,31 @@
+### | | )
+
+**Tips and tricks:**
+
+ If you omit units, `column-rule` adds `px` automatically.
+
+**Example:**
+
+ div {
+ .column-rule(5 outset #ff00ff);
+ }
+
+ // Result
+ div {
+ -webkit-column-rule: 5px outset #ff00ff;
+ -moz-column-rule: 5px outset #ff00ff;
+ column-rule: 5px outset #ff00ff;
+ }
+
+
diff --git a/mixins/column-rule/test.js b/mixins/column-rule/test.js
new file mode 100644
index 0000000..0be7289
--- /dev/null
+++ b/mixins/column-rule/test.js
@@ -0,0 +1,13 @@
+var assert = require('assert');
+
+describe('column-rule', function() {
+
+ it('should return the same value', function(done) {
+ test.columnRule('3px outset #ff00ff', '3px outset #ff00ff', done);
+ });
+
+ it('should add default unit and return the same value', function(done) {
+ test.columnRule('5 outset #ff00ff', '5px outset #ff00ff', done);
+ });
+
+});
\ No newline at end of file
diff --git a/mixins/column-width/column-width.js b/mixins/column-width/column-width.js
new file mode 100644
index 0000000..08df500
--- /dev/null
+++ b/mixins/column-width/column-width.js
@@ -0,0 +1,30 @@
+/**
+ * ColumnWidth mixin
+ */
+
+var columnWidth = function columnWidth(value) {
+ value = value || 'auto';
+ var numRegex = /\d/gi;
+ var numWithoutValue = /(?:\s|^)(\d+\.?\d*)(?![^(]*\)|\w|%)/gi;
+
+ if (numRegex.test(value)) {
+ value = value.replace(numWithoutValue, function(match) {
+ return match + 'px';
+ });
+ }
+
+ return value;
+};
+
+/**
+ * For which browsers is this mixin specified
+ */
+
+columnWidth.vendors = ['webkit', 'moz'];
+
+
+/**
+ * Export mixin
+ */
+
+module.exports = columnWidth;
diff --git a/mixins/column-width/column-width.md b/mixins/column-width/column-width.md
new file mode 100644
index 0000000..66b6526
--- /dev/null
+++ b/mixins/column-width/column-width.md
@@ -0,0 +1,31 @@
+### | auto)
+
+**Tips and tricks:**
+
+ If you omit units, `column-width` adds `px` automatically.
+
+**Example:**
+
+ div {
+ .column-width(100px);
+ }
+
+ // Result
+ div {
+ -webkit-column-width: 100px;
+ -moz-column-width: 100px;
+ column-width: 100px;
+ }
+
+
diff --git a/mixins/column-width/test.js b/mixins/column-width/test.js
new file mode 100644
index 0000000..067f3e4
--- /dev/null
+++ b/mixins/column-width/test.js
@@ -0,0 +1,13 @@
+var assert = require('assert');
+
+describe('column-width', function() {
+
+ it('should return the same value', function(done) {
+ test.columnWidth('100px', '100px', done);
+ });
+
+ it('should add default unit and return the same value', function(done) {
+ test.columnWidth('150', '150px', done);
+ });
+
+});
\ No newline at end of file
diff --git a/mixins/columns/columns.js b/mixins/columns/columns.js
new file mode 100644
index 0000000..4e8f08f
--- /dev/null
+++ b/mixins/columns/columns.js
@@ -0,0 +1,32 @@
+/**
+ * Columns mixin
+ */
+
+var columns = function columns(value) {
+ value = value || 'auto auto';
+ var numRegex = /^\d+$/;
+
+ if (/^[-a-zA-Z0-9]*,/.test(value)) {
+ value = value.replace(/(?:,)(?![^(]*\))/g, '');
+ value = value.split(' ');
+ }
+
+ if (numRegex.test(value[0])) {
+ value[0] = value[0] + 'px';
+ }
+
+ return value.join(' ');
+};
+
+/**
+ * For which browsers is this mixin specified
+ */
+
+columns.vendors = ['webkit', 'moz'];
+
+
+/**
+ * Export mixin
+ */
+
+module.exports = columns;
\ No newline at end of file
diff --git a/mixins/columns/columns.md b/mixins/columns/columns.md
new file mode 100644
index 0000000..a9d6485
--- /dev/null
+++ b/mixins/columns/columns.md
@@ -0,0 +1,31 @@
+### | )
+
+**Tips and tricks:**
+
+ If you omit units for column-width argument, `columns` adds `px` to it automatically.
+
+**Example:**
+
+ div {
+ .columns(100 3);
+ }
+
+ // Result
+ div {
+ -webkit-columns: 100px 3;
+ -moz-columns: 100px 3;
+ columns: 100px 3;
+ }
+
+
diff --git a/mixins/columns/test.js b/mixins/columns/test.js
new file mode 100644
index 0000000..144e87a
--- /dev/null
+++ b/mixins/columns/test.js
@@ -0,0 +1,13 @@
+var assert = require('assert');
+
+describe('columns', function() {
+
+ it('should return the same value', function(done) {
+ test.columns('200px 3', '200px 3', done);
+ });
+
+ it('should add default units and return same value', function(done) {
+ test.columns('150 2', '150px 2', done);
+ });
+
+});
\ No newline at end of file
diff --git a/mixins/contrast/contrast.js b/mixins/contrast/contrast.js
new file mode 100644
index 0000000..4b1a79e
--- /dev/null
+++ b/mixins/contrast/contrast.js
@@ -0,0 +1,38 @@
+/**
+ * Contrast mixin
+ */
+
+var contrast = function contrast(value) {
+ value = value || '100%';
+ var numRegex = /\d/gi;
+ var numWithoutValue = /(?:\s|^)(\d+\.?\d*)(?![^(]*\)|\w|%)/gi;
+
+ if (numRegex.test(value)) {
+ value = value.replace(numWithoutValue, function(match) {
+ return match + '%';
+ });
+ }
+
+ return value;
+};
+
+/**
+ * Result settings
+ */
+
+contrast.result = {
+ property: 'filter',
+ value: '~"contrast({{ escape_result }})"',
+};
+
+/**
+ * For which browsers is this mixin specified
+ */
+
+contrast.vendors = ['webkit', 'moz', 'ms'];
+
+/**
+ * Export mixin
+ */
+
+module.exports = contrast;
diff --git a/mixins/contrast/contrast.md b/mixins/contrast/contrast.md
new file mode 100644
index 0000000..dbde866
--- /dev/null
+++ b/mixins/contrast/contrast.md
@@ -0,0 +1,32 @@
+### MDN **
+
+**Syntax:**
+
+Default value: 100%
+
+ .contrast()
+
+**Tips and tricks:**
+
+ If you omit units, `contrast` adds `%` automatically.
+
+**Example:**
+
+ div {
+ .contrast(200);
+ }
+
+ // Result
+ div {
+ -webkit-filter: contrast(200%);
+ -moz-filter: contrast(200%);
+ -ms-filter: contrast(200%);
+ filter: contrast(200%);
+ }
+
+
diff --git a/mixins/contrast/test.js b/mixins/contrast/test.js
new file mode 100644
index 0000000..ca6a712
--- /dev/null
+++ b/mixins/contrast/test.js
@@ -0,0 +1,10 @@
+var assert = require('assert');
+
+describe('contrast', function() {
+
+ it('should add default unit and return the value', function(done) {
+ test.resultProperty = 'filter';
+ test.contrast('200', 'contrast(200%)', done);
+ });
+
+});
\ No newline at end of file
diff --git a/mixins/display/display.js b/mixins/display/display.js
new file mode 100644
index 0000000..34654e3
--- /dev/null
+++ b/mixins/display/display.js
@@ -0,0 +1,78 @@
+/**
+ * Display (flexbox) mixin
+ */
+
+var display = function display(value) {
+
+ if (value != 'flex' || value != 'inline-flex') {
+ value = 08121991;
+ }
+
+ return value;
+};
+
+display.oldwebkit = function displayWebkit(value) {
+
+ if (value == 'flex' || value == 'inline-flex') {
+ value = '-webkit-box';
+ } else {
+ value = 08121991;
+ }
+
+ return value;
+};
+
+display.moz = function displayWebkit(value) {
+
+ if (value == 'flex') {
+ value = '-ms-flexbox';
+ } else if (value == 'inline-flex') {
+ value = '-ms-inline-flexbox';
+ } else {
+ value = 08121991;
+ }
+
+ return value;
+};
+
+display.ms = function displayWebkit(value) {
+
+ if (value == 'flex' || value == 'inline-flex') {
+ value = '-moz-box';
+ } else {
+ value = 08121991;
+ }
+
+ return value;
+};
+
+display.webkit = function displayWebkit(value) {
+
+ if (value == 'flex' || value == 'inline-flex') {
+ value = '-webkit-' + value;
+ } else {
+ value = 08121991;
+ }
+
+ return value;
+};
+
+/**
+ * We don't want to prefix display property
+ */
+
+display.result = {
+ prefixed: false,
+};
+
+/**
+ * For which browsers is this mixin specified
+ */
+
+display.vendors = ['oldwebkit', 'moz', 'webkit', 'ms'];
+
+/**
+ * Export mixin
+ */
+
+module.exports = display;
\ No newline at end of file
diff --git a/mixins/display/display.md b/mixins/display/display.md
new file mode 100644
index 0000000..988c5c2
--- /dev/null
+++ b/mixins/display/display.md
@@ -0,0 +1,26 @@
+### | )
+
+**Example:**
+
+ div {
+ .display(flex);
+ }
+
+ // Result
+ div {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: -webkit-flex;
+ display: -moz-box;
+ }
+
+
diff --git a/mixins/display/test.js b/mixins/display/test.js
new file mode 100644
index 0000000..57ecce5
--- /dev/null
+++ b/mixins/display/test.js
@@ -0,0 +1,16 @@
+var assert = require('assert');
+
+describe('display', function () {
+
+ /**
+ * If you want to test this code, comment 'prefixed:false' from display.js
+ */
+ // it('should prefix and return value', function (done) {
+ // test.display.webkit('flex', '-webkit-flex', done);
+ // });
+
+ // it('should prefix and return value', function (done) {
+ // test.display.oldwebkit('flex', '-webkit-box', done);
+ // });
+
+});
\ No newline at end of file
diff --git a/mixins/drop-shadow/drop-shadow.js b/mixins/drop-shadow/drop-shadow.js
new file mode 100644
index 0000000..c7f6cec
--- /dev/null
+++ b/mixins/drop-shadow/drop-shadow.js
@@ -0,0 +1,45 @@
+/**
+ * DropShadow mixin
+ */
+
+var dropShadow = function dropShadow(value) {
+ value = value || 08121991;
+ if (value == 08121991) {
+ return value;
+ }
+ var numRegex = /\d/gi;
+ var numWithoutValue = /(?:\s|^)(\d+\.?\d*)(?![^(]*\)|\w|%)/gi;
+
+ if (/^[-a-zA-Z0-9()]*,/.test(value)) {
+ value = value.replace(/(?:,)(?![^(]*\))/g, '');
+ }
+
+ if (numRegex.test(value)) {
+ value = value.replace(numWithoutValue, function(match) {
+ return match + 'px';
+ });
+ }
+
+ return value;
+};
+
+/**
+ * Result settings
+ */
+
+dropShadow.result = {
+ property: 'filter',
+ value: 'drop-shadow({{ result }})',
+};
+
+/**
+ * For which browsers is this mixin specified
+ */
+
+dropShadow.vendors = ['webkit', 'moz', 'ms'];
+
+/**
+ * Export mixin
+ */
+
+module.exports = dropShadow;
diff --git a/mixins/drop-shadow/drop-shadow.md b/mixins/drop-shadow/drop-shadow.md
new file mode 100644
index 0000000..fcfa255
--- /dev/null
+++ b/mixins/drop-shadow/drop-shadow.md
@@ -0,0 +1,30 @@
+### MDN **
+
+**Syntax:**
+
+ .drop-shadow( [ | | ])
+
+**Tips and tricks:**
+
+ If you omit units, `drop-shadow` adds `px` automatically.
+
+**Example:**
+
+ div {
+ .drop-shadow(16 16 10 black);
+ }
+
+ // Result
+ div {
+ -webkit-filter: drop-shadow(16px 16px 10px #000000);
+ -moz-filter: drop-shadow(16px 16px 10px #000000);
+ -ms-filter: drop-shadow(16px 16px 10px #000000);
+ filter: drop-shadow(16px 16px 10px #000000);
+ }
+
+
diff --git a/mixins/drop-shadow/test.js b/mixins/drop-shadow/test.js
new file mode 100644
index 0000000..7c757ac
--- /dev/null
+++ b/mixins/drop-shadow/test.js
@@ -0,0 +1,10 @@
+var assert = require('assert');
+
+describe('drop-shadow', function() {
+
+ it('should add default unit and return the value', function(done) {
+ test.resultProperty = 'filter';
+ test.dropShadow('16 16 10 black', 'drop-shadow(16px 16px 10px #000000)', done);
+ });
+
+});
\ No newline at end of file
diff --git a/mixins/filter/filter.js b/mixins/filter/filter.js
new file mode 100644
index 0000000..f7ec831
--- /dev/null
+++ b/mixins/filter/filter.js
@@ -0,0 +1,26 @@
+/**
+ * Filter mixin
+ */
+
+var filter = function filter(value) {
+ value = value || 'none';
+
+ if (/^[-a-zA-Z0-9().]*,/.test(value)) {
+ value = value.replace(/(?:,)(?![^(]*\))/g, '');
+ }
+
+ return value;
+};
+
+/**
+ * For which browsers is this mixin specified
+ */
+
+filter.vendors = ['webkit', 'moz', 'ms'];
+
+
+/**
+ * Export mixin
+ */
+
+module.exports = filter;
\ No newline at end of file
diff --git a/mixins/filter/filter.md b/mixins/filter/filter.md
new file mode 100644
index 0000000..75c7384
--- /dev/null
+++ b/mixins/filter/filter.md
@@ -0,0 +1,28 @@
+### *)
+
+**Example:**
+
+ div {
+ .filter(grayscale(0.5) blur(10px));
+ }
+
+ // Result
+ div {
+ -webkit-filter: grayscale(0.5) blur(10px);
+ -moz-filter: grayscale(0.5) blur(10px);
+ -ms-filter: grayscale(0.5) blur(10px);
+ filter: grayscale(0.5) blur(10px);
+ }
+
+
diff --git a/mixins/filter/test.js b/mixins/filter/test.js
new file mode 100644
index 0000000..34007eb
--- /dev/null
+++ b/mixins/filter/test.js
@@ -0,0 +1,9 @@
+var assert = require('assert');
+
+describe('filter', function() {
+
+ it('should return the same value', function(done) {
+ test.filter('grayscale(0.5) blur(10px)', 'grayscale(0.5) blur(10px)', done);
+ });
+
+});
\ No newline at end of file
diff --git a/mixins/flex-basis/flex-basis.js b/mixins/flex-basis/flex-basis.js
new file mode 100644
index 0000000..89544bb
--- /dev/null
+++ b/mixins/flex-basis/flex-basis.js
@@ -0,0 +1,29 @@
+/**
+ * FlexBasis mixin
+ */
+
+var flexBasis = function flexBasis(value) {
+ value = value || 'auto';
+ var numRegex = /\d/gi;
+ var numWithoutValue = /(?:\s|^)(\d+\.?\d*)(?![^(]*\)|\w|%)/gi;
+
+ if (numRegex.test(value)) {
+ value = value.replace(numWithoutValue, function(match) {
+ return match + 'px';
+ });
+ }
+
+ return value;
+};
+
+/**
+ * For which browsers is this mixin specified
+ */
+
+flexBasis.vendors = ['webkit'];
+
+/**
+ * Export mixin
+ */
+
+module.exports = flexBasis;
diff --git a/mixins/flex-basis/flex-basis.md b/mixins/flex-basis/flex-basis.md
new file mode 100644
index 0000000..2a26a67
--- /dev/null
+++ b/mixins/flex-basis/flex-basis.md
@@ -0,0 +1,30 @@
+### )
+
+**Tips and tricks:**
+
+ If you omit units, `flex-basis` adds `px` automatically.
+
+**Example:**
+
+ div {
+ .flex-basis(100);
+ }
+
+ // Result
+ div {
+ -webkit-flex-basis: 100;
+ flex-basis: 100px;
+ }
+
+
diff --git a/mixins/flex-basis/test.js b/mixins/flex-basis/test.js
new file mode 100644
index 0000000..4552310
--- /dev/null
+++ b/mixins/flex-basis/test.js
@@ -0,0 +1,9 @@
+var assert = require('assert');
+
+describe('flex-basis', function () {
+
+ it('should add unit and return same value', function (done) {
+ test.flexBasis('100', '100px', done);
+ });
+
+});
\ No newline at end of file
diff --git a/mixins/flex-direction/flex-direction.js b/mixins/flex-direction/flex-direction.js
new file mode 100644
index 0000000..10e4978
--- /dev/null
+++ b/mixins/flex-direction/flex-direction.js
@@ -0,0 +1,104 @@
+/**
+ * FlexDirection mixin
+ */
+
+var flexDirection = function flexDirection(value) {
+ value = value || 'row';
+
+ return value;
+};
+
+flexDirection.oldestwebkit = function oldestwebkitFlexDirection(value) {
+
+ if (value == 'row'|| value == 'column') {
+ value = 'normal';
+ }
+ else if (value == 'row-reverse' || value == 'column-reverse') {
+ value = 'reverse';
+ }
+ else {
+ value = 08121991;
+ }
+
+ return value;
+};
+
+flexDirection.oldermoz = function oldermozFlexDirection(value) {
+
+ if (value == 'row'|| value == 'column') {
+ value = 'normal';
+ }
+ else if (value == 'row-reverse' || value == 'column-reverse') {
+ value = 'reverse';
+ }
+ else {
+ value = 08121991;
+ }
+
+ return value;
+};
+
+flexDirection.olderwebkit = function olderwebkitFlexDirection(value) {
+
+ if (value == 'row' || value == 'row-reverse') {
+ value = 'horizontal';
+ }
+ else if (value == 'column' || value == 'column-reverse') {
+ value = 'vertical';
+ }
+ else {
+ value = 08121991;
+ }
+
+ return value;
+};
+
+flexDirection.moz = function oldermozFlexDirection(value) {
+
+ if (value == 'row' || value == 'row-reverse') {
+ value = 'horizontal';
+ }
+ else if (value == 'column' || value == 'column-reverse') {
+ value = 'vertical';
+ }
+ else {
+ value = 08121991;
+ }
+
+ return value;
+};
+
+/**
+ * Older syntax have different properties
+ */
+
+flexDirection.result = {
+ oldestwebkit: {
+ property: '-webkit-box-direction',
+ prefixed: false
+ },
+ oldermoz: {
+ property: '-moz-box-direction',
+ prefixed: false
+ },
+ olderwebkit: {
+ property: '-webkit-box-orient',
+ prefixed: false
+ },
+ moz: {
+ property: '-moz-box-orient',
+ prefixed: false
+ }
+};
+
+/**
+ * For which browsers is this mixin specified
+ */
+
+flexDirection.vendors = ['oldestwebkit','oldermoz','olderwebkit','moz','webkit', 'ms'];
+
+/**
+ * Export mixin
+ */
+
+module.exports = flexDirection;
\ No newline at end of file
diff --git a/mixins/flex-direction/flex-direction.md b/mixins/flex-direction/flex-direction.md
new file mode 100644
index 0000000..512000b
--- /dev/null
+++ b/mixins/flex-direction/flex-direction.md
@@ -0,0 +1,31 @@
+### )
+
+**Example:**
+
+ div {
+ .flex-grow(2);
+ }
+
+ // Result
+ div {
+ -webkit-flex-grow: 2;
+ flex-grow: 2;
+ }
+
+
diff --git a/mixins/flex-grow/test.js b/mixins/flex-grow/test.js
new file mode 100644
index 0000000..3d4f712
--- /dev/null
+++ b/mixins/flex-grow/test.js
@@ -0,0 +1,9 @@
+var assert = require('assert');
+
+describe('flex-grow', function () {
+
+ it('should return the same value', function (done) {
+ test.flexGrow('2', '2', done);
+ });
+
+});
\ No newline at end of file
diff --git a/mixins/flex-shrink/flex-shrink.js b/mixins/flex-shrink/flex-shrink.js
new file mode 100644
index 0000000..1f89043
--- /dev/null
+++ b/mixins/flex-shrink/flex-shrink.js
@@ -0,0 +1,21 @@
+/**
+ * FlexShrink mixin
+ */
+
+var flexShrink = function flexShrink(value) {
+ value = value || '1';
+
+ return value;
+};
+
+/**
+ * For which browsers is this mixin specified
+ */
+
+flexShrink.vendors = ['webkit'];
+
+/**
+ * Export mixin
+ */
+
+module.exports = flexShrink;
\ No newline at end of file
diff --git a/mixins/flex-shrink/flex-shrink.md b/mixins/flex-shrink/flex-shrink.md
new file mode 100644
index 0000000..4fa109a
--- /dev/null
+++ b/mixins/flex-shrink/flex-shrink.md
@@ -0,0 +1,26 @@
+### )
+
+**Example:**
+
+ div {
+ .flex-shrink(2);
+ }
+
+ // Result
+ div {
+ -webkit-flex-shrink: 2;
+ flex-shrink: 2;
+ }
+
+
diff --git a/mixins/flex-shrink/test.js b/mixins/flex-shrink/test.js
new file mode 100644
index 0000000..bb2e011
--- /dev/null
+++ b/mixins/flex-shrink/test.js
@@ -0,0 +1,9 @@
+var assert = require('assert');
+
+describe('flex-shrink', function () {
+
+ it('should return the same value', function (done) {
+ test.flexShrink('something', 'something', done);
+ });
+
+});
\ No newline at end of file
diff --git a/mixins/flex-wrap/flex-wrap.js b/mixins/flex-wrap/flex-wrap.js
new file mode 100644
index 0000000..91ecec0
--- /dev/null
+++ b/mixins/flex-wrap/flex-wrap.js
@@ -0,0 +1,21 @@
+/**
+ * FlexWrap mixin
+ */
+
+var flexWrap = function flexWrap(value) {
+ value = value || 'nowrap';
+
+ return value;
+};
+
+/**
+ * For which browsers is this mixin specified
+ */
+
+flexWrap.vendors = ['webkit','ms'];
+
+/**
+ * Export mixin
+ */
+
+module.exports = flexWrap;
\ No newline at end of file
diff --git a/mixins/flex-wrap/flex-wrap.md b/mixins/flex-wrap/flex-wrap.md
new file mode 100644
index 0000000..0324630
--- /dev/null
+++ b/mixins/flex-wrap/flex-wrap.md
@@ -0,0 +1,27 @@
+### | ])
+
+**Example:**
+
+ div {
+ .flex(1 3 100px);
+ }
+
+ // Result
+ div {
+ -webkit-box-flex: 1;
+ -moz-box-flex: 1;
+ -webkit-flex: 1 3 100px;
+ -ms-flex: 1 3 100px;
+ flex: 1 3 100px;
+ }
+
+
diff --git a/mixins/flex/test.js b/mixins/flex/test.js
new file mode 100644
index 0000000..deb4d26
--- /dev/null
+++ b/mixins/flex/test.js
@@ -0,0 +1,12 @@
+var assert = require('assert');
+
+describe('flex', function () {
+
+ /**
+ * If you want to test this code, comment 'flex.result' from flex.js
+ */
+ // it('should return first value', function (done) {
+ // test.flex.moz('1 3 100px', '1', done);
+ // });
+
+});
diff --git a/mixins/font-face/font-face.less b/mixins/font-face/font-face.less
new file mode 100644
index 0000000..714aae7
--- /dev/null
+++ b/mixins/font-face/font-face.less
@@ -0,0 +1,12 @@
+.font-face(@fontname, @fontfile, @fontweight:normal, @fontstyle:normal) {
+
+ font-family: "@{fontname}";
+ src: url("@{fontfile}-webfont.eot");
+ src: url("@{fontfile}-webfont.eot?#iefix") format("embedded-opentype"),
+ url("@{fontfile}-webfont.woff") format("woff"),
+ url("@{fontfile}-webfont.ttf") format("truetype"),
+ url("@{fontfile}-webfont.svg#@{fontname}") format("svg");
+ font-weight: @fontweight;
+ font-style: @fontstyle;
+
+}
\ No newline at end of file
diff --git a/mixins/font-face/font-face.md b/mixins/font-face/font-face.md
new file mode 100644
index 0000000..f447367
--- /dev/null
+++ b/mixins/font-face/font-face.md
@@ -0,0 +1,27 @@
+### MDN **
+
+**Syntax:**
+
+Default value: 0
+
+ .grayscale()
+
+**Tips and tricks:**
+
+ If you omit units, `grayscale` adds `%` automatically.
+
+**Example:**
+
+ div {
+ .grayscale(50);
+ }
+
+ // Result
+ div {
+ -webkit-filter: grayscale(50%);
+ -moz-filter: grayscale(50%);
+ -ms-filter: grayscale(50%);
+ filter: grayscale(50%);
+ }
+
+
diff --git a/mixins/grayscale/test.js b/mixins/grayscale/test.js
new file mode 100644
index 0000000..b8ea055
--- /dev/null
+++ b/mixins/grayscale/test.js
@@ -0,0 +1,10 @@
+var assert = require('assert');
+
+describe('grayscale', function() {
+
+ it('should add default unit and return the value', function(done) {
+ test.resultProperty = 'filter';
+ test.grayscale('50', 'grayscale(50%)', done);
+ });
+
+});
\ No newline at end of file
diff --git a/mixins/header.less b/mixins/header.less
new file mode 100644
index 0000000..90eda1d
--- /dev/null
+++ b/mixins/header.less
@@ -0,0 +1,9 @@
+// * =========================================================== *
+// < LESSHat >
+// * =========================================================== *
+//
+// Made with Energy drinks in Prague, Czech Republic.
+// Handcrafted by Petr Brzek, lesshat.com
+// Works great with CSS Hat csshat.com
+
+// version: v{{ version }}
diff --git a/mixins/hue-rotate/hue-rotate.js b/mixins/hue-rotate/hue-rotate.js
new file mode 100644
index 0000000..9c09c12
--- /dev/null
+++ b/mixins/hue-rotate/hue-rotate.js
@@ -0,0 +1,38 @@
+/**
+ * HueRotate mixin
+ */
+
+var hueRotate = function hueRotate(value) {
+ value = value || '0';
+ var numRegex = /\d/gi;
+ var numWithoutValue = /(?:\s|^)(\d+\.?\d*)(?![^(]*\)|\w|%)/gi;
+
+ if (numRegex.test(value)) {
+ value = value.replace(numWithoutValue, function(match) {
+ return match + 'deg';
+ });
+ }
+
+ return value;
+};
+
+/**
+ * Result settings
+ */
+
+hueRotate.result = {
+ property: 'filter',
+ value: 'hue-rotate({{ result }})',
+};
+
+/**
+ * For which browsers is this mixin specified
+ */
+
+hueRotate.vendors = ['webkit', 'moz', 'ms'];
+
+/**
+ * Export mixin
+ */
+
+module.exports = hueRotate;
diff --git a/mixins/hue-rotate/hue-rotate.md b/mixins/hue-rotate/hue-rotate.md
new file mode 100644
index 0000000..c2d5bf0
--- /dev/null
+++ b/mixins/hue-rotate/hue-rotate.md
@@ -0,0 +1,32 @@
+### MDN **
+
+**Syntax:**
+
+Default value: 0
+
+ .hue-rotate()
+
+**Tips and tricks:**
+
+ If you omit units, `hue-rotate` adds `deg` automatically.
+
+**Example:**
+
+ div {
+ .hue-rotate(50);
+ }
+
+ // Result
+ div {
+ -webkit-filter: hue-rotate(50deg);
+ -moz-filter: hue-rotate(50deg);
+ -ms-filter: hue-rotate(50deg);
+ filter: hue-rotate(50deg);
+ }
+
+
diff --git a/mixins/hue-rotate/test.js b/mixins/hue-rotate/test.js
new file mode 100644
index 0000000..dc84330
--- /dev/null
+++ b/mixins/hue-rotate/test.js
@@ -0,0 +1,10 @@
+var assert = require('assert');
+
+describe('hue-rotate', function () {
+
+ it('should add default unit and return the value', function (done) {
+ test.resultProperty = 'filter';
+ test.hueRotate('50', 'hue-rotate(50deg)', done);
+ });
+
+});
\ No newline at end of file
diff --git a/mixins/invert/invert.js b/mixins/invert/invert.js
new file mode 100644
index 0000000..a25299e
--- /dev/null
+++ b/mixins/invert/invert.js
@@ -0,0 +1,38 @@
+/**
+ * Invert mixin
+ */
+
+var invert = function invert (value) {
+ value = value || '100%';
+ var numRegex = /\d/gi;
+ var numWithoutValue = /(?:\s|^)(\d+\.?\d*)(?![^(]*\)|\w|%)/gi;
+
+ if (numRegex.test(value)) {
+ value = value.replace(numWithoutValue, function(match) {
+ return match + '%';
+ });
+ }
+
+ return value;
+};
+
+/**
+ * Result settings
+ */
+
+invert.result = {
+ property: 'filter',
+ value: 'invert({{ result }})',
+};
+
+/**
+ * For which browsers is this mixin specified
+ */
+
+invert.vendors = ['webkit','moz','ms'];
+
+/**
+ * Export mixin
+ */
+
+module.exports = invert;
diff --git a/mixins/invert/invert.md b/mixins/invert/invert.md
new file mode 100644
index 0000000..96944fc
--- /dev/null
+++ b/mixins/invert/invert.md
@@ -0,0 +1,32 @@
+### MDN **
+
+**Syntax:**
+
+Default value: 0
+
+ .invert()
+
+**Tips and tricks:**
+
+ If you omit units, `invert` adds `%` automatically.
+
+**Example:**
+
+ div {
+ .invert(100);
+ }
+
+ // Result
+ div {
+ -webkit-filter: invert(100%);
+ -moz-filter: invert(100%);
+ -ms-filter: invert(100%);
+ filter: invert(100%);
+ }
+
+
diff --git a/mixins/invert/test.js b/mixins/invert/test.js
new file mode 100644
index 0000000..9d3a8c0
--- /dev/null
+++ b/mixins/invert/test.js
@@ -0,0 +1,10 @@
+var assert = require('assert');
+
+describe('invert', function () {
+
+ it('should add default units and return the value', function (done) {
+ test.resultProperty = 'filter';
+ test.invert('50', 'invert(50%)', done);
+ });
+
+});
\ No newline at end of file
diff --git a/mixins/justify-content/justify-content.js b/mixins/justify-content/justify-content.js
new file mode 100644
index 0000000..9368f99
--- /dev/null
+++ b/mixins/justify-content/justify-content.js
@@ -0,0 +1,91 @@
+/**
+ * JustifyContent (flexbox) mixin
+ */
+
+var justifyContent = function justifyContent(value) {
+ value = value || 'flex-start';
+
+ return value;
+};
+
+justifyContent.oldestWebkit = function oldestWebkitjustifyContent(value) {
+ value = value || 'start';
+
+ if (value == 'flex-start') {
+ value = 'start';
+ }
+ else if (value == 'flex-end') {
+ value = 'end';
+ }
+ else if (value == 'space-between' || value == 'space-around') {
+ value = 'justify';
+ }
+
+ return value;
+};
+
+justifyContent.moz = function mozjustifyContent(value) {
+ value = value || 'start';
+
+ if (value == 'flex-start') {
+ value = 'start';
+ }
+ else if (value == 'flex-end') {
+ value = 'end';
+ }
+ else if (value == 'space-between' || value == 'space-around') {
+ value = 'justify';
+ }
+
+ return value;
+};
+
+justifyContent.ms = function msjustifyContent(value) {
+ value = value || 'start';
+
+ if (value == 'flex-start') {
+ value = 'start';
+ }
+ else if (value == 'flex-end') {
+ value = 'end';
+ }
+ else if (value == 'space-between') {
+ value = 'justify';
+ }
+ else if (value == 'space-around') {
+ value = 'distribute';
+ }
+
+ return value;
+};
+
+/**
+ * Older syntax have different properties
+ */
+
+ justifyContent.result = {
+ oldestwebkit: {
+ property: '-webkit-box-pack',
+ prefixed: false
+ },
+ moz: {
+ property: '-moz-box-pack',
+ prefixed: false
+ },
+ ms: {
+ property: '-ms-flex-pack',
+ prefixed: false
+ }
+ };
+
+/**
+ * For which browsers is this mixin specified
+ */
+
+justifyContent.vendors = ['oldestwebkit','moz','webkit','ms'];
+
+/**
+ * Export mixin
+ */
+
+module.exports = justifyContent;
\ No newline at end of file
diff --git a/mixins/justify-content/justify-content.md b/mixins/justify-content/justify-content.md
new file mode 100644
index 0000000..9c78b20
--- /dev/null
+++ b/mixins/justify-content/justify-content.md
@@ -0,0 +1,29 @@
+### , ')
+
+**Tips and tricks:**
+
+ Properties inside `` are automatically prefixed, if it's needed.
+
+**Example:**
+
+ .keyframes(~'animationName, 0%{ transform: scale(1.5); color: blue; } 100%{ transform: scale(2); color: red }');
+
+ // Result
+ lesshat-selector {-lh-property: 0; }
+ @-webkit-keyframes animationName{ 0%{ -webkit-transform: scale(1.5); color: blue; } 100%{ -webkit-transform: scale(2); color: red }}
+ @-moz-keyframes animationName{ 0%{ -moz-transform: scale(1.5); color: blue; } 100%{ -moz-transform: scale(2); color: red }}
+ @-o-keyframes animationName{ 0%{ -o-transform: scale(1.5); color: blue; } 100%{ -o-transform: scale(2); color: red }}
+ @keyframes animationName{ 0%{ transform: scale(1.5); color: blue; } 100%{ transform: scale(2); color: red };}
+
+
diff --git a/mixins/keyframes/result.less b/mixins/keyframes/result.less
new file mode 100644
index 0000000..e6d7dc2
--- /dev/null
+++ b/mixins/keyframes/result.less
@@ -0,0 +1,31 @@
+ @state: 69; // Yeah totally random number
+
+ .inception (@arguments) when (@webkit_local = true) and (@moz_local = true) and (@opera_local = true) and (@w3c_local = true) and not (@process = 08121991) { @state: 1; lesshat-selector { -lh-property: @process; } }
+ .inception (@arguments) when (@webkit_local = true) and (@moz_local = true) and (@opera_local = true) and (@w3c_local = true) and (@process = 08121991) {}
+ .inception (@arguments) when (@webkit_local = true) and (@moz_local = true) and not (@opera_local = true) and (@w3c_local = true) and not (@process = 08121991) { @state:2; lesshat-selector { -lh-property: @process; } }
+ .inception (@arguments) when (@webkit_local = true) and (@moz_local = true) and not (@opera_local = true) and (@w3c_local = true) and (@process = 08121991) {}
+ .inception (@arguments) when (@webkit_local = true) and (@moz_local = true) and not (@opera_local = true) and not (@w3c_local = true) and not (@process = 08121991) { @state:3; lesshat-selector { -lh-property: @process; } }
+ .inception (@arguments) when (@webkit_local = true) and (@moz_local = true) and not (@opera_local = true) and not (@w3c_local = true) and (@process = 08121991) {}
+ .inception (@arguments) when (@webkit_local = true) and not (@moz_local = true) and (@opera_local = true) and not (@w3c_local = true) and not (@process = 08121991) { @state:4; lesshat-selector { -lh-property: @process; } }
+ .inception (@arguments) when (@webkit_local = true) and not (@moz_local = true) and (@opera_local = true) and not (@w3c_local = true) and (@process = 08121991) {}
+ .inception (@arguments) when (@webkit_local = true) and not (@moz_local = true) and not (@opera_local = true) and (@w3c_local = true) and not (@process = 08121991) { @state:5; lesshat-selector { -lh-property: @process; } }
+ .inception (@arguments) when (@webkit_local = true) and not (@moz_local = true) and not (@opera_local = true) and (@w3c_local = true) and (@process = 08121991) {}
+ .inception (@arguments) when (@webkit_local = true) and not (@moz_local = true) and not (@opera_local = true) and not (@w3c_local = true) and not (@process = 08121991) { @state:6; lesshat-selector { -lh-property: @process; } }
+ .inception (@arguments) when (@webkit_local = true) and not (@moz_local = true) and not (@opera_local = true) and not (@w3c_local = true) and (@process = 08121991) {}
+ .inception (@arguments) when not (@webkit_local = true) and (@moz_local = true) and (@opera_local = true) and (@w3c_local = true) and not (@process = 08121991) { @state:7; lesshat-selector { -lh-property: @process; } }
+ .inception (@arguments) when not (@webkit_local = true) and (@moz_local = true) and (@opera_local = true) and (@w3c_local = true) and (@process = 08121991) {}
+ .inception (@arguments) when not (@webkit_local = true) and (@moz_local = true) and (@opera_local = true) and not (@w3c_local = true) and not (@process = 08121991) { @state:8; lesshat-selector { -lh-property: @process; } }
+ .inception (@arguments) when not (@webkit_local = true) and (@moz_local = true) and (@opera_local = true) and not (@w3c_local = true) and (@process = 08121991) {}
+ .inception (@arguments) when not (@webkit_local = true) and (@moz_local = true) and not (@opera_local = true) and (@w3c_local = true) and not (@process = 08121991) { @state:9; lesshat-selector { -lh-property: @process; } }
+ .inception (@arguments) when not (@webkit_local = true) and (@moz_local = true) and not (@opera_local = true) and (@w3c_local = true) and (@process = 08121991) {}
+ .inception (@arguments) when not (@webkit_local = true) and (@moz_local = true) and not (@opera_local = true) and not (@w3c_local = true) and not (@process = 08121991) { @state:10; lesshat-selector { -lh-property: @process; } }
+ .inception (@arguments) when not (@webkit_local = true) and (@moz_local = true) and not (@opera_local = true) and not (@w3c_local = true) and (@process = 08121991) {}
+ .inception (@arguments) when not (@webkit_local = true) and not (@moz_local = true) and (@opera_local = true) and (@w3c_local = true) and not (@process = 08121991) { @state:11; lesshat-selector { -lh-property: @process; } }
+ .inception (@arguments) when not (@webkit_local = true) and not (@moz_local = true) and (@opera_local = true) and (@w3c_local = true) and (@process = 08121991) {}
+ .inception (@arguments) when not (@webkit_local = true) and not (@moz_local = true) and (@opera_local = true) and not (@w3c_local = true) and not (@process = 08121991) { @state:12; lesshat-selector { -lh-property: @process; } }
+ .inception (@arguments) when not (@webkit_local = true) and not (@moz_local = true) and (@opera_local = true) and not (@w3c_local = true) and (@process = 08121991) {}
+ .inception (@arguments) when not (@webkit_local = true) and not (@moz_local = true) and not (@opera_local = true) and (@w3c_local = true) and not (@process = 08121991) { @state:12; lesshat-selector { -lh-property: @process; } }
+ .inception (@arguments) when not (@webkit_local = true) and not (@moz_local = true) and not (@opera_local = true) and (@w3c_local = true) and (@process = 08121991) {}
+ .inception (@arguments) when not (@webkit_local = true) and not (@moz_local = true) and not (@opera_local = true) and not (@w3c_local = true) {}
+
+ .inception(@arguments);
diff --git a/mixins/opacity/opacity.js b/mixins/opacity/opacity.js
new file mode 100644
index 0000000..33c9ef3
--- /dev/null
+++ b/mixins/opacity/opacity.js
@@ -0,0 +1,49 @@
+/**
+ * Opacity mixin
+ */
+
+var opacity = function opacity(value) {
+ value = value || '1';
+
+ return value;
+};
+
+opacity.ms = function opacity(value) {
+ value = value || 'filter: alpha(opacity=100)';
+
+ return 'alpha(opacity=' + Math.floor(value * 100) + ')';
+};
+
+/**
+ * Result settings
+ */
+
+opacity.result = {
+ ms: {
+ property: 'filter',
+ prefixed: false,
+ }
+}
+
+/**
+ * PrependCSS
+ */
+
+opacity.prependCSS = {
+ ms: 'zoom: 1',
+};
+
+/**
+ * For which browsers is this mixin specified
+ */
+
+opacity.vendors = ['ms', 'webkit', 'moz'];
+
+// Don't want ms filter syntax by default
+opacity.vendors.ms = false;
+
+/**
+ * Export mixin
+ */
+
+module.exports = opacity;
\ No newline at end of file
diff --git a/mixins/opacity/opacity.md b/mixins/opacity/opacity.md
new file mode 100644
index 0000000..b3879e4
--- /dev/null
+++ b/mixins/opacity/opacity.md
@@ -0,0 +1,33 @@
+### )
+
+**Tips and tricks:**
+
+ You can enable old filter syntax for IE6, just set `@ms_local: true`.
+
+**Example:**
+
+ div {
+ .opacity(.5);
+ }
+
+ // Result
+ div {
+ -webkit-opacity: 0.5;
+ -moz-opacity: 0.5;
+ opacity: 0.5;
+ }
+
+
diff --git a/mixins/opacity/test.js b/mixins/opacity/test.js
new file mode 100644
index 0000000..a4cc386
--- /dev/null
+++ b/mixins/opacity/test.js
@@ -0,0 +1,15 @@
+var assert = require('assert');
+
+describe('opacity', function() {
+
+ it('should return the same value', function(done) {
+ test.opacity('0.5', '0.5', done);
+ });
+
+ // Doesn't work now, because we set opacity.vendors.ms = false
+ // it('should return filter property for IE', function(done) {
+ // test.resultProperty = 'filter';
+ // test.opacity('0.5', 'alpha(opacity=50)', done);
+ // });
+
+});
\ No newline at end of file
diff --git a/mixins/order/order.js b/mixins/order/order.js
new file mode 100644
index 0000000..d6b11a9
--- /dev/null
+++ b/mixins/order/order.js
@@ -0,0 +1,40 @@
+/**
+ * Order mixin
+ */
+
+var order = function order(value) {
+ value = value || '0';
+
+ return value;
+};
+
+/**
+ * Older syntax have different properties
+ */
+
+order.result = {
+ olderwebkit: {
+ property: '-webkit-box-ordinal-group',
+ prefixed: false
+ },
+ moz: {
+ property: '-moz-box-ordinal-group',
+ prefixed: false
+ },
+ ms: {
+ property: '-ms-flex-order',
+ prefixed: false
+ }
+};
+
+/**
+ * For which browsers is this mixin specified
+ */
+
+order.vendors = ['olderwebkit', 'moz', 'ms', 'webkit'];
+
+/**
+ * Export mixin
+ */
+
+module.exports = order;
\ No newline at end of file
diff --git a/mixins/order/order.md b/mixins/order/order.md
new file mode 100644
index 0000000..af5d9c2
--- /dev/null
+++ b/mixins/order/order.md
@@ -0,0 +1,29 @@
+### )
+
+**Example:**
+
+ div {
+ .order(1);
+ }
+
+ // Result
+ div {
+ -webkit-box-ordinal-group: 1;
+ -moz-box-ordinal-group: 1;
+ -ms-flex-order: 1;
+ -webkit-order: 1;
+ order: 1;
+ }
+
+
diff --git a/mixins/order/test.js b/mixins/order/test.js
new file mode 100644
index 0000000..491da5a
--- /dev/null
+++ b/mixins/order/test.js
@@ -0,0 +1,9 @@
+var assert = require('assert');
+
+describe('order', function () {
+
+ it('should return the same value', function (done) {
+ test.order('1', '1', done);
+ });
+
+});
\ No newline at end of file
diff --git a/mixins/perspective-origin/perspective-origin.js b/mixins/perspective-origin/perspective-origin.js
new file mode 100644
index 0000000..9927435
--- /dev/null
+++ b/mixins/perspective-origin/perspective-origin.js
@@ -0,0 +1,34 @@
+/**
+ * PerspectiveOrigin mixin
+ */
+
+var perspectiveOrigin = function perspectiveOrigin(value) {
+ value = value || '50% 50%';
+ var numRegex = /\d/gi;
+ var numWithoutValue = /(?:\s|^)(\d+\.?\d*)(?![^(]*\)|\w|%)/gi;
+
+ if (/^[-a-zA-Z0-9]*,/.test(value)) {
+ value = value.replace(/(?:,)(?![^(]*\))/g, '');
+ }
+
+ if (numRegex.test(value)) {
+ value = value.replace(numWithoutValue, function(match) {
+ return match + '%';
+ });
+ }
+
+ return value;
+};
+
+/**
+ * For which browsers is this mixin specified
+ */
+
+perspectiveOrigin.vendors = ['webkit', 'moz'];
+
+
+/**
+ * Export mixin
+ */
+
+module.exports = perspectiveOrigin;
diff --git a/mixins/perspective-origin/perspective-origin.md b/mixins/perspective-origin/perspective-origin.md
new file mode 100644
index 0000000..ee40b94
--- /dev/null
+++ b/mixins/perspective-origin/perspective-origin.md
@@ -0,0 +1,31 @@
+### | | constants | inherit)
+
+**Tips and tricks:**
+
+ If you omit units, `perspective-origin` adds `%` automatically.
+
+**Example:**
+
+ div {
+ .perspective-origin(top left);
+ }
+
+ // Result
+ div {
+ -moz-perspective-origin: top left;
+ -webkit-perspective-origin: top left;
+ perspective-origin: top left;
+ }
+
+
diff --git a/mixins/perspective-origin/test.js b/mixins/perspective-origin/test.js
new file mode 100644
index 0000000..4a643e5
--- /dev/null
+++ b/mixins/perspective-origin/test.js
@@ -0,0 +1,13 @@
+var assert = require('assert');
+
+describe('perspective-origin', function() {
+
+ it('should return the same value', function(done) {
+ test.perspectiveOrigin('top left', 'top left', done);
+ });
+
+ it('should add percentage units and return the same value', function(done) {
+ test.perspectiveOrigin('50 50', '50% 50%', done);
+ });
+
+});
\ No newline at end of file
diff --git a/mixins/perspective/perspective.js b/mixins/perspective/perspective.js
new file mode 100644
index 0000000..9972d57
--- /dev/null
+++ b/mixins/perspective/perspective.js
@@ -0,0 +1,30 @@
+/**
+ * Perspective mixin
+ */
+
+var perspective = function perspective(value) {
+ value = value || 'none';
+ var numRegex = /\d/gi;
+ var numWithoutValue = /(?:\s|^)(\d+\.?\d*)(?![^(]*\)|\w|%)/gi;
+
+ if (numRegex.test(value)) {
+ value = value.replace(numWithoutValue, function(match) {
+ return match + 'px';
+ });
+ }
+
+ return value;
+};
+
+/**
+ * For which browsers is this mixin specified
+ */
+
+perspective.vendors = ['webkit', 'moz'];
+
+
+/**
+ * Export mixin
+ */
+
+module.exports = perspective;
diff --git a/mixins/perspective/perspective.md b/mixins/perspective/perspective.md
new file mode 100644
index 0000000..9936c58
--- /dev/null
+++ b/mixins/perspective/perspective.md
@@ -0,0 +1,31 @@
+### )
+
+**Tips and tricks:**
+
+ If you omit units, `perspective` adds `px` automatically.
+
+**Example:**
+
+ div {
+ .perspective(1000);
+ }
+
+ // Result
+ div {
+ -moz-perspective: 1000px;
+ -webkit-perspective: 1000px;
+ perspective: 1000px;
+ }
+
+
diff --git a/mixins/perspective/test.js b/mixins/perspective/test.js
new file mode 100644
index 0000000..753ffff
--- /dev/null
+++ b/mixins/perspective/test.js
@@ -0,0 +1,13 @@
+var assert = require('assert');
+
+describe('perspective', function() {
+
+ it('should return the same value', function(done) {
+ test.perspective('500px', '500px', done);
+ });
+
+ it('should add default unit and return the same value', function(done) {
+ test.perspective('1000', '1000px', done);
+ });
+
+});
\ No newline at end of file
diff --git a/mixins/placeholder/placeholder.less b/mixins/placeholder/placeholder.less
new file mode 100644
index 0000000..b0f1d15
--- /dev/null
+++ b/mixins/placeholder/placeholder.less
@@ -0,0 +1,31 @@
+.placeholder(@color:hotpink, @element: 08121991) {
+ .inception (@arguments) when not (@element = 08121991) {
+ @{element}::-webkit-input-placeholder {
+ color: @color;
+ }
+ @{element}:-moz-placeholder {
+ color: @color;
+ }
+ @{element}::-moz-placeholder {
+ color: @color;
+ }
+ @{element}:-ms-input-placeholder {
+ color: @color;
+ }
+ }
+ .inception (@arguments) when (@element = 08121991) {
+ &::-webkit-input-placeholder {
+ color: @color;
+ }
+ &:-moz-placeholder {
+ color: @color;
+ }
+ &::-moz-placeholder {
+ color: @color;
+ }
+ &:-ms-input-placeholder {
+ color: @color;
+ }
+ }
+ .inception(@arguments);
+}
diff --git a/mixins/placeholder/placeholder.md b/mixins/placeholder/placeholder.md
new file mode 100644
index 0000000..b6b5f12
--- /dev/null
+++ b/mixins/placeholder/placeholder.md
@@ -0,0 +1,67 @@
+### , [])
+
+**Example:**
+
+ div {
+ .placeholder(#666666);
+ }
+
+ // Result
+ div::-webkit-input-placeholder {
+ color: #666666;
+ }
+ div:-moz-placeholder {
+ color: #666666;
+ }
+ div::-moz-placeholder {
+ color: #666666;
+ }
+ div:-ms-input-placeholder {
+ color: #666666;
+ }
+
+ // In root (outside of selectors)
+ .placeholder(#333333);
+
+ // Result
+ ::-webkit-input-placeholder {
+ color: #666666;
+ }
+ :-moz-placeholder {
+ color: #666666;
+ }
+ ::-moz-placeholder {
+ color: #666666;
+ }
+ :-ms-input-placeholder {
+ color: #666666;
+ }
+
+ // In root (outside of selectors)
+ .placeholder(#333333, textarea);
+
+ // Result
+ textarea::-webkit-input-placeholder {
+ color: #666666;
+ }
+ textarea:-moz-placeholder {
+ color: #666666;
+ }
+ textarea::-moz-placeholder {
+ color: #666666;
+ }
+ textarea:-ms-input-placeholder {
+ color: #666666;
+ }
+
+
diff --git a/mixins/properties.doc b/mixins/properties.doc
new file mode 100644
index 0000000..7ba35c9
--- /dev/null
+++ b/mixins/properties.doc
@@ -0,0 +1,8 @@
+mixin = fn
+mixin[vendor] = fn
+mixin.alias = string|[...]
+mixin.vendors = []
+mixin.vendors[vendor] = boolean
+mixin.result = { property: '...', value: '...{{ result| escape_result }}...', prefixed: boolean, strip: '...', [vendor]: { ... } } | string (less file url)
+mixin.appendCSS = { all: '...', [vendor]: '...' }
+mixin.prependCSS = { all: '...', [vendor]: '...' }
diff --git a/mixins/rotate/rotate.js b/mixins/rotate/rotate.js
new file mode 100644
index 0000000..f6d3e6f
--- /dev/null
+++ b/mixins/rotate/rotate.js
@@ -0,0 +1,38 @@
+/**
+ * Rotate mixin
+ */
+
+var rotate = function rotate(value) {
+ value = value || '0';
+ var numRegex = /\d/gi;
+ var numWithoutValue = /(?:\s|^)(\d+\.?\d*)(?![^(]*\)|\w|%)/gi;
+
+ if (numRegex.test(value)) {
+ value = value.replace(numWithoutValue, function(match) {
+ return match + 'deg';
+ });
+ }
+
+ return value;
+};
+
+/**
+ * Result settings
+ */
+
+rotate.result = {
+ property: 'transform',
+ value: 'rotate({{ result }})',
+};
+
+/**
+ * For which browsers is this mixin specified
+ */
+
+rotate.vendors = ['webkit', 'moz', 'opera', 'ms'];
+
+/**
+ * Export mixin
+ */
+
+module.exports = rotate;
diff --git a/mixins/rotate/rotate.md b/mixins/rotate/rotate.md
new file mode 100644
index 0000000..157542d
--- /dev/null
+++ b/mixins/rotate/rotate.md
@@ -0,0 +1,32 @@
+### )
+
+**Tips and tricks:**
+
+ If you omit units, `rotate` adds `deg` automatically.
+
+**Example:**
+
+ div {
+ .rotate(45);
+ }
+
+ // Result
+ div {
+ -webkit-transform: rotate(45deg);
+ -moz-transform: rotate(45deg);
+ -opera-transform: rotate(45deg);
+ -ms-transform: rotate(45deg);
+ transform: rotate(45deg);
+ }
+
diff --git a/mixins/rotate/test.js b/mixins/rotate/test.js
new file mode 100644
index 0000000..955f8c7
--- /dev/null
+++ b/mixins/rotate/test.js
@@ -0,0 +1,10 @@
+var assert = require('assert');
+
+describe('rotate', function() {
+
+ it('should return the same value', function(done) {
+ test.resultProperty = 'transform';
+ test.rotate('20', 'rotate(20deg)', done);
+ });
+
+});
\ No newline at end of file
diff --git a/mixins/rotate3d/rotate3d.js b/mixins/rotate3d/rotate3d.js
new file mode 100644
index 0000000..9100d9d
--- /dev/null
+++ b/mixins/rotate3d/rotate3d.js
@@ -0,0 +1,33 @@
+/**
+ * Rotate3d mixin
+ */
+
+var rotate3d = function rotate3d(value) {
+ value = value || '0, 0, 0, 0';
+ value = value.replace(/,\s*\d+$/, function(match) {
+ return match + 'deg';
+ });
+
+ return value;
+};
+
+/**
+ * Result settings
+ */
+
+rotate3d.result = {
+ property: 'transform',
+ value: 'rotate3d({{ result }})',
+};
+
+/**
+ * For which browsers is this mixin specified
+ */
+
+rotate3d.vendors = ['webkit', 'moz', 'opera', 'ms'];
+
+/**
+ * Export mixin
+ */
+
+module.exports = rotate3d;
\ No newline at end of file
diff --git a/mixins/rotate3d/rotate3d.md b/mixins/rotate3d/rotate3d.md
new file mode 100644
index 0000000..228fec8
--- /dev/null
+++ b/mixins/rotate3d/rotate3d.md
@@ -0,0 +1,33 @@
+### MDN **
+
+**Syntax:**
+
+Default value: 0, 0, 0, 0
+
+ .rotate3d(, , , )
+
+**Tips and tricks:**
+
+ If you omit angle unit, `rotate3d` adds `deg` automatically.
+
+**Example:**
+
+ div {
+ .rotate3d(1, 0, 0, 50);
+ }
+
+ // Result
+ div {
+ -webkit-transform: rotate3d(1, 0, 0, 50deg);
+ -moz-transform: rotate3d(1, 0, 0, 50deg);
+ -opera-transform: rotate3d(1, 0, 0, 50deg);
+ -ms-transform: rotate3d(1, 0, 0, 50deg);
+ transform: rotate3d(1, 0, 0, 50deg);
+ }
+
+
diff --git a/mixins/rotate3d/test.js b/mixins/rotate3d/test.js
new file mode 100644
index 0000000..6573ace
--- /dev/null
+++ b/mixins/rotate3d/test.js
@@ -0,0 +1,10 @@
+var assert = require('assert');
+
+describe('rotate3d', function() {
+
+ it('should add unit for last number and return the value', function(done) {
+ test.resultProperty = 'transform';
+ test.rotate3d('1, 0, 0, 50', 'rotate3d(1, 0, 0, 50deg)', done);
+ });
+
+});
\ No newline at end of file
diff --git a/mixins/rotateX/rotateX.js b/mixins/rotateX/rotateX.js
new file mode 100644
index 0000000..687ad54
--- /dev/null
+++ b/mixins/rotateX/rotateX.js
@@ -0,0 +1,38 @@
+/**
+ * RotateX mixin
+ */
+
+var rotateX = function rotateX(value) {
+ value = value || '0';
+ var numRegex = /\d/gi;
+ var numWithoutValue = /(?:\s|^)(\d+\.?\d*)(?![^(]*\)|\w|%)/gi;
+
+ if (numRegex.test(value)) {
+ value = value.replace(numWithoutValue, function(match) {
+ return match + 'deg';
+ });
+ }
+
+ return value;
+};
+
+/**
+ * Result settings
+ */
+
+rotateX.result = {
+ property: 'transform',
+ value: 'rotateX({{ result }})',
+};
+
+/**
+ * For which browsers is this mixin specified
+ */
+
+rotateX.vendors = ['webkit', 'moz', 'opera', 'ms'];
+
+/**
+ * Export mixin
+ */
+
+module.exports = rotateX;
diff --git a/mixins/rotateX/rotateX.md b/mixins/rotateX/rotateX.md
new file mode 100644
index 0000000..aae2f49
--- /dev/null
+++ b/mixins/rotateX/rotateX.md
@@ -0,0 +1,32 @@
+### )
+
+**Tips and tricks:**
+
+ If you omit units, `rotateX` adds `deg` automatically.
+
+**Example:**
+
+ div {
+ .rotateX(45);
+ }
+
+ // Result
+ div {
+ -webkit-transform: rotateX(45deg);
+ -moz-transform: rotateX(45deg);
+ -opera-transform: rotateX(45deg);
+ -ms-transform: rotateX(45deg);
+ transform: rotateX(45deg);
+ }
+
diff --git a/mixins/rotateX/test.js b/mixins/rotateX/test.js
new file mode 100644
index 0000000..d6b8d5e
--- /dev/null
+++ b/mixins/rotateX/test.js
@@ -0,0 +1,10 @@
+var assert = require('assert');
+
+describe('rotateX', function() {
+
+ it('should return value with units', function(done) {
+ test.resultProperty = 'transform';
+ test.rotateX('20', 'rotateX(20deg)', done);
+ });
+
+});
diff --git a/mixins/rotateY/rotateY.js b/mixins/rotateY/rotateY.js
new file mode 100644
index 0000000..29ea73a
--- /dev/null
+++ b/mixins/rotateY/rotateY.js
@@ -0,0 +1,38 @@
+/**
+ * RotateY mixin
+ */
+
+var rotateY = function rotateY(value) {
+ value = value || '0';
+ var numRegex = /\d/gi;
+ var numWithoutValue = /(?:\s|^)(\d+\.?\d*)(?![^(]*\)|\w|%)/gi;
+
+ if (numRegex.test(value)) {
+ value = value.replace(numWithoutValue, function(match) {
+ return match + 'deg';
+ });
+ }
+
+ return value;
+};
+
+/**
+ * Result settings
+ */
+
+rotateY.result = {
+ property: 'transform',
+ value: 'rotateY({{ result }})',
+};
+
+/**
+ * For which browsers is this mixin specified
+ */
+
+rotateY.vendors = ['webkit', 'moz', 'opera', 'ms'];
+
+/**
+ * Export mixin
+ */
+
+module.exports = rotateY;
diff --git a/mixins/rotateY/rotateY.md b/mixins/rotateY/rotateY.md
new file mode 100644
index 0000000..1fec1bc
--- /dev/null
+++ b/mixins/rotateY/rotateY.md
@@ -0,0 +1,32 @@
+### )
+
+**Tips and tricks:**
+
+ If you omit units, `rotateY` adds `deg` automatically.
+
+**Example:**
+
+ div {
+ .rotateY(45);
+ }
+
+ // Result
+ div {
+ -webkit-transform: rotateY(45deg);
+ -moz-transform: rotateY(45deg);
+ -opera-transform: rotateY(45deg);
+ -ms-transform: rotateY(45deg);
+ transform: rotateY(45deg);
+ }
+
diff --git a/mixins/rotateY/test.js b/mixins/rotateY/test.js
new file mode 100644
index 0000000..7bc8202
--- /dev/null
+++ b/mixins/rotateY/test.js
@@ -0,0 +1,10 @@
+var assert = require('assert');
+
+describe('rotateY', function() {
+
+ it('should return value with units', function(done) {
+ test.resultProperty = 'transform';
+ test.rotateY('20', 'rotateY(20deg)', done);
+ });
+
+});
diff --git a/mixins/rotateZ/rotateZ.js b/mixins/rotateZ/rotateZ.js
new file mode 100644
index 0000000..d425b41
--- /dev/null
+++ b/mixins/rotateZ/rotateZ.js
@@ -0,0 +1,38 @@
+/**
+ * RotateZ mixin
+ */
+
+var rotateZ = function rotateZ(value) {
+ value = value || '0';
+ var numRegex = /\d/gi;
+ var numWithoutValue = /(?:\s|^)(\d+\.?\d*)(?![^(]*\)|\w|%)/gi;
+
+ if (numRegex.test(value)) {
+ value = value.replace(numWithoutValue, function(match) {
+ return match + 'deg';
+ });
+ }
+
+ return value;
+};
+
+/**
+ * Result settings
+ */
+
+rotateZ.result = {
+ property: 'transform',
+ value: 'rotateZ({{ result }})',
+};
+
+/**
+ * For which browsers is this mixin specified
+ */
+
+rotateZ.vendors = ['webkit', 'moz', 'opera', 'ms'];
+
+/**
+ * Export mixin
+ */
+
+module.exports = rotateZ;
diff --git a/mixins/rotateZ/rotateZ.md b/mixins/rotateZ/rotateZ.md
new file mode 100644
index 0000000..a672b1d
--- /dev/null
+++ b/mixins/rotateZ/rotateZ.md
@@ -0,0 +1,33 @@
+### )
+
+**Tips and tricks:**
+
+ If you omit units, `rotateZ` adds `deg` automatically.
+
+**Example:**
+
+ div {
+ .rotateZ(45);
+ }
+
+ // Result
+ div {
+ -webkit-transform: rotateZ(45deg);
+ -moz-transform: rotateZ(45deg);
+ -opera-transform: rotateZ(45deg);
+ -ms-transform: rotateZ(45deg);
+ transform: rotateZ(45deg);
+ }
+
+
diff --git a/mixins/rotateZ/test.js b/mixins/rotateZ/test.js
new file mode 100644
index 0000000..f6168b8
--- /dev/null
+++ b/mixins/rotateZ/test.js
@@ -0,0 +1,10 @@
+var assert = require('assert');
+
+describe('rotateZ', function() {
+
+ it('should return value with units', function(done) {
+ test.resultProperty = 'transform';
+ test.rotateZ('20', 'rotateZ(20deg)', done);
+ });
+
+});
diff --git a/mixins/saturate/saturate.js b/mixins/saturate/saturate.js
new file mode 100644
index 0000000..062a49e
--- /dev/null
+++ b/mixins/saturate/saturate.js
@@ -0,0 +1,38 @@
+/**
+ * Saturate mixin
+ */
+
+var saturate = function saturate(value) {
+ value = value || '100%';
+ var numRegex = /\d/gi;
+ var numWithoutValue = /(?:\s|^)(\d+\.?\d*)(?![^(]*\)|\w|%)/gi;
+
+ if (numRegex.test(value)) {
+ value = value.replace(numWithoutValue, function(match) {
+ return match + '%';
+ });
+ }
+
+ return value;
+};
+
+/**
+ * Result settings
+ */
+
+saturate.result = {
+ property: 'filter',
+ value: '~"saturate({{ escape_result }})"',
+};
+
+/**
+ * For which browsers is this mixin specified
+ */
+
+saturate.vendors = ['webkit','moz','ms'];
+
+/**
+ * Export mixin
+ */
+
+module.exports = saturate;
diff --git a/mixins/saturate/saturate.md b/mixins/saturate/saturate.md
new file mode 100644
index 0000000..24cfa84
--- /dev/null
+++ b/mixins/saturate/saturate.md
@@ -0,0 +1,32 @@
+### MDN **
+
+ **Syntax:**
+
+ Default value: 100%
+
+ .saturate()
+
+ **Tips and tricks:**
+
+ If you omit units, `saturate` adds `%` automatically.
+
+ **Example:**
+
+ div {
+ .saturate(45);
+ }
+
+ // Result
+ div {
+ -webkit-filter: saturate(45deg);
+ -moz-filter: saturate(45deg);
+ -ms-filter: saturate(45deg);
+ filter: saturate(45deg);
+ }
+
+
diff --git a/mixins/saturate/test.js b/mixins/saturate/test.js
new file mode 100644
index 0000000..ff2fe06
--- /dev/null
+++ b/mixins/saturate/test.js
@@ -0,0 +1,10 @@
+var assert = require('assert');
+
+describe('saturate', function () {
+
+ it('should add default units and return the value', function (done) {
+ test.resultProperty = 'filter';
+ test.saturate('50', 'saturate(50%)', done);
+ });
+
+});
\ No newline at end of file
diff --git a/mixins/scale/scale.js b/mixins/scale/scale.js
new file mode 100644
index 0000000..a487d8e
--- /dev/null
+++ b/mixins/scale/scale.js
@@ -0,0 +1,30 @@
+/**
+ * Scale mixin
+ */
+
+var scale = function scale(value) {
+ value = value || '1';
+
+ return value;
+};
+
+/**
+ * Result settings
+ */
+
+scale.result = {
+ property: 'transform',
+ value: 'scale({{ result }})',
+};
+
+/**
+ * For which browsers is this mixin specified
+ */
+
+scale.vendors = ['webkit', 'moz', 'opera', 'ms'];
+
+/**
+ * Export mixin
+ */
+
+module.exports = scale;
\ No newline at end of file
diff --git a/mixins/scale/scale.md b/mixins/scale/scale.md
new file mode 100644
index 0000000..b49ac38
--- /dev/null
+++ b/mixins/scale/scale.md
@@ -0,0 +1,28 @@
+### [, ])
+
+**Example:**
+
+ div {
+ .scale(2);
+ }
+
+ // Result
+ div {
+ -webkit-transform: scale(2);
+ -moz-transform: scale(2);
+ -opera-transform: scale(2);
+ -ms-transform: scale(2);
+ transform: scale(2);
+ }
+
diff --git a/mixins/scale/test.js b/mixins/scale/test.js
new file mode 100644
index 0000000..5767445
--- /dev/null
+++ b/mixins/scale/test.js
@@ -0,0 +1,10 @@
+var assert = require('assert');
+
+describe('scale', function() {
+
+ it('should return the same value', function(done) {
+ test.resultProperty = 'transform';
+ test.scale('1.5', 'scale(1.5)', done);
+ });
+
+});
\ No newline at end of file
diff --git a/mixins/scale3d/scale3d.js b/mixins/scale3d/scale3d.js
new file mode 100644
index 0000000..46580f9
--- /dev/null
+++ b/mixins/scale3d/scale3d.js
@@ -0,0 +1,30 @@
+/**
+ * Scale3d mixin
+ */
+
+var scale3d = function scale3d(value) {
+ value = value || '1, 1, 1';
+
+ return value;
+};
+
+/**
+ * Result settings
+ */
+
+scale3d.result = {
+ property: 'transform',
+ value: 'scale3d({{ result }})',
+};
+
+/**
+ * For which browsers is this mixin specified
+ */
+
+scale3d.vendors = ['webkit', 'moz', 'opera', 'ms'];
+
+/**
+ * Export mixin
+ */
+
+module.exports = scale3d;
\ No newline at end of file
diff --git a/mixins/scale3d/scale3d.md b/mixins/scale3d/scale3d.md
new file mode 100644
index 0000000..a06c576
--- /dev/null
+++ b/mixins/scale3d/scale3d.md
@@ -0,0 +1,29 @@
+### MDN **
+
+**Syntax:**
+
+Default value: 1, 1, 1
+
+ .scale3d(, , )
+
+**Example:**
+
+ div {
+ .scale3d(1.5, .2, 3);
+ }
+
+ // Result
+ div {
+ -webkit-transform: scale3d(1.5, 0.2, 3);
+ -moz-transform: scale3d(1.5, 0.2, 3);
+ -opera-transform: scale3d(1.5, 0.2, 3);
+ -ms-transform: scale3d(1.5, 0.2, 3);
+ transform: scale3d(1.5, 0.2, 3);
+ }
+
+
diff --git a/mixins/scale3d/test.js b/mixins/scale3d/test.js
new file mode 100644
index 0000000..855a04c
--- /dev/null
+++ b/mixins/scale3d/test.js
@@ -0,0 +1,10 @@
+var assert = require('assert');
+
+describe('scale3d', function() {
+
+ it('should return the same value', function(done) {
+ test.resultProperty = 'transform';
+ test.scale3d('1.5, .2, 3', 'scale3d(1.5, 0.2, 3)', done);
+ });
+
+});
\ No newline at end of file
diff --git a/mixins/scaleX/scaleX.js b/mixins/scaleX/scaleX.js
new file mode 100644
index 0000000..9997b13
--- /dev/null
+++ b/mixins/scaleX/scaleX.js
@@ -0,0 +1,30 @@
+/**
+ * ScaleX mixin
+ */
+
+var scaleX = function scaleX(value) {
+ value = value || '1';
+
+ return value;
+};
+
+/**
+ * Result settings
+ */
+
+scaleX.result = {
+ property: 'transform',
+ value: 'scaleX({{ result }})',
+};
+
+/**
+ * For which browsers is this mixin specified
+ */
+
+scaleX.vendors = ['webkit', 'moz', 'opera', 'ms'];
+
+/**
+ * Export mixin
+ */
+
+module.exports = scaleX;
\ No newline at end of file
diff --git a/mixins/scaleX/scaleX.md b/mixins/scaleX/scaleX.md
new file mode 100644
index 0000000..27f777e
--- /dev/null
+++ b/mixins/scaleX/scaleX.md
@@ -0,0 +1,28 @@
+### )
+
+**Example:**
+
+ div {
+ .scaleX(1.5);
+ }
+
+ // Result
+ div {
+ -webkit-transform: scaleX(1.5);
+ -moz-transform: scaleX(1.5);
+ -opera-transform: scaleX(1.5);
+ -ms-transform: scaleX(1.5);
+ transform: scaleX(1.5);
+ }
+
diff --git a/mixins/scaleX/test.js b/mixins/scaleX/test.js
new file mode 100644
index 0000000..c4ef6bb
--- /dev/null
+++ b/mixins/scaleX/test.js
@@ -0,0 +1,10 @@
+var assert = require('assert');
+
+describe('scaleX', function() {
+
+ it('should return the same value', function(done) {
+ test.resultProperty = 'transform';
+ test.scaleX('1.5', 'scaleX(1.5)', done);
+ });
+
+});
\ No newline at end of file
diff --git a/mixins/scaleY/scaleY.js b/mixins/scaleY/scaleY.js
new file mode 100644
index 0000000..d3787e0
--- /dev/null
+++ b/mixins/scaleY/scaleY.js
@@ -0,0 +1,30 @@
+/**
+ * ScaleY mixin
+ */
+
+var scaleY = function scaleY(value) {
+ value = value || '1';
+
+ return value;
+};
+
+/**
+ * Result settings
+ */
+
+scaleY.result = {
+ property: 'transform',
+ value: 'scaleY({{ result }})',
+};
+
+/**
+ * For which browsers is this mixin specified
+ */
+
+scaleY.vendors = ['webkit', 'moz', 'opera', 'ms'];
+
+/**
+ * Export mixin
+ */
+
+module.exports = scaleY;
\ No newline at end of file
diff --git a/mixins/scaleY/scaleY.md b/mixins/scaleY/scaleY.md
new file mode 100644
index 0000000..eefe0c3
--- /dev/null
+++ b/mixins/scaleY/scaleY.md
@@ -0,0 +1,28 @@
+### )
+
+**Example:**
+
+ div {
+ .scaleY(1.5);
+ }
+
+ // Result
+ div {
+ -webkit-transform: scaleY(1.5);
+ -moz-transform: scaleY(1.5);
+ -opera-transform: scaleY(1.5);
+ -ms-transform: scaleY(1.5);
+ transform: scaleY(1.5);
+ }
+
diff --git a/mixins/scaleY/test.js b/mixins/scaleY/test.js
new file mode 100644
index 0000000..62dfda6
--- /dev/null
+++ b/mixins/scaleY/test.js
@@ -0,0 +1,10 @@
+var assert = require('assert');
+
+describe('scaleY', function() {
+
+ it('should return the same value', function(done) {
+ test.resultProperty = 'transform';
+ test.scaleY('1.5', 'scaleY(1.5)', done);
+ });
+
+});
\ No newline at end of file
diff --git a/mixins/scaleZ/scaleZ.js b/mixins/scaleZ/scaleZ.js
new file mode 100644
index 0000000..2dd25e0
--- /dev/null
+++ b/mixins/scaleZ/scaleZ.js
@@ -0,0 +1,30 @@
+/**
+ * ScaleZ mixin
+ */
+
+var scaleZ = function scaleZ(value) {
+ value = value || '1';
+
+ return value;
+};
+
+/**
+ * Result settings
+ */
+
+scaleZ.result = {
+ property: 'transform',
+ value: 'scaleZ({{ result }})',
+};
+
+/**
+ * For which browsers is this mixin specified
+ */
+
+scaleZ.vendors = ['webkit', 'moz', 'opera', 'ms'];
+
+/**
+ * Export mixin
+ */
+
+module.exports = scaleZ;
\ No newline at end of file
diff --git a/mixins/scaleZ/scaleZ.md b/mixins/scaleZ/scaleZ.md
new file mode 100644
index 0000000..3d31c05
--- /dev/null
+++ b/mixins/scaleZ/scaleZ.md
@@ -0,0 +1,29 @@
+### MDN **
+
+**Syntax:**
+
+Default value: 1
+
+ .scaleZ()
+
+**Example:**
+
+ div {
+ .scaleZ(1.5);
+ }
+
+ // Result
+ div {
+ -webkit-transform: scaleZ(1.5);
+ -moz-transform: scaleZ(1.5);
+ -opera-transform: scaleZ(1.5);
+ -ms-transform: scaleZ(1.5);
+ transform: scaleZ(1.5);
+ }
+
+
diff --git a/mixins/scaleZ/test.js b/mixins/scaleZ/test.js
new file mode 100644
index 0000000..00c76d8
--- /dev/null
+++ b/mixins/scaleZ/test.js
@@ -0,0 +1,10 @@
+var assert = require('assert');
+
+describe('scaleZ', function() {
+
+ it('should return the same value', function(done) {
+ test.resultProperty = 'transform';
+ test.scaleZ('1.5', 'scaleZ(1.5)', done);
+ });
+
+});
\ No newline at end of file
diff --git a/mixins/selection/result.less b/mixins/selection/result.less
new file mode 100644
index 0000000..61a9ad4
--- /dev/null
+++ b/mixins/selection/result.less
@@ -0,0 +1,11 @@
+ @state: 69; // Yeah totally random number
+
+ .inception (@arguments) when (@moz_local = true) and (@w3c_local = true) and not (@process = 08121991) { @state: 1; lesshat-selector { -lh-property: @process; } }
+ .inception (@arguments) when (@moz_local = true) and (@w3c_local = true) and (@process = 08121991) {}
+ .inception (@arguments) when not (@moz_local = true) and (@w3c_local = true) and not (@process = 08121991) { @state:2; lesshat-selector { -lh-property: @process; } }
+ .inception (@arguments) when not (@moz_local = true) and (@w3c_local = true) and (@process = 08121991) {}
+ .inception (@arguments) when (@moz_local = true) and not (@w3c_local = true) and not (@process = 08121991) { @state:3; lesshat-selector { -lh-property: @process; } }
+ .inception (@arguments) when (@moz_local = true) and not (@w3c_local = true) and (@process = 08121991) {}
+ .inception (@arguments) when not (@moz_local = true) and not (@w3c_local = true) {}
+
+ .inception(@arguments);
diff --git a/mixins/selection/selection.js b/mixins/selection/selection.js
new file mode 100644
index 0000000..f195330
--- /dev/null
+++ b/mixins/selection/selection.js
@@ -0,0 +1,68 @@
+/**
+ * Selection mixin
+ */
+
+var selection = function selection(value) {
+ // States
+ // 1 - all
+ // 2 - w3c
+ // 3 - moz
+
+ value = value || 08121991;
+ var state = '@{state}';
+ var value_temp = value;
+ if (value == 08121991) {
+ return value;
+ }
+
+ switch (state) {
+ case '1':
+ syntax('start', '::selection');
+ syntax('end', '::-moz-selection');
+ break;
+ case '2':
+ syntax('startend', '::selection');
+ break;
+ case '3':
+ syntax('startend', '::-moz-selection');
+ break;
+ }
+
+ function syntax(start, selector) {
+ var end = '}\n';
+ var definition = value_temp.split(',');
+ var syntax = (definition[1] || '') + selector + '{' + definition[0] + end;
+
+ if (start == 'start') {
+ value = '0; } \n' + syntax;
+ } else if (start == 'startend') {
+ value = '0; } \n' + syntax.replace(end, '');
+ } else if (start == 'end') {
+ value = value + syntax.replace(end, '');
+ } else {
+ value = value + syntax;
+ }
+ }
+
+ value = value.replace(/;$/g,'');
+
+ return value;
+};
+
+/**
+ * We want totally custom result definition, because selection mixin is tricky one (not recommended, it's not testable)
+ */
+
+selection.result = 'result.less';
+
+/**
+ * For which browsers is this mixin specified
+ */
+
+selection.vendors = ['moz'];
+
+/**
+ * Export mixin
+ */
+
+module.exports = selection;
diff --git a/mixins/selection/selection.md b/mixins/selection/selection.md
new file mode 100644
index 0000000..a6b7d28
--- /dev/null
+++ b/mixins/selection/selection.md
@@ -0,0 +1,35 @@
+### [, ])
+
+**Example:**
+
+ .selection(~'color: blue; background: red');
+
+ // Result
+ lesshat-selector {-lh-property: 0;}
+ ::selection{color: blue; background: red}
+ ::-moz-selection{color: blue; background: red;}
+
+
diff --git a/mixins/sepia/sepia.js b/mixins/sepia/sepia.js
new file mode 100644
index 0000000..f620772
--- /dev/null
+++ b/mixins/sepia/sepia.js
@@ -0,0 +1,38 @@
+/**
+ * Sepia mixin
+ */
+
+var sepia = function sepia(value) {
+ value = value || '100%';
+ var numRegex = /\d/gi;
+ var numWithoutValue = /(?:\s|^)(\d+\.?\d*)(?![^(]*\)|\w|%)/gi;
+
+ if (numRegex.test(value)) {
+ value = value.replace(numWithoutValue, function(match) {
+ return match + '%';
+ });
+ }
+
+ return value;
+};
+
+/**
+ * Result settings
+ */
+
+sepia.result = {
+ property: 'filter',
+ value: 'sepia({{ result }})',
+};
+
+/**
+ * For which browsers is this mixin specified
+ */
+
+sepia.vendors = ['webkit','moz','ms'];
+
+/**
+ * Export mixin
+ */
+
+module.exports = sepia;
diff --git a/mixins/sepia/sepia.md b/mixins/sepia/sepia.md
new file mode 100644
index 0000000..b38f178
--- /dev/null
+++ b/mixins/sepia/sepia.md
@@ -0,0 +1,29 @@
+### MDN **
+
+**Syntax:**
+
+ .sepia()
+
+**Tips and tricks:**
+
+ If you omit units, `sepia` adds `%` automatically.
+
+**Example:**
+
+ div {
+ .sepia(50);
+ }
+
+ // Result
+ div {
+ -webkit-filter: sepia(50%);
+ -moz-filter: sepia(50%);
+ filter: sepia(50%);
+ }
+
+
diff --git a/mixins/sepia/test.js b/mixins/sepia/test.js
new file mode 100644
index 0000000..0511153
--- /dev/null
+++ b/mixins/sepia/test.js
@@ -0,0 +1,10 @@
+var assert = require('assert');
+
+describe('sepia', function () {
+
+ it('should add default units and return the value', function (done) {
+ test.resultProperty = 'filter';
+ test.sepia('50', 'sepia(50%)', done);
+ });
+
+});
\ No newline at end of file
diff --git a/mixins/size/size.less b/mixins/size/size.less
new file mode 100644
index 0000000..4f4b42b
--- /dev/null
+++ b/mixins/size/size.less
@@ -0,0 +1,41 @@
+.size(@square) {
+ @unit: 'px';
+ .process(@square) when (ispixel(@square)), (isem(@square)), (ispercentage(@square)) {
+ width: @square;
+ height: @square;
+ }
+
+ .process(@square) when not (ispixel(@square)) and not (isem(@square)) and not (ispercentage(@square)) {
+ width: ~`@{square} + @{unit}`;
+ height: ~`@{square} + @{unit}`;
+ }
+
+ .process(@square);
+
+}
+
+.size(@width, @height) {
+ @unit: 'px';
+ .process(@width, @height) when (ispixel(@width)) and (ispixel(@height)), (isem(@width)) and (isem(@height)), (ispercentage(@width)) and (ispercentage(@height)), (ispixel(@width)) and (ispercentage(@height)), (ispixel(@width)) and (isem(@height)), (ispercentage(@width)) and (ispixel(@height)), (ispercentage(@width)) and (isem(@height)), (isem(@width)) and (ispixel(@height)), (isem(@width)) and (ispercentage(@height)) {
+ width: @width;
+ height: @height;
+ }
+
+ .process(@width, @height) when not (ispixel(@width)) and not (ispixel(@height)) and not (ispercentage(@width)) and not (ispercentage(@height)) and not (isem(@width)) and not (isem(@height)) {
+ width: ~`@{width} + @{unit}`;
+ height: ~`@{height} + @{unit}`;
+ }
+
+ .process(@width, @height) when not (ispixel(@width)) and not (ispercentage(@width)) and not (isem(@width)) {
+ width: ~`@{width} + @{unit}`;
+ height: @height;
+ }
+
+ .process(@width, @height) when not (ispixel(@height)) and not (ispercentage(@height)) and not (isem(@height)) {
+ width: @width;
+ height: ~`@{height} + @{unit}`;
+ }
+
+ .process(@width, @height);
+
+}
diff --git a/mixins/size/size.md b/mixins/size/size.md
new file mode 100644
index 0000000..ea0f818
--- /dev/null
+++ b/mixins/size/size.md
@@ -0,0 +1,27 @@
+### , [])
+
+**Tips and tricks:**
+
+ When you call mixin with only one argument, second will be the same.
+ Also you can omit units and `size` adds it automatically.
+
+**Example:**
+
+ div {
+ .size(50);
+ }
+
+ // Result
+ div {
+ width: 50px;
+ height: 50px;
+ }
+
+
diff --git a/mixins/skew/skew.js b/mixins/skew/skew.js
new file mode 100644
index 0000000..2df560a
--- /dev/null
+++ b/mixins/skew/skew.js
@@ -0,0 +1,38 @@
+/**
+ * Skew mixin
+ */
+
+var skew = function skew(value) {
+ value = value || '0';
+ var numRegex = /\d/gi;
+ var numWithoutValue = /(?:\s|^)(\d+\.?\d*)(?![^(]*\)|\w|%)/gi;
+
+ if (numRegex.test(value)) {
+ value = value.replace(numWithoutValue, function(match) {
+ return match + 'deg';
+ });
+ }
+
+ return value;
+};
+
+/**
+ * Result settings
+ */
+
+skew.result = {
+ property: 'transform',
+ value: 'skew({{ result }})',
+};
+
+/**
+ * For which browsers is this mixin specified
+ */
+
+skew.vendors = ['webkit', 'moz', 'opera', 'ms'];
+
+/**
+ * Export mixin
+ */
+
+module.exports = skew;
diff --git a/mixins/skew/skew.md b/mixins/skew/skew.md
new file mode 100644
index 0000000..ec70ad4
--- /dev/null
+++ b/mixins/skew/skew.md
@@ -0,0 +1,32 @@
+### [, ])
+
+**Tips and tricks:**
+
+ If you omit units, `skew` adds `%` automatically.
+
+**Example:**
+
+ div {
+ .skew(20, 30);
+ }
+
+ // Result
+ div {
+ -webkit-transform: skew(20deg, 30deg);
+ -moz-transform: skew(20deg, 30deg);
+ -opera-transform: skew(20deg, 30deg);
+ -ms-transform: skew(20deg, 30deg);
+ transform: skew(20deg, 30deg);
+ }
+
diff --git a/mixins/skew/test.js b/mixins/skew/test.js
new file mode 100644
index 0000000..3d52dda
--- /dev/null
+++ b/mixins/skew/test.js
@@ -0,0 +1,10 @@
+var assert = require('assert');
+
+describe('skew', function() {
+
+ it('should return default units and value', function(done) {
+ test.resultProperty = 'transform';
+ test.skew('20, 30', 'skew(20deg, 30deg)', done);
+ });
+
+});
diff --git a/mixins/skewX/skewX.js b/mixins/skewX/skewX.js
new file mode 100644
index 0000000..e5cfca1
--- /dev/null
+++ b/mixins/skewX/skewX.js
@@ -0,0 +1,38 @@
+/**
+ * SkewX mixin
+ */
+
+var skewX = function skewX(value) {
+ value = value || '0';
+ var numRegex = /\d/gi;
+ var numWithoutValue = /(?:\s|^)(\d+\.?\d*)(?![^(]*\)|\w|%)/gi;
+
+ if (numRegex.test(value)) {
+ value = value.replace(numWithoutValue, function(match) {
+ return match + 'deg';
+ });
+ }
+
+ return value;
+};
+
+/**
+ * Result settings
+ */
+
+skewX.result = {
+ property: 'transform',
+ value: 'skewX({{ result }})',
+};
+
+/**
+ * For which browsers is this mixin specified
+ */
+
+skewX.vendors = ['webkit', 'moz', 'opera', 'ms'];
+
+/**
+ * Export mixin
+ */
+
+module.exports = skewX;
diff --git a/mixins/skewX/skewX.md b/mixins/skewX/skewX.md
new file mode 100644
index 0000000..1bb08ae
--- /dev/null
+++ b/mixins/skewX/skewX.md
@@ -0,0 +1,32 @@
+### )
+
+**Tips and tricks:**
+
+ If you omit units, `skewX` adds `%` automatically.
+
+**Example:**
+
+ div {
+ .skewX(20);
+ }
+
+ // Result
+ div {
+ -webkit-transform: skewX(20deg);
+ -moz-transform: skewX(20deg);
+ -opera-transform: skewX(20deg);
+ -ms-transform: skewX(20deg);
+ transform: skewX(20deg);
+ }
+
diff --git a/mixins/skewX/test.js b/mixins/skewX/test.js
new file mode 100644
index 0000000..a0c9ff3
--- /dev/null
+++ b/mixins/skewX/test.js
@@ -0,0 +1,10 @@
+var assert = require('assert');
+
+describe('skewX', function() {
+
+ it('should return value with units', function(done) {
+ test.resultProperty = 'transform';
+ test.skewX('20', 'skewX(20deg)', done);
+ });
+
+});
diff --git a/mixins/skewY/skewY.js b/mixins/skewY/skewY.js
new file mode 100644
index 0000000..bd49233
--- /dev/null
+++ b/mixins/skewY/skewY.js
@@ -0,0 +1,38 @@
+/**
+ * SkewY mixin
+ */
+
+var skewY = function skewY(value) {
+ value = value || '0';
+ var numRegex = /\d/gi;
+ var numWithoutValue = /(?:\s|^)(\d+\.?\d*)(?![^(]*\)|\w|%)/gi;
+
+ if (numRegex.test(value)) {
+ value = value.replace(numWithoutValue, function(match) {
+ return match + 'deg';
+ });
+ }
+
+ return value;
+};
+
+/**
+ * Result settings
+ */
+
+skewY.result = {
+ property: 'transform',
+ value: 'skewY({{ result }})',
+};
+
+/**
+ * For which browsers is this mixin specified
+ */
+
+skewY.vendors = ['webkit', 'moz', 'opera', 'ms'];
+
+/**
+ * Export mixin
+ */
+
+module.exports = skewY;
diff --git a/mixins/skewY/skewY.md b/mixins/skewY/skewY.md
new file mode 100644
index 0000000..8cd608f
--- /dev/null
+++ b/mixins/skewY/skewY.md
@@ -0,0 +1,33 @@
+### )
+
+**Tips and tricks:**
+
+ If you omit units, `skewY` adds `%` automatically.
+
+**Example:**
+
+ div {
+ .skewY(20);
+ }
+
+ // Result
+ div {
+ -webkit-transform: skewY(20deg);
+ -moz-transform: skewY(20deg);
+ -opera-transform: skewY(20deg);
+ -ms-transform: skewY(20deg);
+ transform: skewY(20deg);
+ }
+
+
diff --git a/mixins/skewY/test.js b/mixins/skewY/test.js
new file mode 100644
index 0000000..626c1c2
--- /dev/null
+++ b/mixins/skewY/test.js
@@ -0,0 +1,10 @@
+var assert = require('assert');
+
+describe('skewY', function() {
+
+ it('should return value with units', function(done) {
+ test.resultProperty = 'transform';
+ test.skewY('20', 'skewY(20deg)', done);
+ });
+
+});
diff --git a/mixins/transform-origin/test.js b/mixins/transform-origin/test.js
new file mode 100644
index 0000000..ea1ed59
--- /dev/null
+++ b/mixins/transform-origin/test.js
@@ -0,0 +1,13 @@
+var assert = require('assert');
+
+describe('transform-origin', function() {
+
+ it('should return the same value', function(done) {
+ test.transformOrigin('-10em -30em', '-10em -30em', done);
+ });
+
+ it('should add default unit and return the same value', function(done) {
+ test.transformOrigin('50 50', '50% 50%', done);
+ });
+
+});
\ No newline at end of file
diff --git a/mixins/transform-origin/transform-origin.js b/mixins/transform-origin/transform-origin.js
new file mode 100644
index 0000000..162f451
--- /dev/null
+++ b/mixins/transform-origin/transform-origin.js
@@ -0,0 +1,34 @@
+/**
+ * TransformOrigin mixin
+ */
+
+var transformOrigin = function transformOrigin(value) {
+ value = value || '50% 50% 0';
+ var numRegex = /\d/gi;
+ var numWithoutValue = /(?:\s|^)(\d+\.?\d*)(?![^(]*\)|\w|%)/gi;
+
+ if (/^[-a-zA-Z0-9]*,/.test(value)) {
+ value = value.replace(/(?:,)(?![^(]*\))/g, '');
+ }
+
+ if (numRegex.test(value)) {
+ value = value.replace(numWithoutValue, function(match) {
+ return match + '%';
+ });
+ }
+
+ return value;
+};
+
+/**
+ * For which browsers is this mixin specified
+ */
+
+transformOrigin.vendors = ['webkit', 'moz', 'opera', 'ms'];
+
+
+/**
+ * Export mixin
+ */
+
+module.exports = transformOrigin;
diff --git a/mixins/transform-origin/transform-origin.md b/mixins/transform-origin/transform-origin.md
new file mode 100644
index 0000000..6b5995f
--- /dev/null
+++ b/mixins/transform-origin/transform-origin.md
@@ -0,0 +1,33 @@
+### | | )
+
+**Tips and tricks:**
+
+ If you omit units, `transform-origin` adds `%` automatically.
+
+**Example:**
+
+ div {
+ .transform-origin(50 50);
+ }
+
+ // Result
+ div {
+ -webkit-transform-origin: 50% 50%;
+ -moz-transform-origin: 50% 50%;
+ -opera-transform-origin: 50% 50%;
+ -ms-transform-origin: 50% 50%;
+ transform-origin: 50% 50%;
+ }
+
+
diff --git a/mixins/transform-style/test.js b/mixins/transform-style/test.js
new file mode 100644
index 0000000..235e7d5
--- /dev/null
+++ b/mixins/transform-style/test.js
@@ -0,0 +1,9 @@
+var assert = require('assert');
+
+describe('transform-style', function() {
+
+ it('should return the same value', function(done) {
+ test.transformStyle('preserve-3d', 'preserve-3d', done);
+ });
+
+});
\ No newline at end of file
diff --git a/mixins/transform-style/transform-style.js b/mixins/transform-style/transform-style.js
new file mode 100644
index 0000000..43df24b
--- /dev/null
+++ b/mixins/transform-style/transform-style.js
@@ -0,0 +1,22 @@
+/**
+ * TransformStyle mixin
+ */
+
+var transformStyle = function transformStyle(value) {
+ value = value || 'flat';
+
+ return value;
+};
+
+/**
+ * For which browsers is this mixin specified
+ */
+
+transformStyle.vendors = ['webkit', 'moz', 'opera', 'ms'];
+
+
+/**
+ * Export mixin
+ */
+
+module.exports = transformStyle;
\ No newline at end of file
diff --git a/mixins/transform-style/transform-style.md b/mixins/transform-style/transform-style.md
new file mode 100644
index 0000000..538a743
--- /dev/null
+++ b/mixins/transform-style/transform-style.md
@@ -0,0 +1,29 @@
+### +)
+
+**Tips and tricks:**
+
+ If you omit units, `transform` can adds correct unit automatically.
+
+ translate: 'px',
+ rotate: 'deg',
+ rotate3d: 'deg',
+ skew: 'deg'
+
+**Example:**
+
+ div {
+ .transform(scale(.5) translate(10, 20));
+ }
+
+ // Result
+ div {
+ -webkit-transform: scale(.5) translate(10, 20);
+ -moz-transform: scale(.5) translate(10, 20);
+ -opera-transform: scale(.5) translate(10, 20);
+ -ms-transform: scale(.5) translate(10, 20);
+ transform: scale(.5) translate(10, 20);
+ }
+
+
diff --git a/mixins/transition-delay/test.js b/mixins/transition-delay/test.js
new file mode 100644
index 0000000..4cfa962
--- /dev/null
+++ b/mixins/transition-delay/test.js
@@ -0,0 +1,17 @@
+var assert = require('assert');
+
+describe('transition-delay', function() {
+
+ it('should return the same value', function(done) {
+ test.transitionDelay('2s, 4s', '2s, 4s', done);
+ });
+
+ it('should return the same value', function(done) {
+ test.transitionDelay('200ms', '200ms', done);
+ });
+
+ it('should return numbers with properly value', function(done) {
+ test.transitionDelay('9, 200', '9s, 200ms', done);
+ });
+
+});
diff --git a/mixins/transition-delay/transition-delay.js b/mixins/transition-delay/transition-delay.js
new file mode 100644
index 0000000..b076eec
--- /dev/null
+++ b/mixins/transition-delay/transition-delay.js
@@ -0,0 +1,37 @@
+/**
+ * TransitionDelay mixin
+ */
+
+var transitionDelay = function transitionDelay(value) {
+ value = value || '0';
+ var valueRegex = /(?:\d)(?:ms|s)/gi;
+ var numWithoutValue = /(?:\s|^)(\d+\.?\d*)(?![^(]*\)|\w|%)/gi;
+
+ if (!valueRegex.test(value) && value !== '0') {
+ value = value.replace(numWithoutValue, function(match) {
+
+ if (parseFloat(match, 10) > 10) {
+ match += 'ms';
+ } else {
+ match += 's';
+ }
+
+ return match;
+ });
+ }
+
+ return value;
+};
+
+/**
+ * For which browsers is this mixin specified
+ */
+
+transitionDelay.vendors = ['webkit', 'moz', 'opera'];
+
+
+/**
+ * Export mixin
+ */
+
+module.exports = transitionDelay;
diff --git a/mixins/transition-delay/transition-delay.md b/mixins/transition-delay/transition-delay.md
new file mode 100644
index 0000000..a2e2d0c
--- /dev/null
+++ b/mixins/transition-delay/transition-delay.md
@@ -0,0 +1,38 @@
+### )
+
+**Tips and tricks:**
+
+ If you omit units after time argument, `transition-delay` is trying to be smart and add properly value.
+
+ if (time > 10) {
+ time += 'ms';
+ } else {
+ time += 's';
+ }
+
+**Example:**
+
+ div {
+ .transition-delay(200);
+ }
+
+ // Result
+ div {
+ -webkit-transition-delay: 200ms;
+ -moz-transition-delay: 200ms;
+ -o-transition-delay: 200ms;
+ transition-delay: 200ms;
+ }
+
+
diff --git a/mixins/transition-duration/test.js b/mixins/transition-duration/test.js
new file mode 100644
index 0000000..7d1215a
--- /dev/null
+++ b/mixins/transition-duration/test.js
@@ -0,0 +1,13 @@
+var assert = require('assert');
+
+describe('transition-duration', function() {
+
+ it('should add default unit and return the value', function(done) {
+ test.transitionDuration('2', '2s', done);
+ });
+
+ it('should add default units and return the value', function(done) {
+ test.transitionDuration('2, 130', '2s, 130ms', done);
+ });
+
+});
\ No newline at end of file
diff --git a/mixins/transition-duration/transition-duration.js b/mixins/transition-duration/transition-duration.js
new file mode 100644
index 0000000..1454a3f
--- /dev/null
+++ b/mixins/transition-duration/transition-duration.js
@@ -0,0 +1,37 @@
+/**
+ * TransitionDuration mixin
+ */
+
+var transitionDuration = function transitionDuration(value) {
+ value = value || '0';
+ var valueRegex = /ms|s/gi;
+ var numWithoutValue = /(?:\s|^)(\d+\.?\d*)(?![^(]*\)|\w|%)/gi;
+
+ if (!valueRegex.test(value) && value !== '0') {
+ value = value.replace(numWithoutValue, function(match) {
+
+ if (parseFloat(match, 10) > 10) {
+ match += 'ms';
+ } else {
+ match += 's';
+ }
+
+ return match;
+ });
+ }
+
+ return value;
+};
+
+/**
+ * For which browsers is this mixin specified
+ */
+
+transitionDuration.vendors = ['webkit', 'moz', 'opera'];
+
+
+/**
+ * Export mixin
+ */
+
+module.exports = transitionDuration;
diff --git a/mixins/transition-duration/transition-duration.md b/mixins/transition-duration/transition-duration.md
new file mode 100644
index 0000000..082ab2c
--- /dev/null
+++ b/mixins/transition-duration/transition-duration.md
@@ -0,0 +1,38 @@
+### )
+
+**Tips and tricks:**
+
+ If you omit units after time argument, `transition-duration` is trying to be smart and add properly value.
+
+ if (time > 10) {
+ time += 'ms';
+ } else {
+ time += 's';
+ }
+
+**Example:**
+
+ div {
+ .transition-duration(6);
+ }
+
+ // Result
+ div {
+ -webkit-transition-duration: 6s;
+ -moz-transition-duration: 6s;
+ -o-transition-duration: 6s;
+ transition-duration: 6s;
+ }
+
+
diff --git a/mixins/transition-property/test.js b/mixins/transition-property/test.js
new file mode 100644
index 0000000..aee7113
--- /dev/null
+++ b/mixins/transition-property/test.js
@@ -0,0 +1,13 @@
+var assert = require('assert');
+
+describe('transition-property', function() {
+
+ it('should return the same value', function(done) {
+ test.transitionProperty('box-shadow', 'box-shadow', done);
+ });
+
+ it('should prefix property and return value', function(done) {
+ test.transitionProperty.webkit('box-shadow', '-webkit-box-shadow', done);
+ });
+
+});
\ No newline at end of file
diff --git a/mixins/transition-property/transition-property.js b/mixins/transition-property/transition-property.js
new file mode 100644
index 0000000..65c7e1d
--- /dev/null
+++ b/mixins/transition-property/transition-property.js
@@ -0,0 +1,86 @@
+/**
+ * TransitionProperty mixin
+ */
+
+var transitionProperty = function transitionProperty(value) {
+ value = value || 'all';
+
+ if (/^[-a-z0-9]*,/.test(value)) {
+ value = value.replace(/(?:,)(?![^(]*\))/g, '');
+ }
+
+ return value;
+};
+
+transitionProperty.webkit = function transitionProperty(value) {
+ value = value || 'all';
+ var prefixedProperties = ['background-size', 'border-', 'box-shadow', 'column', 'transform', 'filter'];
+ var prefix = '-webkit-';
+
+ if (/^[-a-z0-9]*,/.test(value)) {
+ value = value.replace(/(?:,)(?![^(]*\))/g, '');
+ }
+
+ prefixedProperties.forEach(function(property, index) {
+ if (value.indexOf(property) !== -1) {
+ value = value.replace(new RegExp(property, 'g'), function(match) {
+ return prefix + match;
+ })
+ }
+ });
+
+ return value;
+};
+
+transitionProperty.moz = function transitionProperty(value) {
+ value = value || 'all';
+ var prefixedProperties = ['background-size', 'box-shadow', 'column', 'transform', 'filter'];
+ var prefix = '-moz-';
+
+ if (/^[-a-z0-9]*,/.test(value)) {
+ value = value.replace(/(?:,)(?![^(]*\))/g, '');
+ }
+
+ prefixedProperties.forEach(function(property, index) {
+ if (value.indexOf(property) !== -1) {
+ value = value.replace(new RegExp(property, 'g'), function(match) {
+ return prefix + match;
+ })
+ }
+ });
+
+ return value;
+};
+
+transitionProperty.opera = function transitionProperty(value) {
+ value = value || 'all';
+ var prefixedProperties = ['transform'];
+ var prefix = '-o-';
+
+ if (/^[-a-z0-9]*,/.test(value)) {
+ value = value.replace(/(?:,)(?![^(]*\))/g, '');
+ }
+
+ prefixedProperties.forEach(function(property, index) {
+ if (value.indexOf(property) !== -1) {
+ value = value.replace(new RegExp(property, 'g'), function(match) {
+ return prefix + match;
+ })
+ }
+ });
+
+ return value;
+};
+
+/**
+ * For which browsers is this mixin specified
+ */
+
+transitionProperty.vendors = ['webkit', 'moz', 'opera'];
+
+
+/**
+ * Export mixin
+ */
+
+module.exports = transitionProperty;
diff --git a/mixins/transition-property/transition-property.md b/mixins/transition-property/transition-property.md
new file mode 100644
index 0000000..896e23d
--- /dev/null
+++ b/mixins/transition-property/transition-property.md
@@ -0,0 +1,32 @@
+### | all | none)
+
+**Tips and tricks:**
+
+ And also properties inside `transition-property` definition are automatically prefixed, if it is needed.
+
+**Example:**
+
+ div {
+ .transition-property(box-shadow);
+ }
+
+ // Result
+ div {
+ -webkit-transition-property: -webkit-box-shadow;
+ -moz-transition-property: -moz-box-shadow;
+ -o-transition-property: box-shadow;
+ transition-property: box-shadow;
+ }
+
+
diff --git a/mixins/transition-timing-function/test.js b/mixins/transition-timing-function/test.js
new file mode 100644
index 0000000..012fec2
--- /dev/null
+++ b/mixins/transition-timing-function/test.js
@@ -0,0 +1,9 @@
+var assert = require('assert');
+
+describe('transition-timing-function', function() {
+
+ it('should return the same value', function(done) {
+ test.transitionTimingFunction('cubic-bezier(0,0,1,1), ease', 'cubic-bezier(0, 0, 1, 1), ease', done);
+ });
+
+});
\ No newline at end of file
diff --git a/mixins/transition-timing-function/transition-timing-function.js b/mixins/transition-timing-function/transition-timing-function.js
new file mode 100644
index 0000000..2c3a95f
--- /dev/null
+++ b/mixins/transition-timing-function/transition-timing-function.js
@@ -0,0 +1,22 @@
+/**
+ * TransitionTimingFunction mixin
+ */
+
+var transitionTimingFunction = function transitionTimingFunction(value) {
+ value = value || 'ease';
+
+ return value;
+};
+
+/**
+ * For which browsers is this mixin specified
+ */
+
+transitionTimingFunction.vendors = ['webkit', 'moz', 'opera'];
+
+
+/**
+ * Export mixin
+ */
+
+module.exports = transitionTimingFunction;
\ No newline at end of file
diff --git a/mixins/transition-timing-function/transition-timing-function.md b/mixins/transition-timing-function/transition-timing-function.md
new file mode 100644
index 0000000..a12cc80
--- /dev/null
+++ b/mixins/transition-timing-function/transition-timing-function.md
@@ -0,0 +1,28 @@
+### , ...)
+
+**Example:**
+
+ div {
+ .transition-timing-function(cubic-bezier(0,0,1,1), ease);
+ }
+
+ // Result
+ div {
+ -webkit-transition-timing-function: cubic-bezier(0, 0, 1, 1), ease;
+ -moz-transition-timing-function: cubic-bezier(0, 0, 1, 1), ease;
+ -o-transition-timing-function: cubic-bezier(0, 0, 1, 1), ease;
+ transition-timing-function: cubic-bezier(0, 0, 1, 1), ease;
+ }
+
+
diff --git a/mixins/transition/test.js b/mixins/transition/test.js
new file mode 100644
index 0000000..d3ffdf3
--- /dev/null
+++ b/mixins/transition/test.js
@@ -0,0 +1,21 @@
+var assert = require('assert');
+
+describe('transition', function() {
+
+ it('should return the same value', function(done) {
+ test.transition('box-shadow 0.2s cubic-bezier(.17,.67,.83,.67)', 'box-shadow 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67)', done);
+ });
+
+ it('should return the same value', function(done) {
+ test.transition('box-shadow 0.2s linear, color .4s .2s ease', 'box-shadow 0.2s linear, color 0.4s 0.2s ease', done);
+ });
+
+ it('should return prefixed value', function(done) {
+ test.transition.webkit('box-shadow .2 linear, filter .5 .2 ease', '-webkit-box-shadow 0.2s linear, -webkit-filter 0.5s 0.2s ease', done);
+ });
+
+ it('should return prefixed value', function(done) {
+ test.transition.moz('box-shadow .2 linear, filter .5 .2 ease', '-moz-box-shadow 0.2s linear, -moz-filter 0.5s 0.2s ease', done);
+ });
+
+});
diff --git a/mixins/transition/transition.js b/mixins/transition/transition.js
new file mode 100644
index 0000000..0531009
--- /dev/null
+++ b/mixins/transition/transition.js
@@ -0,0 +1,145 @@
+/**
+ * Transition mixin
+ */
+
+var transition = function transition(value) {
+ value = value || 'all 0 ease 0';
+ var valueRegex = /(?:\d)(?:ms|s)/gi;
+ var numWithoutValue = /(?:\s|^)(\.?\d+\.?\d*)(?![^(]*\)|\w|%)/gi;
+
+ if (/^[-a-z0-9]*,/.test(value)) {
+ value = value.replace(/(?:,)(?![^(]*\))/g, '');
+ }
+
+ if (!valueRegex.test(value) && value !== '0') {
+ value = value.replace(numWithoutValue, function(match) {
+
+ if (parseFloat(match, 10) > 10) {
+ match += 'ms';
+ } else {
+ match += 's';
+ }
+
+ return match;
+ });
+ }
+
+ return value;
+};
+
+transition.webkit = function transition(value) {
+ value = value || 'all 0 ease 0';
+ var prefixedProperties = ['background-size', 'border-', 'box-shadow', 'column', 'transform', 'filter'];
+ var prefix = '-webkit-';
+ var valueRegex = /(?:\d)(?:ms|s)/gi;
+ var numWithoutValue = /(?:\s|^)(\.?\d+\.?\d*)(?![^(]*\)|\w|%)/gi;
+
+ if (/^[-a-z0-9]*,/.test(value)) {
+ value = value.replace(/(?:,)(?![^(]*\))/g, '');
+ }
+
+ prefixedProperties.forEach(function(property, index) {
+ if (value.indexOf(property) !== -1) {
+ value = value.replace(new RegExp(property, 'g'), function(match) {
+ return prefix + match;
+ })
+ }
+ });
+
+ if (!valueRegex.test(value) && value !== '0') {
+ value = value.replace(numWithoutValue, function(match) {
+
+ if (parseFloat(match, 10) > 10) {
+ match += 'ms';
+ } else {
+ match += 's';
+ }
+
+ return match;
+ });
+ }
+
+ return value;
+};
+
+transition.moz = function transition(value) {
+ value = value || 'all 0 ease 0';
+ var prefixedProperties = ['background-size', 'box-shadow', 'column', 'transform', 'filter'];
+ var prefix = '-moz-';
+ var valueRegex = /(?:\d)(?:ms|s)/gi;
+ var numWithoutValue = /(?:\s|^)(\.?\d+\.?\d*)(?![^(]*\)|\w|%)/gi;
+
+ if (/^[-a-z0-9]*,/.test(value)) {
+ value = value.replace(/(?:,)(?![^(]*\))/g, '');
+ }
+
+ prefixedProperties.forEach(function(property, index) {
+ if (value.indexOf(property) !== -1) {
+ value = value.replace(new RegExp(property, 'g'), function(match) {
+ return prefix + match;
+ })
+ }
+ });
+
+ if (!valueRegex.test(value) && value !== '0') {
+ value = value.replace(numWithoutValue, function(match) {
+
+ if (parseFloat(match, 10) > 10) {
+ match += 'ms';
+ } else {
+ match += 's';
+ }
+
+ return match;
+ });
+ }
+
+ return value;
+};
+
+transition.opera = function transition(value) {
+ value = value || 'all 0 ease 0';
+ var prefixedProperties = ['transform'];
+ var prefix = '-o-';
+ var valueRegex = /(?:\d)(?:ms|s)/gi;
+ var numWithoutValue = /(?:\s|^)(\.?\d+\.?\d*)(?![^(]*\)|\w|%)/gi;
+
+ if (/^[-a-z0-9]*,/.test(value)) {
+ value = value.replace(/(?:,)(?![^(]*\))/g, '');
+ }
+
+ prefixedProperties.forEach(function(property, index) {
+ if (value.indexOf(property) !== -1) {
+ value = value.replace(new RegExp(property, 'g'), function(match) {
+ return prefix + match;
+ })
+ }
+ });
+
+ if (!valueRegex.test(value) && value !== '0') {
+ value = value.replace(numWithoutValue, function(match) {
+
+ if (parseFloat(match, 10) > 10) {
+ match += 'ms';
+ } else {
+ match += 's';
+ }
+
+ return match;
+ });
+ }
+
+ return value;
+};
+
+/**
+ * For which browsers is this mixin specified
+ */
+
+transition.vendors = ['webkit', 'moz', 'opera'];
+
+/**
+ * Export mixin
+ */
+
+module.exports = transition;
diff --git a/mixins/transition/transition.md b/mixins/transition/transition.md
new file mode 100644
index 0000000..5b5b816
--- /dev/null
+++ b/mixins/transition/transition.md
@@ -0,0 +1,40 @@
+### ] | | | )
+
+**Tips and tricks:**
+
+ If you omit units after time argument, `transition` is trying to be smart and add properly value.
+
+ if (time > 10) {
+ time += 'ms';
+ } else {
+ time += 's';
+ }
+
+ And also properties inside `transition` definition are automatically prefixed, if it is needed.
+
+**Example:**
+
+ div {
+ .transition(box-shadow 0.2s linear, color .4s .2s ease);
+ }
+
+ // Result
+ div {
+ -webkit-transition: -webkit-box-shadow 0.2s linear, color 0.4s 0.2s ease;
+ -moz-transition: -moz-box-shadow 0.2s linear, color 0.4s 0.2s ease;
+ -o-transition: box-shadow 0.2s linear, color 0.4s 0.2s ease;
+ transition: box-shadow 0.2s linear, color 0.4s 0.2s ease;
+ }
+
+
diff --git a/mixins/translate/test.js b/mixins/translate/test.js
new file mode 100644
index 0000000..07f44db
--- /dev/null
+++ b/mixins/translate/test.js
@@ -0,0 +1,10 @@
+var assert = require('assert');
+
+describe('translate', function() {
+
+ it('should return default units and value', function(done) {
+ test.resultProperty = 'transform';
+ test.translate('20', 'translate(20px)', done);
+ });
+
+});
diff --git a/mixins/translate/translate.js b/mixins/translate/translate.js
new file mode 100644
index 0000000..416d3e4
--- /dev/null
+++ b/mixins/translate/translate.js
@@ -0,0 +1,38 @@
+/**
+ * Translate mixin
+ */
+
+var translate = function translate(value) {
+ value = value || '0';
+ var numRegex = /\d/gi;
+ var numWithoutValue = /(?:\s|^)(\d+\.?\d*)(?![^(]*\)|\w|%)/gi;
+
+ if (numRegex.test(value)) {
+ value = value.replace(numWithoutValue, function(match) {
+ return match + 'px';
+ });
+ }
+
+ return value;
+};
+
+/**
+ * Result settings
+ */
+
+translate.result = {
+ property: 'transform',
+ value: 'translate({{ result }})',
+};
+
+/**
+ * For which browsers is this mixin specified
+ */
+
+translate.vendors = ['webkit', 'moz', 'opera', 'ms'];
+
+/**
+ * Export mixin
+ */
+
+module.exports = translate;
diff --git a/mixins/translate/translate.md b/mixins/translate/translate.md
new file mode 100644
index 0000000..b1671c1
--- /dev/null
+++ b/mixins/translate/translate.md
@@ -0,0 +1,31 @@
+### [, ])
+
+**Tips and tricks:**
+
+ If you omit units, `translate` adds `px` automatically.
+
+**Example:**
+
+ div {
+ .translate(200);
+ }
+
+ // Result
+ div {
+ -webkit-transform: translate(200px);
+ -moz-transform: translate(200px);
+ -o-transform: translate(200px);
+ transform: translate(200px);
+ }
+
diff --git a/mixins/translate3d/test.js b/mixins/translate3d/test.js
new file mode 100644
index 0000000..c11885f
--- /dev/null
+++ b/mixins/translate3d/test.js
@@ -0,0 +1,10 @@
+var assert = require('assert');
+
+describe('translate3d', function() {
+
+ it('should return default units and value', function(done) {
+ test.resultProperty = 'transform';
+ test.translate3d('20, 30, 10', 'translate3d(20px, 30px, 10px)', done);
+ });
+
+});
diff --git a/mixins/translate3d/translate3d.js b/mixins/translate3d/translate3d.js
new file mode 100644
index 0000000..47c3b2b
--- /dev/null
+++ b/mixins/translate3d/translate3d.js
@@ -0,0 +1,38 @@
+/**
+ * Translate3d mixin
+ */
+
+var translate3d = function translate3d(value) {
+ value = value || '0, 0, 0';
+ var numRegex = /\d/gi;
+ var numWithoutValue = /(?:\s|^)(\d+\.?\d*)(?![^(]*\)|\w|%)/gi;
+
+ if (numRegex.test(value)) {
+ value = value.replace(numWithoutValue, function(match) {
+ return match + 'px';
+ });
+ }
+
+ return value;
+};
+
+/**
+ * Result settings
+ */
+
+translate3d.result = {
+ property: 'transform',
+ value: 'translate3d({{ result }})',
+};
+
+/**
+ * For which browsers is this mixin specified
+ */
+
+translate3d.vendors = ['webkit', 'moz', 'opera', 'ms'];
+
+/**
+ * Export mixin
+ */
+
+module.exports = translate3d;
diff --git a/mixins/translate3d/translate3d.md b/mixins/translate3d/translate3d.md
new file mode 100644
index 0000000..1eaefda
--- /dev/null
+++ b/mixins/translate3d/translate3d.md
@@ -0,0 +1,32 @@
+### MDN **
+
+**Syntax:**
+
+ Default value: 0
+
+ .translate3d(, , )
+
+**Tips and tricks:**
+
+ If you omit units, `translate3d` adds `px` automatically.
+
+**Example:**
+
+ div {
+ .translate3d(20, 30, 10);
+ }
+
+ // Result
+ div {
+ -webkit-transform: translate3d(20px, 30px, 10px);
+ -moz-transform: translate3d(20px, 30px, 10px);
+ -o-transform: translate3d(20px, 30px, 10px);
+ transform: translate3d(20px, 30px, 10px);
+ }
+
+
diff --git a/mixins/translateX/test.js b/mixins/translateX/test.js
new file mode 100644
index 0000000..cee578f
--- /dev/null
+++ b/mixins/translateX/test.js
@@ -0,0 +1,10 @@
+var assert = require('assert');
+
+describe('translateX', function() {
+
+ it('should return default units and value', function(done) {
+ test.resultProperty = 'transform';
+ test.translateX('20', 'translateX(20px)', done);
+ });
+
+});
diff --git a/mixins/translateX/translateX.js b/mixins/translateX/translateX.js
new file mode 100644
index 0000000..446c762
--- /dev/null
+++ b/mixins/translateX/translateX.js
@@ -0,0 +1,38 @@
+/**
+ * TranslateX mixin
+ */
+
+var translateX = function translateX(value) {
+ value = value || '0';
+ var numRegex = /\d/gi;
+ var numWithoutValue = /(?:\s|^)(\d+\.?\d*)(?![^(]*\)|\w|%)/gi;
+
+ if (numRegex.test(value)) {
+ value = value.replace(numWithoutValue, function(match) {
+ return match + 'px';
+ });
+ }
+
+ return value;
+};
+
+/**
+ * Result settings
+ */
+
+translateX.result = {
+ property: 'transform',
+ value: 'translateX({{ result }})',
+};
+
+/**
+ * For which browsers is this mixin specified
+ */
+
+translateX.vendors = ['webkit', 'moz', 'opera', 'ms'];
+
+/**
+ * Export mixin
+ */
+
+module.exports = translateX;
diff --git a/mixins/translateX/translateX.md b/mixins/translateX/translateX.md
new file mode 100644
index 0000000..dacf5d1
--- /dev/null
+++ b/mixins/translateX/translateX.md
@@ -0,0 +1,31 @@
+### )
+
+**Tips and tricks:**
+
+ If you omit units, `translateX` adds `px` automatically.
+
+**Example:**
+
+ div {
+ .translateX(20);
+ }
+
+ // Result
+ div {
+ -webkit-transform: translateX(20px);
+ -moz-transform: translateX(20px);
+ -o-transform: translateX(20px);
+ transform: translateX(20px);
+ }
+
diff --git a/mixins/translateY/test.js b/mixins/translateY/test.js
new file mode 100644
index 0000000..19e9806
--- /dev/null
+++ b/mixins/translateY/test.js
@@ -0,0 +1,10 @@
+var assert = require('assert');
+
+describe('translateY', function() {
+
+ it('should return default units and value', function(done) {
+ test.resultProperty = 'transform';
+ test.translateY('20', 'translateY(20px)', done);
+ });
+
+});
diff --git a/mixins/translateY/translateY.js b/mixins/translateY/translateY.js
new file mode 100644
index 0000000..8b3fd8d
--- /dev/null
+++ b/mixins/translateY/translateY.js
@@ -0,0 +1,38 @@
+/**
+ * TranslateY mixin
+ */
+
+var translateY = function translateY(value) {
+ value = value || '0';
+ var numRegex = /\d/gi;
+ var numWithoutValue = /(?:\s|^)(\d+\.?\d*)(?![^(]*\)|\w|%)/gi;
+
+ if (numRegex.test(value)) {
+ value = value.replace(numWithoutValue, function(match) {
+ return match + 'px';
+ });
+ }
+
+ return value;
+};
+
+/**
+ * Result settings
+ */
+
+translateY.result = {
+ property: 'transform',
+ value: 'translateY({{ result }})',
+};
+
+/**
+ * For which browsers is this mixin specified
+ */
+
+translateY.vendors = ['webkit', 'moz', 'opera', 'ms'];
+
+/**
+ * Export mixin
+ */
+
+module.exports = translateY;
diff --git a/mixins/translateY/translateY.md b/mixins/translateY/translateY.md
new file mode 100644
index 0000000..1ee818c
--- /dev/null
+++ b/mixins/translateY/translateY.md
@@ -0,0 +1,31 @@
+### )
+
+**Tips and tricks:**
+
+ If you omit units, `translateY` adds `px` automatically.
+
+**Example:**
+
+ div {
+ .translateY(20);
+ }
+
+ // Result
+ div {
+ -webkit-transform: translateY(20px);
+ -moz-transform: translateY(20px);
+ -o-transform: translateY(20px);
+ transform: translateY(20px);
+ }
+
diff --git a/mixins/translateZ/test.js b/mixins/translateZ/test.js
new file mode 100644
index 0000000..56980cd
--- /dev/null
+++ b/mixins/translateZ/test.js
@@ -0,0 +1,10 @@
+var assert = require('assert');
+
+describe('translateZ', function() {
+
+ it('should return default units and value', function(done) {
+ test.resultProperty = 'transform';
+ test.translateZ('20', 'translateZ(20px)', done);
+ });
+
+});
diff --git a/mixins/translateZ/translateZ.js b/mixins/translateZ/translateZ.js
new file mode 100644
index 0000000..6609cd0
--- /dev/null
+++ b/mixins/translateZ/translateZ.js
@@ -0,0 +1,38 @@
+/**
+ * TranslateZ mixin
+ */
+
+var translateZ = function translateZ(value) {
+ value = value || '0';
+ var numRegex = /\d/gi;
+ var numWithoutValue = /(?:\s|^)(\d+\.?\d*)(?![^(]*\)|\w|%)/gi;
+
+ if (numRegex.test(value)) {
+ value = value.replace(numWithoutValue, function(match) {
+ return match + 'px';
+ });
+ }
+
+ return value;
+};
+
+/**
+ * Result settings
+ */
+
+translateZ.result = {
+ property: 'transform',
+ value: 'translateZ({{ result }})',
+};
+
+/**
+ * For which browsers is this mixin specified
+ */
+
+translateZ.vendors = ['webkit', 'moz', 'opera', 'ms'];
+
+/**
+ * Export mixin
+ */
+
+module.exports = translateZ;
diff --git a/mixins/translateZ/translateZ.md b/mixins/translateZ/translateZ.md
new file mode 100644
index 0000000..1ed0d32
--- /dev/null
+++ b/mixins/translateZ/translateZ.md
@@ -0,0 +1,32 @@
+### )
+
+**Tips and tricks:**
+
+ If you omit units, `translateZ` adds `px` automatically.
+
+**Example:**
+
+ div {
+ .translateZ(20);
+ }
+
+ // Result
+ div {
+ -webkit-transform: translateZ(20px);
+ -moz-transform: translateZ(20px);
+ -o-transform: translateZ(20px);
+ transform: translateZ(20px);
+ }
+
+
diff --git a/mixins/user-select/test.js b/mixins/user-select/test.js
new file mode 100644
index 0000000..4d9af9c
--- /dev/null
+++ b/mixins/user-select/test.js
@@ -0,0 +1,9 @@
+var assert = require('assert');
+
+describe('user-select', function() {
+
+ it('should return the same value', function(done) {
+ test.userSelect('none', 'none', done);
+ });
+
+});
diff --git a/mixins/user-select/user-select.js b/mixins/user-select/user-select.js
new file mode 100644
index 0000000..e160b3f
--- /dev/null
+++ b/mixins/user-select/user-select.js
@@ -0,0 +1,22 @@
+/**
+ * UserSelect mixin
+ */
+
+var userSelect = function userSelect(value) {
+ value = value || 'auto';
+
+ return value;
+};
+
+/**
+ * For which browsers is this mixin specified
+ */
+
+userSelect.vendors = ['webkit', 'moz', 'ms'];
+
+
+/**
+ * Export mixin
+ */
+
+module.exports = userSelect;
\ No newline at end of file
diff --git a/mixins/user-select/user-select.md b/mixins/user-select/user-select.md
new file mode 100644
index 0000000..ced0c6c
--- /dev/null
+++ b/mixins/user-select/user-select.md
@@ -0,0 +1,26 @@
+###