Removed outline styles

Author: Luke Harrison

03 - generic/_generic.reset.scss

@@ -41,25 +41,14 @@ table {
 	border-spacing: 0;
 }
 
-
-/*
-Remove outlines
-*/
-
-*:focus {
-	outline:0;
-}
-
 /*
 [1] Remove firefox blur on invalid elements
-[2] Removes outline on IE, Edge
 */
 
 input:invalid,
 select:invalid,
 textarea:invalid {
 	box-shadow:none; /* [1] */
-	outline:none; /* [2] */
 }
 
 /*

05 - objects/_objects.box.scss

@@ -27,7 +27,7 @@ http://csswizardry.com/2011/10/the-island-object/
 }
 
 
-// SIZE MODIFIERS
+// SPACING MODIFIERS
 //--------------------------------------------------------------------------------------------------------------------------------------
 
 /*
@@ -77,4 +77,57 @@ to better visually balance a box.
 			}
 		}
 	}
+}
+
+
+// SIZE MODIFIERS
+//--------------------------------------------------------------------------------------------------------------------------------------
+
+/*
+Generates fixed width and height variants using data from settings.spacing
+*/
+
+// Generate using settings.spacing
+// Example: o-box--width-tiny
+// Example: o-box--height-tiny
+@each $sp-name, $sp-value in $spacing {
+	.o-box--width-#{$sp-name} {
+		width:rem($sp-value);
+	}	
+	.o-box--height-#{$sp-name} {
+		height:rem($sp-value);
+	}
+}
+
+// Create responsive variants using settings.breakpoints
+// Changes padding when breakpoint is hit
+// Example: o-box--width-tiny@md
+// Example: o-box--height-tiny@md
+@each $bp-name, $bp-value in $breakpoints {
+	@include bp(#{$bp-name}) {
+		@each $sp-name, $sp-value in $spacing {
+			.o-box--width-#{$sp-name}\@#{$bp-name} {
+				width:rem($sp-value);
+			}
+			.o-box--height-#{$sp-name}\@#{$bp-name} {
+				height:rem($sp-value);
+			}
+		}
+	}
+}
+
+// Changes padding until breakpoint is hit
+// Example: o-box--width-tiny@max-md
+// Example: o-box--height-tiny@max-md
+@each $bp-name, $bp-value in $breakpoints {
+	@include bpMax(#{$bp-name}) {
+		@each $sp-name, $sp-value in $spacing {
+			.o-box--width-#{$sp-name}\@max-#{$bp-name} {
+				width:rem($sp-value);
+			}
+			.o-box--height-#{$sp-name}\@max-#{$bp-name} {
+				height:rem($sp-value);
+			}
+		}
+	}
 }