Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

New addon to target only html5 input-types that are text-based (mimic…

…k input[type=text])
  • Loading branch information...
commit fb299e6b8492424ea6fe765479cb7c434efd3ef4 1 parent b8afdea
Phil LaPier authored
View
1  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";
View
44 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;
+// }
View
20 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-*)
Please sign in to comment.
Something went wrong with that request. Please try again.