Skip to content
This repository
Browse code

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
authored September 22, 2011
1  app/assets/stylesheets/_bourbon.scss
@@ -19,5 +19,6 @@
19 19
 
20 20
 // Addons & other mixins
21 21
 @import "addons/button";
  22
+@import "html5-input-types";
22 23
 @import "addons/position";
23 24
 @import "addons/timing-functions";
44  app/assets/stylesheets/addons/_html5-input-types.scss
... ...
@@ -0,0 +1,44 @@
  1
+//************************************************************************//
  2
+// Generate a variable ($all-text-inputs) with a list of all html5
  3
+// input types that have a text-based input, excluding textarea.
  4
+// http://diveintohtml5.org/forms.html
  5
+//************************************************************************//
  6
+$inputs-list: 'input[type="email"]',
  7
+              'input[type="number"]',
  8
+              'input[type="password"]',
  9
+              'input[type="search"]',
  10
+              'input[type="tel"]',
  11
+              'input[type="text"]',
  12
+              'input[type="url"]',
  13
+
  14
+              // Webkit & Gecko may change the display of these in the future
  15
+              'input[type="color"]',
  16
+              'input[type="date"]',
  17
+              'input[type="datetime"]',
  18
+              'input[type="datetime-local"]',
  19
+              'input[type="month"]',
  20
+              'input[type="time"]',
  21
+              'input[type="week"]';
  22
+
  23
+$list-count: 0;
  24
+$unquoted-inputs-list: false;
  25
+
  26
+@each $input-type in $inputs-list {
  27
+  @if $list-count == 0 {
  28
+    $unquoted-inputs-list: unquote($input-type);
  29
+    $list-count: $list-count + 1;
  30
+  }
  31
+
  32
+  @else if $list-count > 0 {
  33
+    $unquoted-inputs-list: join($unquoted-inputs-list, unquote($input-type), comma);
  34
+  }
  35
+}
  36
+
  37
+$all-text-inputs: $unquoted-inputs-list;
  38
+
  39
+// You must use interpolation on the variable:
  40
+// #{$all-text-inputs}
  41
+//************************************************************************//
  42
+//    #{$all-text-inputs}, textarea {
  43
+//      border: 1px solid green;
  44
+//    }
20  readme.md
Source Rendered
@@ -308,6 +308,25 @@ Create beautiful buttons by defining a style and color argument; using a single
308 308
     }
309 309
 
310 310
 
  311
+### HTML5 Input Types
  312
+This addon generates a variable which contains a list of all html5 input types that render as text-based inputs, excluding textarea.
  313
+In other words, it allows for easy targeting of all inputs that mimick input[type="text"].
  314
+
  315
+    input[type="*"]
  316
+    * = [color, date, datetime, datetime-local, email, month, number, password, search, tel, text, time, url, week]
  317
+
  318
+Usage:
  319
+
  320
+    #{$all-text-inputs}, textarea {
  321
+      border: 1px solid green;
  322
+    }
  323
+
  324
+    Output:
  325
+    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 {
  326
+      border: 1px solid green;
  327
+    }
  328
+
  329
+
311 330
 ### Timing functions
312 331
 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).
313 332
 
@@ -377,6 +396,7 @@ These CSS cubic-bezier timing functions are variables that can be used with CSS3
377 396
     #Addons
378 397
     --------------------------------
379 398
     @ button(*args)
  399
+      #{$all-text-inputs}
380 400
     @ position(*args)
381 401
       timing-functions ($ease-in-*, $ease-out-*, $ease-in-out-*)
382 402
 

0 notes on commit fb299e6

Please sign in to comment.
Something went wrong with that request. Please try again.