diff --git a/README.md b/README.md index 178b5d6..f4b084b 100644 --- a/README.md +++ b/README.md @@ -15,7 +15,7 @@ README.md file is automatically generated. **[Documentation](#documentation) |** --- -### Current version: v3.0.2 (2014-06-26) +### Current version: v3.0.3 (2014-09-01) ## What's new? * Compiling LESS Hat is much more faster (up to 60× times). @@ -1975,6 +1975,38 @@ Resources: **[CSS-Tricks](http://css-tricks.com/snippets/css/style-placeholder-t +### • position +**Summary:** + +This is helper mixin for fast position setup. + +**Syntax:** + + .position(, [,,,]) + +**Tips and tricks:** + + - When you call mixin with only one argument, second will be the same. + Also you can omit units and `position` adds `px` automatically. + - When set `position` to `static` you will get nothing. See more: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/position#Values). + - You can use named variable to specify special side's offset. + +**Example:** + + div { + .position(absolute, 20, 30px, @left: 40px); + } + + // Result + div { + position: absolute; + top: 20px; + right: 30px; + left: 40px; + } + + + ### • rotate **Summary:** diff --git a/bower.json b/bower.json index f1cc6bd..02057a7 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "lesshat", - "version": "3.0.2", + "version": "3.0.3", "main": [ "./build/lesshat.less", "./build/lesshat-prefixed.less" diff --git a/build/lesshat-prefixed.less b/build/lesshat-prefixed.less index 39c904f..a643b1d 100644 --- a/build/lesshat-prefixed.less +++ b/build/lesshat-prefixed.less @@ -6,7 +6,7 @@ // Handcrafted by Petr Brzek, lesshat.com // Works great with CSS Hat csshat.com -// version: v3.0.2 (2014-06-26) +// version: v3.0.3 (2014-09-01) // TABLE OF MIXINS: // align-content @@ -65,6 +65,7 @@ // perspective // perspective-origin // placeholder + // position // rotate // rotate3d // rotateX @@ -279,9 +280,9 @@ .lh-border-radius(...) { @process: ~`(function(e){e=e||"0";var t=/\d/gi,r=/(?:\s|^)(\.?\d+\.?\d*)(?![^(]*\)|\w|%|\.)/gi;return/^[^, ]*,/.test(e)&&(e=e.replace(/(?:,)(?![^(]*\))/g,"")),t.test(e)&&(e=e.replace(r,function(e){return 0==e&&e||e+"px"})),e})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; - -webkit-border-radius: @process; -webkit-background-clip: padding-box; - -moz-border-radius: @process; -moz-background-clip: padding; - border-radius: @process; background-clip: padding-box; + -webkit-border-radius: @process; + -moz-border-radius: @process; + border-radius: @process; } .lh-border-top-left-radius(...) { @@ -576,6 +577,75 @@ .inception(@arguments); } +.lh-position(@position: '', @top: '', @right: '', @bottom: '', @left: '') when (iskeyword(@position)) and not (@position = static ) { + + // default unit + @unit: 'px'; + + // for keyword: auto + .mix-top(@top) when (iskeyword(@top)) { + top: @top; + } + // for number, percent, em, rem, px + .mix-top(@top) when (isnumber(@top)) { + // with unit + .mix(@top) when (ispixel(@top)), (isem(@top)), (ispercentage(@top)), (isunit(@top, 'rem')) { + top: @top; + } + // without unit + .mix(@top) when (default()) { + top: ~`@{top} + @{unit}`; + } + .mix(@top); + } + + .mix-right(@right) when (iskeyword(@right)) { + right: @right; + } + .mix-right(@right) when (isnumber(@right)) { + .mix(@right) when (ispixel(@right)), (isem(@right)), (ispercentage(@right)), (isunit(@right, 'rem')) { + right: @right; + } + .mix(@right) when (default()) { + right: ~`@{right} + @{unit}`; + } + .mix(@right); + } + + .mix-bottom(@bottom) when (iskeyword(@bottom)) { + bottom: @bottom; + } + .mix-bottom(@bottom) when (isnumber(@bottom)) { + .mix(@bottom) when (ispixel(@bottom)), (isem(@bottom)), (ispercentage(@bottom)), (isunit(@bottom, 'rem')) { + bottom: @bottom; + } + .mix(@bottom) when (default()) { + bottom: ~`@{bottom} + @{unit}`; + } + .mix(@bottom); + } + + .mix-left(@left) when (iskeyword(@left)) { + left: @left; + } + .mix-left(@left) when (isnumber(@left)) { + .mix(@left) when (ispixel(@left)), (isem(@left)), (ispercentage(@left)), (isunit(@left, 'rem')) { + left: @left; + } + .mix(@left) when (default()) { + left: ~`@{left} + @{unit}`; + } + .mix(@left); + } + + position: @position; + // get top right bottom left + .mix-top(@top); + .mix-right(@right); + .mix-bottom(@bottom); + .mix-left(@left); +} + .lh-rotate(...) { @process: ~`(function(e){e=e||"0";var r=/\d/gi,t=/(?:\s|^)(\.?\d+\.?\d*)(?![^(]*\)|\w|%|\.)/gi;return r.test(e)&&(e=e.replace(t,function(e){return 0==e&&e||e+"deg"})),e})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; -webkit-transform: rotate(@process); diff --git a/build/lesshat.less b/build/lesshat.less index 882c1dd..f03c874 100644 --- a/build/lesshat.less +++ b/build/lesshat.less @@ -6,7 +6,7 @@ // Handcrafted by Petr Brzek, lesshat.com // Works great with CSS Hat csshat.com -// version: v3.0.2 (2014-06-26) +// version: v3.0.3 (2014-09-01) // TABLE OF MIXINS: // align-content @@ -65,6 +65,7 @@ // perspective // perspective-origin // placeholder + // position // rotate // rotate3d // rotateX @@ -279,9 +280,9 @@ .border-radius(...) { @process: ~`(function(e){e=e||"0";var t=/\d/gi,r=/(?:\s|^)(\.?\d+\.?\d*)(?![^(]*\)|\w|%|\.)/gi;return/^[^, ]*,/.test(e)&&(e=e.replace(/(?:,)(?![^(]*\))/g,"")),t.test(e)&&(e=e.replace(r,function(e){return 0==e&&e||e+"px"})),e})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; - -webkit-border-radius: @process; -webkit-background-clip: padding-box; - -moz-border-radius: @process; -moz-background-clip: padding; - border-radius: @process; background-clip: padding-box; + -webkit-border-radius: @process; + -moz-border-radius: @process; + border-radius: @process; } .border-top-left-radius(...) { @@ -576,6 +577,75 @@ .inception(@arguments); } +.position(@position: '', @top: '', @right: '', @bottom: '', @left: '') when (iskeyword(@position)) and not (@position = static ) { + + // default unit + @unit: 'px'; + + // for keyword: auto + .mix-top(@top) when (iskeyword(@top)) { + top: @top; + } + // for number, percent, em, rem, px + .mix-top(@top) when (isnumber(@top)) { + // with unit + .mix(@top) when (ispixel(@top)), (isem(@top)), (ispercentage(@top)), (isunit(@top, 'rem')) { + top: @top; + } + // without unit + .mix(@top) when (default()) { + top: ~`@{top} + @{unit}`; + } + .mix(@top); + } + + .mix-right(@right) when (iskeyword(@right)) { + right: @right; + } + .mix-right(@right) when (isnumber(@right)) { + .mix(@right) when (ispixel(@right)), (isem(@right)), (ispercentage(@right)), (isunit(@right, 'rem')) { + right: @right; + } + .mix(@right) when (default()) { + right: ~`@{right} + @{unit}`; + } + .mix(@right); + } + + .mix-bottom(@bottom) when (iskeyword(@bottom)) { + bottom: @bottom; + } + .mix-bottom(@bottom) when (isnumber(@bottom)) { + .mix(@bottom) when (ispixel(@bottom)), (isem(@bottom)), (ispercentage(@bottom)), (isunit(@bottom, 'rem')) { + bottom: @bottom; + } + .mix(@bottom) when (default()) { + bottom: ~`@{bottom} + @{unit}`; + } + .mix(@bottom); + } + + .mix-left(@left) when (iskeyword(@left)) { + left: @left; + } + .mix-left(@left) when (isnumber(@left)) { + .mix(@left) when (ispixel(@left)), (isem(@left)), (ispercentage(@left)), (isunit(@left, 'rem')) { + left: @left; + } + .mix(@left) when (default()) { + left: ~`@{left} + @{unit}`; + } + .mix(@left); + } + + position: @position; + // get top right bottom left + .mix-top(@top); + .mix-right(@right); + .mix-bottom(@bottom); + .mix-left(@left); +} + .rotate(...) { @process: ~`(function(e){e=e||"0";var r=/\d/gi,t=/(?:\s|^)(\.?\d+\.?\d*)(?![^(]*\)|\w|%|\.)/gi;return r.test(e)&&(e=e.replace(t,function(e){return 0==e&&e||e+"deg"})),e})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; -webkit-transform: rotate(@process); diff --git a/mixins/border-radius/border-radius.js b/mixins/border-radius/border-radius.js index 84f52a0..c5d9f3e 100644 --- a/mixins/border-radius/border-radius.js +++ b/mixins/border-radius/border-radius.js @@ -30,11 +30,11 @@ borderRadius.vendors = ['webkit', 'moz']; * Append CSS */ -borderRadius.appendCSS = { - all: 'background-clip: padding-box', - webkit: '-webkit-background-clip: padding-box', - moz: '-moz-background-clip: padding' -}; +// borderRadius.appendCSS = { +// all: 'background-clip: padding-box', +// webkit: '-webkit-background-clip: padding-box', +// moz: '-moz-background-clip: padding' +// }; /** * Export mixin diff --git a/mixins/position/position.less b/mixins/position/position.less new file mode 100644 index 0000000..e66c814 --- /dev/null +++ b/mixins/position/position.less @@ -0,0 +1,68 @@ +.position(@position: '', @top: '', @right: '', @bottom: '', @left: '') when (iskeyword(@position)) and not (@position = static ) { + + // default unit + @unit: 'px'; + + // for keyword: auto + .mix-top(@top) when (iskeyword(@top)) { + top: @top; + } + // for number, percent, em, rem, px + .mix-top(@top) when (isnumber(@top)) { + // with unit + .mix(@top) when (ispixel(@top)), (isem(@top)), (ispercentage(@top)), (isunit(@top, 'rem')) { + top: @top; + } + // without unit + .mix(@top) when (default()) { + top: ~`@{top} + @{unit}`; + } + .mix(@top); + } + + .mix-right(@right) when (iskeyword(@right)) { + right: @right; + } + .mix-right(@right) when (isnumber(@right)) { + .mix(@right) when (ispixel(@right)), (isem(@right)), (ispercentage(@right)), (isunit(@right, 'rem')) { + right: @right; + } + .mix(@right) when (default()) { + right: ~`@{right} + @{unit}`; + } + .mix(@right); + } + + .mix-bottom(@bottom) when (iskeyword(@bottom)) { + bottom: @bottom; + } + .mix-bottom(@bottom) when (isnumber(@bottom)) { + .mix(@bottom) when (ispixel(@bottom)), (isem(@bottom)), (ispercentage(@bottom)), (isunit(@bottom, 'rem')) { + bottom: @bottom; + } + .mix(@bottom) when (default()) { + bottom: ~`@{bottom} + @{unit}`; + } + .mix(@bottom); + } + + .mix-left(@left) when (iskeyword(@left)) { + left: @left; + } + .mix-left(@left) when (isnumber(@left)) { + .mix(@left) when (ispixel(@left)), (isem(@left)), (ispercentage(@left)), (isunit(@left, 'rem')) { + left: @left; + } + .mix(@left) when (default()) { + left: ~`@{left} + @{unit}`; + } + .mix(@left); + } + + position: @position; + // get top right bottom left + .mix-top(@top); + .mix-right(@right); + .mix-bottom(@bottom); + .mix-left(@left); +} diff --git a/mixins/position/position.md b/mixins/position/position.md new file mode 100644 index 0000000..ab20043 --- /dev/null +++ b/mixins/position/position.md @@ -0,0 +1,31 @@ +### • position +**Summary:** + +This is helper mixin for fast position setup. + +**Syntax:** + + .position(, [,,,]) + +**Tips and tricks:** + + - When you call mixin with only one argument, second will be the same. + Also you can omit units and `position` adds `px` automatically. + - When set `position` to `static` you will get nothing. See more: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/position#Values). + - You can use named variable to specify special side's offset. + +**Example:** + + div { + .position(absolute, 20, 30px, @left: 40px); + } + + // Result + div { + position: absolute; + top: 20px; + right: 30px; + left: 40px; + } + + diff --git a/package.json b/package.json index 4dc7e8f..1a098a9 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "lesshat", "description": "Most advanced LESS CSS mixins library", - "version": "3.0.2", + "version": "3.0.3", "homepage": "http://lesshat.com/", "author": { "name": "Petr Brzek",