From 23e5fc2133dd748ba4a7df52b598a24a2915811a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 5 Jan 2012 14:11:41 -0800 Subject: [PATCH] Tweak the docs and address the new forms list of controls: radios and checkboxes are now hanging controls to wrap text properly --- bootstrap.css | 15 +++++++++++---- bootstrap.min.css | 4 +++- docs/assets/css/docs.css | 6 +++++- docs/base-css.html | 9 ++++++++- lib/forms.less | 27 ++++++++++++++++++++++----- lib/patterns.less | 13 ------------- 6 files changed, 49 insertions(+), 25 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 55706e2a3c..ea084d5f05 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: Thu Jan 5 10:00:31 PST 2012 + * Date: Thu Jan 5 14:10:04 PST 2012 */ html, body { margin: 0; @@ -615,6 +615,16 @@ input[type=image] { textarea { height: auto; } +.radio, .checkbox { + padding-left: 18px; +} +.radio input[type=radio], .checkbox input[type=checkbox] { + float: left; + margin-left: -18px; +} +.controls > .radio:first-child, .controls > .checkbox:first-child { + padding-top: 6px; +} input, textarea { -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); @@ -986,9 +996,6 @@ textarea[readonly] { .horizontal-form .controls { margin-left: 150px; } -.horizontal-form .controls > .radio:first-child, .horizontal-form .controls > .checkbox:first-child { - padding-top: 6px; -} .horizontal-form .form-actions { padding-left: 150px; } diff --git a/bootstrap.min.css b/bootstrap.min.css index d0ba4dc53e..a021bf774f 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -104,6 +104,9 @@ select{background-color:#ffffff;vertical-align:middle;} select[multiple],select[size]{height:inherit;} input[type=image]{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} textarea{height:auto;} +.radio,.checkbox{padding-left:18px;} +.radio input[type=radio],.checkbox input[type=checkbox]{float:left;margin-left:-18px;} +.controls>.radio:first-child,.controls>.checkbox:first-child{padding-top:6px;} input,textarea{-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);-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);-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);outline:0;} input[type=file]:focus,input[type=checkbox]:focus,select:focus{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;outline:1px dotted #666;} @@ -159,7 +162,6 @@ input[disabled],select[disabled],textarea[disabled],input[readonly],select[reado .control-group>label{font-weight:bold;} .horizontal-form .control-group>label{float:left;width:130px;padding-top:5px;text-align:right;} .horizontal-form .controls{margin-left:150px;} -.horizontal-form .controls>.radio:first-child,.horizontal-form .controls>.checkbox:first-child{padding-top:6px;} .horizontal-form .form-actions{padding-left:150px;} table{width:100%;margin-bottom:18px;} th,td{padding:8px;line-height:18px;text-align:left;border-top:1px solid #ddd;} diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index a4573448f2..9501ec5dc4 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -36,7 +36,11 @@ body > .navbar-fixed .brand:hover { /* Space out sub-sections more -------------------------------------------------- */ .page-header { - margin-top: 36px; + margin: 36px 0 18px; + border-bottom: 1px solid #eee; +} +.page-header h1 { + margin-bottom: 9px; } diff --git a/docs/base-css.html b/docs/base-css.html index 58d42c2b06..1ec808a394 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -795,9 +795,16 @@ Form states warning error success - --> +
+
+

Flexible markup and styles

+

The best part about forms in Bootstrap is that all your inputs and controls look great no matter how you build them in your markup. No superfluous HTML is required, but we provide the patterns for those who require it.

+
+
+ +

Four types of forms

diff --git a/lib/forms.less b/lib/forms.less index 0c624fa884..32acbdaba9 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -116,6 +116,28 @@ textarea { +// CHECKBOXES & RADIOS +// ------------------- + +// Indent the labels to position radios/checkboxes as hanging +.radio, +.checkbox { + padding-left: 18px; +} +.radio input[type=radio], +.checkbox input[type=checkbox] { + float: left; + margin-left: -18px; +} + +// Move the options list down to align with labels +.controls > .radio:first-child, +.controls > .checkbox:first-child { + padding-top: 6px; // has to be padding because margin collaspes +} + + + // FOCUS STATE // ----------- @@ -390,11 +412,6 @@ textarea[readonly] { .controls { margin-left: 150px; } - // Move the options list down to align with labels - .controls > .radio:first-child, - .controls > .checkbox:first-child { - padding-top: 6px; // has to be padding because margin collaspes - } // Move over buttons in .form-actions to align with .controls .form-actions { padding-left: 150px; diff --git a/lib/patterns.less b/lib/patterns.less index 72c3e8ec5f..7a039ce265 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -28,16 +28,3 @@ footer { margin-top: @baseLineHeight - 1; border-top: 1px solid #eee; } - - -// PAGE HEADERS -// ------------ - -.page-header { - margin-bottom: @baseLineHeight * 1.5; - border-bottom: 1px solid #eee; - .box-shadow(0 1px 0 rgba(255,255,255,.5)); - h1 { - margin-bottom: @baseLineHeight * .75; - } -}