Fix HTML5 input types documentation

_includes/addons/html5-input-types.html

@@ -3,20 +3,21 @@
     <h2 class="title">HTML5 Input Types</h2>
     <a class="view-source" href="//github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/addons/_html5-input-types.scss">View source</a>
   </header>
-  <p>This addon provides you with five variables which each contain a list of all html5 input types.</p>
+  <p>This addon provides you with several variables which each contain a list of all HTML5 input types.</p>
   <p>Three that render as text-based inputs, excluding textarea. In other words, it allows for easy targeting of all inputs that mimic <code>input[type="text"]</code>.</p>
   <ul>
     <li><code>#{$all-text-inputs}</code></li>
     <li><code>#{$all-text-inputs-hover}</code>&mdash; generates selectors that target all-text-inputs with <code>:hover</code> pseudo-classes</li>
     <li><code>#{$all-text-inputs-focus}</code>&mdash; generates selectors that target all-text-inputs with <code>:focus</code> pseudo-classes</li>
+    <li><code>#{$all-text-inputs-active}</code>&mdash; generates selectors that target all-text-inputs with <code>:active</code> pseudo-classes</li>
   </ul>
 
   <p>Four that render as button-based inputs, excluding button. In other words, it allows for easy targeting of all inputs that mimic <code>input[type="submit"]</code>.</p>
   <ul>
     <li><code>#{$all-button-inputs}</code></li>
-    <li><code>#{$all-button-inputs-hover}</code>&mdash; generates selectors that target all-text-inputs with <code>:hover</code> pseudo-classes</li>
-    <li><code>#{$all-button-inputs-focus}</code>&mdash; generates selectors that target all-text-inputs with <code>:focus</code> pseudo-classes</li>
-    <li><code>#{$all-button-inputs-active}</code>&mdash; generates selectors that target all-text-inputs with <code>:active</code> pseudo-classes</li>
+    <li><code>#{$all-button-inputs-hover}</code>&mdash; generates selectors that target all-button-inputs with <code>:hover</code> pseudo-classes</li>
+    <li><code>#{$all-button-inputs-focus}</code>&mdash; generates selectors that target all-button-inputs with <code>:focus</code> pseudo-classes</li>
+    <li><code>#{$all-button-inputs-active}</code>&mdash; generates selectors that target all-button-inputs with <code>:active</code> pseudo-classes</li>
   </ul>
   <p>Note: You must use interpolation with the variable&mdash;<code>#{ }</code>.</p>
 
@@ -33,6 +34,10 @@ <h2 class="title">HTML5 Input Types</h2>
   background: white;
 }
 
+#{$all-text-inputs-active} { // Target the :active pseudo-class
+  background: blue;
+}
+
 #{$all-button-inputs} {
   background: green;
 }
@@ -56,7 +61,7 @@ <h3>CSS Output</h3>
 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"] {
-  border: 1px solid green;
+  background: green;
 }
 
 input[type="email"]:hover, input[type="number"]:hover,   input[type="password"]:hover, input[type="search"]:hover,
@@ -73,28 +78,35 @@ <h3>CSS Output</h3>
   background: white;
 }
 
+input[type="email"]:active, input[type="number"]:active,   input[type="password"]:active, input[type="search"]:active,
+input[type="tel"]:active,   input[type="text"]:active,     input[type="url"]:active,      input[type="color"]:active,
+input[type="date"]:active,  input[type="datetime"]:active, input[type="datetime-local"]:active,
+input[type="month"]:active, input[type="time"]:active,     input[type="week"]:active {
+  background: blue;
+}
+
 input[type="button"],
 input[type="reset"],
 input[type="submit"] {
-background: green;
+  background: green;
 }
 
 input[type="button"]:hover,
 input[type="reset"]:hover,
 input[type="submit"]:hover {
-background: yellow;
+  background: yellow;
 }
 
 input[type="button"]:focus,
 input[type="reset"]:focus,
 input[type="submit"]:focus {
-background: white;
+  background: white;
 }
 
 input[type="button"]:active,
 input[type="reset"]:active,
 input[type="submit"]:active {
-background: blue;
+  background: blue;
 }
 {% endhighlight %}