diff options
author | Mark Otto <markotto@twitter.com> | 2012-05-15 10:40:06 +0400 |
---|---|---|
committer | Mark Otto <markotto@twitter.com> | 2012-05-15 10:40:06 +0400 |
commit | a0809ceebe5332a1c3e355a762d1bff3e477ce37 (patch) | |
tree | 5c8657307222f2bb697bf18569757a652f9eb770 | |
parent | 33061a8e0b5a5955c469c3e5184e989e497db4e3 (diff) |
add forms test page for all html5 input types and refactor selectors
-rw-r--r-- | docs/assets/css/bootstrap.css | 129 | ||||
-rw-r--r-- | docs/assets/css/docs.css | 5 | ||||
-rw-r--r-- | docs/examples/forms.html | 181 | ||||
-rw-r--r-- | less/forms.less | 131 |
4 files changed, 286 insertions, 160 deletions
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index ab6059ad01..d8b4c6b328 100644 --- 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 b7e0c8dbfa..92a4ec8e67 100644 --- 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 index 0000000000..ee0eb9c647 --- /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 9f95dd64f8..f9a994a7b5 100644 --- 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); |