From 7b60470e9b6e159205be5f5a38260ef5756d8569 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 22 Feb 2014 14:16:11 -0800 Subject: Fixes #12801: Add padding to the bottom of .form-control-static to match height of standard form controls --- less/forms.less | 1 + 1 file changed, 1 insertion(+) (limited to 'less/forms.less') diff --git a/less/forms.less b/less/forms.less index f607b8509..24cb0da69 100644 --- a/less/forms.less +++ b/less/forms.less @@ -418,6 +418,7 @@ input[type="checkbox"], .form-control-static { padding-top: (@padding-base-vertical + 1); + padding-bottom: (@padding-base-vertical + 1); } // Only right align form labels here when the columns stop stacking -- cgit v1.2.3 From 754791e3d9b67fd71b6a1250f93ea9723b68e221 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Mon, 24 Feb 2014 14:43:09 -0800 Subject: fix #12836 Thanks @Quy. --- 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 24cb0da69..8c90e4fdf 100644 --- a/less/forms.less +++ b/less/forms.less @@ -51,7 +51,7 @@ input[type="search"] { input[type="radio"], input[type="checkbox"] { margin: 4px 0 0; - margin-top: 1px \9; /* IE8-9 */ + margin-top: 1px \9; // IE8-9 line-height: normal; } -- cgit v1.2.3 From 7733f2437316c2ae10e669a50771646ae8b8e927 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 4 Mar 2014 14:12:57 -0800 Subject: Fixes #12868: Enables icon feedback on validation states for large/small inputs. Also reorders the CSS to place Glyhpicons as a dependency before other components for fewer overrides and less specific CSS. --- less/forms.less | 33 +++++++++++++++++++++------------ 1 file changed, 21 insertions(+), 12 deletions(-) (limited to 'less/forms.less') diff --git a/less/forms.less b/less/forms.less index 8c90e4fdf..273e36608 100644 --- a/less/forms.less +++ b/less/forms.less @@ -271,18 +271,27 @@ input[type="checkbox"], .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 its margin - right: 0; - display: block; - width: @input-height-base; - height: @input-height-base; - line-height: @input-height-base; - text-align: center; - } +} +// Feedback icon (requires .glyphicon classes) +.form-control-feedback { + position: absolute; + top: (@line-height-computed + 5); // Height of the `label` and its margin + right: 0; + display: block; + width: @input-height-base; + height: @input-height-base; + line-height: @input-height-base; + text-align: center; +} +.input-lg + .form-control-feedback { + width: @input-height-large; + height: @input-height-large; + line-height: @input-height-large; +} +.input-sm + .form-control-feedback { + width: @input-height-small; + height: @input-height-small; + line-height: @input-height-small; } // Feedback states -- cgit v1.2.3 From 2f955907f95ad9b7f42f624eb11142339709c188 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 9 Mar 2014 17:12:39 -0700 Subject: Fixes #12669: Properly reset line-height on date inputs for all sizes; Fix IE8+'s misaslignment of text within date inputs --- less/forms.less | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) (limited to 'less/forms.less') diff --git a/less/forms.less b/less/forms.less index 273e36608..f19d5c4c2 100644 --- a/less/forms.less +++ b/less/forms.less @@ -167,10 +167,20 @@ input[type="search"] { // Special styles for iOS date input // // In Mobile Safari, date inputs require a pixel line-height that matches the -// given height of the input. +// given height of the input. Since this fucks up everything else, we have to +// appropriately reset it for Internet Explorer and the size variations. input[type="date"] { line-height: @input-height-base; + // IE8+ misaligns the text within date inputs, so we reset + line-height: @line-height-base ~"\0"; + + &.input-sm { + line-height: @input-height-small; + } + &.input-lg { + line-height: @input-height-large; + } } -- cgit v1.2.3 From 1a5fb4ef24f6d1beb71df946fa4781df10eab6e1 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 9 Mar 2014 17:22:52 -0700 Subject: Fixes #12843: Scope label styles for horizontal forms to a media query so their narrow viewport display looks just like a normal form --- less/forms.less | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) (limited to 'less/forms.less') diff --git a/less/forms.less b/less/forms.less index f19d5c4c2..47ed3426a 100644 --- a/less/forms.less +++ b/less/forms.less @@ -413,8 +413,9 @@ input[type="checkbox"], .form-horizontal { - // Consistent vertical alignment of labels, radios, and checkboxes - .control-label, + // Consistent vertical alignment of radios and checkboxes + // + // Labels also get some reset styles, but that is scope to a media query below. .radio, .checkbox, .radio-inline, @@ -440,10 +441,13 @@ input[type="checkbox"], padding-bottom: (@padding-base-vertical + 1); } - // Only right align form labels here when the columns stop stacking + // Reset spacing and right align labels, but scope to media queries so that + // labels on narrow viewports stack the same as a default form example. @media (min-width: @screen-sm-min) { .control-label { text-align: right; + margin-bottom: 0; + padding-top: (@padding-base-vertical + 1); // Default padding plus a border } } -- cgit v1.2.3 From a15c24410be8b94671dcfc3b154e0034a3aaf35f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 9 Mar 2014 21:25:51 -0700 Subject: Fixes #12759 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Ensures proper sizing and alignment of input groups within inline and navbar forms. * Uses `inline-table` on the input group * Nukes the widths to `width: auto`—without this, the parent input group doesn’t size correctly and functions as `display: table;` or `block` --- less/forms.less | 12 ++++++++++++ 1 file changed, 12 insertions(+) (limited to 'less/forms.less') diff --git a/less/forms.less b/less/forms.less index 47ed3426a..b16cf1ae8 100644 --- a/less/forms.less +++ b/less/forms.less @@ -368,6 +368,18 @@ input[type="checkbox"], width: auto; // Prevent labels from stacking above inputs in `.form-group` vertical-align: middle; } + + .input-group { + display: inline-table; + vertical-align: middle; + + .input-group-addon, + .input-group-btn, + .form-control { + width: auto; + } + } + // Input groups need that 100% width though .input-group > .form-control { width: 100%; -- cgit v1.2.3 From b1f71e5292017aca978fabb74d256989e1eeea07 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Sun, 9 Mar 2014 21:35:48 -0700 Subject: fix grammar in comment in forms.less --- 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 b16cf1ae8..de17d1c82 100644 --- a/less/forms.less +++ b/less/forms.less @@ -427,7 +427,7 @@ input[type="checkbox"], // Consistent vertical alignment of radios and checkboxes // - // Labels also get some reset styles, but that is scope to a media query below. + // Labels also get some reset styles, but that is scoped to a media query below. .radio, .checkbox, .radio-inline, -- cgit v1.2.3