stitch 0.0.3 → 0.1.0

data/stylesheets/stitch/_utilities.scss

@@ -0,0 +1,41 @@
+/* Prefix properties and values 
+---------------------------------------- */
+
+$default-prefixes: -webkit, -moz, -o, -khtml, -ms;
+
+@mixin prefix($property, $value, $prefixes: $default-prefixes) {
+	
+	// Unquote the values
+	$property : unquote($property);
+	$value    : unquote($value);
+	
+	// Loop through the prefixes given
+	@each $prefix in $prefixes {
+		#{$prefix}-#{$property}:$value;
+	}
+}
+
+@mixin prefix-value($property, $value, $prefixes: $default-prefixes) {
+	
+	// Unquote the values
+	$property : unquote($property);
+	$value    : unquote($value);
+	
+	// Loop through the prefixes given
+	@each $prefix in $prefixes {
+		#{$property}:#{$prefix}-#{$value};
+	}
+}
+
+/**
+ * Allows you to import a file only once
+ * @param $name string File to import
+*/
+$imported-once-files: ();
+@function import-once($name) {
+    @if index($imported-once-files, $name) {
+        @return false;
+    }
+    $imported-once-files: append($imported-once-files, $name);
+    @return true;
+}

data/stylesheets/stitch/patterns/_animation.scss

@@ -0,0 +1,2 @@
+@import 'animation/hardware-acceleration';
+@import 'animation/timing-functions';

data/stylesheets/stitch/{helpers → patterns}/_css3.scss

@@ -1,33 +1,3 @@
-/* Prefixing
----------------------------------------- */
-
-$default-prefixes: -webkit, -moz, -o, -khtml, -ms;
-
-@mixin prefix($property, $value, $prefixes: $default-prefixes) {
-	
-	// Unquote the values
-	$property : unquote($property);
-	$value    : unquote($value);
-	
-	// Loop through the prefixes given
-	@each $prefix in $prefixes {
-		#{$prefix}-#{$property}:$value;
-	}
-}
-
-@mixin prefix-value($property, $value, $prefixes: $default-prefixes) {
-	
-	// Unquote the values
-	$property : unquote($property);
-	$value    : unquote($value);
-	
-	// Loop through the prefixes given
-	@each $prefix in $prefixes {
-		#{$property}:#{$prefix}-#{$value};
-	}
-}
-
-
 /* Appearance
 ---------------------------------------- */
 
@@ -44,6 +14,21 @@ $default-prefixes-appearance: -webkit, -moz;
 $default-prefixes-background-clip: -webkit, -moz;
 
 @mixin background-clip($v, $prefixes: $default-prefixes-background-clip) {
+	$v: unquote($v);
+	
+	/* This is for older browser support */
+	@if $v === padding-box {
+		@include prefix(background-clip,padding,$default-prefixes-background-origin);
+	}
+	
+	@if $v === border-box {
+		@include prefix(background-clip,border,$default-prefixes-background-origin);
+	}
+	
+	@if $v === content-box {
+		@include prefix(background-clip,content,$default-prefixes-background-origin);
+	}
+	
 	@include prefix(background-clip,$v,$prefixes);
 	background-clip:$v;
 }
@@ -54,6 +39,22 @@ $default-prefixes-background-clip: -webkit, -moz;
 $default-prefixes-background-origin: -webkit, -moz;
 
 @mixin background-origin($v, $prefixes: $default-prefixes-background-origin) {
+	$v: unquote($v);
+	
+	/* This is for older browser support */
+	@if $v === padding-box {
+		@include prefix(background-origin,padding,$default-prefixes-background-origin);
+	}
+	
+	@if $v === border-box {
+		@include prefix(background-origin,border,$default-prefixes-background-origin);
+	}
+	
+	@if $v === content-box {
+		@include prefix(background-origin,content,$default-prefixes-background-origin);
+	}
+	
+	/* Standard version */
 	@include prefix(background-origin,$v,$prefixes);
 	background-origin:$v;
 }
@@ -61,7 +62,7 @@ $default-prefixes-background-origin: -webkit, -moz;
 /* Background Size
 ---------------------------------------- */
 
