From fb299e6b8492424ea6fe765479cb7c434efd3ef4 Mon Sep 17 00:00:00 2001
From: Phil LaPier <plapier@thoughtbot.com>
Date: Thu, 22 Sep 2011 23:56:24 -0400
Subject: [PATCH] New addon to target only html5 input-types that are
 text-based (mimick input[type=text])

---
 app/assets/stylesheets/_bourbon.scss          |  1 +
 .../addons/_html5-input-types.scss            | 44 +++++++++++++++++++
 readme.md                                     | 20 +++++++++
 3 files changed, 65 insertions(+)
 create mode 100644 app/assets/stylesheets/addons/_html5-input-types.scss

diff --git a/app/assets/stylesheets/_bourbon.scss b/app/assets/stylesheets/_bourbon.scss
index fb1ce5430..513aca049 100644
--- a/app/assets/stylesheets/_bourbon.scss
+++ b/app/assets/stylesheets/_bourbon.scss
@@ -19,5 +19,6 @@
 
 // Addons & other mixins
 @import "addons/button";
+@import "html5-input-types";
 @import "addons/position";
 @import "addons/timing-functions";
diff --git a/app/assets/stylesheets/addons/_html5-input-types.scss b/app/assets/stylesheets/addons/_html5-input-types.scss
new file mode 100644
index 000000000..bb037e900
--- /dev/null
+++ b/app/assets/stylesheets/addons/_html5-input-types.scss
@@ -0,0 +1,44 @@
+//************************************************************************//
+// Generate a variable ($all-text-inputs) with a list of all html5
+// input types that have a text-based input, excluding textarea.
+// http://diveintohtml5.org/forms.html
+//************************************************************************//
+$inputs-list: 'input[type="email"]',
+              'input[type="number"]',
+              'input[type="password"]',
+              'input[type="search"]',
+              'input[type="tel"]',
+              'input[type="text"]',
+              'input[type="url"]',
+
+              // Webkit & Gecko may change the display of these in the future
+              'input[type="color"]',
+              'input[type="date"]',
+              'input[type="datetime"]',
+              'input[type="datetime-local"]',
+              'input[type="month"]',
+              'input[type="time"]',
+              'input[type="week"]';
+
+$list-count: 0;
+$unquoted-inputs-list: false;
+
+@each $input-type in $inputs-list {
+  @if $list-count == 0 {
+    $unquoted-inputs-list: unquote($input-type);
+    $list-count: $list-count + 1;
+  }
+
+  @else if $list-count > 0 {
+    $unquoted-inputs-list: join($unquoted-inputs-list, unquote($input-type), comma);
+  }
+}
+
+$all-text-inputs: $unquoted-inputs-list;
+
+// You must use interpolation on the variable:
+// #{$all-text-inputs}
+//************************************************************************//
+//    #{$all-text-inputs}, textarea {
+//      border: 1px solid green;
+//    }
diff --git a/readme.md b/readme.md
index 1df496999..7e8013755 100644
--- a/readme.md
+++ b/readme.md
@@ -308,6 +308,25 @@ Create beautiful buttons by defining a style and color argument; using a single
     }
 
 
+### HTML5 Input Types
+This addon generates a variable which contains a list of all html5 input types that render as text-based inputs, excluding textarea.
+In other words, it allows for easy targeting of all inputs that mimick input[type="text"].
+
+    input[type="*"]
+    * = [color, date, datetime, datetime-local, email, month, number, password, search, tel, text, time, url, week]
+
+Usage:
+
+    #{$all-text-inputs}, textarea {
+      border: 1px solid green;
+    }
+
+    Output:
+    input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="url"], input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"], textarea {
+      border: 1px solid green;
+    }
+
+
 ### Timing functions
 These CSS cubic-bezier timing functions are variables that can be used with CSS3 animations. The provided timing functions are the same as the jQuery UI demo: [easing functions](http://jqueryui.com/demos/effect/easing.html).
 
@@ -377,6 +396,7 @@ These CSS cubic-bezier timing functions are variables that can be used with CSS3
     #Addons
     --------------------------------
     @ button(*args)
+      #{$all-text-inputs}
     @ position(*args)
       timing-functions ($ease-in-*, $ease-out-*, $ease-in-out-*)