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 @@ + + + + + Bootstrap, from Twitter + + + + + + + + + + + + + + + + + + + + + + +
+ + + +
+
+ + + + +
+ + + + +
+ + + + +
+ + + + +
+ + + + +
+ + + + +
+ + + + +
+ + + + +
+ + + + +
+ + + + +
+ + + + +
+ + + + +
+ +
+ +
+ + + + +
+ + + + +
+ + + + +
+ + + + +
+ + + + +
+ + + + +
+ + + + +
+ + + + +
+ + + + +
+ + + + +
+ + + + +
+ + + + +
+ + + + +
+
+ +
+ + + 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); -} -.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);