From c459c657f8e10ae1af6378114f4943104597c590 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 7 May 2013 21:56:55 -0700 Subject: Update forms * Overhaul the form control sizing section to only show sizing via grid columns as parents, not as classes on inputs * Restore the inline-form option * Restore the bottom margin on form controls and make them block level instead of inline-block * More misc docs cleanup for forms --- less/forms.less | 28 +++++++++++++++++++++++----- 1 file changed, 23 insertions(+), 5 deletions(-) (limited to 'less/forms.less') diff --git a/less/forms.less b/less/forms.less index 2a1a4e90c..6162cd4f1 100644 --- a/less/forms.less +++ b/less/forms.less @@ -54,10 +54,10 @@ input[type="url"], input[type="search"], input[type="tel"], input[type="color"] { - display: inline-block; + display: block; min-height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border) padding: 6px 9px; - // margin-bottom: (@line-height-base / 2); + margin-bottom: 10px; font-size: @font-size-base; line-height: @line-height-base; color: @gray; @@ -174,6 +174,7 @@ textarea { min-height: @line-height-base; // clear the floating input if there is no label text margin-bottom: (@line-height-base / 2); padding-left: 20px; + vertical-align: middle; label { display: inline; margin-bottom: 0; @@ -387,14 +388,16 @@ select:focus:invalid { display: table; // Undo padding and float of grid classes - &[class*="span"] { + &.col { float: none; - padding: 0; + padding-left: 0; + padding-right: 0; } input, select { width: 100%; + margin-bottom: 0; } } @@ -404,7 +407,7 @@ select:focus:invalid { .input-group-btn, .input-group input { display: table-cell; - margin: 0; + /*margin: 0;*/ border-radius: 0; &.input-small { border-radius: 0; @@ -515,6 +518,21 @@ select:focus:invalid { +// Inline forms +// -------------------------------------------------- + +.form-inline { + input, + select, + textarea, + .radio, + .checkbox { + display: inline-block; + margin-bottom: 0; + } +} + + // Horizontal forms // -------------------------------------------------- -- cgit v1.2.3 From 9716b73f67de690d008cbfc8f1375ee85cd2539d Mon Sep 17 00:00:00 2001 From: Blake Embrey Date: Thu, 9 May 2013 14:48:27 -0700 Subject: Make the border-radius on input-groups to be overrides instead of resets on every size. --- less/forms.less | 65 ++++++++++++++------------------------------------------- 1 file changed, 16 insertions(+), 49 deletions(-) (limited to 'less/forms.less') diff --git a/less/forms.less b/less/forms.less index 6162cd4f1..5db5f5cc3 100644 --- a/less/forms.less +++ b/less/forms.less @@ -407,12 +407,8 @@ select:focus:invalid { .input-group-btn, .input-group input { display: table-cell; - /*margin: 0;*/ - border-radius: 0; - &.input-small { - border-radius: 0; - } - &.input-large { + + &:not(:first-child):not(:last-child) { border-radius: 0; } } @@ -435,40 +431,35 @@ select:focus:invalid { text-shadow: 0 1px 0 #fff; background-color: @gray-lighter; border: 1px solid #ccc; + border-radius: @border-radius-base; &.input-small { padding: @padding-small; font-size: @font-size-small; + border-radius: @border-radius-small; } - &.input-large { - padding: @padding-large; - font-size: @font-size-large; + &.input-large { + padding: @padding-large; + font-size: @font-size-large; + border-radius: @border-radius-large; } } // Reset rounded corners .input-group input:first-child, -.input-group-addon:first-child { - .border-left-radius(@border-radius-base); - &.input-small { - .border-left-radius(@border-radius-small); - } - &.input-large { - .border-left-radius(@border-radius-large); - } +.input-group-addon:first-child, +.input-group-btn:first-child > .btn:first-child, +.input-group-btn:first-child > .dropdown-toggle:first-child { + .border-right-radius(0); } .input-group-addon:first-child { border-right: 0; } .input-group input:last-child, -.input-group-addon:last-child { - .border-right-radius(@border-radius-base); - &.input-small { - .border-right-radius(@border-radius-small); - } - &.input-large { - .border-right-radius(@border-radius-large); - } +.input-group-addon:last-child, +.input-group-btn:last-child > .btn:last-child, +.input-group-btn:last-child > .dropdown-toggle { + .border-left-radius(0); } .input-group-addon:last-child { border-left: 0; @@ -483,7 +474,6 @@ select:focus:invalid { .input-group-btn > .btn { position: relative; float: left; // Collapse white-space - border-radius: 0; + .btn { margin-left: -1px; } @@ -494,29 +484,6 @@ select:focus:invalid { } } -// Prepended buttons -.input-group-btn:first-child { - // Round the left corners only - > .btn:first-child, - > .dropdown-toggle:first-child { - .border-left-radius(@border-radius-base); - &.btn-large { .border-left-radius(@border-radius-large); } - &.btn-small { .border-left-radius(@border-radius-small); } - } -} - -// Appended buttons -.input-group-btn:last-child { - // Round the right corners only - > .btn:last-child, - > .dropdown-toggle { - .border-right-radius(@border-radius-base); - &.btn-large { .border-right-radius(@border-radius-large); } - &.btn-small { .border-right-radius(@border-radius-small); } - } -} - - // Inline forms // -------------------------------------------------- -- cgit v1.2.3 From 293a3baca36fb8788fb75d331439f143f6762fc1 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 9 May 2013 15:05:06 -0700 Subject: More forms overhaul * Refactor the .forms-horizontal code--much simpler now and built on the Bootstrap grid system instead * Remove all the margins on form controls for simpler styling everywhere else--was overriding that way too often * Drop .help-inline, but keep .help-block * Drop the unused input grid class overrides --- less/forms.less | 110 +++++++++++++------------------------------------------- 1 file changed, 25 insertions(+), 85 deletions(-) (limited to 'less/forms.less') diff --git a/less/forms.less b/less/forms.less index 6162cd4f1..6b3bff728 100644 --- a/less/forms.less +++ b/less/forms.less @@ -57,7 +57,6 @@ input[type="color"] { display: block; min-height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border) padding: 6px 9px; - margin-bottom: 10px; font-size: @font-size-base; line-height: @line-height-base; color: @gray; @@ -172,7 +171,8 @@ textarea { .checkbox { display: block; min-height: @line-height-base; // clear the floating input if there is no label text - margin-bottom: (@line-height-base / 2); + margin-top: 10px; + margin-bottom: 10px; padding-left: 20px; vertical-align: middle; label { @@ -182,7 +182,6 @@ textarea { cursor: pointer; } } - .radio input[type="radio"], .radio-inline input[type="radio"], .checkbox input[type="checkbox"], @@ -192,7 +191,7 @@ textarea { } .radio + .radio, .checkbox + .checkbox { - margin-top: ((@line-height-base / 4) * -1); + margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing } /* @@ -255,33 +254,6 @@ input[type="color"] { } - -// GRID SIZING FOR INPUTS -// ---------------------- - -// Grid style input sizes -input[class*="span"], -select[class*="span"], -textarea[class*="span"] { - float: none; - margin-left: 0; - margin-right: 0; -} - -// Ensure input-prepend/append never wraps -.input-append input[class*="span"], -.input-prepend input[class*="span"] { - display: inline-block; -} - -input[class*="span"], -select[class*="span"], -textarea[class*="span"] { - height: @input-height-base; -} - - - // DISABLED STATE // -------------- @@ -361,20 +333,11 @@ select:focus:invalid { // HELP TEXT // --------- -.help-block, -.help-inline { - color: lighten(@text-color, 25%); // lighten the text some for contrast -} - .help-block { display: block; // account for any element using help-block - margin-bottom: (@line-height-base / 2); -} - -.help-inline { - display: inline-block; - vertical-align: middle; - padding-left: 5px; + margin-top: 5px; + margin-bottom: 10px; + color: lighten(@text-color, 25%); // lighten the text some for contrast } @@ -436,14 +399,14 @@ select:focus:invalid { background-color: @gray-lighter; border: 1px solid #ccc; - &.input-small { - padding: @padding-small; - font-size: @font-size-small; + &.input-small { + padding: @padding-small; + font-size: @font-size-small; + } + &.input-large { + padding: @padding-large; + font-size: @font-size-large; } - &.input-large { - padding: @padding-large; - font-size: @font-size-large; - } } // Reset rounded corners @@ -528,6 +491,10 @@ select:focus:invalid { .radio, .checkbox { display: inline-block; + } + .radio, + .checkbox { + margin-top: 0; margin-bottom: 0; } } @@ -535,41 +502,14 @@ select:focus:invalid { // Horizontal forms // -------------------------------------------------- +// Horizontal forms are built on grid classes. -@media screen and (min-width: @screen-tablet) { - - .form-horizontal { - - // Increase spacing between groups - .control-group { - position: relative; - margin-bottom: @line-height-base; - .clearfix(); - - input, - select, - textarea { - margin-bottom: 0; - } - } - - // Float the labels left - .control-group > .control-label { - float: left; - width: (@component-offset-horizontal - 20); - padding-top: 6px; - text-align: right; - } - - // Move over all input controls and content over - .control-group > .controls { - margin-left: @component-offset-horizontal; - } - - // Make sure form actions buttons are aligned with controls - .form-actions { - padding-left: @component-offset-horizontal; - } - +.form-horizontal { + .row + .row { + margin-top: 15px; + } + .row-label { + padding-top: 6px; + text-align: right; } } -- cgit v1.2.3 From 6fba68eb8b036fad1bc4f33484889cccf2480bff Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 9 May 2013 17:20:46 -0700 Subject: Unitless line-height * Instead of 20px as @line-height-base, use 1.5 * Update typographic scale for headings to use unitless as well--required some twerking of decimals a bit and some rounding * Introduce new @line-height-computed value, which takes base font-size and multiplies it by 1.5, for use in padding and margin on components --- less/forms.less | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'less/forms.less') diff --git a/less/forms.less b/less/forms.less index 6b3bff728..4a99a7793 100644 --- a/less/forms.less +++ b/less/forms.less @@ -20,9 +20,9 @@ legend { display: block; width: 100%; padding: 0; - margin-bottom: @line-height-base; + margin-bottom: @line-height-computed; font-size: (@font-size-base * 1.5); - line-height: (@line-height-base * 2); + line-height: @line-height-headings; color: @gray-dark; border: 0; border-bottom: 1px solid #e5e5e5; @@ -170,7 +170,7 @@ textarea { .radio, .checkbox { display: block; - min-height: @line-height-base; // clear the floating input if there is no label text + min-height: @line-height-computed; // clear the floating input if there is no label text margin-top: 10px; margin-bottom: 10px; padding-left: 20px; @@ -320,9 +320,9 @@ select:focus:invalid { // ------------ .form-actions { - padding: (@line-height-base - 1) 20px @line-height-base; - margin-top: @line-height-base; - margin-bottom: @line-height-base; + padding: @line-height-computed 20px; + margin-top: @line-height-computed; + margin-bottom: @line-height-computed; background-color: @form-actions-bg; border-top: 1px solid #e5e5e5; .clearfix(); // Adding clearfix to allow for .pull-right button containers -- cgit v1.2.3 From 60c24ddd976f24ac773c27d091a5a2559f54d2b0 Mon Sep 17 00:00:00 2001 From: Blake Embrey Date: Sat, 11 May 2013 09:38:48 -0700 Subject: Fix the selectors for the .input-group-btn selector. --- less/forms.less | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) (limited to 'less/forms.less') diff --git a/less/forms.less b/less/forms.less index cc69e935f..173520000 100644 --- a/less/forms.less +++ b/less/forms.less @@ -410,8 +410,9 @@ select:focus:invalid { // Reset rounded corners .input-group input:first-child, .input-group-addon:first-child, -.input-group-btn:first-child > .btn:first-child, -.input-group-btn:first-child > .dropdown-toggle:first-child { +.input-group-btn:first-child > .btn, +.input-group-btn:first-child > .dropdown-toggle, +.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) { .border-right-radius(0); } .input-group-addon:first-child { @@ -419,8 +420,9 @@ select:focus:invalid { } .input-group input:last-child, .input-group-addon:last-child, -.input-group-btn:last-child > .btn:last-child, -.input-group-btn:last-child > .dropdown-toggle { +.input-group-btn:last-child > .btn, +.input-group-btn:last-child > .dropdown-toggle, +.input-group-btn:first-child > .btn:not(:first-child) { .border-left-radius(0); } .input-group-addon:last-child { -- cgit v1.2.3 From e23f661f3fc66f83cb976f8a3b7e2c627af9162d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 14 May 2013 18:59:13 -0700 Subject: Fixes #7885 and #7886: only right align horizontal form labels when above 768px --- less/forms.less | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'less/forms.less') diff --git a/less/forms.less b/less/forms.less index 173520000..dacc4bb50 100644 --- a/less/forms.less +++ b/less/forms.less @@ -478,6 +478,12 @@ select:focus:invalid { } .row-label { padding-top: 6px; + } +} + +// Only right aline form labels here when the columns stop stacking +@media (min-width: 768px) { + .form-horizontal .row-label { text-align: right; } } -- cgit v1.2.3 From 28a081cb20d4e9544967e7c6d5ab31ff4ad68862 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 14 May 2013 23:21:30 -0700 Subject: Overhaul form control and button sizing, and some type styles * New padding approach with separate horizontal and vertical padding variables * Improved sizing in large and small buttons and form controls * Dropped the `.btn-mini` (since we have no `.input-mini` to match, and holy fuck those were small buttons) * Dropped the `.pagination-mini` as well because once again, to hell with such small components * Changed `@line-height-headings` to `@headings-line-height` * Removed the `@headings-font-family` because it was honestly kind of useless --- less/forms.less | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) (limited to 'less/forms.less') diff --git a/less/forms.less b/less/forms.less index dacc4bb50..c7b376cda 100644 --- a/less/forms.less +++ b/less/forms.less @@ -22,7 +22,7 @@ legend { padding: 0; margin-bottom: @line-height-computed; font-size: (@font-size-base * 1.5); - line-height: @line-height-headings; + line-height: inherit; color: @gray-dark; border: 0; border-bottom: 1px solid #e5e5e5; @@ -56,7 +56,7 @@ input[type="tel"], input[type="color"] { display: block; min-height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border) - padding: 6px 9px; + padding: @padding-base-vertical @padding-base-horizontal; font-size: @font-size-base; line-height: @line-height-base; color: @gray; @@ -241,13 +241,13 @@ input[type="search"], input[type="tel"], input[type="color"] { &.input-large { - padding: @padding-large; + padding: @padding-large-vertical @padding-large-horizontal; font-size: @font-size-large; border-radius: @border-radius-large; } &.input-small { min-height: @input-height-small; - padding: @padding-small; + padding: @padding-small-vertical @padding-small-horizontal; font-size: @font-size-small; border-radius: @border-radius-small; } @@ -397,11 +397,12 @@ select:focus:invalid { border-radius: @border-radius-base; &.input-small { - padding: @padding-small; + padding: @padding-small-vertical @padding-small-horizontal; font-size: @font-size-small; - border-radius: @border-radius-small; } + border-radius: @border-radius-small; + } &.input-large { - padding: @padding-large; + padding: @padding-large-vertical @padding-large-horizontal; font-size: @font-size-large; border-radius: @border-radius-large; } -- cgit v1.2.3 From 7780133c1cb1868a0e936dd68e951b1e22d3215b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?m=2Eseegm=C3=BCller?= Date: Wed, 15 May 2013 15:44:28 +0200 Subject: Fixed ugly outline Removes outline (especially on select-elements in firefox) --- 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 c7b376cda..fe5396cd1 100644 --- a/less/forms.less +++ b/less/forms.less @@ -64,6 +64,7 @@ input[type="color"] { background-color: @input-bg; border: 1px solid @input-border; border-radius: @input-border-radius; + outline: 0; .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); .transition(~"border-color linear .2s, box-shadow linear .2s"); } -- cgit v1.2.3 From 6289e24f6663e7465b9a902e70190b41100d16ac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?m=2Eseegm=C3=BCller?= Date: Wed, 15 May 2013 16:14:44 +0200 Subject: Fixed ugly outline in select fields Removes .tab-focus() on select-fields --- less/forms.less | 34 ++++++---------------------------- 1 file changed, 6 insertions(+), 28 deletions(-) (limited to 'less/forms.less') diff --git a/less/forms.less b/less/forms.less index fe5396cd1..c79f7f673 100644 --- a/less/forms.less +++ b/less/forms.less @@ -64,9 +64,14 @@ input[type="color"] { background-color: @input-bg; border: 1px solid @input-border; border-radius: @input-border-radius; - outline: 0; .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); .transition(~"border-color linear .2s, box-shadow linear .2s"); + + &:focus { + border-color: rgba(82,168,236,.8); + outline: 0; + .box-shadow(0 0 8px rgba(82,168,236,.6)); + } } // Reset appearance properties for textual inputs and textarea @@ -98,32 +103,6 @@ textarea { height: auto; } -// Everything else -textarea, -input[type="text"], -input[type="password"], -input[type="datetime"], -input[type="datetime-local"], -input[type="date"], -input[type="month"], -input[type="time"], -input[type="week"], -input[type="number"], -input[type="email"], -input[type="url"], -input[type="search"], -input[type="tel"], -input[type="color"] { - // Focus state - &:focus { - border-color: rgba(82,168,236,.8); - outline: 0; - outline: thin dotted \9; /* IE6-9 */ - //.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)"); - .box-shadow(0 0 8px rgba(82,168,236,.6)); - } -} - // Position radios and checkboxes better input[type="radio"], input[type="checkbox"] { @@ -146,7 +125,6 @@ select[size] { } // Focus for select, file, radio, and checkbox -select:focus, input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus { -- cgit v1.2.3 From f3d857773455a940fca0c8d2ef1ca26982700031 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 15 May 2013 10:16:11 -0700 Subject: Run make on previous commit; twerk box shadow back to commented out version --- less/forms.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'less/forms.less') diff --git a/less/forms.less b/less/forms.less index c79f7f673..2c696945d 100644 --- a/less/forms.less +++ b/less/forms.less @@ -65,12 +65,12 @@ input[type="color"] { border: 1px solid @input-border; border-radius: @input-border-radius; .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); - .transition(~"border-color linear .2s, box-shadow linear .2s"); + .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s"); &:focus { border-color: rgba(82,168,236,.8); outline: 0; - .box-shadow(0 0 8px rgba(82,168,236,.6)); + .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)"); } } -- cgit v1.2.3 From c73588b3132b8c848f10561ad8f946f8c58a636b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 16 May 2013 18:46:12 -0700 Subject: Drop .form-actions --- less/forms.less | 13 ------------- 1 file changed, 13 deletions(-) (limited to 'less/forms.less') diff --git a/less/forms.less b/less/forms.less index 2c696945d..4e028bf49 100644 --- a/less/forms.less +++ b/less/forms.less @@ -295,19 +295,6 @@ select:focus:invalid { -// FORM ACTIONS -// ------------ - -.form-actions { - padding: @line-height-computed 20px; - margin-top: @line-height-computed; - margin-bottom: @line-height-computed; - background-color: @form-actions-bg; - border-top: 1px solid #e5e5e5; - .clearfix(); // Adding clearfix to allow for .pull-right button containers -} - - // HELP TEXT // --------- -- cgit v1.2.3 From 1983ca03ec4f84bf9076d9327bc966caffda4ea6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 16 May 2013 20:17:42 -0700 Subject: Form validation and horizontal row update * changed .row-label to .control-label as used elsewhere already * changed .formFieldState mixin to .form-field-validation --- less/forms.less | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'less/forms.less') diff --git a/less/forms.less b/less/forms.less index 4e028bf49..303c3b617 100644 --- a/less/forms.less +++ b/less/forms.less @@ -268,15 +268,15 @@ input[type="checkbox"] { // Warning .has-warning { - .formFieldState(@state-warning-text, @state-warning-text, @state-warning-bg); + .form-field-validation(@state-warning-text, @state-warning-text, @state-warning-bg); } // Error .has-error { - .formFieldState(@state-danger-text, @state-danger-text, @state-danger-bg); + .form-field-validation(@state-danger-text, @state-danger-text, @state-danger-bg); } // Success .has-success { - .formFieldState(@state-success-text, @state-success-text, @state-success-bg); + .form-field-validation(@state-success-text, @state-success-text, @state-success-bg); } // HTML5 invalid states @@ -443,14 +443,14 @@ select:focus:invalid { .row + .row { margin-top: 15px; } - .row-label { + .control-label { padding-top: 6px; } } // Only right aline form labels here when the columns stop stacking @media (min-width: 768px) { - .form-horizontal .row-label { + .form-horizontal .control-label { text-align: right; } } -- cgit v1.2.3 From 35573db810fbcbb9d7aefde090fbad3dbd332271 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 19 May 2013 22:06:10 -0700 Subject: Fixes #7611: fix optgroup formatting for Firefox --- less/forms.less | 7 +++++++ 1 file changed, 7 insertions(+) (limited to 'less/forms.less') diff --git a/less/forms.less b/less/forms.less index 303c3b617..c61fd50fa 100644 --- a/less/forms.less +++ b/less/forms.less @@ -124,6 +124,13 @@ select[size] { height: auto; } +// Fix optgroup Firefox bug per https://github.com/twitter/bootstrap/issues/7611 +select optgroup { + font-size: inherit; + font-style: inherit; + font-family: inherit; +} + // Focus for select, file, radio, and checkbox input[type="file"]:focus, input[type="radio"]:focus, -- cgit v1.2.3 From 79666385f761bd27a31fc363fa26cdbe5b037017 Mon Sep 17 00:00:00 2001 From: Robert Burns Date: Fri, 24 May 2013 08:14:11 -0400 Subject: Use base padding for input-group-addon class --- 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 c61fd50fa..10a315da6 100644 --- a/less/forms.less +++ b/less/forms.less @@ -359,7 +359,7 @@ select:focus:invalid { // ------------------------- .input-group-addon { .box-sizing(border-box); - padding: 6px 8px; + padding: @padding-base-vertical @padding-base-horizontal; font-size: @font-size-base; font-weight: normal; line-height: @line-height-base; -- cgit v1.2.3