From 94ea3b62f09c840db5efe5e48815d011ca7e43d1 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 25 Jan 2012 21:28:24 -0800 Subject: [PATCH] fix forms examples and allow for inputs in labels --- bootstrap.css | 8 +- bootstrap.min.css | 2 + docs/base-css.html | 104 +++++++++++++------------ docs/templates/pages/base-css.mustache | 104 +++++++++++++------------ lib/forms.less | 11 +++ 5 files changed, 126 insertions(+), 103 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 6068875fd0..7de5801627 100644 --- a/bootstrap.css +++ b/bootstrap.css @@ -6,7 +6,7 @@ * http://www.apache.org/licenses/LICENSE-2.0 * * Designed and built with all the love in the world @twitter by @mdo and @fat. - * Date: Wed Jan 25 20:31:53 PST 2012 + * Date: Wed Jan 25 21:28:14 PST 2012 */ article, aside, @@ -511,6 +511,9 @@ select, width: auto; height: auto; } +label input, label textarea, label select { + display: block; +} input[type=image], input[type=checkbox], input[type=radio] { width: auto; height: auto; @@ -893,6 +896,9 @@ input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, selec .control-group { margin-bottom: 9px; } +.form-horizontal legend + .control-group { + padding-top: 27px; +} .form-horizontal .control-group { margin-bottom: 18px; } diff --git a/bootstrap.min.css b/bootstrap.min.css index ba5e295491..06f511b149 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -96,6 +96,7 @@ label,input,button,select,textarea{font-family:"Helvetica Neue",Helvetica,Arial, label{display:block;margin-bottom:5px;color:#333333;} input,textarea,select,.uneditable-input{display:inline-block;width:210px;height:18px;padding:4px;margin-bottom:9px;font-size:13px;line-height:18px;color:#555555;border:1px solid #ccc;-webkit-border-radius:3px;border-radius:3px;} .uneditable-textarea{width:auto;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;line-height:normal;border:none;cursor:pointer;} input[type=file]{padding:initial;line-height:initial;border:initial;background-color:#ffffff;background-color:initial;-webkit-box-shadow:none;box-shadow:none;} input[type=button],input[type=reset],input[type=submit]{width:auto;height:auto;} @@ -174,6 +175,7 @@ input:focus:required:invalid,textarea:focus:required:invalid,select:focus:requir .form-search input,.form-inline input,.form-horizontal input,.form-search textarea,.form-inline textarea,.form-horizontal textarea,.form-search select,.form-inline select,.form-horizontal select,.form-search .uneditable-input,.form-inline .uneditable-input,.form-horizontal .uneditable-input{display:inline-block;margin-bottom:0;} .form-search label,.form-inline label{display:inline-block;} .control-group{margin-bottom:9px;} +.form-horizontal legend+.control-group{padding-top:27px;} .form-horizontal .control-group{margin-bottom:18px;} .form-horizontal .control-group>label{float:left;width:140px;padding-top:5px;text-align:right;} .form-horizontal .controls{margin-left:160px;} diff --git a/docs/base-css.html b/docs/base-css.html index 8340e0f60e..a2eff98ee3 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -939,63 +939,65 @@
- Controls Bootstrap supports -
- -
- -

In addition to freeform text, any HTML5 text-based input appears like so.

+
+ Controls Bootstrap supports +
+ +
+ +

In addition to freeform text, any HTML5 text-based input appears like so.

+
-
-
- -
- +
+ +
+ +
-
-
- -
- +
+ +
+ +
-
-
- -
- +
+ +
+ +
-
-
- -
- +
+ +
+ +
-
-
- -
- +
+ +
+ +
-
-
- - -
+
+ + +
+
diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index cbc0519e5a..c2dd661ae0 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -875,63 +875,65 @@
- {{_i}}Controls Bootstrap supports{{/i}} -
- -
- -

{{_i}}In addition to freeform text, any HTML5 text-based input appears like so.{{/i}}

+
+ {{_i}}Controls Bootstrap supports{{/i}} +
+ +
+ +

{{_i}}In addition to freeform text, any HTML5 text-based input appears like so.{{/i}}

+
-
-
- -
- +
+ +
+ +
-
-
- -
- +
+ +
+ +
-
-
- -
- +
+ +
+ +
-
-
- -
- +
+ +
+ +
-
-
- -
- +
+ +
+ +
-
-
- - -
+
+ + +
+
diff --git a/lib/forms.less b/lib/forms.less index 7451f36efc..3acb8c5dcb 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -68,6 +68,13 @@ select, height: auto; } +// Inputs within a label +label input, +label textarea, +label select { + display: block; +} + // Mini reset for unique input types input[type=image], input[type=checkbox], @@ -474,6 +481,10 @@ select:focus:required:invalid { // -------------------------- .form-horizontal { + // Legend collapses margin, so we're relegated to padding + legend + .control-group { + padding-top: @baseLineHeight * 1.5; + } // Increase spacing between groups .control-group { margin-bottom: @baseLineHeight;