stylesheets/stitch/patterns/layout/_spacing.scss in stitch-0.1.7.beta.2 vs stylesheets/stitch/patterns/layout/_spacing.scss in stitch-0.1.7.beta.3

@@ -1,35 +1,168 @@
+// Generate inline class names for your elements
+//
+// <div class="actions inset-vert-small-large">
+//    <button type="submit">Totes click me!</button>
+// </div>
+//
+// Padding
+// ---------------
+// pad-{item}						:  pad-small (padding: 10px)
+// pad-vert-{item}-{item + 1}  		:  pad-vert-small-large (padding: 10px 0 40px 0)
+// pad-horz-{item}-{item + 1}  		:  pad-horz-small-large (padding: 0 10px 0 40px)
+//
+// Margin
+// ---------------
+// inset-{item}						:  inset-small (margin: 10px)
+// inset-vert-{item}-{item + 1}		:  inset-vert-small-large (margin: 10px 0 40px 0)
+// inset-horz-{item}-{item + 1}		:  inset-horz-small-large (margin: 0 10px 0 40px)
+//
+// Offset margin
+// ---------------
+// offset-{item}					:  offset-small (margin: -10px)
+// offset-vert-{item}-{item + 1}	:  offset-vert-small-large (margin: -10px 0 -40px 0)
+// offset-horz-{item}-{item + 1}	:  offset-horz-small-large (margin: 0 -10px 0 -40px)
+	
 @mixin spacing-classes($base: 10px, $list: small normal medium large){
-
+	
 	@for $i from 1 through length($list) {
-
-		.padding-#{nth(unquote($list), $i)} { 
+		
+		.pad-#{nth(unquote($list), $i)} { 
 			padding: ($base * $i);
 		}
+		
+		.inset-#{nth(unquote($list), $i)} { 
+			margin: ($base * $i);
+		}
+		
+		.offset-#{nth(unquote($list), $i)} { 
+			margin: (-($base * $i));
+		}
 
-		.padding-vertical-#{nth(unquote($list), $i)} { 
+		.pad-top-#{nth(unquote($list), $i)} { 
 			padding-top: ($base * $i);
-			padding-bottom: ($base * $i);
 		}
-
-		.padding-horizontal-#{nth(unquote($list), $i)} { 
+		
+		.pad-right-#{nth(unquote($list), $i)} { 
 			padding-right: ($base * $i);
+		}
+		
+		.pad-bottom-#{nth(unquote($list), $i)} { 
+			padding-bottom: ($base * $i);
+		}
+		
+		.pad-left-#{nth(unquote($list), $i)} { 
 			padding-left: ($base * $i);
 		}
 
-		.margin-#{nth(unquote($list), $i)} { 
+		.inset-top-#{nth(unquote($list), $i)} { 
+			margin-top: ($base * $i);
+		}
+		
+		.inset-right-#{nth(unquote($list), $i)} { 
+			margin-right: ($base * $i);
+		}
+		
+		.inset-bottom-#{nth(unquote($list), $i)} { 
+			margin-bottom: ($base * $i);
+		}
+		
+		.inset-left-#{nth(unquote($list), $i)} { 
+			margin-left: ($base * $i);
+		}
+
+		.outset-top-#{nth(unquote($list), $i)} { 
+			margin-top: (-($base * $i));
+		}
+		
+		.outset-right-#{nth(unquote($list), $i)} { 
+			margin-right: (-($base * $i));
+		}
+		
+		.outset-bottom-#{nth(unquote($list), $i)} { 
+			margin-bottom: (-($base * $i));
+		}
+		
+		.outset-left-#{nth(unquote($list), $i)} { 
+			margin-left: (-($base * $i));
+		}
+
+		.inset-#{nth(unquote($list), $i)} { 
 			margin: ($base * $i);
 		}
+		
+		.offset-#{nth(unquote($list), $i)} { 
+			margin: (-($base * $i));
+		}
 
-		.margin-vertical-#{nth(unquote($list), $i)} { 
+		.pad-vert-#{nth(unquote($list), $i)} { 
+			padding-top: ($base * $i);
+			padding-bottom: ($base * $i);
+		}
+		
+		.pad-horz-#{nth(unquote($list), $i)} { 
+			padding-right: ($base * $i);
+			padding-left: ($base * $i);
+		}
+		
+		.inset-vert-#{nth(unquote($list), $i)} { 
 			margin-top: ($base * $i);
 			margin-bottom: ($base * $i);
 		}
-
-		.margin-horizontal-#{nth(unquote($list), $i)} { 
+		
+		.inset-horz-#{nth(unquote($list), $i)} { 
 			margin-right: ($base * $i);
 			margin-left: ($base * $i);
 		}
+		
+		.offset-vert-#{nth(unquote($list), $i)} { 
+			margin-top: (-($base * $i));
+			margin-bottom: (-($base * $i));
+		}
+		
+		.offset-horz-#{nth(unquote($list), $i)} { 
+			margin-right: (-($base * $i));
+			margin-left: (-($base * $i));
+		}
+		
+		@for $j from 1 through length($list) {
+				
+			@if ($i != $j) {
+				
+				.pad-vert-#{nth(unquote($list), $i)}-#{nth(unquote($list), ($j))} { 
+					padding-top: ($base * $i);
+					padding-bottom: ($base * $j);
+				}
+				
+				.pad-horz-#{nth(unquote($list), $i)}-#{nth(unquote($list), ($j))} { 
+					padding-right: ($base * $i);
+					padding-left: ($base * $j);
+				}
+				
+				.inset-vert-#{nth(unquote($list), $i)}-#{nth(unquote($list), ($j))} { 
+					margin-top: ($base * $i);
+					margin-bottom: ($base * $j);
+				}
+				
+				.inset-horz-#{nth(unquote($list), $i)}-#{nth(unquote($list), ($j))} { 
+					margin-right: ($base * $i);
+					margin-left: ($base * $j);
+				}
+				
+				.offset-vert-#{nth(unquote($list), $i)}-#{nth(unquote($list), ($j))} { 
+					margin-top: (-($base * $i));
+					margin-bottom: (-($base * $j));
+				}
+				
+				.offset-horz-#{nth(unquote($list), $i)}-#{nth(unquote($list), ($j))} { 
+					margin-right: (-($base * $i));
+					margin-left: (-($base * $j));
+				}
+			}
+		}
 	}
 }
 
-//@include spacing-classes(20px, $list: "big" "bigger" "biggerer" "biggest" );
+// @include spacing-classes();
+// @include spacing-classes($base: 5px);
+// @include spacing-classes($base: 5px, $list: big bigger biggerer evenbiggerer biggest);
+// @include spacing-classes($list: big bigger biggerer evenbiggerer biggest);
\ No newline at end of file