From dc2deb9a1b1995bbabee91bfd579d9b466fe78f2 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Thu, 26 Jan 2012 21:48:46 -0800 Subject: moving structure around + more work on builder... --- less/forms.less | 514 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 514 insertions(+) create mode 100644 less/forms.less (limited to 'less/forms.less') diff --git a/less/forms.less b/less/forms.less new file mode 100644 index 000000000..9e2e1dc1b --- /dev/null +++ b/less/forms.less @@ -0,0 +1,514 @@ +// Forms.less +// Base styles for various input types, form layouts, and states +// ------------------------------------------------------------- + + +// GENERAL STYLES +// -------------- + +// Make all forms have space below them +form { + margin: 0 0 @baseLineHeight; +} + +fieldset { + padding: 0; + margin: 0; + border: 0; +} + +// Groups of fields with labels on top (legends) +legend { + display: block; + width: 100%; + padding: 0; + margin-bottom: @baseLineHeight * 1.5; + font-size: @baseFontSize * 1.5; + line-height: @baseLineHeight * 2; + color: @grayDark; + border: 0; + border-bottom: 1px solid #eee; +} + +// Set font for forms +label, +input, +button, +select, +textarea { + #font > .sans-serif(@baseFontSize,normal,@baseLineHeight); +} + +// Identify controls by their labels +label { + display: block; + margin-bottom: 5px; + color: @grayDark; +} + +// Inputs, Textareas, Selects +input, +textarea, +select, +.uneditable-input { + display: inline-block; + width: 210px; + height: @baseLineHeight; + padding: 4px; + margin-bottom: 9px; + font-size: @baseFontSize; + line-height: @baseLineHeight; + color: @gray; + border: 1px solid #ccc; + .border-radius(3px); +} +.uneditable-textarea { + width: auto; + height: auto; +} + +// Inputs within a label +label input, +label textarea, +label select { + display: block; +} + +// Mini reset for unique input types +input[type=image], +input[type=checkbox], +input[type=radio] { + width: auto; + height: auto; + padding: 0; + margin: 3px 0; + *margin-top: 0; /* IE7 */ + line-height: normal; + border: none; + cursor: pointer; + .border-radius(0); +} + +// Reset the file input to browser defaults +input[type=file] { + padding: initial; + line-height: initial; + border: initial; + background-color: @white; + background-color: initial; + .box-shadow(none); +} + +// Help out input buttons +input[type=button], +input[type=reset], +input[type=submit] { + width: auto; + height: auto; +} + +// Set the height of select and file controls to match text inputs +select, +input[type=file] { + height: 28px; /* In IE7, the height of the select element cannot be changed by height, only font-size */ + *margin-top: 4px; /* For IE7, add top margin to align select with labels */ + line-height: 28px; +} + +// Chrome on Linux and Mobile Safari need background-color +select { + width: 220px; // default input width + 10px of padding that doesn't get applied + background-color: @white; +} + +// Make multiple select elements height not fixed +select[multiple], +select[size] { + height: auto; +} + +// Remove shadow from image inputs +input[type=image] { + .box-shadow(none); +} + +// Make textarea height behave +textarea { + height: auto; +} + +// Hidden inputs +input[type=hidden] { + display: none; +} + + + +// 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: 5px; // has to be padding because margin collaspes +} + +// Radios and checkboxes on same line +.radio.inline, +.checkbox.inline { + display: inline-block; + margin-bottom: 0; +} +.radio.inline + .radio.inline, +.checkbox.inline + .checkbox.inline { + margin-left: 10px; // space out consecutive inline controls +} + + + +// FOCUS STATE +// ----------- + +input, +textarea { + .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); + @transition: border linear .2s, box-shadow linear .2s; + .transition(@transition); +} +input:focus, +textarea:focus { + border-color: rgba(82,168,236,.8); + @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6); + .box-shadow(@shadow); + outline: 0; +} +input[type=file]:focus, +input[type=checkbox]:focus, +select:focus { + .box-shadow(none); // override for file inputs + outline: 1px dotted #666; // Selet elements don't get box-shadow styles, so instead we do outline +} + + + +// INPUT SIZES +// ----------- + +// General classes for quick sizes +.input-mini { width: 60px; } +.input-small { width: 90px; } +.input-medium { width: 150px; } +.input-large { width: 210px; } +.input-xlarge { width: 270px; } +.input-xxlarge { width: 530px; } + +// Grid style input sizes +input[class*="span"], +select[class*="span"], +textarea[class*="span"], +.uneditable-input { + float: none; + margin-left: 0; +} + +// This is a duplication of the main grid .columns() mixin, but subtracts 10px to account for input padding and border +.inputColumns(@columnSpan: 1) { + width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 10; +} +input, +textarea, +.uneditable-input { + // Default columns + &.span1 { .inputColumns(1); } + &.span2 { .inputColumns(2); } + &.span3 { .inputColumns(3); } + &.span4 { .inputColumns(4); } + &.span5 { .inputColumns(5); } + &.span6 { .inputColumns(6); } + &.span7 { .inputColumns(7); } + &.span8 { .inputColumns(8); } + &.span9 { .inputColumns(9); } + &.span10 { .inputColumns(10); } + &.span11 { .inputColumns(11); } + &.span12 { .inputColumns(12); } +} + +.selectColumns(@columnSpan: 1) { + width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) + 10; +} +select { + &.span1 { .selectColumns(1); } + &.span2 { .selectColumns(2); } + &.span3 { .selectColumns(3); } + &.span4 { .selectColumns(4); } + &.span5 { .selectColumns(5); } + &.span6 { .selectColumns(6); } + &.span7 { .selectColumns(7); } + &.span8 { .selectColumns(8); } + &.span9 { .selectColumns(9); } + &.span10 { .selectColumns(10); } + &.span11 { .selectColumns(11); } + &.span12 { .selectColumns(12); } +} + + + +// DISABLED STATE +// -------------- + +// Disabled and read-only inputs +input[disabled], +select[disabled], +textarea[disabled], +input[readonly], +select[readonly], +textarea[readonly] { + background-color: #f5f5f5; + border-color: #ddd; + cursor: not-allowed; +} + + + + +// FORM FIELD FEEDBACK STATES +// -------------------------- + +// Mixin for form field states +.formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) { + // Set the text color + > label, + .help-block, + .help-inline { + color: @textColor; + } + // Style inputs accordingly + input, + select, + textarea { + color: @textColor; + border-color: @borderColor; + &:focus { + border-color: darken(@borderColor, 10%); + .box-shadow(0 0 6px lighten(@borderColor, 20%)); + } + } + // Give a small background color for input-prepend/-append + .input-prepend .add-on, + .input-append .add-on { + color: @textColor; + background-color: @backgroundColor; + border-color: @textColor; + } +} +// Warning +.control-group.warning { + .formFieldState(@warningText, @warningText, @warningBackground); +} +// Error +.control-group.error { + .formFieldState(@errorText, @errorText, @errorBackground); +} +// Success +.control-group.success { + .formFieldState(@successText, @successText, @successBackground); +} + +// HTML5 invalid states +// Shares styles with the .control-group.error above +input:focus:required:invalid, +textarea:focus:required:invalid, +select:focus:required:invalid { + color: #b94a48; + border-color: #ee5f5b; + &:focus { + border-color: darken(#ee5f5b, 10%); + .box-shadow(0 0 6px lighten(#ee5f5b, 20%)); + } +} + + + +// FORM ACTIONS +// ------------ + +.form-actions { + padding: (@baseLineHeight - 1) 20px @baseLineHeight; + margin-top: @baseLineHeight; + margin-bottom: @baseLineHeight; + background-color: #f5f5f5; + border-top: 1px solid #ddd; +} + +// For text that needs to appear as an input but should not be an input +.uneditable-input { + display: block; + background-color: @white; + border-color: #eee; + .box-shadow(inset 0 1px 2px rgba(0,0,0,.025)); + cursor: not-allowed; +} + +// Placeholder text gets special styles; can't be bundled together though for some reason +.placeholder(@grayLight); + + + +// HELP TEXT +// --------- + +.help-block { + margin-top: 5px; + margin-bottom: 0; + color: @grayLight; +} + +.help-inline { + display: inline-block; + margin-bottom: 9px; + vertical-align: middle; + padding-left: 5px; +} + + + +// INPUT GROUPS +// ------------ + +// Allow us to put symbols and text within the input field for a cleaner look +.input-prepend, +.input-append { + margin-bottom: 5px; + .clearfix(); // Clear the float to prevent wrapping + input, + .uneditable-input { + .border-radius(0 3px 3px 0); + } + .uneditable-input { + border-left-color: #ccc; + } + .add-on { + float: left; + display: block; + width: auto; + min-width: 16px; + height: @baseLineHeight; + margin-right: -1px; + padding: 4px 4px 4px 5px; + font-weight: normal; + line-height: @baseLineHeight; + color: @grayLight; + text-align: center; + text-shadow: 0 1px 0 @white; + background-color: #f5f5f5; + border: 1px solid #ccc; + .border-radius(3px 0 0 3px); + } + .active { + background-color: lighten(@green, 30); + border-color: @green; + } +} +.input-prepend { + .add-on { + *margin-top: 1px; /* IE6-7 */ + } +} +.input-append { + input, + .uneditable-input { + float: left; + .border-radius(3px 0 0 3px); + } + .uneditable-input { + border-right-color: #ccc; + } + .add-on { + margin-right: 0; + margin-left: -1px; + .border-radius(0 3px 3px 0); + } +} + + + +// SEARCH FORM +// ----------- + +.search-query { + padding-left: 14px; + padding-right: 14px; + margin-bottom: 0; // remove the default margin on all inputs + .border-radius(14px); +} + + + +// HORIZONTAL & VERTICAL FORMS +// --------------------------- + +// Common properties +// ----------------- + +.form-search, +.form-inline, +.form-horizontal { + input, + textarea, + select, + .help-inline, + .uneditable-input { + display: inline-block; + margin-bottom: 0; + } +} +.form-search label, +.form-inline label { + display: inline-block; +} + +// Margin to space out fieldsets +.control-group { + margin-bottom: @baseLineHeight / 2; +} + +// Horizontal-specific styles +// -------------------------- + +.form-horizontal { + // Legend collapses margin, so we're relegated to padding + legend + .control-group { + margin-top: @baseLineHeight; + -webkit-margin-top-collapse: separate; + } + // Increase spacing between groups + .control-group { + margin-bottom: @baseLineHeight; + } + // Float the labels left + .control-group > label { + float: left; + width: 140px; + padding-top: 5px; + text-align: right; + } + // Move over all input controls and content + .controls { + margin-left: 160px; + } + // Move over buttons in .form-actions to align with .controls + .form-actions { + padding-left: 160px; + } +} -- cgit v1.2.3 From 9d0328ff00a1fa28f58b3cefa826bed9e21ab580 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 27 Jan 2012 08:21:39 -0800 Subject: adding outline callout as a fallback for IE--needs testing though, thought I already added this --- 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 9e2e1dc1b..d2e049de5 100644 --- a/less/forms.less +++ b/less/forms.less @@ -192,6 +192,7 @@ textarea:focus { @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6); .box-shadow(@shadow); outline: 0; + outline: 1px dotted #666 \9; /* IE6-8 */ } input[type=file]:focus, input[type=checkbox]:focus, -- cgit v1.2.3 From 526d38839332907062cde27727900deb06e0c50b Mon Sep 17 00:00:00 2001 From: Pete Hopkins Date: Thu, 26 Jan 2012 18:03:53 -0500 Subject: Compensates for IE7 first-child-input-inheriting-hasLayout-parents-margins bug for appended text form element --- less/forms.less | 9 +++++++++ 1 file changed, 9 insertions(+) (limited to 'less/forms.less') diff --git a/less/forms.less b/less/forms.less index d2e049de5..55a646368 100644 --- a/less/forms.less +++ b/less/forms.less @@ -440,6 +440,15 @@ select:focus:required:invalid { margin-left: -1px; .border-radius(0 3px 3px 0); } + input:first-child { + // In IE7, having a hasLayout container (from clearfix's zoom:1) can make the first input + // inherit the sum of its ancestors' margins. + *margin-left: -160px; + + &+.add-on { + *margin-left: -21px; + } + } } -- cgit v1.2.3 From 43f1a42f7f254ad5d776564122bdae6547a4fbcd Mon Sep 17 00:00:00 2001 From: Pete Hopkins Date: Fri, 27 Jan 2012 13:57:51 -0500 Subject: Adds necessary ie7-inline-block macros --- 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 55a646368..52f5063f0 100644 --- a/less/forms.less +++ b/less/forms.less @@ -377,6 +377,7 @@ select:focus:required:invalid { .help-inline { display: inline-block; + .ie7-inline-block; margin-bottom: 9px; vertical-align: middle; padding-left: 5px; -- cgit v1.2.3 From 997fc33af9a4cbdc078e85ee491f777d0dd2d51a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 27 Jan 2012 16:40:14 -0800 Subject: clean up use of mixins to highlight them appropriately in your fav editor --- 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 52f5063f0..c84d9a11d 100644 --- a/less/forms.less +++ b/less/forms.less @@ -377,7 +377,7 @@ select:focus:required:invalid { .help-inline { display: inline-block; - .ie7-inline-block; + .ie7-inline-block(); margin-bottom: 9px; vertical-align: middle; padding-left: 5px; -- cgit v1.2.3 From 7e72eb5063470a3728d612acd2cc0368aabc8664 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 27 Jan 2012 18:33:25 -0800 Subject: new tab focus style and mixin --- less/forms.less | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) (limited to 'less/forms.less') diff --git a/less/forms.less b/less/forms.less index c84d9a11d..86e975725 100644 --- a/less/forms.less +++ b/less/forms.less @@ -191,14 +191,13 @@ textarea:focus { border-color: rgba(82,168,236,.8); @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6); .box-shadow(@shadow); - outline: 0; - outline: 1px dotted #666 \9; /* IE6-8 */ + outline: thin dotted \9; /* IE6-8 */ } input[type=file]:focus, input[type=checkbox]:focus, select:focus { .box-shadow(none); // override for file inputs - outline: 1px dotted #666; // Selet elements don't get box-shadow styles, so instead we do outline + .tab-focus(); } -- cgit v1.2.3 From 9800196bf7067b560e062dabfcb51f9b9c7e8dd5 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 27 Jan 2012 20:05:03 -0800 Subject: use quotes on attr selectors more consistently --- less/forms.less | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) (limited to 'less/forms.less') diff --git a/less/forms.less b/less/forms.less index 86e975725..edd416585 100644 --- a/less/forms.less +++ b/less/forms.less @@ -75,9 +75,9 @@ label select { } // Mini reset for unique input types -input[type=image], -input[type=checkbox], -input[type=radio] { +input[type="image"], +input[type="checkbox"], +input[type="radio"] { width: auto; height: auto; padding: 0; @@ -90,7 +90,7 @@ input[type=radio] { } // Reset the file input to browser defaults -input[type=file] { +input[type="file"] { padding: initial; line-height: initial; border: initial; @@ -100,16 +100,16 @@ input[type=file] { } // Help out input buttons -input[type=button], -input[type=reset], -input[type=submit] { +input[type="button"], +input[type="reset"], +input[type="submit"] { width: auto; height: auto; } // Set the height of select and file controls to match text inputs select, -input[type=file] { +input[type="file"] { height: 28px; /* In IE7, the height of the select element cannot be changed by height, only font-size */ *margin-top: 4px; /* For IE7, add top margin to align select with labels */ line-height: 28px; @@ -128,7 +128,7 @@ select[size] { } // Remove shadow from image inputs -input[type=image] { +input[type="image"] { .box-shadow(none); } @@ -138,7 +138,7 @@ textarea { } // Hidden inputs -input[type=hidden] { +input[type="hidden"] { display: none; } @@ -152,8 +152,8 @@ input[type=hidden] { .checkbox { padding-left: 18px; } -.radio input[type=radio], -.checkbox input[type=checkbox] { +.radio input[type="radio"], +.checkbox input[type="checkbox"] { float: left; margin-left: -18px; } @@ -193,8 +193,8 @@ textarea:focus { .box-shadow(@shadow); outline: thin dotted \9; /* IE6-8 */ } -input[type=file]:focus, -input[type=checkbox]:focus, +input[type="file"]:focus, +input[type="checkbox"]:focus, select:focus { .box-shadow(none); // override for file inputs .tab-focus(); -- cgit v1.2.3 From 78120edf728ede35f2338b42ae30fff1bd7f086e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 27 Jan 2012 21:20:58 -0800 Subject: add clearfix to control-group for longer labels and any other unforeseen circumstances --- 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 edd416585..b82fcca72 100644 --- a/less/forms.less +++ b/less/forms.less @@ -505,6 +505,7 @@ select:focus:required:invalid { // Increase spacing between groups .control-group { margin-bottom: @baseLineHeight; + .clearfix(); } // Float the labels left .control-group > label { -- cgit v1.2.3 From 7a756168b52f5bd0af2aedd629379a80e8682c14 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 27 Jan 2012 22:56:48 -0800 Subject: fix regression in textarea shadows --- 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 b82fcca72..c7342626f 100644 --- a/less/forms.less +++ b/less/forms.less @@ -191,6 +191,7 @@ textarea:focus { border-color: rgba(82,168,236,.8); @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6); .box-shadow(@shadow); + outline: 0; outline: thin dotted \9; /* IE6-8 */ } input[type="file"]:focus, -- cgit v1.2.3 From ce69b70719581f87e2542710fa92fa4163acefc7 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 27 Jan 2012 23:53:56 -0800 Subject: give append/prepend inputs higher z-index on focus --- less/forms.less | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'less/forms.less') diff --git a/less/forms.less b/less/forms.less index c7342626f..b8cb48b48 100644 --- a/less/forms.less +++ b/less/forms.less @@ -396,6 +396,10 @@ select:focus:required:invalid { input, .uneditable-input { .border-radius(0 3px 3px 0); + &:focus { + position: relative; + z-index: 2; + } } .uneditable-input { border-left-color: #ccc; -- cgit v1.2.3 From b77161f8647f791319c684a191c2308b6dd05100 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 28 Jan 2012 12:49:26 -0800 Subject: reset border-radius only for ie9? --- 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 b8cb48b48..9565c52d7 100644 --- a/less/forms.less +++ b/less/forms.less @@ -86,7 +86,7 @@ input[type="radio"] { line-height: normal; border: none; cursor: pointer; - .border-radius(0); + border-radius: 0 e("\0/"); } // Reset the file input to browser defaults -- cgit v1.2.3 From 70c6a6cd855a617b086682ef919e02cf67d4e86e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 28 Jan 2012 12:58:26 -0800 Subject: fix border and border radius on radios/checkboxes for iOS, fix forms docs alignment on small devices --- 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 9565c52d7..f327b4faa 100644 --- a/less/forms.less +++ b/less/forms.less @@ -85,6 +85,7 @@ input[type="radio"] { *margin-top: 0; /* IE7 */ line-height: normal; border: none; + border: initial; cursor: pointer; border-radius: 0 e("\0/"); } -- cgit v1.2.3 From 296d06a285d91200b4063f3bdde65c094495ee24 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 28 Jan 2012 13:07:01 -0800 Subject: add checkbox/radio border for ios in responsive --- less/forms.less | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'less/forms.less') diff --git a/less/forms.less b/less/forms.less index f327b4faa..3792bf420 100644 --- a/less/forms.less +++ b/less/forms.less @@ -84,8 +84,7 @@ input[type="radio"] { margin: 3px 0; *margin-top: 0; /* IE7 */ line-height: normal; - border: none; - border: initial; + border: 0; cursor: pointer; border-radius: 0 e("\0/"); } -- cgit v1.2.3 From 7843a665fdc18c1199766d6c65f192209ec35741 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 28 Jan 2012 14:50:56 -0800 Subject: vertical align inline checkboxes/radios to improve rendering in topbar --- less/forms.less | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'less/forms.less') diff --git a/less/forms.less b/less/forms.less index 3792bf420..b0daeb034 100644 --- a/less/forms.less +++ b/less/forms.less @@ -86,7 +86,7 @@ input[type="radio"] { line-height: normal; border: 0; cursor: pointer; - border-radius: 0 e("\0/"); + border-radius: 0 e("\0/"); // Nuke border-radius for IE9 only } // Reset the file input to browser defaults @@ -169,6 +169,7 @@ input[type="hidden"] { .checkbox.inline { display: inline-block; margin-bottom: 0; + vertical-align: middle; } .radio.inline + .radio.inline, .checkbox.inline + .checkbox.inline { -- cgit v1.2.3 From 475b985a0efaf534b56089f12c570d7861ce72f5 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 28 Jan 2012 16:37:43 -0800 Subject: remove padding from first-child of inline radios/checkboxes --- 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 b0daeb034..69ddbcac9 100644 --- a/less/forms.less +++ b/less/forms.less @@ -175,6 +175,11 @@ input[type="hidden"] { .checkbox.inline + .checkbox.inline { margin-left: 10px; // space out consecutive inline controls } +// But don't forget to remove their padding on first-child +.controls > .radio.inline:first-child, +.controls > .checkbox.inline:first-child { + padding-top: 5px; // has to be padding because margin collaspes +} -- cgit v1.2.3 From 7bf27674523c35f8803311a964dc72a7093351c0 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 29 Jan 2012 00:07:01 -0800 Subject: remove form docs from the styles and markup, it's no longer needed --- less/forms.less | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) (limited to 'less/forms.less') diff --git a/less/forms.less b/less/forms.less index 69ddbcac9..6b0f5ec52 100644 --- a/less/forms.less +++ b/less/forms.less @@ -495,9 +495,20 @@ select:focus:required:invalid { } } .form-search label, -.form-inline label { +.form-inline label, +.form-search .input-append, +.form-inline .input-append, +.form-search .input-prepend, +.form-inline .input-prepend { display: inline-block; } +// Make the prepend and append add-on vertical-align: middle; +.form-search .input-append .add-on, +.form-inline .input-prepend .add-on, +.form-search .input-append .add-on, +.form-inline .input-prepend .add-on { + vertical-align: middle; +} // Margin to space out fieldsets .control-group { -- cgit v1.2.3 From 278858e70698f0dcf8651cb59b13e48fe756d8bd Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 29 Jan 2012 13:25:13 -0800 Subject: fix form styles on prepend/append for consistency, update code docs with examples of the code snippets --- 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 6b0f5ec52..9d94a64b7 100644 --- a/less/forms.less +++ b/less/forms.less @@ -417,7 +417,7 @@ select:focus:required:invalid { min-width: 16px; height: @baseLineHeight; margin-right: -1px; - padding: 4px 4px 4px 5px; + padding: 4px 5px; font-weight: normal; line-height: @baseLineHeight; color: @grayLight; -- cgit v1.2.3 From ae7f94eeff733584cbdc80a2d13a85f136a7744e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 30 Jan 2012 00:39:44 -0800 Subject: overhaul grid mixins and variables, standardize fluid grid system and enable it across responsive layouts --- less/forms.less | 46 +++++++--------------------------------------- 1 file changed, 7 insertions(+), 39 deletions(-) (limited to 'less/forms.less') diff --git a/less/forms.less b/less/forms.less index 9d94a64b7..131f8af55 100644 --- a/less/forms.less +++ b/less/forms.less @@ -229,45 +229,13 @@ textarea[class*="span"], margin-left: 0; } -// This is a duplication of the main grid .columns() mixin, but subtracts 10px to account for input padding and border -.inputColumns(@columnSpan: 1) { - width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 10; -} -input, -textarea, -.uneditable-input { - // Default columns - &.span1 { .inputColumns(1); } - &.span2 { .inputColumns(2); } - &.span3 { .inputColumns(3); } - &.span4 { .inputColumns(4); } - &.span5 { .inputColumns(5); } - &.span6 { .inputColumns(6); } - &.span7 { .inputColumns(7); } - &.span8 { .inputColumns(8); } - &.span9 { .inputColumns(9); } - &.span10 { .inputColumns(10); } - &.span11 { .inputColumns(11); } - &.span12 { .inputColumns(12); } -} - -.selectColumns(@columnSpan: 1) { - width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) + 10; -} -select { - &.span1 { .selectColumns(1); } - &.span2 { .selectColumns(2); } - &.span3 { .selectColumns(3); } - &.span4 { .selectColumns(4); } - &.span5 { .selectColumns(5); } - &.span6 { .selectColumns(6); } - &.span7 { .selectColumns(7); } - &.span8 { .selectColumns(8); } - &.span9 { .selectColumns(9); } - &.span10 { .selectColumns(10); } - &.span11 { .selectColumns(11); } - &.span12 { .selectColumns(12); } -} + + +// GRID SIZING FOR INPUTS +// ---------------------- + +#inputGridSystem > .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth); + -- cgit v1.2.3 From 9ba70796e2a25154689fa428d07018e877bbd6e4 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 30 Jan 2012 07:40:24 -0800 Subject: remove top 5px padding from first inline radio/checkbox --- 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 131f8af55..d70d532e8 100644 --- a/less/forms.less +++ b/less/forms.less @@ -178,7 +178,7 @@ input[type="hidden"] { // But don't forget to remove their padding on first-child .controls > .radio.inline:first-child, .controls > .checkbox.inline:first-child { - padding-top: 5px; // has to be padding because margin collaspes + padding-top: 0; } -- cgit v1.2.3