Forms: Add input-placeholder mixin

Backported from Compass vNext (0.13), but modified for the 0.12
definition of legacy Firefox.

Fixes gh-2855

src/grids/sass/includes/_form.scss

@@ -4,6 +4,7 @@
  */
 @import "compass/css3/appearance";
 @import "compass/css3/box-sizing";
+@import "mixins";
 
 @mixin forms {
 
@@ -134,8 +135,8 @@
 		&[type="search"] {
 			@include appearance(textfield);
 		}
-		@if $experimental-support-for-mozilla {
-			&:-moz-placeholder { color: $medium; }
+		@include input-placeholder {
+			 color: $medium;
 		}
 	}
 
@@ -342,4 +343,4 @@
 		}
 
 	}
-}
+}

src/grids/sass/includes/_mixins.scss

@@ -172,7 +172,7 @@ $default-box-shadow-v-offset: 0;
             &:focus, &:active {
                 @content;
             }
-        }        
+        }
     } @else if $hover {
 		&:hover, &:focus {
 			@content;
@@ -183,3 +183,24 @@ $default-box-shadow-v-offset: 0;
 		}
     }
 }
+
+// Style the html5 input placeholder in browsers that support it.
+// Backported from the 0.13 release of Compass.
+@mixin input-placeholder {
+	@if $experimental-support-for-webkit {
+		&::-webkit-input-placeholder {
+			@content;
+		}
+	}
+	@if $experimental-support-for-mozilla {
+		// Single colon for Firefox 19 and below, double for 20 and above.
+		&:-moz-placeholder, &::-moz-placeholder {
+			@content;
+		}
+	}
+	@if $experimental-support-for-microsoft {
+		&:-ms-input-placeholder {
+			@content;
+		}
+	}
+}