-$default-prefixes-background-size: -webkit, -moz; 
+$default-prefixes-background-size: -webkit, -moz, -o; 
 
 @mixin background-size($v, $prefixes: $default-prefixes-background-size) {
 	@include prefix(background-size,$v,$prefixes);
@@ -84,7 +85,7 @@ $default-prefixes-border-radius: -webkit, -moz;
 $default-prefixes-box-shadow: -webkit, -moz; 
 
 @mixin box-shadow($v, $prefixes: $default-prefixes-box-shadow) {
-	@include prefix(border-radius,$v,$prefixes);
+	@include prefix(box-shadow,$v,$prefixes);
 	box-shadow:$v;
 }
 
@@ -99,34 +100,42 @@ $default-prefixes-box: -webkit, -moz;
 
 @mixin box-orient($v, $prefixes: $default-prefixes-box) {
 	@include prefix(box-orient,$v,$prefixes);
+	box-orient:$v;
 }
 
 @mixin box-align($v, $prefixes: $default-prefixes-box) {
 	@include prefix(box-align,$v,$prefixes);
+	box-align:$v;
 }
 
 @mixin box-flex($v, $prefixes: $default-prefixes-box) {
 	@include prefix(box-flex,$v,$prefixes);
+	box-flex:$v;
 }
 
 @mixin box-flex-group($v, $prefixes: $default-prefixes-box) {
 	@include prefix(box-flex-group,$v,$prefixes);
+	box-flex-group:$v;
 }
 
 @mixin box-ordinal-group($v, $prefixes: $default-prefixes-box) {
 	@include prefix(box-ordinal-group,$v,$prefixes);
+	box-ordinal-group:$v;
 }
 
 @mixin box-direction($v, $prefixes: $default-prefixes-box) {
 	@include prefix(box-direction,$v,$prefixes);
+	box-direction:$v;
 }
 
 @mixin box-lines($v, $prefixes: $default-prefixes-box) {
 	@include prefix(box-direction,$v,$prefixes);
+	box-lines:$v;
 }
 
 @mixin box-pack($v, $prefixes: $default-prefixes-box) {
 	@include prefix(box-direction,$v,$prefixes);
+	box-pack:$v;
 }
 
 /* Box Sizing
@@ -136,6 +145,7 @@ $default-prefixes-box-sizing: -webkit, -moz;
 
 @mixin box-sizing($v, $prefixes: $default-prefixes-box-sizing) {
 	@include prefix(box-sizing,$v,$prefixes);
+	box-sizing:$v;
 }
 
 /* Columns
@@ -145,30 +155,37 @@ $default-prefixes-columns: -webkit, -moz;
 
 @mixin column-count($v, $prefixes: $default-prefixes-columns) {
 	@include prefix(column-count,$v,$prefixes);
+	column-count:$v;
 }
 
 @mixin column-gap($v, $prefixes: $default-prefixes-columns) {
 	@include prefix(column-gap,$v,$prefixes);
+	column-gap:$v;
 }
 
 @mixin column-width($v, $prefixes: $default-prefixes-columns) {
 	@include prefix(column-width,$v,$prefixes);
+	column-width:$v;
 }
 
 @mixin column-rule-width($v, $prefixes: $default-prefixes-columns) {
 	@include prefix(column-rule-width,$v,$prefixes);
+	column-rule-width:$v;
 }
 
 @mixin column-rule-style($v, $prefixes: $default-prefixes-columns) {
 	@include prefix(column-rule-style,$v,$prefixes);
+	column-rule-style:$v;
 }
 
 @mixin column-rule-color($v, $prefixes: $default-prefixes-columns) {
 	@include prefix(column-rule-color,$v,$prefixes);
+	column-rule-color:$v;
 }
 
 @mixin column-rule($v, $prefixes: $default-prefixes-columns) {
 	@include prefix(column-rule,$v,$prefixes);
+	column-rule:$v;
 }
 
 /* Transforms
@@ -179,26 +196,31 @@ $default-prefixes-transform: -webkit, -moz;
 // @see http://www.w3.org/TR/css3-2d-transforms/#transform-property
 @mixin transform($v, $prefixes:$default-prefixes-transform) {
 	@include prefix(transform,$v,$prefixes);
+	transform:$v;
 }
 
 // @see http://www.w3.org/TR/css3-2d-transforms/#transform-origin-property
 @mixin transform-origin($v, $prefixes:$default-prefixes-transform) {
 	@include prefix(transform-origin,$v,$prefixes);
+	transform-origin:$v;
 }
 
 // @see http://www.w3.org/TR/css3-3d-transforms/#transform-style
 @mixin transform-style($v, $prefixes:$default-prefixes-transform) {
 	@include prefix(transform-style,$v,$prefixes);
+	transform-style:$v;
 }
 
 // @see http://www.w3.org/TR/css3-3d-transforms/#perspective
 @mixin perspective-origin($v, $prefixes:$default-prefixes-transform) {
 	@include prefix(perspective-origin,$v,$prefixes);
+	perspective-origin:$v;
 }
 
 // @see http://www.w3.org/TR/css3-3d-transforms/#backface-visibility
 @mixin backface-visibility($v, $prefixes:$default-prefixes-transform) {
 	@include prefix(backface-visibility,$v,$prefixes);
+	backface-visibility:$v;
 }
 
 /* Transitions
@@ -212,20 +234,70 @@ $default-prefixes-transition: -webkit, -moz;
 
 @mixin transition-property($v, $prefixes:$default-prefixes-transform) {
 	@include prefix(transition-property,$v,$prefixes);
+	transition-property:$v;
 }
 
 @mixin transition-duration($v, $prefixes:$default-prefixes-transform) {
 	@include prefix(transition-duration,$v,$prefixes);
+	transition-duration:$v;
 }
 
 @mixin transition-timing-function($v, $prefixes:$default-prefixes-transform) {
 	@include prefix(transition-timing-function,$v,$prefixes);
+	transition-timing-function:$v;
 }
 
 @mixin transition-delay($v, $prefixes:$default-prefixes-transform) {
 	@include prefix(transition-delay,$v,$prefixes);
+	transition-delay:$v;
 }
 
 @mixin transition($v, $prefixes:$default-prefixes-transform) {
 	@include prefix(transition,$v,$prefixes);
+	transition:$v;
+}
+
+/* Animation
+---------------------------------------- */
+
+$default-prefixes-animation: -webkit, -moz;
+
+@mixin animation($v, $prefixes:$default-prefixes-animation) {
+	@include prefix(animation,$v,$prefixes);
+	animation:$v;
+}
+
+@mixin animation-name($v, $prefixes:$default-prefixes-animation) {
+	@include prefix(animation-name,$v,$prefixes);
+	animation-name:$v;
+}
+
+@mixin animation-duration($v, $prefixes:$default-prefixes-animation) {
+	@include prefix(animation-name,$v,$prefixes);
+	animation-duration:$v;
+}
+
+@mixin animation-timing-function($v, $prefixes:$default-prefixes-animation) {
+	@include prefix(animation-name,$v,$prefixes);
+	animation-timing-function:$v;
+}
+
+@mixin animation-iteration-count($v, $prefixes:$default-prefixes-animation) {
+	@include prefix(animation-name,$v,$prefixes);
+	animation-iteration-count:$v;
+}
+
+@mixin animation-direction($v, $prefixes:$default-prefixes-animation) {
+	@include prefix(animation-name,$v,$prefixes);
+	animation-direction:$v;
+}
+
+@mixin animation-play-state($v, $prefixes:$default-prefixes-animation) {
+	@include prefix(animation-name,$v,$prefixes);
+	animation-play-state:$v;
+}
+
+@mixin animation-delay($v, $prefixes:$default-prefixes-animation) {
+	@include prefix(animation-name,$v,$prefixes);
+	animation-delay:$v;
 }

data/stylesheets/stitch/patterns/_layout.scss

@@ -1,4 +1,6 @@
 @import 'layout/center';
 @import 'layout/clear-floats';
+@import 'layout/columns';
 @import 'layout/force-scrollbars';
-@import 'layout/media';
+@import 'layout/media';
+@import 'layout/simple-gradient';

data/stylesheets/stitch/patterns/_text.scss

@@ -1 +1,5 @@
-@import 'text/text-rendering';
+@import 'text/text-rendering';
+@import 'text/font-stacks';
+@import 'text/hyphens';
+@import 'text/rem';
+@import 'text/justify';

data/stylesheets/stitch/patterns/accessibility/_hide-content.scss

@@ -2,7 +2,7 @@
    css-discuss.incutio.com/wiki/Screenreader_Visibility */
 @mixin hide-from-all {
 	display:none;
-	visibility: hidden;
+	visibility:hidden;
 } 
 
 /* Hide only visually, but have it available for screenreaders 
@@ -15,6 +15,6 @@
 }
 
 /* Hide visually and from screenreaders, but maintain layout */
-@mixin invisible-with-layout {
+@mixin invisible {
 	visibility: hidden;
 }

data/stylesheets/stitch/patterns/animation/_hardware-acceleration.scss

@@ -0,0 +1,6 @@
+/*
+  Forces the browser to render animation on the element with hardware acceleration
+*/
+@mixin enable-hardware-acceleration {
+  -webkit-transform:translate3d(0,0,0);
+}

data/stylesheets/stitch/patterns/animation/_timing-functions.scss

@@ -0,0 +1,60 @@
+/*
+ * https://gist.github.com/960128
+ */
+
+@function linear() {
+  @return cubic-bezier(0.250, 0.250, 0.750, 0.750); }
+
+@function ease() {
+  @return cubic-bezier(0.250, 0.100, 0.250, 1.000); }
+
+@function ease-in() {
+  @return cubic-bezier(0.420, 0.000, 1.000, 1.000); }
+@function ease-in-quad() {
+  @return cubic-bezier(0.550, 0.085, 0.680, 0.530); }
+@function ease-in-cubic() {
+  @return cubic-bezier(0.550, 0.055, 0.675, 0.190); }
+@function ease-in-quart() {
+  @return cubic-bezier(0.895, 0.030, 0.685, 0.220); }
+@function ease-in-quint() {
+  @return cubic-bezier(0.755, 0.050, 0.855, 0.060); }
+@function ease-in-sine() {
+  @return cubic-bezier(0.470, 0.000, 0.745, 0.715); }
+@function ease-in-expo() {
+  @return cubic-bezier(0.950, 0.050, 0.795, 0.035); }
+@function ease-in-circ() {
+  @return cubic-bezier(0.600, 0.040, 0.980, 0.335); }
+
+@function ease-out() {
+  @return cubic-bezier(0.000, 0.000, 0.580, 1.000); }
+@function ease-out-quad() {
+  @return cubic-bezier(0.250, 0.460, 0.450, 0.940); }
+@function ease-out-cubic() {
+  @return cubic-bezier(0.215, 0.610, 0.355, 1.000); }
+@function ease-out-quart() {
+  @return cubic-bezier(0.165, 0.840, 0.440, 1.000); }
+@function ease-out-quint() {
+  @return cubic-bezier(0.230, 1.000, 0.320, 1.000); }
+@function ease-out-sine() {
+  @return cubic-bezier(0.390, 0.575, 0.565, 1.000); }
+@function ease-out-expo() {
+  @return cubic-bezier(0.190, 1.000, 0.220, 1.000); }
+@function ease-out-circ() {
+  @return cubic-bezier(0.075, 0.820, 0.165, 1.000); }
+
+@function ease-in-out() {
+  @return cubic-bezier(0.420, 0.000, 0.580, 1.000); }
+@function ease-in-out-quad() {
+  @return cubic-bezier(0.455, 0.030, 0.515, 0.955); }
+@function ease-in-out-cubic() {
+  @return cubic-bezier(0.645, 0.045, 0.355, 1.000); }
+@function ease-in-out-quart() {
+  @return cubic-bezier(0.770, 0.000, 0.175, 1.000); }
+@function ease-in-out-quint() {
+  @return cubic-bezier(0.860, 0.000, 0.070, 1.000); }
+@function ease-in-out-sine() {
+  @return cubic-bezier(0.445, 0.050, 0.550, 0.950); }
+@function ease-in-out-expo() {
+  @return cubic-bezier(1.000, 0.000, 0.000, 1.000); }
+@function ease-in-out-circ() {
+  @return cubic-bezier(0.785, 0.135, 0.150, 0.860); }

data/stylesheets/stitch/patterns/forms/_search-fields.scss

@@ -3,7 +3,7 @@
 */
 @mixin reset-search-field {
 	-webkit-appearance:textfield;
-	::-webkit-search-decoration {
+	&::-webkit-search-decoration {
 		display:none
 	}
 }

data/stylesheets/stitch/patterns/images/_image-replace.scss

@@ -1,7 +1,7 @@
 /*
   Removes any text from an element and replaces it with an image
 */
-.f-ir {
+.__image-replace {
 	display             : block;
 	text-indent         : -9999em;
 	overflow            : hidden;
@@ -11,7 +11,8 @@
 }
 
 @mixin image-replace($img) {
-	@extend .f-ir;
-	height:image_height($img);
-	width:image_width($img);
+	@extend .__image-replace;
+	height:image-height($img);
+	width:image-width($img);
+	background-image:image-url($img);
 }