add forms test page for all html5 input types and refactor selectors

less/forms.less

@@ -58,69 +58,88 @@ label {
   color: @grayDark;
 }
 
-// Inputs, Textareas, Selects
-input,
-textarea,
+// Form controls
+// -------------------------
+
+// Shared resets
 select,
-.uneditable-input {
+textarea,
+input[type="text"],
+input[type="password"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="date"],
+input[type="month"],
+input[type="time"],
+input[type="week"],
+input[type="number"],
+input[type="email"],
+input[type="url"],
+input[type="search"],
+input[type="tel"],
+input[type="color"] {
   display: inline-block;
-  width: 210px;
   height: @baseLineHeight;
   padding: 4px;
   margin-bottom: 9px;
   font-size: @baseFontSize;
   line-height: @baseLineHeight;
   color: @gray;
+}
+
+// Textual inputs and textareas
+textarea,
+input[type="text"],
+input[type="password"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="date"],
+input[type="month"],
+input[type="time"],
+input[type="week"],
+input[type="number"],
+input[type="email"],
+input[type="url"],
+input[type="search"],
+input[type="tel"],
+input[type="color"] {
   background-color: @inputBackground;
   border: 1px solid @inputBorder;
   .border-radius(@inputBorderRadius);
-}
-.uneditable-textarea {
-  width: auto;
-  height: auto;
+  .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
+  @transition: border linear .2s, box-shadow linear .2s;
+  .transition(@transition);
 }
 
-// Inputs within a label
-label input,
-label textarea,
-label select {
-  display: block;
+input[type="radio"],
+input[type="checkbox"] {
+
 }
 
-// Mini reset for unique input types
-input[type="image"],
-input[type="checkbox"],
-input[type="radio"] {
-  width: auto;
-  height: auto;
-  padding: 0;
-  margin: 3px 0;
-  *margin-top: 0; /* IE7 */
-  line-height: normal;
-  cursor: pointer;
-  background-color: transparent;
-  border: 0 \9; /* IE9 and down */
-  .border-radius(0);
-}
-input[type="image"] {
-  border: 0;
-}
-
-// Reset the file input to browser defaults
-input[type="file"] {
-  width: auto;
-  padding: initial;
-  line-height: initial;
-  background-color: @inputBackground;
-  background-color: initial;
-  border: initial;
-  .box-shadow(none);
-}
-
-// Help out input buttons
 input[type="button"],
-input[type="reset"],
-input[type="submit"] {
+input[type="submit"],
+input[type="reset"] {
+
+}
+
+input[type="file"] {
+
+}
+
+input[type="hidden"] {
+
+}
+
+input[type="image"] {
+
+}
+
+input[type="range"] {
+
+}
+
+// Make uneditable textareas behave like a textarea
+.uneditable-textarea {
   width: auto;
   height: auto;
 }
@@ -133,37 +152,13 @@ input[type="file"] {
   line-height: 28px;
 }
 
-// Reset line-height for IE
-input[type="file"] {
-  line-height: 18px \9;
-}
-
-// Chrome on Linux and Mobile Safari need background-color
-select {
-  width: 220px; // default input width + 10px of padding that doesn't get applied
-  background-color: @inputBackground;
-}
-
 // Make multiple select elements height not fixed
 select[multiple],
 select[size] {
   height: auto;
 }
 
-// Remove shadow from image inputs
-input[type="image"] {
-  .box-shadow(none);
-}
 
-// Make textarea height behave
-textarea {
-  height: auto;
-}
-
-// Hidden inputs
-input[type="hidden"] {
-  display: none;
-}
 
 
 
@@ -207,12 +202,6 @@ input[type="hidden"] {
 // FOCUS STATE
 // -----------
 
-input,
-textarea {
-  .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
-  @transition: border linear .2s, box-shadow linear .2s;
-  .transition(@transition);
-}
 input:focus,
 textarea:focus {
   border-color: rgba(82,168,236,.8);