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

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index ab6059ad014591276483802d72e21d2bb8a450b8..d8b4c6b328c756c39abbaa63369c5a37cbdf6c05 100644 (file)
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -771,23 +771,59 @@ label {
   color: #333333;
 }
 
-input,
-textarea,
 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: 18px;
   padding: 4px;
   margin-bottom: 9px;
   font-size: 13px;
   line-height: 18px;
   color: #555555;
+}
+
+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: #ffffff;
   border: 1px solid #cccccc;
   -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
           border-radius: 3px;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
+     -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
+      -ms-transition: border linear 0.2s, box-shadow linear 0.2s;
+       -o-transition: border linear 0.2s, box-shadow linear 0.2s;
+          transition: border linear 0.2s, box-shadow linear 0.2s;
 }
 
 .uneditable-textarea {
@@ -795,56 +831,6 @@ select,
   height: auto;
 }
 
-label input,
-label textarea,
-label select {
-  display: block;
-}
-
-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 */
-
-  -webkit-border-radius: 0;
-     -moz-border-radius: 0;
-          border-radius: 0;
-}
-
-input[type="image"] {
-  border: 0;
-}
-
-input[type="file"] {
-  width: auto;
-  padding: initial;
-  line-height: initial;
-  background-color: #ffffff;
-  background-color: initial;
-  border: initial;
-  -webkit-box-shadow: none;
-     -moz-box-shadow: none;
-          box-shadow: none;
-}
-
-input[type="button"],
-input[type="reset"],
-input[type="submit"] {
-  width: auto;
-  height: auto;
-}
-
 select,
 input[type="file"] {
   height: 28px;
@@ -856,34 +842,11 @@ input[type="file"] {
   line-height: 28px;
 }
 
-input[type="file"] {
-  line-height: 18px \9;
-}
-
-select {
-  width: 220px;
-  background-color: #ffffff;
-}
-
 select[multiple],
 select[size] {
   height: auto;
 }
 
-input[type="image"] {
-  -webkit-box-shadow: none;
-     -moz-box-shadow: none;
-          box-shadow: none;
-}
-
-textarea {
-  height: auto;
-}
-
-input[type="hidden"] {
-  display: none;
-}
-
 .radio,
 .checkbox {
   min-height: 18px;
@@ -914,18 +877,6 @@ input[type="hidden"] {
   margin-left: 10px;
 }
 
-input,
-textarea {
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-  -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
-     -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
-      -ms-transition: border linear 0.2s, box-shadow linear 0.2s;
-       -o-transition: border linear 0.2s, box-shadow linear 0.2s;
-          transition: border linear 0.2s, box-shadow linear 0.2s;
-}
-
 input:focus,
 textarea:focus {
   border-color: rgba(82, 168, 236, 0.8);

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index b7e0c8dbfab20b3a0813ac3f69cac36927080d89..92a4ec8e67f279f4038380f64ff049ebb03039df 100644 (file)
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -649,6 +649,11 @@ form.well {
     margin-top: 18px;
   }
 
+  /* icons */
+  .marketing .bs-icon {
+    margin: 0;
+  }
+
   /* Adjust the jumbotron */
   .jumbotron h1,
   .jumbotron p {

diff --git a/docs/examples/forms.html b/docs/examples/forms.html
new file mode 100644 (file)
index 0000000..ee0eb9c
--- /dev/null
+++ b/docs/examples/forms.html
@@ -0,0 +1,181 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Bootstrap, from Twitter</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="">
+    <meta name="author" content="">
+
+    <!-- Le styles -->
+    <link href="../assets/css/bootstrap.css" rel="stylesheet">
+    <style type="text/css">
+      body {
+        padding-top: 60px;
+        padding-bottom: 20px;
+      }
+    </style>
+    <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
+
+    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
+    <!--[if lt IE 9]>
+      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+
+    <!-- Le fav and touch icons -->
+    <link rel="shortcut icon" href="../assets/ico/favicon.ico">
+    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
+    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
+    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
+    <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
+  </head>
+
+  <body>
+
+    <form class="container">
+
+      <div class="page-header">
+        <h1>Form controls</h1>
+      </div>
+
+      <div class="row">
+        <div class="span6">
+
+          <label>Select</label>
+          <select>
+            <option>Select</option>
+            <option>Option 2</option>
+            <option>Option 3</option>
+          </select>
+
+          <hr>
+
+          <label>textarea</label>
+          <textarea>Textarea</textarea>
+
+          <hr>
+
+          <label>text</label>
+          <input type="text" value="Text input">
+
+          <hr>
+
+          <label>password</label>
+          <input type="password" value="Password input">
+
+          <hr>
+
+          <label>checkbox</label>
+          <input type="checkbox" value="">
+
+          <hr>
+
+          <label>radio</label>
+          <input type="radio" value="">
+
+          <hr>
+
+          <label>button</label>
+          <input type="button" value="Button">
+
+          <hr>
+
+          <label>submit</label>
+          <input type="submit" value="Submit">
+
+          <hr>
+
+          <label>reset</label>
+          <input type="reset" value="Reset">
+
+          <hr>
+
+          <label>file</label>
+          <input type="file" value="">
+
+          <hr>
+
+          <label>hidden</label>
+          <input type="hidden" value="hidden">
+
+          <hr>
+
+          <label>image</label>
+          <input type="image" value="">
+
+        </div><!-- /span6 -->
+
+        <div class="span6">
+
+          <hr class="visible-phone">
+
+          <label>datetime</label>
+          <input type="datetime" value="">
+
+          <hr>
+
+          <label>datetime-local</label>
+          <input type="datetime-local" value="">
+
+          <hr>
+
+          <label>date</label>
+          <input type="date" value="">
+
+          <hr>
+
+          <label>month</label>
+          <input type="month" value="">
+
+          <hr>
+
+          <label>time</label>
+          <input type="time" value="">
+
+          <hr>
+
+          <label>week</label>
+          <input type="week" value="">
+
+          <hr>
+
+          <label>number</label>
+          <input type="number" value="">
+
+          <hr>
+
+          <label>range</label>
+          <input type="range" value="">
+
+          <hr>
+
+          <label>email</label>
+          <input type="email" value="">
+
+          <hr>
+
+          <label>url</label>
+          <input type="url" value="">
+
+          <hr>
+
+          <label>search</label>
+          <input type="search" value="">
+
+          <hr>
+
+          <label>tel</label>
+          <input type="tel" value="">
+
+          <hr>
+
+          <label>color</label>
+          <input type="color" value="">
+
+        </div><!-- /span6 -->
+      </div><!-- /row -->
+
+    </form> <!-- /container -->
+
+  </body>
+</html>

diff --git a/less/forms.less b/less/forms.less
index 9f95dd64f89dde3c7082b59ca1e0f6013f346032..f9a994a7b5d8a784f903efdf3a40529529aadde0 100644 (file)
--- a/less/forms.less
+++ b/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);
+  .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
+  @transition: border linear .2s, box-shadow linear .2s;
+  .transition(@transition);
 }
-.uneditable-textarea {
-  width: auto;
-  height: auto;
+
+input[type="radio"],
+input[type="checkbox"] {
+
 }
 
-// Inputs within a label
-label input,
-label textarea,
-label select {
-  display: block;
+input[type="button"],
+input[type="submit"],
+input[type="reset"] {
+
 }
 
-// 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="file"] {
+
+}
+
+input[type="hidden"] {
+
 }
+
 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);
+input[type="range"] {
+
 }
 
-// Help out input buttons
-input[type="button"],
-input[type="reset"],
-input[type="submit"] {
+// 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);