From ab29b1a3352e89fe8756a34e49a38341edd06844 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Mon, 9 Dec 2013 16:12:41 -0800 Subject: misc strictMath compliance fixes --- less/forms.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'less/forms.less') diff --git a/less/forms.less b/less/forms.less index 50df399e3..f7fc5d66c 100644 --- a/less/forms.less +++ b/less/forms.less @@ -352,7 +352,7 @@ input[type="checkbox"], // and other content below items .radio, .checkbox { - min-height: @line-height-computed + (@padding-base-vertical + 1); + min-height: (@line-height-computed + (@padding-base-vertical + 1)); } // Make form groups behave like rows -- cgit v1.2.3 From b04a1de9b097de7f4df95b30df040efe86563e75 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 15 Dec 2013 14:52:49 -0800 Subject: Fixes #11402: Updated fix for select.form-control width in inline-forms --- less/forms.less | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'less/forms.less') diff --git a/less/forms.less b/less/forms.less index f7fc5d66c..d2d089c30 100644 --- a/less/forms.less +++ b/less/forms.less @@ -311,6 +311,11 @@ input[type="checkbox"], width: auto; } + // Override `width: 100%;` when not within a `.form-group` + > select.form-control { + width: auto; + } + // Remove default margin on radios/checkboxes that were used for stacking, and // then undo the floating of radios and checkboxes to match (which also avoids // a bug in WebKit: https://github.com/twbs/bootstrap/issues/1969). -- cgit v1.2.3 From 4f22670c6ecfd4239fe690719867531c18721234 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 15 Dec 2013 15:24:52 -0800 Subject: formatting and comment --- less/forms.less | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'less/forms.less') diff --git a/less/forms.less b/less/forms.less index d2d089c30..e623c42e5 100644 --- a/less/forms.less +++ b/less/forms.less @@ -226,7 +226,12 @@ input[type="checkbox"], } } + // Form control sizing +// +// Build on `.form-control` with modifier classes to decrease or increase the +// height and font-size of form controls. + .input-sm { .input-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small); } -- cgit v1.2.3 From d9345ff7d55e3982b36f88cb7459239a773bbfda Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 15 Dec 2013 15:27:46 -0800 Subject: Fixes #11266: Apply a pixel-based line-height to date inputs for iOS 7 --- less/forms.less | 8 ++++++++ 1 file changed, 8 insertions(+) (limited to 'less/forms.less') diff --git a/less/forms.less b/less/forms.less index e623c42e5..a5f966802 100644 --- a/less/forms.less +++ b/less/forms.less @@ -155,6 +155,14 @@ output { } } +// Special styles for iOS date input +// +// In Mobile Safari, date inputs require a pixel line-height that matches the +// given height of the input. +input[type="date"] { + line-height: @input-height-base; +} + // Form groups // -- cgit v1.2.3 From 2979e4bcea25c428c801d77153dc0f663618ce20 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 15 Dec 2013 17:15:09 -0800 Subject: Add new form feedback states, clean up existing form styles MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit New stuff: * Adds `.has-feedback` and `.form-control-feedback` to show icon-based form feedback to users. Fixes #11836. * Removes the `width: 1em` on `.glyphicon` because it makes it impractical to resize the width of all icons, even if they’re not “empty” (e.g., a simple `.glyphicon { width: 30px; }` wouldn’t work, nor would a class preceeded by a parent class. Clean up: * Sets `width: auto;` on all `.form-control`s within inline forms. * Removes all the inline `select` menu `width` styles because all inputs are now `auto`. * Update form states docs to separate out sections better. --- less/forms.less | 57 +++++++++++++++++++++++++++++++++++++++++++++------------ 1 file changed, 45 insertions(+), 12 deletions(-) (limited to 'less/forms.less') diff --git a/less/forms.less b/less/forms.less index a5f966802..530257499 100644 --- a/less/forms.less +++ b/less/forms.less @@ -253,15 +253,35 @@ input[type="checkbox"], // // Apply contextual and semantic states to individual form controls. -// Warning +.has-feedback { + // Enable absolute positioning + position: relative; + + // Ensure icons don't overlap text + .form-control { + padding-right: (@input-height-base * 1.25); + } + + // Feedback icon (requires .glyphicon classes) + .form-control-feedback { + position: absolute; + top: (@line-height-computed + 5); // Height of the `label` and it's margin + right: 0; + display: block; + width: @input-height-base; + height: @input-height-base; + line-height: @input-height-base; + text-align: center; + } +} + +// Feedback states .has-warning { .form-control-validation(@state-warning-text; @state-warning-text; @state-warning-bg); } -// Error .has-error { .form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg); } -// Success .has-success { .form-control-validation(@state-success-text; @state-success-text; @state-success-bg); } @@ -307,7 +327,7 @@ input[type="checkbox"], // Kick in the inline @media (min-width: @screen-sm) { // Inline-block all the things for "inline" - .form-group { + .form-group { display: inline-block; margin-bottom: 0; vertical-align: middle; @@ -316,17 +336,13 @@ input[type="checkbox"], // In navbar-form, allow folks to *not* use `.form-group` .form-control { display: inline-block; + width: auto; // Prevent labels from stacking above inputs in `.form-group` vertical-align: middle; } - // Override `width: 100%;` when not within a `.form-group` - select.form-control { - width: auto; - } - - // Override `width: 100%;` when not within a `.form-group` - > select.form-control { - width: auto; + .control-label { + margin-bottom: 0; + vertical-align: middle; } // Remove default margin on radios/checkboxes that were used for stacking, and @@ -345,6 +361,14 @@ input[type="checkbox"], float: none; margin-left: 0; } + + // Validation states + // + // Reposition the icon because it's now within a grid column and columns have + // `position: relative;` on them. Also accounts for the grid gutter padding. + .has-feedback .form-control-feedback { + top: 0; + } } } @@ -388,4 +412,13 @@ input[type="checkbox"], text-align: right; } } + + // Validation states + // + // Reposition the icon because it's now within a grid column and columns have + // `position: relative;` on them. Also accounts for the grid gutter padding. + .has-feedback .form-control-feedback { + top: 0; + right: (@grid-gutter-width / 2); + } } -- cgit v1.2.3 From be508e043c2a5f53b352066a1628693adfa7755e Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Sun, 15 Dec 2013 18:13:50 -0800 Subject: copyediting --- less/forms.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'less/forms.less') diff --git a/less/forms.less b/less/forms.less index 530257499..aefa5a462 100644 --- a/less/forms.less +++ b/less/forms.less @@ -265,7 +265,7 @@ input[type="checkbox"], // Feedback icon (requires .glyphicon classes) .form-control-feedback { position: absolute; - top: (@line-height-computed + 5); // Height of the `label` and it's margin + top: (@line-height-computed + 5); // Height of the `label` and its margin right: 0; display: block; width: @input-height-base; -- cgit v1.2.3