From 968cc644667b60f18a602865cb91b42ddeb60d90 Mon Sep 17 00:00:00 2001 From: Petr Brzek Date: Tue, 29 Oct 2013 18:30:32 +0100 Subject: [PATCH 01/36] init --- .gitignore | 1 + .travis.yml | 3 + Gruntfile.js | 163 ++++++++ LICENSE | 44 +++ README.md | 28 ++ build/.gitignore | 2 + mixins/VERSION | 1 + mixins/align-content/align-content.js | 48 +++ mixins/align-content/test.js | 12 + mixins/align-items/align-items.js | 79 ++++ mixins/align-items/test.js | 12 + mixins/align-self/align-self.js | 33 ++ mixins/align-self/test.js | 9 + mixins/animation-delay/animation-delay.js | 37 ++ mixins/animation-delay/test.js | 17 + .../animation-direction.js | 19 + mixins/animation-direction/test.js | 13 + .../animation-duration/animation-duration.js | 37 ++ mixins/animation-duration/test.js | 21 + .../animation-fill-mode.js | 19 + mixins/animation-fill-mode/test.js | 13 + .../animation-iteration-count.js | 19 + mixins/animation-iteration-count/test.js | 13 + mixins/animation-name/animation-name.js | 19 + mixins/animation-name/test.js | 13 + .../animation-play-state.js | 19 + mixins/animation-play-state/test.js | 14 + .../animation-timing-function.js | 19 + mixins/animation-timing-function/test.js | 13 + mixins/animation/animation.js | 25 ++ mixins/animation/test.js | 14 + mixins/appearance/appearance.js | 19 + mixins/appearance/test.js | 13 + .../backface-visibility.js | 19 + mixins/backface-visibility/test.js | 9 + mixins/background-clip/background-clip.js | 19 + mixins/background-clip/test.js | 9 + mixins/background-image/background-image.js | 358 ++++++++++++++++++ mixins/background-image/test.js | 29 ++ mixins/background-origin/background-origin.js | 19 + mixins/background-origin/test.js | 9 + mixins/background-size/background-size.js | 29 ++ mixins/background-size/test.js | 13 + mixins/blur/blur.js | 38 ++ mixins/blur/test.js | 10 + .../border-bottom-left-radius.js | 43 +++ mixins/border-bottom-left-radius/test.js | 13 + .../border-bottom-right-radius.js | 43 +++ mixins/border-bottom-right-radius/test.js | 13 + mixins/border-image/border-image.js | 25 ++ mixins/border-image/test.js | 9 + mixins/border-radius/border-radius.js | 43 +++ mixins/border-radius/test.js | 13 + .../border-top-left-radius.js | 43 +++ mixins/border-top-left-radius/test.js | 13 + .../border-top-right-radius.js | 44 +++ mixins/border-top-right-radius/test.js | 13 + mixins/box-shadow/box-shadow.js | 33 ++ mixins/box-shadow/test.js | 13 + mixins/box-sizing/box-sizing.js | 22 ++ mixins/box-sizing/test.js | 9 + mixins/brightness/brightness.js | 30 ++ mixins/brightness/test.js | 10 + mixins/column-count/column-count.js | 22 ++ mixins/column-count/test.js | 9 + mixins/column-gap/column-gap.js | 30 ++ mixins/column-gap/test.js | 13 + mixins/column-rule/column-rule.js | 34 ++ mixins/column-rule/test.js | 13 + mixins/column-width/column-width.js | 30 ++ mixins/column-width/test.js | 13 + mixins/columns/columns.js | 32 ++ mixins/columns/test.js | 13 + mixins/contrast/contrast.js | 38 ++ mixins/contrast/test.js | 10 + mixins/display/display.js | 78 ++++ mixins/display/test.js | 16 + mixins/drop-shadow/drop-shadow.js | 42 ++ mixins/drop-shadow/test.js | 10 + mixins/filter/filter.js | 26 ++ mixins/filter/test.js | 9 + mixins/flex-basis/flex-basis.js | 29 ++ mixins/flex-basis/test.js | 9 + mixins/flex-direction/flex-direction.js | 104 +++++ mixins/flex-direction/test.js | 16 + mixins/flex-grow/flex-grow.js | 21 + mixins/flex-grow/test.js | 9 + mixins/flex-shrink/flex-shrink.js | 21 + mixins/flex-shrink/test.js | 9 + mixins/flex-wrap/flex-wrap.js | 21 + mixins/flex-wrap/test.js | 9 + mixins/flex/flex.js | 48 +++ mixins/flex/test.js | 12 + mixins/font-face/font-face.less | 12 + mixins/footer.less | 1 + mixins/grayscale/grayscale.js | 38 ++ mixins/grayscale/test.js | 10 + mixins/header.less | 7 + mixins/hue-rotate/hue-rotate.js | 38 ++ mixins/hue-rotate/test.js | 10 + mixins/invert/invert.js | 38 ++ mixins/invert/test.js | 10 + mixins/justify-content/justify-content.js | 91 +++++ mixins/justify-content/test.js | 12 + mixins/keyframes/keyframes.js | 94 +++++ mixins/keyframes/test.js | 10 + mixins/opacity/opacity.js | 49 +++ mixins/opacity/test.js | 15 + mixins/order/order.js | 40 ++ mixins/order/test.js | 9 + .../perspective-origin/perspective-origin.js | 34 ++ mixins/perspective-origin/test.js | 13 + mixins/perspective/perspective.js | 30 ++ mixins/perspective/test.js | 13 + mixins/placeholder/placeholder.less | 31 ++ mixins/properties | 8 + mixins/rotate/rotate.js | 38 ++ mixins/rotate/test.js | 10 + mixins/rotate3d/rotate3d.js | 33 ++ mixins/rotate3d/test.js | 10 + mixins/rotateX/rotateX.js | 38 ++ mixins/rotateX/test.js | 10 + mixins/rotateY/rotateY.js | 38 ++ mixins/rotateY/test.js | 10 + mixins/rotateZ/rotateZ.js | 38 ++ mixins/rotateZ/test.js | 10 + mixins/saturate/saturate.js | 38 ++ mixins/saturate/test.js | 10 + mixins/scale/scale.js | 30 ++ mixins/scale/test.js | 10 + mixins/scale3d/scale3d.js | 30 ++ mixins/scale3d/test.js | 10 + mixins/scaleX/scaleX.js | 30 ++ mixins/scaleX/test.js | 10 + mixins/scaleY/scaleY.js | 30 ++ mixins/scaleY/test.js | 10 + mixins/scaleZ/scaleZ.js | 30 ++ mixins/scaleZ/test.js | 10 + mixins/selection/selection.less | 45 +++ mixins/sepia/sepia.js | 38 ++ mixins/sepia/test.js | 10 + mixins/size/size.less | 31 ++ mixins/skew/skew.js | 38 ++ mixins/skew/test.js | 10 + mixins/skewX/skewX.js | 38 ++ mixins/skewX/test.js | 10 + mixins/skewY/skewY.js | 38 ++ mixins/skewY/test.js | 10 + mixins/transform-origin/test.js | 13 + mixins/transform-origin/transform-origin.js | 34 ++ mixins/transform-style/test.js | 9 + mixins/transform-style/transform-style.js | 22 ++ mixins/transform/test.js | 9 + mixins/transform/transform.js | 47 +++ mixins/transition-delay/test.js | 17 + mixins/transition-delay/transition-delay.js | 38 ++ mixins/transition-duration/test.js | 13 + .../transition-duration.js | 38 ++ mixins/transition-property/test.js | 13 + .../transition-property.js | 86 +++++ mixins/transition-timing-function/test.js | 9 + .../transition-timing-function.js | 22 ++ mixins/transition/test.js | 25 ++ mixins/transition/transition.js | 149 ++++++++ mixins/translate/test.js | 10 + mixins/translate/translate.js | 38 ++ mixins/translate3d/test.js | 10 + mixins/translate3d/translate3d.js | 38 ++ mixins/translateX/test.js | 10 + mixins/translateX/translateX.js | 38 ++ mixins/translateY/test.js | 10 + mixins/translateY/translateY.js | 38 ++ mixins/translateZ/test.js | 10 + mixins/translateZ/translateZ.js | 38 ++ mixins/user-select/test.js | 9 + mixins/user-select/user-select.js | 22 ++ package.json | 14 + 177 files changed, 4743 insertions(+) create mode 100644 .gitignore create mode 100644 .travis.yml create mode 100644 Gruntfile.js create mode 100644 LICENSE create mode 100644 README.md create mode 100644 build/.gitignore create mode 100644 mixins/VERSION create mode 100644 mixins/align-content/align-content.js create mode 100644 mixins/align-content/test.js create mode 100644 mixins/align-items/align-items.js create mode 100644 mixins/align-items/test.js create mode 100644 mixins/align-self/align-self.js create mode 100644 mixins/align-self/test.js create mode 100644 mixins/animation-delay/animation-delay.js create mode 100644 mixins/animation-delay/test.js create mode 100644 mixins/animation-direction/animation-direction.js create mode 100644 mixins/animation-direction/test.js create mode 100644 mixins/animation-duration/animation-duration.js create mode 100644 mixins/animation-duration/test.js create mode 100644 mixins/animation-fill-mode/animation-fill-mode.js create mode 100644 mixins/animation-fill-mode/test.js create mode 100644 mixins/animation-iteration-count/animation-iteration-count.js create mode 100644 mixins/animation-iteration-count/test.js create mode 100644 mixins/animation-name/animation-name.js create mode 100644 mixins/animation-name/test.js create mode 100644 mixins/animation-play-state/animation-play-state.js create mode 100644 mixins/animation-play-state/test.js create mode 100644 mixins/animation-timing-function/animation-timing-function.js create mode 100644 mixins/animation-timing-function/test.js create mode 100644 mixins/animation/animation.js create mode 100644 mixins/animation/test.js create mode 100644 mixins/appearance/appearance.js create mode 100644 mixins/appearance/test.js create mode 100644 mixins/backface-visibility/backface-visibility.js create mode 100644 mixins/backface-visibility/test.js create mode 100644 mixins/background-clip/background-clip.js create mode 100644 mixins/background-clip/test.js create mode 100644 mixins/background-image/background-image.js create mode 100644 mixins/background-image/test.js create mode 100644 mixins/background-origin/background-origin.js create mode 100644 mixins/background-origin/test.js create mode 100644 mixins/background-size/background-size.js create mode 100644 mixins/background-size/test.js create mode 100644 mixins/blur/blur.js create mode 100644 mixins/blur/test.js create mode 100644 mixins/border-bottom-left-radius/border-bottom-left-radius.js create mode 100644 mixins/border-bottom-left-radius/test.js create mode 100644 mixins/border-bottom-right-radius/border-bottom-right-radius.js create mode 100644 mixins/border-bottom-right-radius/test.js create mode 100644 mixins/border-image/border-image.js create mode 100644 mixins/border-image/test.js create mode 100644 mixins/border-radius/border-radius.js create mode 100644 mixins/border-radius/test.js create mode 100644 mixins/border-top-left-radius/border-top-left-radius.js create mode 100644 mixins/border-top-left-radius/test.js create mode 100644 mixins/border-top-right-radius/border-top-right-radius.js create mode 100644 mixins/border-top-right-radius/test.js create mode 100644 mixins/box-shadow/box-shadow.js create mode 100644 mixins/box-shadow/test.js create mode 100644 mixins/box-sizing/box-sizing.js create mode 100644 mixins/box-sizing/test.js create mode 100644 mixins/brightness/brightness.js create mode 100644 mixins/brightness/test.js create mode 100644 mixins/column-count/column-count.js create mode 100644 mixins/column-count/test.js create mode 100644 mixins/column-gap/column-gap.js create mode 100644 mixins/column-gap/test.js create mode 100644 mixins/column-rule/column-rule.js create mode 100644 mixins/column-rule/test.js create mode 100644 mixins/column-width/column-width.js create mode 100644 mixins/column-width/test.js create mode 100644 mixins/columns/columns.js create mode 100644 mixins/columns/test.js create mode 100644 mixins/contrast/contrast.js create mode 100644 mixins/contrast/test.js create mode 100644 mixins/display/display.js create mode 100644 mixins/display/test.js create mode 100644 mixins/drop-shadow/drop-shadow.js create mode 100644 mixins/drop-shadow/test.js create mode 100644 mixins/filter/filter.js create mode 100644 mixins/filter/test.js create mode 100644 mixins/flex-basis/flex-basis.js create mode 100644 mixins/flex-basis/test.js create mode 100644 mixins/flex-direction/flex-direction.js create mode 100644 mixins/flex-direction/test.js create mode 100644 mixins/flex-grow/flex-grow.js create mode 100644 mixins/flex-grow/test.js create mode 100644 mixins/flex-shrink/flex-shrink.js create mode 100644 mixins/flex-shrink/test.js create mode 100644 mixins/flex-wrap/flex-wrap.js create mode 100644 mixins/flex-wrap/test.js create mode 100644 mixins/flex/flex.js create mode 100644 mixins/flex/test.js create mode 100644 mixins/font-face/font-face.less create mode 100644 mixins/footer.less create mode 100644 mixins/grayscale/grayscale.js create mode 100644 mixins/grayscale/test.js create mode 100644 mixins/header.less create mode 100644 mixins/hue-rotate/hue-rotate.js create mode 100644 mixins/hue-rotate/test.js create mode 100644 mixins/invert/invert.js create mode 100644 mixins/invert/test.js create mode 100644 mixins/justify-content/justify-content.js create mode 100644 mixins/justify-content/test.js create mode 100644 mixins/keyframes/keyframes.js create mode 100644 mixins/keyframes/test.js create mode 100644 mixins/opacity/opacity.js create mode 100644 mixins/opacity/test.js create mode 100644 mixins/order/order.js create mode 100644 mixins/order/test.js create mode 100644 mixins/perspective-origin/perspective-origin.js create mode 100644 mixins/perspective-origin/test.js create mode 100644 mixins/perspective/perspective.js create mode 100644 mixins/perspective/test.js create mode 100644 mixins/placeholder/placeholder.less create mode 100644 mixins/properties create mode 100644 mixins/rotate/rotate.js create mode 100644 mixins/rotate/test.js create mode 100644 mixins/rotate3d/rotate3d.js create mode 100644 mixins/rotate3d/test.js create mode 100644 mixins/rotateX/rotateX.js create mode 100644 mixins/rotateX/test.js create mode 100644 mixins/rotateY/rotateY.js create mode 100644 mixins/rotateY/test.js create mode 100644 mixins/rotateZ/rotateZ.js create mode 100644 mixins/rotateZ/test.js create mode 100644 mixins/saturate/saturate.js create mode 100644 mixins/saturate/test.js create mode 100644 mixins/scale/scale.js create mode 100644 mixins/scale/test.js create mode 100644 mixins/scale3d/scale3d.js create mode 100644 mixins/scale3d/test.js create mode 100644 mixins/scaleX/scaleX.js create mode 100644 mixins/scaleX/test.js create mode 100644 mixins/scaleY/scaleY.js create mode 100644 mixins/scaleY/test.js create mode 100644 mixins/scaleZ/scaleZ.js create mode 100644 mixins/scaleZ/test.js create mode 100644 mixins/selection/selection.less create mode 100644 mixins/sepia/sepia.js create mode 100644 mixins/sepia/test.js create mode 100644 mixins/size/size.less create mode 100644 mixins/skew/skew.js create mode 100644 mixins/skew/test.js create mode 100644 mixins/skewX/skewX.js create mode 100644 mixins/skewX/test.js create mode 100644 mixins/skewY/skewY.js create mode 100644 mixins/skewY/test.js create mode 100644 mixins/transform-origin/test.js create mode 100644 mixins/transform-origin/transform-origin.js create mode 100644 mixins/transform-style/test.js create mode 100644 mixins/transform-style/transform-style.js create mode 100644 mixins/transform/test.js create mode 100644 mixins/transform/transform.js create mode 100644 mixins/transition-delay/test.js create mode 100644 mixins/transition-delay/transition-delay.js create mode 100644 mixins/transition-duration/test.js create mode 100644 mixins/transition-duration/transition-duration.js create mode 100644 mixins/transition-property/test.js create mode 100644 mixins/transition-property/transition-property.js create mode 100644 mixins/transition-timing-function/test.js create mode 100644 mixins/transition-timing-function/transition-timing-function.js create mode 100644 mixins/transition/test.js create mode 100644 mixins/transition/transition.js create mode 100644 mixins/translate/test.js create mode 100644 mixins/translate/translate.js create mode 100644 mixins/translate3d/test.js create mode 100644 mixins/translate3d/translate3d.js create mode 100644 mixins/translateX/test.js create mode 100644 mixins/translateX/translateX.js create mode 100644 mixins/translateY/test.js create mode 100644 mixins/translateY/translateY.js create mode 100644 mixins/translateZ/test.js create mode 100644 mixins/translateZ/translateZ.js create mode 100644 mixins/user-select/test.js create mode 100644 mixins/user-select/user-select.js create mode 100644 package.json 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..87f8cd9 --- /dev/null +++ b/.travis.yml @@ -0,0 +1,3 @@ +language: node_js +node_js: + - "0.10" \ No newline at end of file diff --git a/Gruntfile.js b/Gruntfile.js new file mode 100644 index 0000000..c7b6f44 --- /dev/null +++ b/Gruntfile.js @@ -0,0 +1,163 @@ +module.exports = function(grunt) { + /** + * Load node modules + */ + var fs = require('fs'); + var path_global = require('path'); + + /** + * Load tasks + */ + grunt.loadNpmTasks('lesshat-devstack'); + grunt.loadNpmTasks('grunt-prompt'); + + /** + * Grunt config + */ + grunt.initConfig({ + generator: { + settings: { + mixin_name: null, + default_value: null, + vendors: null + } + }, + + prompt: { + shell: { + 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('prefix', function () { + var path = path_global.join(__dirname, '/build/'); + // Check whether build folder exists + if (!fs.existsSync(path)) { + grunt.fail.fatal('Mixins folder does not exist.'); + } + // Check whether lesshat.less exists + if (!fs.existsSync(path + 'lesshat.less')) { + grunt.fail.fatal('Mixin template does not exist.'); + } + var mixins = fs.readFileSync(path + 'lesshat.less', 'utf8'); + mixins = mixins.replace(/^\.([a-z0-9-]+\([a-z@., 0-9-]+)/gm, function (match, sub_1) { return '.lh-' + sub_1; }); + fs.writeFileSync(path + 'lesshat-prefixed.less', mixins); + + grunt.log.ok('Prefixed version – DONE'); + }); + + grunt.registerTask('generator', function() { + + grunt.task.requires('prompt'); + + var config = grunt.config('generator.settings'); + var path = path_global.join(__dirname, '/mixins/'); + + // Check whether mixins folder exists + if (!fs.existsSync(path)) { + grunt.fail.fatal('Mixins folder does not exist. Try to install the whole workflow again,\nor send issue on github.'); + } + + // Check whether concrete mixin folder exists + if (fs.existsSync(path + config.mixin_css_name)) { + grunt.fail.fatal(config.mixin_css_name + ' folder already exists. Choose another name.'); + } + + // Create folder + var folder = fs.mkdirSync(path + config.mixin_css_name); + grunt.log.ok('Folder created – DONE'); + + // Create files inside folder + var lesshatdev_path = path_global.resolve(__dirname, './node_modules/lesshat-dev/src/'); + + // Check whether mixin template exists + if (fs.existsSync(lesshatdev_path + 'mixin-template.js')) { + grunt.fail.fatal('Mixin template does not exist. Try to install the whole workflow again,\nor send issue on github.'); + } + + function fileCreator(mixin_name, path, data, exported, done) { + var mixin_template_path = path.global.join(path.template, mixin_name + '.js'); + var mixin_template = fs.readFileSync(mixin_template_path, 'utf8'); + + mixin_template = mixin_template.replace(/{{\s*(\w+\s*\|?\s*\w+)\s*}}/g, function(match, variable) { + return (!(config[variable] instanceof Array) && (config[variable])) || (JSON.stringify(data[variable]).replace(/"/g, '\'')); + }); + fs.writeFileSync(path.global.join(path.local, exported.path, exported.file + '.js'), mixin_template); + + if (done) done(); + } + + fileCreator('mixin-template', { + global: path_global, + local: path, + template: lesshatdev_path + }, config, { + path: config.mixin_css_name, + file: config.mixin_css_name + }, function() { + grunt.log.ok('Mixin file created – DONE'); + }); + + fileCreator('test-template', { + global: path_global, + local: path, + template: lesshatdev_path + }, config, { + path: config.mixin_css_name, + file: 'test' + }, function() { + grunt.log.ok('Test file created – DONE'); + }); + + }); + + grunt.registerTask('default', ['build', 'test', 'prefix']); + grunt.registerTask('generate', ['prompt', 'generator']); + +}; \ No newline at end of file diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..f45b78b --- /dev/null +++ b/LICENSE @@ -0,0 +1,44 @@ +MIT License + +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 +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.md b/README.md new file mode 100644 index 0000000..4c2a870 --- /dev/null +++ b/README.md @@ -0,0 +1,28 @@ +# LESS HAT + +[![build status](https://api.travis-ci.org/jankuca/lesshat.png)](http://travis-ci.org/jankuca/lesshat) + +## Features + +All CSS3 properties which need to be prefixed + +Unlimited number of anything, shadows, gradients, gradient swatches. + +Configurable -turn off all other browsers and get just CSS3 which you want + +SVG gradient fallback for IE9 + +Prefix free - everywhere use only W3C syntax and Less Hat takes care of it + + +## About + +A supersonic bunch of smart LESS mixins. + +Homepage and examples: http://lesshat.com + +From creators of: http://csshat.com + +## License + +LESS Hat is dual-licensed under the new BSD and MIT licenses, see LICENCE file above. diff --git a/build/.gitignore b/build/.gitignore new file mode 100644 index 0000000..d6b7ef3 --- /dev/null +++ b/build/.gitignore @@ -0,0 +1,2 @@ +* +!.gitignore diff --git a/mixins/VERSION b/mixins/VERSION new file mode 100644 index 0000000..a58941b --- /dev/null +++ b/mixins/VERSION @@ -0,0 +1 @@ +1.3 \ No newline at end of file diff --git a/mixins/align-content/align-content.js b/mixins/align-content/align-content.js new file mode 100644 index 0000000..1f0fa4e --- /dev/null +++ b/mixins/align-content/align-content.js @@ -0,0 +1,48 @@ +/** + * AlignContent (flexbox) mixin + */ + +var alignContent = function alignContent(value) { + value = value || 'stretch'; + + return value; +}; + +alignContent.ms = function msalignContent(value) { + value = value || 'stretch'; + + 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 + */ + +alignContent.result = { + ms: { + property: '-ms-flex-line-pack', + prefixed: false + } +}; + +/** + * For which browsers is this mixin specified + */ + +alignContent.vendors = ['webkit', 'ms']; + +/** + * Export mixin + */ + +module.exports = alignContent; \ No newline at end of file diff --git a/mixins/align-content/test.js b/mixins/align-content/test.js new file mode 100644 index 0000000..91b9b33 --- /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 distribute value', function (done) { + // test.alignContent.ms('flex-start', 'start', done); + // }); + +}); \ No newline at end of file diff --git a/mixins/align-items/align-items.js b/mixins/align-items/align-items.js new file mode 100644 index 0000000..1c56e20 --- /dev/null +++ b/mixins/align-items/align-items.js @@ -0,0 +1,79 @@ +/** + * AlignItems mixin + */ + +var alignItems = function alignItems(value) { + value = value || 'flex-start'; + + return value; +}; + +alignItems.olderWebkit = function olderWebkitalignItems(value) { + value = value || 'start'; + + if (value == 'flex-start') { + value = 'start'; + } + else if (value == 'flex-end') { + value = 'end'; + } + + return value; +}; + +alignItems.moz = function mozalignItems(value) { + value = value || 'start'; + + if (value == 'flex-start') { + value = 'start'; + } + else if (value == 'flex-end') { + value = 'end'; + } + + return value; +}; + +alignItems.ms = function msalignItems(value) { + value = value || 'start'; + + 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; \ No newline at end of file diff --git a/mixins/align-items/test.js b/mixins/align-items/test.js new file mode 100644 index 0000000..d0e3408 --- /dev/null +++ b/mixins/align-items/test.js @@ -0,0 +1,12 @@ +var assert = require('assert'); + +describe('align-items', function () { + + /** + * If you want to test this code, comment 'alignItems.result' from align-items.js + */ + // it('should return distribute value', function (done) { + // test.alignItems.ms('flex-start', 'start', done); + // }); + +}); \ No newline at end of file diff --git a/mixins/align-self/align-self.js b/mixins/align-self/align-self.js new file mode 100644 index 0000000..8af29e5 --- /dev/null +++ b/mixins/align-self/align-self.js @@ -0,0 +1,33 @@ +/** + * AlignSelf (flexbox) mixin + */ + +var alignSelf = function alignSelf(value) { + value = value || 'auto'; + + return value; +}; + +alignSelf.ms = function msalignSelf(value) { + value = value || 'auto'; + + if (value == 'flex-start') { + value = 'start'; + } else if (value == 'flex-end') { + value = 'end'; + } + + return value; +}; + +/** + * For which browsers is this mixin specified + */ + +alignSelf.vendors = ['webkit','ms']; + +/** + * Export mixin + */ + +module.exports = alignSelf; \ No newline at end of file diff --git a/mixins/align-self/test.js b/mixins/align-self/test.js new file mode 100644 index 0000000..e035712 --- /dev/null +++ b/mixins/align-self/test.js @@ -0,0 +1,9 @@ +var assert = require('assert'); + +describe('align-self', function () { + + it('should return the same value', function (done) { + test.alignSelf.ms('flex-start', 'start', done); + }); + +}); \ No newline at end of file diff --git a/mixins/animation-delay/animation-delay.js b/mixins/animation-delay/animation-delay.js new file mode 100644 index 0000000..749523c --- /dev/null +++ b/mixins/animation-delay/animation-delay.js @@ -0,0 +1,37 @@ +/** + * AnimationDelay mixin + */ + +var animationDelay = function animationDelay(value) { + value = value || '0'; + var valueRegex = /(?:\d)(?:ms|s)/gi; + var numWithoutValue = /(?:\d+\.?\d*)(?![^(]*\)|\w|%)/gi; + + if (!valueRegex.test(value) && value !== '0') { + value = value.replace(numWithoutValue, function(match) { + var match = parseFloat(match, 10); + + if (match > 10) { + match += 'ms'; + } else { + match += 's'; + } + + return match; + }); + } + + return value; +}; + +/** + * For which browsers is this mixin specified + */ + +animationDelay.vendors = ['webkit', 'moz', 'opera']; + +/** + * Export mixin + */ + +module.exports = animationDelay; \ No newline at end of file diff --git a/mixins/animation-delay/test.js b/mixins/animation-delay/test.js new file mode 100644 index 0000000..381908d --- /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); + }); + +}); \ No newline at end of file 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/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..68a211a --- /dev/null +++ b/mixins/animation-duration/animation-duration.js @@ -0,0 +1,37 @@ +/** + * animationDuration mixin + */ + +var animationDuration = function animationDuration(value) { + value = value || '0'; + var valueRegex = /ms|s/gi; + var numWithoutValue = /(?:\d+\.?\d*)(?![^(]*\)|\w|%)/gi; + + if (!valueRegex.test(value) && value !== '0') { + value = value.replace(numWithoutValue, function(match) { + var match = parseFloat(match, 10); + + if (match > 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; \ No newline at end of file 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/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/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/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/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/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/test.js b/mixins/animation/test.js new file mode 100644 index 0000000..73f5de4 --- /dev/null +++ b/mixins/animation/test.js @@ -0,0 +1,14 @@ +var assert = require('assert'); + + +describe('animation', function() { + + it('should add zero before dot and return the same value', function(done) { + test.animation('nameAnimation .2s', 'nameAnimation 0.2s', done); + }); + + it('should return the same value', function(done) { + test.animation('nameAnimation 2s linear alternate, nameAnimation2 1s linear alternate', 'nameAnimation 2s linear alternate, nameAnimation2 1s linear alternate', done); + }); + +}); \ No newline at end of file diff --git a/mixins/appearance/appearance.js b/mixins/appearance/appearance.js new file mode 100644 index 0000000..067bdfe --- /dev/null +++ b/mixins/appearance/appearance.js @@ -0,0 +1,19 @@ +/** + * appearance mixin + */ + +var appearance = function appearance(value) { + return value || 'none'; +}; + +/** + * For which browsers is this mixin specified + */ + +appearance.vendors = ['webkit', 'moz']; + +/** + * Export mixin + */ + +module.exports = appearance; \ No newline at end of file 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/test.js b/mixins/backface-visibility/test.js new file mode 100644 index 0000000..e749193 --- /dev/null +++ b/mixins/backface-visibility/test.js @@ -0,0 +1,9 @@ +var assert = require('assert'); + +describe('backface-visibility', function() { + + it('should return the same value', function(done) { + test.backfaceVisibility('hidden', 'hidden', done); + }); + +}); \ No newline at end of file diff --git a/mixins/background-clip/background-clip.js b/mixins/background-clip/background-clip.js new file mode 100644 index 0000000..033668e --- /dev/null +++ b/mixins/background-clip/background-clip.js @@ -0,0 +1,19 @@ +/** + * backgroundClip mixin + */ + +var backgroundClip = function backgroundClip(value) { + return value || 'border-box'; +}; + +/** + * For which browsers is this mixin specified + */ + +backgroundClip.vendors = ['webkit', 'moz']; + +/** + * Export mixin + */ + +module.exports = backgroundClip; \ No newline at end of file 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..6bfd483 --- /dev/null +++ b/mixins/background-image/background-image.js @@ -0,0 +1,358 @@ +/** + * BackgroundImage mixin + */ + +var backgroundImage = function backgroundImage(value) { + value = value || 'none'; + 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 || 'none'; + 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 || 'none'; + 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 || 'none'; + 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 || 'none'; + var gradients = 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: '', + rect_radial: '', + svg_end: '' + }; + + gradients.forEach(function(value, index) { + var obj = {}; + // direction + Object.keys(values).some(function(inner_val) { + if (value.indexOf(inner_val) >= 0) { + obj.svg_direction = values[inner_val]; + return true; + } else { + obj.svg_direction = false; + } + }); + // type (linear|radial) + if (/linear/.test(value)) { + obj.svg_type = 'linear'; + } else if (/radial/.test(value)) { + obj.svg_type = 'radial'; + } + // Colors + var colors_count = value.match(/rgb|#[a-zA-Z0-9]|hsl/g).length; + obj.svg_stops = []; + // hex + if (value.match(/#[a-zA-Z0-9]/g) && (value.match(/#[a-zA-Z0-9]/g).length == colors_count)) { + // Are there percentages? + 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(''); + }); + } 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(''); + }); + } else { + var shares = Math.floor(100 / (value.match(/(rgb|rgba)\(/g).length - 1)); + value.match(/rgba?\((\d+,\s*\d+,\s*\d+)(?:,\s*(0|1|\.\d+|0\.\d+))?\)/g).forEach(function(element, index) { + element.replace(/rgba?\((\d+,\s*\d+,\s*\d+)(?:,\s*(0|1|\.\d+|0\.\d+))?\)/g, function(match, sub, sub_2, sub_3) { + obj.svg_stops.push(''); + }); + }); + } + } + // Hsl(a) + if (value.match(/hsla?\((\d+,\s*\d+%,\s*\d+%),\s*(0|1|\.\d+|0\.\d+)\)/g) && (value.match(/hsla?\((\d+,\s*\d+%,\s*\d+%),\s*(0|1|\.\d+|0\.\d+)\)/g).length == colors_count)) { + // Are there percentages? + if (value.match(/hsla?\((\d+,\s*\d+%,\s*\d+%),\s*(0|1|\.\d+|0\.\d+)\)\s*(\d+%)+/g) && (value.match(/hsla?\((\d+,\s*\d+%,\s*\d+%),\s*(0|1|\.\d+|0\.\d+)\)\s*(\d+%)+/g).length) == colors_count) { + value.replace(/hsla?\((\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(''); + }); + } else { + var shares = Math.floor(100 / (value.match(/(hsl|hsla)\(/g).length - 1)); + value.match(/hsla?\((\d+,\s*\d+%,\s*\d+%),\s*(0|1|\.\d+|0\.\d+)\)/g).forEach(function(element, index) { + element.replace(/hsla?\((\d+,\s*\d+%,\s*\d+%),\s*(0|1|\.\d+|0\.\d+)\)/g, function(match, sub, sub_2, sub_3) { + obj.svg_stops.push(''); + }); + }); + } + } + + // save to array + svg_gradients.push(obj); + }); + + // Glue it together + var syntax = []; + var passed = svg_gradients.every(function(element) { + for (var i in element) { + if (element[i] == false || (element[i].length == 0)) { + return false; + } + } + return true; + }); + + if (!passed) { + return 08121991; + } + svg_gradients.forEach(function(element, index) { + syntax[index] = (svg.xml + svg.svg_start); + if (element.svg_type == 'linear') { + syntax[index] += svg.linear_gradient_start + ' ' + element.svg_direction + '>'; + element.svg_stops.forEach(function(value) { + syntax[index] += value; + }); + syntax[index] += svg.linear_gradient_end; + syntax[index] += svg.rect_linear; + syntax[index] += svg.svg_end; + } else if (element.svg_type == 'radial') { + syntax[index] += svg.radial_gradient_start + ' ' + element.svg_direction + '>'; + element.svg_stops.forEach(function(value) { + syntax[index] += value; + }); + syntax[index] += svg.radial_gradient_end; + syntax[index] += svg.rect_radial; + syntax[index] += svg.svg_end; + } + }); + + syntax.forEach(function(element, index) { + syntax[index] = svg.uri_data + base64_encode(element) + ')'; + }); + + function base64_encode(data) { + var b64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/='; + var o1, o2, o3, h1, h2, h3, h4, bits, i = 0, + ac = 0, + enc = '', + tmp_arr = []; + + if (!data) { + return data; + } + + do { // pack three octets into four hexets + o1 = data.charCodeAt(i++); + o2 = data.charCodeAt(i++); + o3 = data.charCodeAt(i++); + + bits = o1 << 16 | o2 << 8 | o3; + + h1 = bits >> 18 & 0x3f; + h2 = bits >> 12 & 0x3f; + h3 = bits >> 6 & 0x3f; + h4 = bits & 0x3f; + + // use hexets to index into b64, and append result to encoded string + tmp_arr[ac++] = b64.charAt(h1) + b64.charAt(h2) + b64.charAt(h3) + b64.charAt(h4); + } while (i < data.length); + + enc = tmp_arr.join(''); + + var r = data.length % 3; + + return (r ? enc.slice(0, r - 3) : enc) + '==='.slice(r || 3); + + } + + value = syntax.join(','); + + return value; +}; + +/** + * Result properties aren't prefixed + */ + +backgroundImage.result = { + prefixed: false +}; + +/** + * For which browsers is this mixin specified + */ + +backgroundImage.vendors = ['ms', 'webkit', 'moz', 'opera']; + +/** + * Export mixin + */ + +module.exports = backgroundImage; \ No newline at end of file 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/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..f68ca68 --- /dev/null +++ b/mixins/background-size/background-size.js @@ -0,0 +1,29 @@ +/** + * backgroundSize mixin + */ + +var backgroundSize = function backgroundSize(value) { + value = value || 'none'; + var numRegex = /\d/gi; + var numWithoutValue = /(?:\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; \ No newline at end of file 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..1a518aa --- /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 = /(?:\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; \ No newline at end of file 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..5c307a4 --- /dev/null +++ b/mixins/border-bottom-left-radius/border-bottom-left-radius.js @@ -0,0 +1,43 @@ +/** + * borderBottomLeftRadius mixin + */ + +var borderBottomLeftRadius = function borderBottomLeftRadius(value) { + value = value || '0'; + var numRegex = /\d/gi; + var numWithoutValue = /(?:\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 + */ + +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; \ No newline at end of file diff --git a/mixins/border-bottom-left-radius/test.js b/mixins/border-bottom-left-radius/test.js new file mode 100644 index 0000000..b29e2e2 --- /dev/null +++ b/mixins/border-bottom-left-radius/test.js @@ -0,0 +1,13 @@ +var assert = require('assert'); + +describe('border-bottom-left-radius', function() { + + it('should return the same value', function(done) { + test.borderBottomLeftRadius('10px', '10px', done); + }); + + it('should return numbers with px', function(done) { + test.borderBottomLeftRadius('20', '20px', done); + }); + +}); \ No newline at end of file diff --git a/mixins/border-bottom-right-radius/border-bottom-right-radius.js b/mixins/border-bottom-right-radius/border-bottom-right-radius.js new file mode 100644 index 0000000..6f1e9e8 --- /dev/null +++ b/mixins/border-bottom-right-radius/border-bottom-right-radius.js @@ -0,0 +1,43 @@ +/** + * borderBottomRightRadius mixin + */ + +var borderBottomRightRadius = function borderBottomRightRadius(value) { + value = value || '0'; + var numRegex = /\d/gi; + var numWithoutValue = /(?:\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 + */ + +borderBottomRightRadius.vendors = ['webkit', 'moz']; + +/** + * Append CSS + */ + +borderBottomRightRadius.appendCSS = { + all: 'background-clip: padding-box', + webkit: '-webkit-background-clip: padding-box', + moz: '-moz-background-clip: padding' +}; + +/** + * Export mixin + */ + +module.exports = borderBottomRightRadius; \ No newline at end of file diff --git a/mixins/border-bottom-right-radius/test.js b/mixins/border-bottom-right-radius/test.js new file mode 100644 index 0000000..5e86579 --- /dev/null +++ b/mixins/border-bottom-right-radius/test.js @@ -0,0 +1,13 @@ +var assert = require('assert'); + +describe('border-bottom-right-radius', function() { + + it('should return the same value', function(done) { + test.borderBottomRightRadius('10px', '10px', done); + }); + + it('should return numbers with px', function(done) { + test.borderBottomRightRadius('20', '20px', done); + }); + +}); \ No newline at end of file diff --git a/mixins/border-image/border-image.js b/mixins/border-image/border-image.js new file mode 100644 index 0000000..0edaf00 --- /dev/null +++ b/mixins/border-image/border-image.js @@ -0,0 +1,25 @@ +/** + * borderImage mixin + */ + +var borderImage = function borderImage(value) { + value = value || 'none'; + + if (/^[a-z(.)]*,/.test(value)) { + value = value.replace(/(?:,)(?![^(]*\))/g, ''); + } + + return value; +}; + +/** + * For which browsers is this mixin specified + */ + +borderImage.vendors = ['webkit', 'moz', 'opera']; + +/** + * Export mixin + */ + +module.exports = borderImage; \ No newline at end of file diff --git a/mixins/border-image/test.js b/mixins/border-image/test.js new file mode 100644 index 0000000..4132283 --- /dev/null +++ b/mixins/border-image/test.js @@ -0,0 +1,9 @@ +var assert = require('assert'); + +describe('border-image', function() { + + it('should return the same value', function(done) { + test.borderImage('url(border.png) 61 45 62 54 repeat', 'url(border.png) 61 45 62 54 repeat', done); + }); + +}); \ No newline at end of file diff --git a/mixins/border-radius/border-radius.js b/mixins/border-radius/border-radius.js new file mode 100644 index 0000000..3034ba5 --- /dev/null +++ b/mixins/border-radius/border-radius.js @@ -0,0 +1,43 @@ +/** + * borderRadius mixin + */ + +var borderRadius = function borderRadius(value) { + value = value || '0'; + var numRegex = /\d/gi; + var numWithoutValue = /(?:\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 + */ + +borderRadius.vendors = ['webkit', 'moz']; + +/** + * Append CSS + */ + +borderRadius.appendCSS = { + all: 'background-clip: padding-box', + webkit: '-webkit-background-clip: padding-box', + moz: '-moz-background-clip: padding' +}; + +/** + * Export mixin + */ + +module.exports = borderRadius; \ No newline at end of file diff --git a/mixins/border-radius/test.js b/mixins/border-radius/test.js new file mode 100644 index 0000000..8124385 --- /dev/null +++ b/mixins/border-radius/test.js @@ -0,0 +1,13 @@ +var assert = require('assert'); + +describe('border-radius', function() { + + it('should return the same value', function(done) { + test.borderRadius('10px', '10px', done); + }); + + it('should return numbers with px', function(done) { + test.borderRadius('20 30', '20px 30px', done); + }); + +}); \ No newline at end of file diff --git a/mixins/border-top-left-radius/border-top-left-radius.js b/mixins/border-top-left-radius/border-top-left-radius.js new file mode 100644 index 0000000..33c892a --- /dev/null +++ b/mixins/border-top-left-radius/border-top-left-radius.js @@ -0,0 +1,43 @@ +/** + * borderTopLeftRadius mixin + */ + +var borderTopLeftRadius = function borderTopLeftRadius(value) { + value = value || '0'; + var numRegex = /\d/gi; + var numWithoutValue = /(?:\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 + */ + +borderTopLeftRadius.vendors = ['webkit', 'moz']; + +/** + * Append CSS + */ + +borderTopLeftRadius.appendCSS = { + all: 'background-clip: padding-box', + webkit: '-webkit-background-clip: padding-box', + moz: '-moz-background-clip: padding' +}; + +/** + * Export mixin + */ + +module.exports = borderTopLeftRadius; \ No newline at end of file diff --git a/mixins/border-top-left-radius/test.js b/mixins/border-top-left-radius/test.js new file mode 100644 index 0000000..dbf50a3 --- /dev/null +++ b/mixins/border-top-left-radius/test.js @@ -0,0 +1,13 @@ +var assert = require('assert'); + +describe('border-top-left-radius', function() { + + it('should return the same value', function(done) { + test.borderTopLeftRadius('10px', '10px', done); + }); + + it('should return numbers with px', function(done) { + test.borderTopLeftRadius('20', '20px', done); + }); + +}); \ No newline at end of file diff --git a/mixins/border-top-right-radius/border-top-right-radius.js b/mixins/border-top-right-radius/border-top-right-radius.js new file mode 100644 index 0000000..4785410 --- /dev/null +++ b/mixins/border-top-right-radius/border-top-right-radius.js @@ -0,0 +1,44 @@ +/** + * borderTopRightRadius mixin + */ + +var borderTopRightRadius = function borderTopRightRadius(value) { + value = value || '0'; + var numRegex = /\d/gi; + var numWithoutValue = /(?:\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 + */ + +borderTopRightRadius.vendors = ['webkit', 'moz']; + +/** + * Append CSS + */ + +borderTopRightRadius.appendCSS = { + all: 'background-clip: padding-box', + webkit: '-webkit-background-clip: padding-box', + moz: '-moz-background-clip: padding' +}; + + +/** + * Export mixin + */ + +module.exports = borderTopRightRadius; \ No newline at end of file diff --git a/mixins/border-top-right-radius/test.js b/mixins/border-top-right-radius/test.js new file mode 100644 index 0000000..567886a --- /dev/null +++ b/mixins/border-top-right-radius/test.js @@ -0,0 +1,13 @@ +var assert = require('assert'); + +describe('border-top-right-radius', function() { + + it('should return the same value', function(done) { + test.borderTopRightRadius('10px', '10px', done); + }); + + it('should return numbers with px', function(done) { + test.borderTopRightRadius('20', '20px', done); + }); + +}); \ No newline at end of file diff --git a/mixins/box-shadow/box-shadow.js b/mixins/box-shadow/box-shadow.js new file mode 100644 index 0000000..39483f8 --- /dev/null +++ b/mixins/box-shadow/box-shadow.js @@ -0,0 +1,33 @@ +/** + * boxShadow mixin + */ + +boxShadow = function boxShadow(value) { + value = value || '0'; + var numRegex = /\d/gi; + var numWithoutValue = /(?:\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 + */ + +boxShadow.vendors = ['webkit', 'moz']; + +/** + * Export mixin + */ + +module.exports = boxShadow; \ No newline at end of file diff --git a/mixins/box-shadow/test.js b/mixins/box-shadow/test.js new file mode 100644 index 0000000..0014a68 --- /dev/null +++ b/mixins/box-shadow/test.js @@ -0,0 +1,13 @@ +var assert = require('assert'); + +describe('box-shadow', function() { + + it('should return the same value', function(done) { + test.boxShadow('0 1px 10px rgba(20,20,20,0.5)', '0px 1px 10px rgba(20, 20, 20, 0.5)', done); + }); + + it('should add px for numbers', function(done) { + test.boxShadow('5 4 100 rgba(20,20,20,0.5)', '5px 4px 100px rgba(20, 20, 20, 0.5)', done); + }); + +}); \ No newline at end of file diff --git a/mixins/box-sizing/box-sizing.js b/mixins/box-sizing/box-sizing.js new file mode 100644 index 0000000..29b8107 --- /dev/null +++ b/mixins/box-sizing/box-sizing.js @@ -0,0 +1,22 @@ +/** + * BoxSizing mixin + */ + +var boxSizing = function boxSizing(value) { + value = value || 'content-box'; + + return value; +}; + +/** + * For which browsers is this mixin specified + */ + +boxSizing.vendors = ['webkit', 'moz']; + + +/** + * Export mixin + */ + +module.exports = boxSizing; \ No newline at end of file diff --git a/mixins/box-sizing/test.js b/mixins/box-sizing/test.js new file mode 100644 index 0000000..425d819 --- /dev/null +++ b/mixins/box-sizing/test.js @@ -0,0 +1,9 @@ +var assert = require('assert'); + +describe('box-sizing', function() { + + it('should return the same value', function(done) { + test.boxSizing('border-box', 'border-box', done); + }); + +}); \ No newline at end of file diff --git a/mixins/brightness/brightness.js b/mixins/brightness/brightness.js new file mode 100644 index 0000000..c556bb9 --- /dev/null +++ b/mixins/brightness/brightness.js @@ -0,0 +1,30 @@ +/** + * Brightness mixin + */ + +var brightness = function brightness(value) { + value = value || '1'; + + return value; +}; + +/** + * Result settings + */ + +brightness.result = { + property: 'filter', + value: 'brightness({{ result }})', +}; + +/** + * For which browsers is this mixin specified + */ + +brightness.vendors = ['webkit', 'moz', 'ms']; + +/** + * Export mixin + */ + +module.exports = brightness; \ No newline at end of file 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/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/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..2a60de8 --- /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 = /(?:\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; \ No newline at end of file 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..7a296d6 --- /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 = /(?:\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; \ No newline at end of file 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..cb0584d --- /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 = /(?:\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; \ No newline at end of file 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/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..c0dea34 --- /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 = /(?:\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; \ No newline at end of file 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/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..fa71798 --- /dev/null +++ b/mixins/drop-shadow/drop-shadow.js @@ -0,0 +1,42 @@ +/** + * DropShadow mixin + */ + +var dropShadow = function dropShadow(value) { + value = value || '100%'; + 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; \ No newline at end of file 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/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..86e77ed --- /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 = /(?:\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; \ No newline at end of file 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/test.js b/mixins/flex-direction/test.js new file mode 100644 index 0000000..d5aad1a --- /dev/null +++ b/mixins/flex-direction/test.js @@ -0,0 +1,16 @@ +var assert = require('assert'); + +describe('flex-direction', function () { + + /** + * If you want to test this code, comment 'flexDirection.result' from flex-direction.js + */ + // it('should return horizontal', function (done) { + // test.flexDirection.moz('row', 'horizontal', done); + // }); + + // it('should return the same value', function (done) { + // test.flexDirection.oldestwebkit('column-reverse', 'reverse', done); + // }); + +}); \ No newline at end of file diff --git a/mixins/flex-grow/flex-grow.js b/mixins/flex-grow/flex-grow.js new file mode 100644 index 0000000..9436095 --- /dev/null +++ b/mixins/flex-grow/flex-grow.js @@ -0,0 +1,21 @@ +/** + * FlexGrow mixin + */ + +var flexGrow = function flexGrow(value) { + value = value || '0'; + + return value; +}; + +/** + * For which browsers is this mixin specified + */ + +flexGrow.vendors = ['webkit']; + +/** + * Export mixin + */ + +module.exports = flexGrow; \ No newline at end of file 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/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/test.js b/mixins/flex-wrap/test.js new file mode 100644 index 0000000..3dca205 --- /dev/null +++ b/mixins/flex-wrap/test.js @@ -0,0 +1,9 @@ +var assert = require('assert'); + +describe('flex-wrap', function () { + + it('should return the same value', function (done) { + test.flexWrap('wrap-reverse', 'wrap-reverse', done); + }); + +}); \ No newline at end of file diff --git a/mixins/flex/flex.js b/mixins/flex/flex.js new file mode 100644 index 0000000..0cc36a9 --- /dev/null +++ b/mixins/flex/flex.js @@ -0,0 +1,48 @@ +/** + * Flex mixin + */ + +var flex = function flex(value) { + value = value || 'none'; + + return value; +}; + +flex.olderwebkit = function olderwebkitflex(value) { + value = value.match(/^\d+/)[0] || '0'; + + return value; +}; + +flex.moz = function mozflex(value) { + value = value.match(/^\d+/)[0] || '0'; + + return value; +}; + +/** + * Older syntax have different properties + */ + +flex.result = { + olderwebkit: { + property: '-webkit-box-flex', + prefixed: false + }, + moz: { + property: '-moz-box-flex', + prefixed: false + }, +}; + +/** + * For which browsers is this mixin specified + */ + +flex.vendors = ['olderwebkit','moz','webkit','ms']; + +/** + * Export mixin + */ + +module.exports = flex; \ No newline at end of file diff --git a/mixins/flex/test.js b/mixins/flex/test.js new file mode 100644 index 0000000..be2a87c --- /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 the same value', function (done) { + // test.flex.moz('1 3 100px', '1', done); + // }); + +}); \ No newline at end of file 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/footer.less b/mixins/footer.less new file mode 100644 index 0000000..2113aed --- /dev/null +++ b/mixins/footer.less @@ -0,0 +1 @@ +// What is the magic number 08121991? \ No newline at end of file diff --git a/mixins/grayscale/grayscale.js b/mixins/grayscale/grayscale.js new file mode 100644 index 0000000..cff3b26 --- /dev/null +++ b/mixins/grayscale/grayscale.js @@ -0,0 +1,38 @@ +/** + * GrayScale mixin + */ + +var grayScale = function grayScale(value) { + value = value || '0'; + var numRegex = /\d/gi; + var numWithoutValue = /(?:\d+\.?\d*)(?![^(]*\)|\w|%)/gi; + + if (numRegex.test(value)) { + value = value.replace(numWithoutValue, function(match) { + return match + '%'; + }); + } + + return value; +}; + +/** + * Result settings + */ + +grayScale.result = { + property: 'filter', + value: 'grayscale({{ result }})', +}; + +/** + * For which browsers is this mixin specified + */ + +grayScale.vendors = ['webkit', 'moz', 'ms']; + +/** + * Export mixin + */ + +module.exports = grayScale; \ No newline at end of file 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..f3e21ad --- /dev/null +++ b/mixins/header.less @@ -0,0 +1,7 @@ +// nyan * =========================================================== * nyan +// ian < LESSHat > ian +// nyan * =========================================================== * nyan +// +// Made with Energy drinks in Prague, Czech Republic. +// Handcrafted by Petr Brzek, madebysource.com +// Add discount code TODO diff --git a/mixins/hue-rotate/hue-rotate.js b/mixins/hue-rotate/hue-rotate.js new file mode 100644 index 0000000..83584b0 --- /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 = /(?:\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; \ No newline at end of file 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..92a5b31 --- /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 = /(?:\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; \ No newline at end of file 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/test.js b/mixins/justify-content/test.js new file mode 100644 index 0000000..080c356 --- /dev/null +++ b/mixins/justify-content/test.js @@ -0,0 +1,12 @@ +var assert = require('assert'); + +describe('justify-content', function () { + + /** + * If you want to test this code, comment 'justifyContent.result' from justify-content.js + */ + // it('should return distribute value', function (done) { + // test.justifyContent.ms('space-around', 'distribute', done); + // }); + +}); \ No newline at end of file diff --git a/mixins/keyframes/keyframes.js b/mixins/keyframes/keyframes.js new file mode 100644 index 0000000..f1591b2 --- /dev/null +++ b/mixins/keyframes/keyframes.js @@ -0,0 +1,94 @@ +/** + * Keyframes mixin + */ + +var keyframes = function keyframes(value) { + value = value; + var selector = '@keyframes '; + var definition = value.split(','); + value = '0; } \n' + selector + definition[0] + '{' + definition[1]; + + return value; +}; + +keyframes.webkit = function keyframes(value) { + value = value; + var prefixedProperties = ['animation','background-size', 'border-', 'box-shadow', 'column', 'transform', 'filter']; + var prefix = '-webkit-'; + var selector = '@-webkit-keyframes '; + + prefixedProperties.forEach(function(property, index) { + if (value.indexOf(property) !== -1) { + value = value.replace(new RegExp(property, 'g'), function(match) { + return prefix + match; + }) + } + }); + + var definition = value.split(','); + value = '0; } \n' + selector + definition[0] + '{' + definition[1]; + + return value; +}; + +keyframes.moz = function keyframes(value) { + value = value; + var prefixedProperties = ['animation','background-size', 'border-', 'box-shadow', 'column', 'transform', 'filter']; + var prefix = '-moz-'; + var selector = '@-moz-keyframes '; + + prefixedProperties.forEach(function(property, index) { + if (value.indexOf(property) !== -1) { + value = value.replace(new RegExp(property, 'g'), function(match) { + return prefix + match; + }) + } + }); + + var definition = value.split(','); + value = '0; } \n' + selector + definition[0] + '{' + definition[1]; + + return value; +}; + +keyframes.opera = function keyframes(value) { + value = value; + var prefixedProperties = ['animation','background-size', 'border-', 'box-shadow', 'column', 'transform', 'filter']; + var prefix = '-o-'; + var selector = '@-o-keyframes '; + + prefixedProperties.forEach(function(property, index) { + if (value.indexOf(property) !== -1) { + value = value.replace(new RegExp(property, 'g'), function(match) { + return prefix + match; + }) + } + }); + + var definition = value.split(','); + value = '0; } \n' + selector + definition[0] + '{' + definition[1]; + + return value; +}; + +keyframes.result = { + property: 'lesshat-selector { pb', + prefixed: false, + strip: ';' +}; + +keyframes.appendCSS = { + all: '}', +} + +/** + * For which browsers is this mixin specified + */ + +keyframes.vendors = ['webkit','moz','opera']; + +/** + * Export mixin + */ + +module.exports = keyframes; \ No newline at end of file diff --git a/mixins/keyframes/test.js b/mixins/keyframes/test.js new file mode 100644 index 0000000..5e7ddf3 --- /dev/null +++ b/mixins/keyframes/test.js @@ -0,0 +1,10 @@ +var assert = require('assert'); + +describe('keyframes', function () { + + it('should return the same value', function (done) { + test.rootSelector = true; + test.keyframes('animationName, 100%{ color: blue }', 'animationName{ 100%{ color: blue }', done); + }); + +}); \ No newline at end of file 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/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/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..5281ac5 --- /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 = /(?:\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; \ No newline at end of file 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..f89565a --- /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 = /(?:\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; \ No newline at end of file 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..a6276ce --- /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); +} \ No newline at end of file diff --git a/mixins/properties b/mixins/properties new file mode 100644 index 0000000..23c47fd --- /dev/null +++ b/mixins/properties @@ -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]: { ... } } +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..037085f --- /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 = /(?:\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; \ No newline at end of file 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/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..8624cca --- /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 = /(?:\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; \ No newline at end of file diff --git a/mixins/rotateX/test.js b/mixins/rotateX/test.js new file mode 100644 index 0000000..659e7a0 --- /dev/null +++ b/mixins/rotateX/test.js @@ -0,0 +1,10 @@ +var assert = require('assert'); + +describe('rotateX', function() { + + it('should return the same value', function(done) { + test.resultProperty = 'transform'; + test.rotateX('20', 'rotateX(20deg)', done); + }); + +}); \ No newline at end of file diff --git a/mixins/rotateY/rotateY.js b/mixins/rotateY/rotateY.js new file mode 100644 index 0000000..521458c --- /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 = /(?:\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; \ No newline at end of file diff --git a/mixins/rotateY/test.js b/mixins/rotateY/test.js new file mode 100644 index 0000000..3917147 --- /dev/null +++ b/mixins/rotateY/test.js @@ -0,0 +1,10 @@ +var assert = require('assert'); + +describe('rotateY', function() { + + it('should return the same value', function(done) { + test.resultProperty = 'transform'; + test.rotateY('20', 'rotateY(20deg)', done); + }); + +}); \ No newline at end of file diff --git a/mixins/rotateZ/rotateZ.js b/mixins/rotateZ/rotateZ.js new file mode 100644 index 0000000..05bb8b5 --- /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 = /(?:\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; \ No newline at end of file diff --git a/mixins/rotateZ/test.js b/mixins/rotateZ/test.js new file mode 100644 index 0000000..6416e13 --- /dev/null +++ b/mixins/rotateZ/test.js @@ -0,0 +1,10 @@ +var assert = require('assert'); + +describe('rotateZ', function() { + + it('should return the same value', function(done) { + test.resultProperty = 'transform'; + test.rotateZ('20', 'rotateZ(20deg)', done); + }); + +}); \ No newline at end of file diff --git a/mixins/saturate/saturate.js b/mixins/saturate/saturate.js new file mode 100644 index 0000000..d805adb --- /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 = /(?:\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; \ No newline at end of file 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/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/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/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/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/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/selection.less b/mixins/selection/selection.less new file mode 100644 index 0000000..2affe40 --- /dev/null +++ b/mixins/selection/selection.less @@ -0,0 +1,45 @@ +.selection(@color:08121991, @bg:08121991, @element:08121991, @shadow:08121991) { + .inception (@arguments) when not (@color = 08121991) and (@bg = 08121991) and (@element = 08121991) and (@shadow = 08121991) { + ::selection { + color: @color; + } + ::-moz-selection { + color: @color; + } + } + .inception (@arguments) when not (@color = 08121991) and not (@bg = 08121991) and (@element = 08121991) and (@shadow = 08121991) { + ::selection { + color: @color; + background: @bg; + } + ::-moz-selection { + color: @color; + background: @bg; + } + } + .inception (@arguments) when not (@color = 08121991) and not (@bg = 08121991) and not (@element = 08121991) and (@shadow = 08121991) { + @{element}::selection { + color: @color; + background: @bg; + } + @{element}::-moz-selection { + color: @color; + background: @bg; + } + } + .inception (@arguments) when not (@color = 08121991) and not (@bg = 08121991) and not (@element = 08121991) and not (@shadow = 08121991) { + @{element}::selection { + color: @color; + background: @bg; + text-shadow: @shadow; + } + @{element}::-moz-selection { + color: @color; + background: @bg; + text-shadow: @shadow; + } + } + .inception (@arguments) when (@color = 08121991) and (@bg = 08121991) and (@element = 08121991) and (@shadow = 08121991) {} + + .inception(@arguments); +} \ No newline at end of file diff --git a/mixins/sepia/sepia.js b/mixins/sepia/sepia.js new file mode 100644 index 0000000..d21bcec --- /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 = /(?:\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; \ No newline at end of file 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..12b5d66 --- /dev/null +++ b/mixins/size/size.less @@ -0,0 +1,31 @@ +.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)) { + width: @width; + height: @height; + } + + .process(@width, @height) when not (ispixel(@width)) and not (ispixel(@height)), (isem(@width)) and not (isem(@height)), (ispercentage(@width)) and not (ispercentage(@height)) { + width: ~`@{width} + @{unit}`; + height: ~`@{height} + @{unit}`; + } + + .process(@width, @height); + +} \ No newline at end of file diff --git a/mixins/skew/skew.js b/mixins/skew/skew.js new file mode 100644 index 0000000..a82f588 --- /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 = /(?:\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; \ No newline at end of file diff --git a/mixins/skew/test.js b/mixins/skew/test.js new file mode 100644 index 0000000..f7eb5c3 --- /dev/null +++ b/mixins/skew/test.js @@ -0,0 +1,10 @@ +var assert = require('assert'); + +describe('skew', function() { + + it('should return the same value', function(done) { + test.resultProperty = 'transform'; + test.skew('20, 30', 'skew(20deg, 30deg)', done); + }); + +}); \ No newline at end of file diff --git a/mixins/skewX/skewX.js b/mixins/skewX/skewX.js new file mode 100644 index 0000000..d200a03 --- /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 = /(?:\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; \ No newline at end of file diff --git a/mixins/skewX/test.js b/mixins/skewX/test.js new file mode 100644 index 0000000..61c5438 --- /dev/null +++ b/mixins/skewX/test.js @@ -0,0 +1,10 @@ +var assert = require('assert'); + +describe('skewX', function() { + + it('should return the same value', function(done) { + test.resultProperty = 'transform'; + test.skewX('20', 'skewX(20deg)', done); + }); + +}); \ No newline at end of file diff --git a/mixins/skewY/skewY.js b/mixins/skewY/skewY.js new file mode 100644 index 0000000..90cceda --- /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 = /(?:\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; \ No newline at end of file diff --git a/mixins/skewY/test.js b/mixins/skewY/test.js new file mode 100644 index 0000000..7d5fa76 --- /dev/null +++ b/mixins/skewY/test.js @@ -0,0 +1,10 @@ +var assert = require('assert'); + +describe('skewY', function() { + + it('should return the same value', function(done) { + test.resultProperty = 'transform'; + test.skewY('20', 'skewY(20deg)', done); + }); + +}); \ No newline at end of file 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..68d1ca1 --- /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 = /(?:\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; \ No newline at end of file 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/test.js b/mixins/transform/test.js new file mode 100644 index 0000000..9b91a6a --- /dev/null +++ b/mixins/transform/test.js @@ -0,0 +1,9 @@ +var assert = require('assert'); + +describe('transform', function() { + + it('should return the same value', function(done) { + test.transform('scale(.5) translate(10, 20)', 'scale(0.5) translate(10px, 20px)', done); + }); + +}); \ No newline at end of file diff --git a/mixins/transform/transform.js b/mixins/transform/transform.js new file mode 100644 index 0000000..c205c7d --- /dev/null +++ b/mixins/transform/transform.js @@ -0,0 +1,47 @@ +/** + * Transform mixin + */ + +var transform = function transform(value) { + value = value || 'none'; + var functions = { + translate: 'px', + rotate: 'deg', + rotate3d: 'deg', + skew: 'deg' + }; + + if (/^\w*\(?[a-z0-9.]*\)?/.test(value)) { + value = value.replace(/(?:,)(?![^(]*\))/g, ''); + } + + for (var i in functions) { + if (value.indexOf(i) >= 0) { + // check if there is unit + value = value.replace(new RegExp(i + '[\\w]?\\([a-z0-9, %]*\\)'), function(match) { + var regex = /(\d+\.?\d*)(?!\w|%)/g; + if (i == 'rotate3d') { + regex = /,\s*\d+$/; + } + return match.replace(regex, function(innerMatch) { + return innerMatch + functions[i]; + }); + }); + } + } + + return value; +}; + +/** + * For which browsers is this mixin specified + */ + +transform.vendors = ['webkit', 'moz', 'opera', 'ms']; + + +/** + * Export mixin + */ + +module.exports = transform; \ No newline at end of file diff --git a/mixins/transition-delay/test.js b/mixins/transition-delay/test.js new file mode 100644 index 0000000..0a93cbe --- /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 second and milisecond value', function(done) { + test.transitionDelay('9, 200', '9s, 200ms', done); + }); + +}); \ No newline at end of file diff --git a/mixins/transition-delay/transition-delay.js b/mixins/transition-delay/transition-delay.js new file mode 100644 index 0000000..b43abba --- /dev/null +++ b/mixins/transition-delay/transition-delay.js @@ -0,0 +1,38 @@ +/** + * TransitionDelay mixin + */ + +var transitionDelay = function transitionDelay(value) { + value = value || '0'; + var valueRegex = /(?:\d)(?:ms|s)/gi; + var numWithoutValue = /(?:\d+\.?\d*)(?![^(]*\)|\w|%)/gi; + + if (!valueRegex.test(value) && value !== '0') { + value = value.replace(numWithoutValue, function(match) { + var match = parseFloat(match, 10); + + if (match > 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; \ No newline at end of file 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..c4facd1 --- /dev/null +++ b/mixins/transition-duration/transition-duration.js @@ -0,0 +1,38 @@ +/** + * TransitionDuration mixin + */ + +var transitionDuration = function transitionDuration(value) { + value = value || '0'; + var valueRegex = /ms|s/gi; + var numWithoutValue = /(?:\d+\.?\d*)(?![^(]*\)|\w|%)/gi; + + if (!valueRegex.test(value) && value !== '0') { + value = value.replace(numWithoutValue, function(match) { + var match = parseFloat(match, 10); + + if (match > 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; \ No newline at end of file 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..4481191 --- /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', 'border-', '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 = ['background-size', 'border-', 'box-shadow', 'column', 'transform', 'filter']; + 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; \ No newline at end of file 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/test.js b/mixins/transition/test.js new file mode 100644 index 0000000..bc1c165 --- /dev/null +++ b/mixins/transition/test.js @@ -0,0 +1,25 @@ +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); + }); + + it('should return prefixed value', function(done) { + test.transition.opera('box-shadow .2 linear, filter .5 .2 ease', '-o-box-shadow 0.2s linear, -o-filter 0.5s 0.2s ease', done); + }); + +}); \ No newline at end of file diff --git a/mixins/transition/transition.js b/mixins/transition/transition.js new file mode 100644 index 0000000..895964d --- /dev/null +++ b/mixins/transition/transition.js @@ -0,0 +1,149 @@ +/** + * Transition mixin + */ + +var transition = function transition(value) { + value = value || 'all 0 ease 0'; + var valueRegex = /(?:\d)(?:ms|s)/gi; + var numWithoutValue = /(?:\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) { + var match = parseFloat(match, 10); + + if (match > 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 = /(?:\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) { + var match = parseFloat(match, 10); + + if (match > 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', 'border-', 'box-shadow', 'column', 'transform', 'filter']; + var prefix = '-moz-'; + var valueRegex = /(?:\d)(?:ms|s)/gi; + var numWithoutValue = /(?:\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) { + var match = parseFloat(match, 10); + + if (match > 10) { + match += 'ms'; + } else { + match += 's'; + } + + return match; + }); + } + + return value; +}; + +transition.opera = function transition(value) { + value = value || 'all 0 ease 0'; + var prefixedProperties = ['background-size', 'border-', 'box-shadow', 'column', 'transform', 'filter']; + var prefix = '-o-'; + var valueRegex = /(?:\d)(?:ms|s)/gi; + var numWithoutValue = /(?:\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) { + var match = parseFloat(match, 10); + + if (match > 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; \ No newline at end of file diff --git a/mixins/translate/test.js b/mixins/translate/test.js new file mode 100644 index 0000000..7e4efb6 --- /dev/null +++ b/mixins/translate/test.js @@ -0,0 +1,10 @@ +var assert = require('assert'); + +describe('translate', function() { + + it('should return the same value', function(done) { + test.resultProperty = 'transform'; + test.translate('20', 'translate(20px)', done); + }); + +}); \ No newline at end of file diff --git a/mixins/translate/translate.js b/mixins/translate/translate.js new file mode 100644 index 0000000..1128da3 --- /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 = /(?:\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; \ No newline at end of file diff --git a/mixins/translate3d/test.js b/mixins/translate3d/test.js new file mode 100644 index 0000000..d37d670 --- /dev/null +++ b/mixins/translate3d/test.js @@ -0,0 +1,10 @@ +var assert = require('assert'); + +describe('translate3d', function() { + + it('should return the same value', function(done) { + test.resultProperty = 'transform'; + test.translate3d('20, 30, 10', 'translate3d(20px, 30px, 10px)', done); + }); + +}); \ No newline at end of file diff --git a/mixins/translate3d/translate3d.js b/mixins/translate3d/translate3d.js new file mode 100644 index 0000000..346c6d6 --- /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 = /(?:\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; \ No newline at end of file diff --git a/mixins/translateX/test.js b/mixins/translateX/test.js new file mode 100644 index 0000000..d587e0a --- /dev/null +++ b/mixins/translateX/test.js @@ -0,0 +1,10 @@ +var assert = require('assert'); + +describe('translateX', function() { + + it('should return the same value', function(done) { + test.resultProperty = 'transform'; + test.translateX('20', 'translateX(20px)', done); + }); + +}); \ No newline at end of file diff --git a/mixins/translateX/translateX.js b/mixins/translateX/translateX.js new file mode 100644 index 0000000..3f88899 --- /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 = /(?:\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; \ No newline at end of file diff --git a/mixins/translateY/test.js b/mixins/translateY/test.js new file mode 100644 index 0000000..7d2d063 --- /dev/null +++ b/mixins/translateY/test.js @@ -0,0 +1,10 @@ +var assert = require('assert'); + +describe('translateY', function() { + + it('should return the same value', function(done) { + test.resultProperty = 'transform'; + test.translateY('20', 'translateY(20px)', done); + }); + +}); \ No newline at end of file diff --git a/mixins/translateY/translateY.js b/mixins/translateY/translateY.js new file mode 100644 index 0000000..14b858f --- /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 = /(?:\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; \ No newline at end of file diff --git a/mixins/translateZ/test.js b/mixins/translateZ/test.js new file mode 100644 index 0000000..cdafc04 --- /dev/null +++ b/mixins/translateZ/test.js @@ -0,0 +1,10 @@ +var assert = require('assert'); + +describe('translateZ', function() { + + it('should return the same value', function(done) { + test.resultProperty = 'transform'; + test.translateZ('20', 'translateZ(20px)', done); + }); + +}); \ No newline at end of file diff --git a/mixins/translateZ/translateZ.js b/mixins/translateZ/translateZ.js new file mode 100644 index 0000000..f7a7ef9 --- /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 = /(?:\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; \ No newline at end of file diff --git a/mixins/user-select/test.js b/mixins/user-select/test.js new file mode 100644 index 0000000..342165a --- /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); + }); + +}); \ No newline at end of file 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/package.json b/package.json new file mode 100644 index 0000000..a0be33a --- /dev/null +++ b/package.json @@ -0,0 +1,14 @@ +{ + "name": "lesshat", + "version": "2.0.0", + "devDependencies": { + "lesshat-devstack": "git://github.com/CSSHat/lesshat-devstack", + "grunt": "0.4.x", + "grunt-cli": "*", + "mocha": "*", + "grunt-prompt": "~0.1.2" + }, + "scripts": { + "test": "grunt" + } +} \ No newline at end of file From 7bc73e4ad23e21ec7c3f4e740fd83eea12e46eeb Mon Sep 17 00:00:00 2001 From: Petr Brzek Date: Tue, 29 Oct 2013 18:43:41 +0100 Subject: [PATCH 02/36] travis --- .travis.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.travis.yml b/.travis.yml index 87f8cd9..6e5919d 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,3 +1,3 @@ language: node_js node_js: - - "0.10" \ No newline at end of file + - "0.10" From 540c6a78b52bc9017c9e2db3b806584577121df7 Mon Sep 17 00:00:00 2001 From: Petr Brzek Date: Fri, 1 Nov 2013 16:26:47 +0100 Subject: [PATCH 03/36] read me and mixing changes --- README.md | 2675 ++++++++++++++++- mixins/align-items/align-items.js | 10 +- mixins/background-image/background-image.js | 220 +- mixins/background-size/background-size.js | 4 +- .../border-bottom-left-radius.js | 12 +- mixins/border-bottom-left-radius/test.js | 7 +- .../border-bottom-right-radius.js | 12 +- mixins/border-image/border-image.js | 4 +- mixins/border-radius/border-radius.js | 2 +- .../border-top-left-radius.js | 12 +- .../border-top-right-radius.js | 12 +- mixins/drop-shadow/drop-shadow.js | 7 +- mixins/flex/flex.js | 8 +- mixins/flex/test.js | 2 +- mixins/keyframes/keyframes.js | 34 +- .../transition-property.js | 6 +- mixins/transition/test.js | 6 +- mixins/transition/transition.js | 6 +- package.json | 4 +- 19 files changed, 2879 insertions(+), 164 deletions(-) diff --git a/README.md b/README.md index 4c2a870..6d69019 100644 --- a/README.md +++ b/README.md @@ -1,28 +1,2677 @@ -# LESS HAT +# LESS Hat 2.0 ![travis](https://travis-ci.org/PetrBrzek/LESSHat.png) +### Yeah, is finaly here! Unbelievable. + +![LESS Hat 2.0](http://media.giphy.com/media/lI6nHr5hWXlu0/giphy.gif) + + +--- +**[Download 2.0.0]()** (or **[Prefixed]()**) **|** +**[Learn]() |** +**[Get Help]() |** +**[Report an Issue]() |** +**[Changelog]() |** +**[Contribute]()** + +--- +## What is LESS Hat? +LESS Hat is universal mixins library for LESS CSS... +Prvni verze mixinu se setkala v necekanym uspechem. +Pracovali jsme dlouho na nove verzi, kterou jsme od zakladu prepsali, vytvorili robusni worklow pro vytvareni mixinu, ktere jsme mohlli testovat diky frameworku mocha. Zminka o workflow, gruntu... -[![build status](https://api.travis-ci.org/jankuca/lesshat.png)](http://travis-ci.org/jankuca/lesshat) ## Features +* Unordered list item +* Unordered list item +* Unordered list item +* **Breaking changes:** use all mixins without interpolation `~''` (except **keyframes** mixin) + +## List of mixins: +1. **[align-content](#align-content)** `flexbox` +2. **[align-items](#align-items)** `flexbox` +3. **[align-self](#align-self)** `flexbox` +4. **[animation](#animation)** +5. **[animation-delay](#animation-delay)** +6. **[animation-direction](#animation-direction)** +7. **[animation-duration](#animation-duration)** +8. **[animation-fill-mode](#animation-fill-mode)** +9. **[animation-iteration-count](#animation-iteration-count)** +10. **[animation-name](#animation-name)** +11. **[animation-play-state](#animation-play-state)** +12. **[animation-timing-function](#animation-timing-function)** +13. **[appearance](#appearance)** +14. **[backface-visibility](#backface-visibility)** +15. **[background-clip](#background-clip)** +16. **[background-image](#background-image)** +17. **[background-origin](#background-origin)** +18. **[background-size](#background-size)** +19. **[blur](#blur)** `filter` +20. **[border-bottom-left-radius](#border-bottom-left-radius)** +21. **[border-bottom-right-radius](#border-bottom-right-radius)** +22. **[border-image](#border-image)** +23. **[border-radius](#border-radius)** +24. **[border-top-left-radius](#border-top-left-radius)** +25. **[border-top-right-radius](#border-top-right-radius)** +26. **[box-shadow](#box-shadow)** +27. **[box-sizing](#box-sizing)** +28. **[brightness](#brightness)** `filter` +29. **[column-count](#column-count)** +30. **[column-gap](#column-gap)** +31. **[column-rule](#column-rule)** +32. **[column-width](#column-width)** +33. **[columns](#columns)** +34. **[contrast](#contrast)** `filter` +35. **[display](#display)** `flexbox` +36. **[drop-shadow](#drop-shadow)** `filter` +37. **[filter](#filter)** +38. **[flex](#flex)** `flexbox` +39. **[flex-basis](#flex-basis)** `flexbox` +40. **[flex-direction](#flex-direction)** `flexbox` +41. **[flex-grow](#flex-grow)** `flexbox` +42. **[flex-shrink](#flex-shrink)** `flexbox` +43. **[flex-wrap](#flex-wrap)** `flexbox` +44. **[font-face](#font-face)** +45. **[grayscale](#grayscale)** `filter` +46. **[hue-rotate](#hue-rotate)** `filter` +47. **[invert](#invert)** `filter` +48. **[justify-content](#justify-content)** `flexbox` +49. **[keyframes](#keyframes)** +50. **[opacity](#opacity)** +51. **[order](#order)** +52. **[perspective](#perspective)** +53. **[perspective-origin](#perspective-origin)** +54. **[placeholder](#placeholder)** +55. **[rotate](#rotate)** `transform` +56. **[rotate3d](#rotate3d)** `transform` +57. **[rotateX](#rotateX)** `transform` +58. **[rotateY](#rotateY)** `transform` +59. **[rotateZ](#rotateZ)** `transform` +60. **[saturate](#saturate)** `filter` +61. **[scale](#scale)** `transform` +62. **[scale3d](#scale3d)** `transform` +63. **[scaleX](#scaleX)** `transform` +64. **[scaleY](#scaleY)** `transform` +65. **[scaleZ](#scaleZ)** `transform` +66. **[selection](#selection)** +67. **[sepia](#sepia)** `filter` +68. **[size](#size)** `width, height` +69. **[skew](#skew)** `transform` +70. **[skewX](#skewX)** `transform` +71. **[skewY](#skewY)** `transform` +72. **[transform](#transform)** +73. **[transform-origin](#transform-origin)** +74. **[transform-style](#transform-style)** +75. **[transition](#transition)** +76. **[transition-delay](#transition-delay)** +77. **[transition-duration](#transition-duration)** +78. **[transition-property](#transition-property)** +79. **[transition-timing-function](#transition-timing-function)** +80. **[translate](#translate)** `transform` +81. **[translate3d](#translate3d)** `transform` +82. **[translateX](#translateX)** `transform` +83. **[translateY](#translateY)** `transform` +84. **[translateZ](#translateZ)** `transform` +85. **[user-select](#user-select)** + +*** + +## Learn – documentation: +
+### • align-content +**Summary:** + +The CSS align-content property aligns a flex container's lines within the flex container when there is extra space on the cross-axis. This property has no effect on 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; + } + +### • align-items +**Summary:** + +The CSS align-items property aligns flex items of the current flex line the same way as justify-content but in the perpendicular direction. + +Resources: **[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)**, **[CSS-Tricks](http://css-tricks.com/almanac/properties/a/align-items/)** + +**Syntax:** + +Default value: stretch + + .align-items(flex-start | flex-end | center | baseline | stretch) + +**Example:** + + div { + .align-items(flex-start); + } + + // Result + div { + -webkit-box-align: flex-start; + -moz-box-align: start; + -webkit-align-items: start; + -ms-flex-align: flex-start; + align-items: flex-start; + } + +### • align-self +**Summary:** + +The align-self CSS property aligns flex items of the current flex line overriding the align-items value. If any of the flex item's cross-axis margin is set to auto, then align-self is ignored. + +Resources: **[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self)**, **[CSS-Tricks](http://css-tricks.com/almanac/properties/a/align-self/)** + +**Syntax:** + +Default value: auto + + .align-self(auto | flex-start | flex-end | center | baseline | stretch) + +**Example:** + + div { + .align-self(flex-start); + } + + // Result + div { + -webkit-align-self: flex-start; + -ms-align-self: start; + align-self: flex-start; + } + +### • animation +**Summary:** + +Shorthand to define a CSS animation, setting all parameters at once. + +Resources: **[WebPlatform](http://docs.webplatform.org/wiki/css/properties/animation/animation)**, **[CSS3files](http://www.css3files.com/animation/)** + +**Syntax:** + +Default value: none + + .animation(animation-name | animation-duration | animation-timing-function | animation-delay | animation-iteration-count | animation-direction | animation-fill-mode , […]*) + +**Example:** + + div { + .animation(nameAnimation 2s linear alternate); + } + + // Result + div { + -webkit-animation: nameAnimation 2s linear alternate; + -moz-animation: nameAnimation 2s linear alternate; + -opera-animation: nameAnimation 2s linear alternate; + animation: nameAnimation 2s linear alternate; + } + +### • animation-delay +**Summary:** + +Defines a length of time to elapse before an animation starts, allowing an animation to begin execution some time after it is applied. + +Resources: **[WebPlatform](http://docs.webplatform.org/wiki/css/properties/animation-delay)**, **[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay)** + +**Syntax:** + +Default value: 0 + + .animation-delay(