add mixin position

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
 
 
 
+### <a name="position"></a> &#8226; position
+**Summary:**
+
+This is helper mixin for fast position setup.
+
+**Syntax:**
+
+    .position(<position>, [<top>,<right>,<bottom>,<left>]) 
+
+**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;
+    }
+
+
+
 ### <a name="rotate"></a> &#8226; rotate
 **Summary:**
 

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "lesshat",
-  "version": "3.0.2",
+  "version": "3.0.3",
   "main": [
     "./build/lesshat.less",
     "./build/lesshat-prefixed.less"

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);

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);

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

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);
+}

mixins/position/position.md

@@ -0,0 +1,31 @@
+### <a name="position"></a> &#8226; position
+**Summary:**
+
+This is helper mixin for fast position setup.
+
+**Syntax:**
+
+    .position(<position>, [<top>,<right>,<bottom>,<left>]) 
+
+**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;
+    }
+
+

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",