Merge remote-tracking branch 'ry5n/support-input-placeholder'

doc-src/content/examples/compass/css3/input-placeholder.haml

@@ -0,0 +1,8 @@
+---
+title: Input Placeholder
+description: css3 mixin to style input placeholders
+framework: compass
+stylesheet: compass/css3/_user-interface.scss
+example: true
+---
+= render "partials/example"

doc-src/content/examples/compass/css3/input-placeholder/markup.haml

@@ -0,0 +1,3 @@
+%form{:action => "", :method => "get"}
+  %label{:for => "input"} Input
+  %input{:type => "text", :name => "input" :placeholder => "Type something…"}

doc-src/content/examples/compass/css3/input-placeholder/stylesheet.sass

@@ -0,0 +1,6 @@
+@import compass/css3/user-interface
+
+input[type="text"]
+	+input-placeholder
+		color: #bfbfbf
+		font-style: italic

frameworks/compass/stylesheets/compass/css3/_user-interface.scss

@@ -15,3 +15,24 @@
     -moz, -webkit, not -o, not -ms, -khtml, official
   );
 }
+
+// Input Placeholder ---------------------------------------------------------
+// Style the html5 input placeholder in browsers that support it.
+// Requires that one or more style declarations be provided to the mixin using 
+// Sass’ `@content` feature. `@content` allows a Sass style block to be provided
+// to a mixin enclosed in braces: `@include mixin-name { //style block }`.
+// Internally, the mixin will replace each intance of the `@content` directive 
+// with the user-provided style block.
+// For more on @content, see https://gist.github.com/1884016
+//
+@mixin input-placeholder {
+	@if $experimental-support-for-webkit {
+		&::-webkit-input-placeholder { @content; }
+	}
+	@if $experimental-support-for-mozilla {
+		&:-moz-placeholder { @content; }
+	}
+	@if $experimental-support-for-microsoft {
+		&:-ms-input-placeholder { @content; }
+	}
+}

test/fixtures/stylesheets/compass/sass/user-interface.scss

@@ -3,3 +3,10 @@
 .user-select {
   @include user-select(none);
 }
+
+.input-placeholder {
+	@include input-placeholder {
+		color: #bfbfbf;
+		font-style: italic;
+	}
+}