Reference to constants.less

src/stylesheets/less/Lungo.layout.aside.less

@@ -7,6 +7,7 @@
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  */
 
+@import "constants.less";
 @import "mixins.less";
 
 @defaultTrasition : @easeOutSine;
@@ -32,37 +33,37 @@ aside {
 
 	width: 256px;
 	max-width: 256px;
-	
+
 	&.onright { right: 0px; }
-	&.current { visibility: visible;} 
-	
+	&.current { visibility: visible;}
+
 	& .title {
     	line-height: 40px;
 	    font-size: 15px;
 	    font-weight: bold;
-		height: 40px;    	
+		height: 40px;
 	}
-	
+
 	& a {
     	display: block;
 		width: 244px;
 		height: 40px;
-	
+
 		font-size: 15px;
 		line-height: 40px;
 		overflow: hidden;
 		white-space: nowrap;
 		text-overflow: ellipsis;
-		
+
 	}
-	
+
 	& .bubble {
     	float: right;
     	font-size: 11px;
 	}
 }
 
-aside .title, aside a, aside .anchor {    
+aside .title, aside a, aside .anchor {
 	padding: 0 6px;
 }
 
@@ -73,15 +74,15 @@ aside a .bubble, aside .title .bubble {
 aside .anchor .bubble {
     margin-top: 2px;
 }
-	
+
 	aside .icon {
 		width: 24px;
 		float: left;
 		margin: 8px 4px 0 0;
-	
+
 		font-size: 24px;
 		line-height: 24px;
-	    text-align: center;		    
+	    text-align: center;
 	}
 	aside .anchor {
 		font-weight: bold;
@@ -90,7 +91,7 @@ aside .anchor .bubble {
 
 	@media handheld, only screen and (min-width: 768px) {
 		[data-target="aside"] { display: none !important; }
-		
+
 		section.aside {
 			width: auto !important;
     		left: 256px !important;

src/stylesheets/less/Lungo.layout.less

@@ -7,8 +7,8 @@
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  */
 
-@import "mixins.less";
 @import "constants.less";
+@import "mixins.less";
 
 /* @group <section> */
 section {
@@ -107,17 +107,17 @@ section {
 header, footer  {
 	position: absolute;
 	left: 0px;
-	width: 100%;
-	//height: 38px;
-	height: @header-height;
-	display: block;
+	width: 100%;	
+	overflow: hidden;
 	
 	z-index: 2;
-	line-height: @header-height;
 }
 
 header  {
 	top: 0px;
+	height: @header-height;
+	line-height: @header-height;
+	
 	//&.extended { height: 72px; }
 	& .onleft { margin-left: 4px !important;}
 	& .onright {margin-right: 4px !important;}

src/stylesheets/less/Lungo.layout.list.less

@@ -1,96 +1,97 @@
-/** 
+/**
  * Stylesheet
- * 
+ *
  * @namespace LUNGO.Layout
  * @class List
  *
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  */
- 
- @import "mixins.less";
- 
+
+@import "constants.less";
+@import "mixins.less";
+
 .list {
     font-size: 1.15em;
-    
-    & a {  
-    	display: block; 
+
+    & a {
+    	display: block;
     }
-    
+
     & li:not(.toolbar) {
 		padding: 8px 6px 8px 8px;
 		list-style-type: none;
-		
+
 		& .icon, & img {
 			float: left;
 			width: 32px;
 			height: 32px;
-			margin-right: 6px;	
+			margin-right: 6px;
 			font-size: 36px;
 			font-weight: normal;
 		}
 	}
-    
-	& .icon, & img { 
-		display: inline-block; 
+
+	& .icon, & img {
+		display: inline-block;
 	}
-    
+
     & small {
 		display: block;
-		overflow: hidden;  
+		overflow: hidden;
 		white-space: nowrap;
 		text-overflow: ellipsis;
 		font-size: 0.85em;
 	}
-	
-	& li.anchor { 	
+
+	& li.anchor {
 		font-size: 0.85em;
 		padding: 4px 4px 3px;
 
 		& .icon {
 			width: 14px !important;
-			height: 14px !important;	
-			margin-right: 2px !important; 	
+			height: 14px !important;
+			margin-right: 2px !important;
 			font-size:  1.6em !important;
-			line-height: 14px !important;	
+			line-height: 14px !important;
 		}
 
 		& .bubble { display: none; }
     }
-	
+
 	& .tip {
     	font-size: 0.85em;
     	font-weight: bold;
 	}
-		
+
 	& .search {
 		& input { width: 88%; }
-		
+
 		& a {
 			float: right;
 			height: 30px;
 			margin: 0px;
 			padding: 0px;
-			
+
 			& icon {
 			    height: 12px;
 				width: 30px;
 				margin: 0px;
 				font-size: 1.2em;
-				font-weight: normal;			
+				font-weight: normal;
 			}
 		}
 	}
-	
+
 	& .onright {
 		font-size: 0.75em;
 		line-height: 16px;
 	}
-	
+
 	& .onright .icon, & small .icon {
 	    font-size: 1.4em !important;
 	    line-height: 16px;
 	    height: 14px !important;
 	    width: 14px !important;
 	   	margin-right: 0px !important;
-	}	
+	}
 }

src/stylesheets/less/Lungo.theme.default.less

@@ -7,8 +7,8 @@
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  */
 
-@import "mixins.less";
 @import "constants.less";
+@import "mixins.less";
 
 @import "lungo.theme.default.font.css";
 
@@ -34,13 +34,9 @@ header {
 	//border-bottom: 1px solid @theme-dark;
 	//box-shadow: 0 1px 0 rgba(0,0,0,0.1);
 	
-	//height: 45px;
 	border-top-left-radius: 5px;
 	border-top-right-radius: 5px;
-	-webkit-border-top-left-radius: 5px;
-	-webkit-border-top-right-radius: 5px;
-	-moz-border-radius-topleft: 5px;
-	-moz-border-radius-topright: 5px;
+	
 	background: #2c8bca;
 	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2c8bca), color-stop(100%,#154f93));
 	background: -webkit-linear-gradient(top,  #2c8bca 0%,#154f93 100%);
@@ -55,10 +51,14 @@ header {
 }
 
 footer {
-	background: @theme-secondary -webkit-gradient(linear, left top, left bottom, color-stop(0.25, @theme-secondary), color-stop(1, @theme-secondary-dark));
-	border-top: 1px inset @theme-secondary-dark;
+	background: #353b42 -webkit-gradient(linear, left top, left bottom, color-stop(0, #353b42), color-stop(0.75, #272a2d));
+	
+	border-top: 1px inset #2A2A2A;
+	color: #353b42;
+	
+	border-bottom-left-radius: 5px;
+	border-bottom-right-radius: 5px;
 }
-
 .title {
 	color: @white;
 	text-shadow: 0px 1px 0px rgba(0,0,0,0.2);
@@ -76,19 +76,22 @@ article {
 /* @group <nav> */
 nav a {
 	color: rgba(255,255,255,0.5);
-
 	&.current, &.active {  color: @white; }
 }
 
 .toolbar a {
-	color: rgba(255,255,255,0.2);
+	color: #cdd9e3;
+	.border-radius(4px);
+	font-weight: bold;
+		
 	&.current, &.active {
-		background: #1c1c1c;
-		box-shadow: inset 0px 0px 8px #101010;
-		text-shadow: 0px 1px 4px #000;
+		background: #111;
+		box-shadow: inset 0 1px 1px rgba(0,0,0,1), -1px 0 0 rgba(255,255,255,0.05), 1px 1px 0 rgba(255,255,255,0.05);
 	}
+	
 }
 
+
 .groupbar {
     background: #ededed;
     border-bottom: solid 1px rgba(0,0,0,0.1);
@@ -336,10 +339,19 @@ input[type="range"] {
 
 .bubble {
 	color: #fff;
-	.border-radius(2px);
-	text-shadow: none;
+	.border-radius(7px);
+	text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
 	font-weight: bold !important;
+	
+	border: solid 1px @white;
+	box-shadow: 0 0 6px #000;	
 }
-	header .bubble.count {background: @theme-secondary;}
-	.bubble.count { background: @theme; }
+	header .bubble.count {
+		background: @theme-secondary;
+	}
+	.bubble.count { 
+		//background: @theme; 
+		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2c8bca), color-stop(100%,#154f93));
+		background: -webkit-linear-gradient(top,  #2c8bca 0%,#154f93 100%);
+	}
 /* @end */

src/stylesheets/less/Lungo.widgets.button.less

@@ -1,12 +1,13 @@
-/** 
+/**
  * Stylesheet
- * 
+ *
  * @namespace LUNGO.Widgets
  * @class Button
  *
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  */
- 
+
+@import "constants.less";
 @import "mixins.less";
 
 a.button {
@@ -15,23 +16,23 @@ a.button {
 	padding: 0 9px 0 8px;
 	color: #fff !important;
 	outline: none;
-	
+
 	background: #5a5a5a;
-	
+
 	.user-select(none);
 	line-height: 31px;
-	text-align: center; 
+	text-align: center;
 	text-decoration: none;
 
-	&:active, &.active { 
-		background: #4b4b4b; 
+	&:active, &.active {
+		background: #4b4b4b;
 	}
-	
+
 	&:disabled, &.disabled {
     	background: rgba(255,255,255,0.2);
-		color: #999 !important; 
+		color: #999 !important;
 	}
-	
+
 	& .icon {
 		position: relative;
 		top: 3px;
@@ -40,26 +41,26 @@ a.button {
     	font-size: 22px;
 		line-height: 17px;
 	}
-	
+
 	& img {
-		top:  0px !important;    	
+		top:  0px !important;
 	}
-	
+
 	&.big {
-		width: 100%; 
-		height: 40px;	
-		padding: 0px;	
+		width: 100%;
+		height: 40px;
+		padding: 0px;
 		margin-bottom: 4px;
-		
+
 		font-size: 16px;
 		line-height: 42px;
 		& .icon {
-			margin-right: 4px;	
+			margin-right: 4px;
 			font-size: 24px;
 			height: 18px;
 			width: 18px;
 		}
-		
+
 		& img {
 			/* TODO */
 		}

src/stylesheets/less/Lungo.widgets.colour.less

@@ -1,12 +1,13 @@
-/** 
+/**
  * Stylesheet
- * 
+ *
  * @namespace LUNGO.Widgets
  * @class Colour
  *
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  */
 
+@import "constants.less";
 @import "mixins.less";
 
 a.grey, .grey{background-color: @grey;}

src/stylesheets/less/Lungo.widgets.form.less

@@ -1,6 +1,6 @@
-/** 
+/**
  * Stylesheet
- * 
+ *
  * @namespace LUNGO.Widgets
  * @class Form
  *
@@ -8,11 +8,11 @@
  */
 
 @import "mixins.less";
+@import "constants.less";
 
-@defaultTrasition : @easeOutSine;
 
 .form {
-	
+
 }
 
 label {
@@ -20,41 +20,41 @@ label {
     line-height: 27px;
 }
 
-input:not([type=checkbox]), textarea, select {  
-	display: inline-block; 
+input:not([type=checkbox]), textarea, select {
+	display: inline-block;
 	padding: 5px;
 	width: 95%;
 	margin-bottom: 2px;
-	
-	outline: none; 	
+
+	outline: none;
 	-webkit-appearance: none;
 	border-radius: 0px;
 	font-size:  15px;
 	line-height: 15px;
 	font-weight: bold;
-	
+
 	-webkit-user-select: text;
 }
 
 /* @group search */
 input[type=search] {
 	width: 86%;
-	
+
 	& + .button {
     	float: right;
 	    padding: 0px;
 	    width: 32px;
 	    height: 30px;
-	    
+
 	    & .icon {
-    		font-size: 22px !important;	    
+    		font-size: 22px !important;
 	    	line-height: 30px;
-		}    
+		}
 	}
 }
 /* @end */
 
-select { 
+select {
 	width: 100%;
 	height: 29px;
 }
@@ -65,7 +65,7 @@ label.select {
     width: 100%;
 	padding-top: 2px;
 }
-    
+
 .select:after {
 	text-align: center;
 	position: absolute;
@@ -74,13 +74,13 @@ label.select {
 	bottom: 0;
 	height:29px;
 	width: 29px;
-	
-	content: "▼";     
-	pointer-events:none;	
+
+	content: "▼";
+	pointer-events:none;
 	line-height: 32px;
 	margin-top: 2px;
 }
-    
+
 .no-pointer-events .select:after {
 	content: none;
 }
@@ -204,12 +204,12 @@ input[type="range"] {
 	margin-bottom: 4px !important;
 	border: 0;
 	cursor: ew-resize;
-	
+
 	&::-webkit-slider-thumb {
-		-webkit-appearance:	none;	
+		-webkit-appearance:	none;
 		position: relative;
 		z-index: 1;
-	
+
 		width: 24px;
 		height: 24px;
 		border-radius: 12px;
@@ -220,22 +220,22 @@ input[type="range"] {
 /* @group progress */
 .progress {
     width: 100%;
-    
+
     .labels {
     	display: block;
 		& span:last-child { float: right; }
 	}
-	
+
     & .bar {
 		height:  3px;
 		display: block;
-		
+
     	& .value {
 			display:block;
 	    	height: inherit;
 	    	width: 0%;
-	    	-webkit-transition: width 500ms @defaultTrasition;	
-	    	
+	    	-webkit-transition: width 500ms @defaultTrasition;
+
 	    	& .glow {
 				float:right;
 				height: inherit;
@@ -247,6 +247,6 @@ input[type="range"] {
 /* @end */
 
 
-@media screen and (-webkit-min-device-pixel-ratio:0) { 
+@media screen and (-webkit-min-device-pixel-ratio:0) {
 	.custom-select select {padding-right:30px;}
 }

src/stylesheets/less/Lungo.widgets.less

@@ -1,12 +1,13 @@
-/** 
+/**
  * Stylesheet
- * 
+ *
  * @namespace LUNGO
  * @class Widgets
  *
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  */
 
+@import "constants.less";
 @import "mixins.less";
 
 /* @group scroll */
@@ -31,7 +32,7 @@
     & > * {
     	padding: 10px;
 	}
-	
+
 	&.rounded {
     	& ul { .border-radius(4px); }
     	& li {
@@ -73,8 +74,8 @@
 
 .bubble {
 	padding: 2px 3px 1px;
-	.border-radius(1px);		
+	.border-radius(1px);
 	font-size: 0.8em;
-	font-weight: bold;		
+	font-weight: bold;
 	line-height: 1.0em;
 }

src/stylesheets/less/constants.less

@@ -3,10 +3,10 @@
 /* @group DIMENSIONS */
 
 @header-height: 42px;
-
-/* @end */
+@toolbar-height: 51px;
 
 
+/* @end */
 
 @defaultTrasition : @easeOutSine;
 
@@ -60,7 +60,4 @@
 @facebook:         	#3b5998;
 @facebook-active:   #2c4579;
 
-/* @end */
-
-
-
+/* @end */

src/stylesheets/less/mixins.less

@@ -1,40 +1,275 @@
 //============================================================
 //
-// LESS CSS3 Mixins by @soyjavi
+// LESS CSS3 Mixins
+//
+// @description CSS3 mixins for projects using LESS
+// @see http://lesscss.org/
+// @version 2.00
+//
+// @author Matthew Wagerfield
+// @see http://matthew.wagerfield.com
+// @see http://twitter.com/mwagerfield
+//
+// ---------- INDEX ----------
+//
+// Display:
+// @mixin display-box
+// @mixin box-orient
+// @mixin box-pack
+// @mixin box-align
+// @mixin box-flex
+// @mixin box-sizing
+// @mixin user-select
+// @mixin appearance
+//
+// Decoration:
+// @mixin border-radius
+// @mixin box-shadow
+// @mixin text-shadow
+// @mixin linear-gradient
+// @mixin radial-gradient
+//
+// Transformation:
+// @mixin transform
+// @mixin transform-origin
+// @mixin transform-style
+// @mixin perspective
+// @mixin perspective-origin
+// @mixin backface-visibility
+// @mixin matrix
+// @mixin translate
+// @mixin scale
+// @mixin rotate
+// @mixin skew
+//
+// Animation:
+// @mixin transition
+// @mixin easing
 //
-// @description CSS3 mixins for LESS projects
-// @version 1.2
+//============================================================
+
+
+
+//============================================================
+//
+// display-box
+//
+// @see http://www.w3.org/TR/css3-flexbox/
+// @see http://www.html5rocks.com/en/tutorials/flexbox/quick/
+//
+//============================================================
+
+.display-box(...) {
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-box;
+    display: -o-box;
+    display: box;
+}
+
+
+
+//============================================================
+//
+// box-orient
+//
+// @param value               :  horizontal |
+//                               vertical   |
+//                               inherit
+//
+// @see http://www.w3.org/TR/css3-flexbox/
+// @see http://www.html5rocks.com/en/tutorials/flexbox/quick/
+//
+//============================================================
+
+.box-orient(...) {
+    .display-box();
+    -webkit-box-orient: @arguments;
+       -moz-box-orient: @arguments;
+        -ms-box-orient: @arguments;
+         -o-box-orient: @arguments;
+            box-orient: @arguments;
+}
+
+
+
+//============================================================
+//
+// box-pack
+//
+// @param value               :  start   |
+//                               end     |
+//                               center  |
+//                               justify
+//
+// @see http://www.w3.org/TR/css3-flexbox/
+// @see http://www.html5rocks.com/en/tutorials/flexbox/quick/
+//
+//============================================================
+
+.box-pack(...) {
+    .display-box();
+    -webkit-box-pack: @arguments;
+       -moz-box-pack: @arguments;
+        -ms-box-pack: @arguments;
+         -o-box-pack: @arguments;
+            box-pack: @arguments;
+}
+
+
+
+//============================================================
+//
+// box-align
+//
+// @param value               :  start    |
+//                               end      |
+//                               center   |
+//                               baseline |
+//                               stretch
+//
+// @see http://www.w3.org/TR/css3-flexbox/
+// @see http://www.html5rocks.com/en/tutorials/flexbox/quick/
+//
+//============================================================
+
+.box-align(...) {
+    .display-box();
+    -webkit-box-align: @arguments;
+       -moz-box-align: @arguments;
+        -ms-box-align: @arguments;
+         -o-box-align: @arguments;
+            box-align: @arguments;
+}
+
+
+
+//============================================================
+//
+// box-flex
+//
+// @param value               :  0 | Integer
+//
+// @see http://www.w3.org/TR/css3-flexbox/
+// @see http://www.html5rocks.com/en/tutorials/flexbox/quick/
 //
 //============================================================
 
+.box-flex(...) {
+    .display-box();
+    -webkit-box-flex: @arguments;
+       -moz-box-flex: @arguments;
+        -ms-box-flex: @arguments;
+         -o-box-flex: @arguments;
+            box-flex: @arguments;
+}
+
+
+
 //============================================================
-// Variables
 //
+// box-sizing
+//
+// @param value               :  content-box |
+//                               padding-box |
+//                               border-box  |
+//                               inherit
+//
+// @see http://www.w3.org/TR/css3-ui/#box-sizing
+//
+//============================================================
+
+.box-sizing(...) {
+    -webkit-box-sizing: @arguments;
+       -moz-box-sizing: @arguments;
+            box-sizing: @arguments;
+}
 
 
+
+//============================================================
+//
+// user-select
+//
+// @param value               :  none     |
+//                               text     |
+//                               toggle   |
+//                               element  |
+//                               elements |
+//                               all      |
+//                               inherit
+//
+// @see http://www.w3.org/TR/2000/WD-css3-userint-20000216#user-select
+//
 //============================================================
 
+.user-select(...) {
+    -webkit-touch-callout: @arguments;
+      -webkit-user-select: @arguments;
+         -moz-user-select: @arguments;
+          -ms-user-select: @arguments;
+           -o-user-select: @arguments;
+              user-select: @arguments;
+}
+
+
+
+//============================================================
+//
+// appearance
+//
+// @param value               :  button         |
+//                               push-button    |
+//                               hyperlink      |
+//                               radio-button   |
+//                               checkbox       |
+//                               pop-up-menu    |
+//                               list-menu      |
+//                               radio-group    |
+//                               checkbox-group |
+//                               field          |
+//                               password       |
+//                               normal         |
+//                               inherit        |
+//                               none
+//
+// @see http://www.w3.org/TR/css3-ui/#appearance
+// @see http://www.cssportal.com/css-properties/appearance.htm
+// @see https://developer.mozilla.org/en/CSS/-moz-appearance
+//
+//============================================================
+
+.appearance(...) {
+    -webkit-appearance: @arguments;
+       -moz-appearance: @arguments;
+        -ms-appearance: @arguments;
+         -o-appearance: @arguments;
+            appearance: @arguments;
+}
+
+
+
 //============================================================
 //
 // border-radius
 //
-// @param top-left-radius     :  px, em, %;
-// @param top-right-radius    :  px, em, %;
-// @param bottom-right-radius :  px, em, %;
-// @param bottom-left-radius  :  px, em, %;
+// @param top-left-radius     :  px, em, %
+// @param top-right-radius    :  px, em, %
+// @param bottom-right-radius :  px, em, %
+// @param bottom-left-radius  :  px, em, %
 //
 // @see http://www.w3.org/TR/css3-background/#border-radius
 //
 //============================================================
 
-.border-radius() {
-	-webkit-border-radius: @arguments;
-        -moz-border-radius: @arguments;
-	        border-radius: @arguments;
+.border-radius(...) {
+      -webkit-border-radius: @arguments;
+         -moz-border-radius: @arguments;
+              border-radius: @arguments;
 
-	-webkit-background-clip: padding-box;
-        -moz-background-clip: padding;
-	        background-clip: padding-box;
+    -webkit-background-clip: padding-box;
+       -moz-background-clip: padding;
+            background-clip: padding-box;
 }
 
 
@@ -43,25 +278,95 @@
 //
 // box-shadow
 //
-// @param colour              :  #000, rgba, hsla;
-// @param horizontal-offset   :  px, em;
-// @param vertical-offset     :  px, em;
-// @param blur-radius         :  px, em;
-// @param spread-distance     :  px, em,
-// @param inset               :  inset;
+// @param colour              :  #000, rgba, hsla
+// @param horizontal-offset   :  px, em
+// @param vertical-offset     :  px, em
+// @param blur-radius         :  px, em
+// @param spread-distance     :  px, em
+// @param inset               :  inset
 //
 // @see http://www.w3.org/TR/css3-background/#box-shadow
 //
 //============================================================
 
-.box-shadow() {
+.box-shadow(...) {
     -webkit-box-shadow: @arguments;
-        -moz-box-shadow: @arguments;
+       -moz-box-shadow: @arguments;
             box-shadow: @arguments;
 }
 
 
 
+//============================================================
+//
+// text-shadow
+//
+// @param colour              :  #000, rgba, hsla
+// @param horizontal-offset   :  px, em
+// @param vertical-offset     :  px, em
+// @param blur-radius         :  px, em
+//
+// @see http://www.w3.org/TR/css3-text/#text-shadow
+//
+//============================================================
+
+.text-shadow(...) {
+    text-shadow: @arguments;
+}
+
+
+
+//============================================================
+//
+// linear-gradient
+//
+// @param angle               :  top, left, 90deg
+// @param colourA             :  #000 0%, red 0%
+// @param colourB             :  #000 50%, red 50%
+// @param colourC             :  #000 100%, red 100%
+//
+// @example .linear-gradient(top, ~',crimson 0%', ~',black 100%');
+//
+// @see http://dev.w3.org/csswg/css3-images/#linear-gradients
+//
+//============================================================
+
+.linear-gradient(...) {
+    background-image: -webkit-linear-gradient(@arguments);
+    background-image: -moz-linear-gradient(@arguments);
+    background-image: -ms-linear-gradient(@arguments);
+    background-image: -o-linear-gradient(@arguments);
+    background-image: linear-gradient(@arguments);
+}
+
+
+
+//============================================================
+//
+// radial-gradient
+//
+// @param location            :  left top, 50% 50%
+// @param shape               :  circle, ellipse, 100% 75%
+// @param colourA             :  #000 0%, red 0%
+// @param colourB             :  #000 50%, red 50%
+// @param colourC             :  #000 100%, red 100%
+//
+// @example .radial-gradient(~'50% 50%,', circle, ~',crimson 0%', ~',black 100%');
+//
+// @see http://dev.w3.org/csswg/css3-images/#radial-gradients
+//
+//============================================================
+
+.radial-gradient(...) {
+    background-image: -webkit-radial-gradient(@arguments);
+    background-image: -moz-radial-gradient(@arguments);
+    background-image: -ms-radial-gradient(@arguments);
+    background-image: -o-radial-gradient(@arguments);
+    background-image: radial-gradient(@arguments);
+}
+
+
+
 //============================================================
 //
 // transform
@@ -75,10 +380,12 @@
 // @see http://www.w3.org/TR/css3-2d-transforms/
 //
 //============================================================
-.transform() {
+
+.transform(...) {
     -webkit-transform: @arguments;
-        -moz-transform: @arguments;
-        -o-transform: @arguments;
+       -moz-transform: @arguments;
+        -ms-transform: @arguments;
+         -o-transform: @arguments;
             transform: @arguments;
 }
 
@@ -86,59 +393,90 @@
 
 //============================================================
 //
-// translate
+// transform-origin
 //
-// @param translate-x         :  px;
-// @param translate-y         :  px;
+// @param value               :  left   |
+//                               center |
+//                               right  |
+//                               px     |
+//                               em     |
+//                               %;
 //
-// @see http://www.w3.org/TR/css3-2d-transforms/
+// @see http://www.w3.org/TR/css3-3d-transforms/#transform-origin-property
 //
 //============================================================
 
-.translate() {
-    -webkit-transform: translate(@arguments);
-        -moz-transform: translate(@arguments);
-        -o-transform: translate(@arguments);
-		    transform: translate(@arguments);
+.transform-origin(...) {
+    -webkit-transform-origin: @arguments;
+       -moz-transform-origin: @arguments;
+        -ms-transform-origin: @arguments;
+         -o-transform-origin: @arguments;
+            transform-origin: @arguments;
 }
 
 
 
 //============================================================
 //
-// scale
+// transform-style
 //
-// @param scale-x             :  0.5, 2, etc;
-// @param scale-y             :  0.5, 2, etc;
+// @param value               :  preserve-3d | flat
 //
-// @see http://www.w3.org/TR/css3-2d-transforms/
+// @see http://www.w3.org/TR/css3-3d-transforms/#transform-style-property
 //
 //============================================================
 
-.scale() {
-    -webkit-transform: scale(@arguments);
-        -moz-transform: scale(@arguments);
-        -o-transform: scale(@arguments);
-            transform: scale(@arguments);
+.transform-style(...) {
+    -webkit-transform-style: @arguments;
+       -moz-transform-style: @arguments;
+        -ms-transform-style: @arguments;
+         -o-transform-style: @arguments;
+            transform-style: @arguments;
 }
 
 
 
 //============================================================
 //
-// rotate
+// perspective
 //
-// @param angle               :  0deg;
+// @param value               :  none | 0, 1, 100, 1000, etc
 //
-// @see http://www.w3.org/TR/css3-2d-transforms/
+// @see http://www.w3.org/TR/css3-3d-transforms/#perspective-property
 //
 //============================================================
 
-.rotate() {
-    -webkit-transform: rotate(@arguments);
-        -moz-transform: rotate(@arguments);
-        -o-transform: rotate(@arguments);
-            transform: rotate(@arguments);
+.perspective(...) {
+    -webkit-perspective: @arguments;
+       -moz-perspective: @arguments;
+        -ms-perspective: @arguments;
+         -o-perspective: @arguments;
+            perspective: @arguments;
+}
+
+
+
+//============================================================
+//
+// perspective-origin
+//
+// @param value               :  left   |
+//                               center |
+//                               right  |
+//                               px     |
+//                               em     |
+//                               %
+//
+// @see http://www.w3.org/TR/css3-3d-transforms/#perspective-origin-property
+//
+//============================================================
+
+.perspective-origin(...) {
+    -webkit-perspective-origin: @arguments;
+       -moz-perspective-origin: @arguments;
+        -ms-perspective-origin: @arguments;
+         -o-perspective-origin: @arguments;
+            perspective-origin: @arguments;
 }
 
 
@@ -147,16 +485,17 @@
 //
 // backface-visibility
 //
-// @param visibility          :  visible | hidden;
+// @param value               :  visible | hidden
 //
-// @see http://www.w3.org/TR/css3-3d-transforms/
+// @see http://www.w3.org/TR/css3-3d-transforms/#backface-visibility-property
 //
 //============================================================
 
-.backface-visibility() {
+.backface-visibility(...) {
     -webkit-backface-visibility: @arguments;
-        -moz-backface-visibility: @arguments;
-        -o-backface-visibility: @arguments;
+       -moz-backface-visibility: @arguments;
+        -ms-backface-visibility: @arguments;
+         -o-backface-visibility: @arguments;
             backface-visibility: @arguments;
 }
 
@@ -164,46 +503,135 @@
 
 //============================================================
 //
-// transition
+// matrix
 //
-// @param properties          :  all, left, opacity, etc;
-// @param duration            :  1s, 1000ms;
-// @param delay               :  1s, 1000ms;
-// @param easing              :  linear, ease-in-out, etc;
+// @param a                   :  Number
+// @param b                   :  Number
+// @param c                   :  Number
+// @param d                   :  Number
+// @param e                   :  Number
+// @param f                   :  Number
 //
-// @see http://www.w3.org/TR/css3-transitions/
+// http://www.w3.org/TR/css3-3d-transforms/#transform-functions
 //
 //============================================================
 
-.transition() {
-    -webkit-transition: @arguments;
-        -moz-transition: @arguments;
-        -o-transition: @arguments;
-            transition: @arguments;
+.matrix(...) {
+    -webkit-transform: matrix(@arguments);
+       -moz-transform: matrix(@arguments);
+        -ms-transform: matrix(@arguments);
+         -o-transform: matrix(@arguments);
+            transform: matrix(@arguments);
+}
+
+
+
+//============================================================
+//
+// translate
+//
+// @param translate-x         :  px
+// @param translate-y         :  px
+//
+// http://www.w3.org/TR/css3-3d-transforms/#transform-functions
+//
+//============================================================
+
+.translate(...) {
+    -webkit-transform: translate(@arguments);
+       -moz-transform: translate(@arguments);
+        -ms-transform: translate(@arguments);
+         -o-transform: translate(@arguments);
+            transform: translate(@arguments);
+}
+
+
+
+//============================================================
+//
+// scale
+//
+// @param scale-x             :  0.5, 2, etc
+// @param scale-y             :  0.5, 2, etc
+//
+// http://www.w3.org/TR/css3-3d-transforms/#transform-functions
+//
+//============================================================
+
+.scale(...) {
+    -webkit-transform: scale(@arguments);
+       -moz-transform: scale(@arguments);
+        -ms-transform: scale(@arguments);
+         -o-transform: scale(@arguments);
+            transform: scale(@arguments);
 }
 
 
+
+//============================================================
+//
+// rotate
+//
+// @param angle               :  0deg
+//
+// http://www.w3.org/TR/css3-3d-transforms/#transform-functions
+//
+//============================================================
+
+.rotate(...) {
+    -webkit-transform: rotate(@arguments);
+       -moz-transform: rotate(@arguments);
+        -ms-transform: rotate(@arguments);
+         -o-transform: rotate(@arguments);
+            transform: rotate(@arguments);
+}
+
+
+
+//============================================================
+//
+// skew
+//
+// @param axis-x              :  0deg
+// @param axis-y              :  0deg
+//
+// http://www.w3.org/TR/css3-3d-transforms/#transform-functions
+//
+//============================================================
+
+.skew(...) {
+    -webkit-transform: skew(@arguments);
+       -moz-transform: skew(@arguments);
+        -ms-transform: skew(@arguments);
+         -o-transform: skew(@arguments);
+            transform: skew(@arguments);
+}
+
+
+
 //============================================================
 //
 // transition
 //
-// @param properties          :  all, left, opacity, etc;
-// @param duration            :  1s, 1000ms;
-// @param delay               :  1s, 1000ms;
-// @param easing              :  linear, ease-in-out, etc;
+// @param properties          :  all, left, opacity, etc
+// @param duration            :  1s, 1000ms
+// @param delay               :  1s, 1000ms
+// @param easing              :  linear, ease-in-out, etc
 //
 // @see http://www.w3.org/TR/css3-transitions/
 //
 //============================================================
 
-.user-select() {
-	-webkit-user-select: @arguments;
-        -moz-user-select: @arguments;
-        -o-user-select: @arguments;
-            user-select: @arguments;
+.transition(...) {
+    -webkit-transition: @arguments;
+       -moz-transition: @arguments;
+        -ms-transition: @arguments;
+         -o-transition: @arguments;
+            transition: @arguments;
 }
 
 
+
 //============================================================
 //
 // easing
@@ -250,4 +678,40 @@
 // Sine
 @easeInSine      :  cubic-bezier(0.470, 0.000, 0.745, 0.715);
 @easeOutSine     :  cubic-bezier(0.390, 0.575, 0.565, 1.000);
-@easeInOutSine   :  cubic-bezier(0.445, 0.050, 0.550, 0.950);
+@easeInOutSine   :  cubic-bezier(0.445, 0.050, 0.550, 0.950);
+
+// Back
+@easeInBack      :  cubic-bezier(0.600, -0.280, 0.735, 0.045);
+@easeOutBack     :  cubic-bezier(0.175,  0.885, 0.320, 1.275);
+@easeInOutBack   :  cubic-bezier(0.680, -0.550, 0.265, 1.550);
+
+
+
+//============================================================
+//
+// Copyright (c) 2012 Matthew Wagerfield
+//
+// 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.
+//
+//============================================================