From a8e88d14a422c3dfdb79eaf6d6a3a2f1144df150 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 17 Nov 2011 00:06:16 -0800 Subject: [PATCH] make form classes match table classes (readable left to right), update docs associated with it --- bootstrap.css | 12 ++++++------ bootstrap.min.css | 10 +++++----- docs/base-css.html | 16 ++++++++-------- lib/forms.less | 40 +++++++++++++++++++++------------------- 4 files changed, 40 insertions(+), 38 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index c59d499546..c88f4ecafe 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 Nov 16 23:58:14 PST 2011 + * Date: Thu Nov 17 00:05:35 PST 2011 */ /* Reset.less * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc). @@ -921,7 +921,7 @@ form .clearfix.success .input-prepend .add-on, form .clearfix.success .input-app margin-right: 0; margin-left: -1px; } -.form-search .search-query { +.search-form .search-query { -webkit-border-radius: 14px; -moz-border-radius: 14px; border-radius: 14px; @@ -932,19 +932,19 @@ form .clearfix.success .input-prepend .add-on, form .clearfix.success .input-app .control-group > label { font-weight: bold; } -.form-horizontal .control-group > label { +.horizontal-form .control-group > label { float: left; width: 130px; padding-top: 5px; text-align: right; } -.form-horizontal .controls { +.horizontal-form .controls { margin-left: 150px; } -.form-horizontal .control-list { +.horizontal-form .control-list { padding-top: 6px; } -.form-horizontal .form-actions { +.horizontal-form .form-actions { padding-left: 150px; } /* diff --git a/bootstrap.min.css b/bootstrap.min.css index e236547a61..fb3dcd4db4 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -153,13 +153,13 @@ form .clearfix.success .input-prepend .add-on,form .clearfix.success .input-appe .input-prepend .add-on{*margin-top:1px;} .input-append input{float:left;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;} .input-append .add-on{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;margin-right:0;margin-left:-1px;} -.form-search .search-query{-webkit-border-radius:14px;-moz-border-radius:14px;border-radius:14px;} +.search-form .search-query{-webkit-border-radius:14px;-moz-border-radius:14px;border-radius:14px;} .control-group{margin-bottom:18px;} .control-group>label{font-weight:bold;} -.form-horizontal .control-group>label{float:left;width:130px;padding-top:5px;text-align:right;} -.form-horizontal .controls{margin-left:150px;} -.form-horizontal .control-list{padding-top:6px;} -.form-horizontal .form-actions{padding-left:150px;} +.horizontal-form .control-group>label{float:left;width:130px;padding-top:5px;text-align:right;} +.horizontal-form .controls{margin-left:150px;} +.horizontal-form .control-list{padding-top:6px;} +.horizontal-form .form-actions{padding-left:150px;} table{width:100%;padding:0;margin-bottom:18px;font-size:13px;border-collapse:collapse;}table th,table td{padding:10px 10px 9px;line-height:18px;text-align:left;} table th{padding-top:9px;font-weight:bold;vertical-align:middle;} table td{vertical-align:top;border-top:1px solid #ddd;} diff --git a/docs/base-css.html b/docs/base-css.html index 9c1af11c4e..0b84d01ad7 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -696,22 +696,22 @@ Vertical (default) - .form-vertical (not required) + .vertical-form (not required) Stacked, left-aligned labels over controls Horiztonal - .form-horizontal + .horizontal-form Float left, right-aligned labels on same line as controls Inline - .form-inline + .inline-form Left-aligned label and inline-block controls for compact style Search - .form-search + .search-form Extra-rounded text input for a typical search aesthetic @@ -734,7 +734,7 @@
-
+
@@ -747,7 +747,7 @@
-
+

Some directional text

And maybe some kind of optional supporting text right here.

@@ -763,7 +763,7 @@

Horizontal form

- + Example form
@@ -867,7 +867,7 @@

Vertical form

- + Example form
diff --git a/lib/forms.less b/lib/forms.less index b7eb150059..adc050d7a8 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -364,7 +364,7 @@ form .clearfix.success { // SEARCH FORM // ----------- -.form-search .search-query { +.search-form .search-query { .border-radius(14px); } @@ -388,22 +388,24 @@ form .clearfix.success { // Horizontal-specific styles // -------------------------- -// Float the labels left -.form-horizontal .control-group > label { - float: left; - width: 130px; - padding-top: 5px; - text-align: right; -} -// Move over all input controls and content -.form-horizontal .controls { - margin-left: 150px; -} -// Move the options list down to align with labels -.form-horizontal .control-list { - padding-top: 6px; // has to be padding because margin collaspes -} -// Move over buttons in .form-actions to align with .controls -.form-horizontal .form-actions { - padding-left: 150px; +.horizontal-form { + // Float the labels left + .control-group > label { + float: left; + width: 130px; + padding-top: 5px; + text-align: right; + } + // Move over all input controls and content + .controls { + margin-left: 150px; + } + // Move the options list down to align with labels + .control-list { + 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; + } }