From 1b21d5e321ec77c6381becae2e2d7d1c4ab14d9a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 28 Sep 2011 19:15:31 -0700 Subject: updated forms.less to have better comments while pulling out all the old classes for input elements --- lib/forms.less | 85 ++++++++++++++++++++++++++-------------------------------- 1 file changed, 38 insertions(+), 47 deletions(-) (limited to 'lib/forms.less') diff --git a/lib/forms.less b/lib/forms.less index 0da4037df..91aca77fe 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -3,8 +3,8 @@ * ------------------------------------------------------------- */ -// FORM STYLES -// ----------- +// GENERAL STYLES +// -------------- form { margin-bottom: @baseline; @@ -189,47 +189,17 @@ form div.clearfix.error { } } -// Form element sizes -// TODO v2: remove duplication here and just stick to .input-[size] in light of adding .spanN sizes -.input-mini, -input.mini, -textarea.mini, -select.mini { - width: 60px; -} -.input-small, -input.small, -textarea.small, -select.small { - width: 90px; -} -.input-medium, -input.medium, -textarea.medium, -select.medium { - width: 150px; -} -.input-large, -input.large, -textarea.large, -select.large { - width: 210px; -} -.input-xlarge, -input.xlarge, -textarea.xlarge, -select.xlarge { - width: 270px; -} -.input-xxlarge, -input.xxlarge, -textarea.xxlarge, -select.xxlarge { - width: 530px; -} -textarea.xxlarge { - overflow-y: auto; -} + +// 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 // This is a duplication of the main grid .columns() mixin, but subtracts 10px to account for input padding and border @@ -261,6 +231,10 @@ select { &.span16 { .formColumns(16); } } + +// INPUT STATES +// ------------ + // Disabled and read-only inputs input[disabled], select[disabled], @@ -292,7 +266,10 @@ textarea[readonly] { } } -// Help Text + +// HELP TEXT +// --------- + .help-inline, .help-block { font-size: @basefont - 2; @@ -311,7 +288,10 @@ textarea[readonly] { max-width: 600px; } -// Inline Fields (input fields that appear as inline objects + +// INLINE FIELDS +// --------- + .inline-inputs { color: @gray; span, input { @@ -328,6 +308,10 @@ textarea[readonly] { } } + +// INPUTS GROUPS +// ------------- + // Allow us to put symbols and text within the input field for a cleaner look .input-prepend, .input-append { @@ -375,6 +359,10 @@ textarea[readonly] { } } + +// LISTS OF CONTROLS +// ----------------- + // Stacked options for forms (radio buttons or checkboxes) .inputs-list { margin: 0 0 5px; @@ -417,7 +405,10 @@ textarea[readonly] { } } -// Stacked forms + +// STACKED FORMS +// ------------- + .form-stacked { padding-left: 20px; fieldset { @@ -462,4 +453,4 @@ textarea[readonly] { margin-left: -20px; padding-left: 20px; } -} +} \ No newline at end of file -- cgit v1.2.3 From f919f6f94f3e8405d7653a5f16f8b3d587c47f4c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 29 Sep 2011 01:40:27 -0700 Subject: huge update to forms, docs for the new forms, added a new link for js example to tabs/pills, add some new mixins --- lib/forms.less | 325 ++++++++++++++++++++++++--------------------------------- 1 file changed, 136 insertions(+), 189 deletions(-) (limited to 'lib/forms.less') diff --git a/lib/forms.less b/lib/forms.less index 91aca77fe..fd46fc71e 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -6,29 +6,20 @@ // GENERAL STYLES // -------------- +// Make all forms have space below them form { margin-bottom: @baseline; } // Groups of fields with labels on top (legends) -fieldset { - margin-bottom: @baseline; - padding-top: @baseline; - legend { - display: block; - padding-left: 150px; - font-size: @basefont * 1.5; - line-height: 1; - color: @grayDark; - *padding: 0 0 5px 145px; /* IE6-7 */ - *line-height: 1.5; /* IE6-7 */ - } -} - -// Parent element that clears floats and wraps labels and fields together -form .clearfix { - margin-bottom: @baseline; - .clearfix() +legend { + display: block; + width: 100%; + margin-bottom: @baseline * 1.5; + font-size: @basefont * 1.5; + line-height: @baseline * 2; + color: @grayDark; + border-bottom: 1px solid #eee; } // Set font for forms @@ -36,25 +27,16 @@ label, input, select, textarea { - #font > .sans-serif(normal,13px,normal); + #font > .sans-serif(normal,@basefont,@baseline); } -// Float labels left +// Identify controls by their labels label { - padding-top: 6px; - font-size: @basefont; - line-height: @baseline; - float: left; - width: 130px; - text-align: right; + display: block; + margin-bottom: 5px; color: @grayDark; } -// Shift over the inside div to align all label's relevant content -form .input { - margin-left: 150px; -} - // Checkboxs and radio buttons input[type=checkbox], input[type=radio] { @@ -77,7 +59,7 @@ select, .border-radius(3px); } -/* mini reset for non-html5 file types */ +/* Mini reset for unique input types */ input[type=checkbox], input[type=radio] { width: auto; @@ -89,6 +71,7 @@ input[type=radio] { border: none; } +// Reset the file input to browser defaults input[type=file] { background-color: @white; padding: initial; @@ -97,6 +80,7 @@ input[type=file] { .box-shadow(none); } +// Help out input buttons input[type=button], input[type=reset], input[type=submit] { @@ -120,24 +104,11 @@ textarea { height: auto; } -// For text that needs to appear as an input but should not be an input -.uneditable-input { - background-color: @white; - display: block; - 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 -:-moz-placeholder { - color: @grayLight; -} -::-webkit-input-placeholder { - color: @grayLight; -} -// Focus states +// FOCUS STATE +// ----------- + input, textarea { @transition: border linear .2s, box-shadow linear .2s; @@ -158,36 +129,6 @@ select:focus { outline: 1px dotted #666; // Selet elements don't get box-shadow styles, so instead we do outline } -// Error styles -form div.clearfix.error { - background: lighten(@red, 57%); - padding: 10px 0; - margin: -10px 0 10px; - .border-radius(4px); - @error-text: desaturate(lighten(@red, 25%), 25%); - > label, - span.help-inline, - span.help-block { - color: @red; - } - input, - textarea { - border-color: @error-text; - .box-shadow(0 0 3px rgba(171,41,32,.25)); - &:focus { - border-color: darken(@error-text, 10%); - .box-shadow(0 0 6px rgba(171,41,32,.5)); - } - } - .input-prepend, - .input-append { - span.add-on { - background: lighten(@red, 50%); - border-color: @error-text; - color: darken(@error-text, 10%); - } - } -} // INPUT SIZES @@ -232,8 +173,9 @@ select { } -// INPUT STATES -// ------------ + +// DISABLED STATE +// -------------- // Disabled and read-only inputs input[disabled], @@ -247,36 +189,89 @@ textarea[readonly] { cursor: not-allowed; } -// Actions (the buttons) -.actions { - background: #f5f5f5; + + +// ERROR STATE +// ----------- + +// Set color of error text +@error-text: desaturate(lighten(@red, 25%), 25%); + +// Style the background of control-groups with errors +.has-error { + background: lighten(@red, 55%); + padding: (@baseline / 2) 0; + margin: -10px 0 10px; + .border-radius(4px); + > label, + span.help-inline, + span.help-block { + color: @red; + } + input, + textarea, + select { + border-color: @error-text; + .box-shadow(0 0 3px rgba(171,41,32,.25)); + &:focus { + border-color: darken(@error-text, 10%); + .box-shadow(0 0 6px rgba(171,41,32,.5)); + } + } + .input-prepend, + .input-append { + span.add-on { + background: lighten(@red, 50%); + border-color: @error-text; + color: darken(@error-text, 10%); + } + } +} + + + +// FORM ACTIONS +// ------------ + +.form-actions { + padding: (@baseline - 1) 20px @baseline; margin-top: @baseline; margin-bottom: @baseline; - padding: (@baseline - 1) 20px @baseline 150px; + background-color: #f5f5f5; border-top: 1px solid #ddd; - .border-radius(0 0 3px 3px); - .secondary-action { - float: right; - a { - line-height: 30px; - &:hover { - text-decoration: underline; - } - } - } } +// For text that needs to appear as an input but should not be an input +.uneditable-input { + background-color: @white; + display: block; + 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 +:-moz-placeholder { + color: @grayLight; +} +::-webkit-input-placeholder { + color: @grayLight; +} + + + // HELP TEXT // --------- -.help-inline, -.help-block { - font-size: @basefont - 2; - line-height: @baseline; +.help-text { + margin-top: 5px; + margin-bottom: 0; color: @grayLight; } + .help-inline { + display: inline; padding-left: 5px; *position: relative; /* IE6-7 */ *top: -5px; /* IE6-7 */ @@ -290,7 +285,7 @@ textarea[readonly] { // INLINE FIELDS -// --------- +// ------------- .inline-inputs { color: @gray; @@ -309,8 +304,8 @@ textarea[readonly] { } -// INPUTS GROUPS -// ------------- +// INPUT GROUPS +// ------------ // Allow us to put symbols and text within the input field for a cleaner look .input-prepend, @@ -360,97 +355,49 @@ textarea[readonly] { } -// LISTS OF CONTROLS + + +// HORIZONTAL & VERTICAL FORMS +// --------------------------- + + +// Common properties // ----------------- -// Stacked options for forms (radio buttons or checkboxes) -.inputs-list { - margin: 0 0 5px; - width: 100%; - li { - display: block; - padding: 0; - width: 100%; - } - label { - display: block; - float: none; - width: auto; - padding: 0; - line-height: @baseline; - text-align: left; - white-space: normal; - strong { - color: @gray; - } - small { - font-size: @basefont - 2; - font-weight: normal; - } - } - .inputs-list { - margin-left: 25px; - margin-bottom: 10px; - padding-top: 0; - } - &:first-child { - padding-top: 6px; - } - li + li { - padding-top: 2px; - } - input[type=radio], - input[type=checkbox] { - margin-bottom: 0; - } +// Margin to space out fieldsets +.control-group { + margin-bottom: @baseline; } +// Bold the labels so they stand out +.control-group > label { + font-weight: bold; +} -// STACKED FORMS -// ------------- +// Lists of controls (checkboxes and radios) +.control-list { +} -.form-stacked { - padding-left: 20px; - fieldset { - padding-top: @baseline / 2; - } - legend { - padding-left: 0; - } - label { - display: block; - float: none; - width: auto; - font-weight: bold; - text-align: left; - line-height: 20px; - padding-top: 0; - } - .clearfix { - margin-bottom: @baseline / 2; - div.input { - margin-left: 0; - } - } - .inputs-list { - margin-bottom: 0; - li { - padding-top: 0; - label { - font-weight: normal; - padding-top: 0; - } - } - } - div.clearfix.error { - padding-top: 10px; - padding-bottom: 10px; - padding-left: 10px; - margin-top: 0; - margin-left: -10px; - } - .actions { - margin-left: -20px; - padding-left: 20px; - } -} \ No newline at end of file + +// 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; +} -- cgit v1.2.3 From f54568fa31396556a0df7bf8e2b180885e2b1c3f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 29 Sep 2011 01:47:55 -0700 Subject: round the corners on the search form inputs like a boss --- lib/forms.less | 9 +++++++++ 1 file changed, 9 insertions(+) (limited to 'lib/forms.less') diff --git a/lib/forms.less b/lib/forms.less index fd46fc71e..56325daa9 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -357,6 +357,15 @@ textarea[readonly] { +// SEARCH FORM +// ----------- + +.form-search .search-query { + .border-radius(14px); +} + + + // HORIZONTAL & VERTICAL FORMS // --------------------------- -- cgit v1.2.3 From 96dd7a2903aa5213ddb364b385660e26396dc670 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 4 Oct 2011 00:20:38 -0700 Subject: update variables to inlude @baseFontSize, @baseFontFamily, @baseLineHeight for easier customization; added placeholder for @primaryButtonColor, but didn't implement --- lib/forms.less | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) (limited to 'lib/forms.less') diff --git a/lib/forms.less b/lib/forms.less index 56325daa9..b657e53d6 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -8,16 +8,16 @@ // Make all forms have space below them form { - margin-bottom: @baseline; + margin-bottom: @baseLineHeight; } // Groups of fields with labels on top (legends) legend { display: block; width: 100%; - margin-bottom: @baseline * 1.5; - font-size: @basefont * 1.5; - line-height: @baseline * 2; + margin-bottom: @baseLineHeight * 1.5; + font-size: @baseFontSize * 1.5; + line-height: @baseLineHeight * 2; color: @grayDark; border-bottom: 1px solid #eee; } @@ -27,7 +27,7 @@ label, input, select, textarea { - #font > .sans-serif(normal,@basefont,@baseline); + #font > .sans-serif(normal,@baseFontSize,@baseLineHeight); } // Identify controls by their labels @@ -50,10 +50,10 @@ select, .uneditable-input { display: inline-block; width: 210px; - height: @baseline; + height: @baseLineHeight; padding: 4px; - font-size: @basefont; - line-height: @baseline; + font-size: @baseFontSize; + line-height: @baseLineHeight; color: @gray; border: 1px solid #ccc; .border-radius(3px); @@ -90,8 +90,8 @@ input[type=submit] { select, input[type=file] { - height: @baseline * 1.5; // In IE7, the height of the select element cannot be changed by height, only font-size - line-height: @baseline * 1.5; + height: @baseLineHeight * 1.5; // In IE7, the height of the select element cannot be changed by height, only font-size + line-height: @baseLineHeight * 1.5; *margin-top: 4px; /* For IE7, add top margin to align select with labels */ } @@ -200,7 +200,7 @@ textarea[readonly] { // Style the background of control-groups with errors .has-error { background: lighten(@red, 55%); - padding: (@baseline / 2) 0; + padding: (@baseLineHeight / 2) 0; margin: -10px 0 10px; .border-radius(4px); > label, @@ -234,9 +234,9 @@ textarea[readonly] { // ------------ .form-actions { - padding: (@baseline - 1) 20px @baseline; - margin-top: @baseline; - margin-bottom: @baseline; + padding: (@baseLineHeight - 1) 20px @baseLineHeight; + margin-top: @baseLineHeight; + margin-bottom: @baseLineHeight; background-color: #f5f5f5; border-top: 1px solid #ddd; } @@ -375,7 +375,7 @@ textarea[readonly] { // Margin to space out fieldsets .control-group { - margin-bottom: @baseline; + margin-bottom: @baseLineHeight; } // Bold the labels so they stand out -- cgit v1.2.3 From 913338f930736a1b186178469c6eafb55c1dbea8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 4 Oct 2011 01:15:31 -0700 Subject: fixing multi select on chromium ubuntu by setting background color explicitly --- lib/forms.less | 1 + 1 file changed, 1 insertion(+) (limited to 'lib/forms.less') diff --git a/lib/forms.less b/lib/forms.less index b657e53d6..4bdddc3a2 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -97,6 +97,7 @@ input[type=file] { // Make multiple select elements height not fixed select[multiple] { + background-color: @white; // Fixes Chromium bug? height: inherit; } -- cgit v1.2.3 From dd1efdf0d5ec2469978a65c845cc5dfd16b74899 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 9 Oct 2011 21:25:28 -0700 Subject: update input prepend and append to use baseline variable --- lib/forms.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'lib/forms.less') diff --git a/lib/forms.less b/lib/forms.less index 4bdddc3a2..4b2bb8016 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -323,11 +323,11 @@ textarea[readonly] { display: block; width: auto; min-width: 16px; - height: 18px; + height: @baseLineHeight; padding: 4px 4px 4px 5px; margin-right: -1px; font-weight: normal; - line-height: 18px; + line-height: @baseLineHeight; color: @grayLight; text-align: center; text-shadow: 0 1px 0 @white; -- cgit v1.2.3 From 2a82b38cff142ec86a6e1dc4f9366205260d262d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 16 Oct 2011 18:01:05 -0700 Subject: tweak the h2s again for better spacing, adjust docs, remove white bg if possible on file input, few other tweaks --- lib/forms.less | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) (limited to 'lib/forms.less') diff --git a/lib/forms.less b/lib/forms.less index 4b2bb8016..6edf29e53 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -37,12 +37,6 @@ label { color: @grayDark; } -// Checkboxs and radio buttons -input[type=checkbox], -input[type=radio] { - cursor: pointer; -} - // Inputs, Textareas, Selects input, textarea, @@ -69,11 +63,13 @@ input[type=radio] { *margin-top: 0; /* IE6-7 */ line-height: normal; border: none; + cursor: pointer; } // Reset the file input to browser defaults input[type=file] { background-color: @white; + background-color: initial; padding: initial; border: initial; line-height: initial; -- cgit v1.2.3 From 1fb98bed91977b710ae321443d0819939a1a8cc7 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 12 Nov 2011 00:46:02 -0800 Subject: updated docs pages (still wip), adding misc css classes, added form styles from 1.4, added github buttons to homepage --- lib/forms.less | 72 +++++++++++++++++++++++++++++----------------------------- 1 file changed, 36 insertions(+), 36 deletions(-) (limited to 'lib/forms.less') diff --git a/lib/forms.less b/lib/forms.less index 6edf29e53..b7eb15005 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -3,6 +3,7 @@ * ------------------------------------------------------------- */ + // GENERAL STYLES // -------------- @@ -84,6 +85,7 @@ input[type=submit] { height: auto; } +// Set the height of select and file controls to match text inputs select, input[type=file] { height: @baseLineHeight * 1.5; // In IE7, the height of the select element cannot be changed by height, only font-size @@ -188,42 +190,47 @@ textarea[readonly] { -// ERROR STATE -// ----------- - -// Set color of error text -@error-text: desaturate(lighten(@red, 25%), 25%); +// FORM FIELD FEEDBACK STATES +// -------------------------- -// Style the background of control-groups with errors -.has-error { - background: lighten(@red, 55%); - padding: (@baseLineHeight / 2) 0; - margin: -10px 0 10px; - .border-radius(4px); +// Mixin for form field states +.formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) { + // Set the text color > label, - span.help-inline, - span.help-block { - color: @red; + .help-block, + .help-inline { + color: @textColor; } + // Style inputs accordingly input, - textarea, - select { - border-color: @error-text; - .box-shadow(0 0 3px rgba(171,41,32,.25)); + textarea { + color: @textColor; + border-color: @borderColor; &:focus { - border-color: darken(@error-text, 10%); - .box-shadow(0 0 6px rgba(171,41,32,.5)); + border-color: darken(@borderColor, 10%); + .box-shadow(0 0 6px lighten(@borderColor, 20%); } } - .input-prepend, - .input-append { - span.add-on { - background: lighten(@red, 50%); - border-color: @error-text; - color: darken(@error-text, 10%); - } + // 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; } } +// Error +form .clearfix.error { + .formFieldState(#b94a48, #ee5f5b, lighten(#ee5f5b, 30%)); +} +// Warning +form .clearfix.warning { + .formFieldState(#c09853, #ccae64, lighten(#CCAE64, 5%)); +} +// Success +form .clearfix.success { + .formFieldState(#468847, #57a957, lighten(#57a957, 30%)); +} @@ -238,7 +245,6 @@ textarea[readonly] { border-top: 1px solid #ddd; } - // For text that needs to appear as an input but should not be an input .uneditable-input { background-color: @white; @@ -281,6 +287,7 @@ textarea[readonly] { } + // INLINE FIELDS // ------------- @@ -301,6 +308,7 @@ textarea[readonly] { } + // INPUT GROUPS // ------------ @@ -353,7 +361,6 @@ textarea[readonly] { - // SEARCH FORM // ----------- @@ -366,7 +373,6 @@ textarea[readonly] { // HORIZONTAL & VERTICAL FORMS // --------------------------- - // Common properties // ----------------- @@ -374,17 +380,11 @@ textarea[readonly] { .control-group { margin-bottom: @baseLineHeight; } - // Bold the labels so they stand out .control-group > label { font-weight: bold; } -// Lists of controls (checkboxes and radios) -.control-list { -} - - // Horizontal-specific styles // -------------------------- -- cgit v1.2.3 From a8e88d14a422c3dfdb79eaf6d6a3a2f1144df150 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 17 Nov 2011 00:06:16 -0800 Subject: make form classes match table classes (readable left to right), update docs associated with it --- lib/forms.less | 40 +++++++++++++++++++++------------------- 1 file changed, 21 insertions(+), 19 deletions(-) (limited to 'lib/forms.less') diff --git a/lib/forms.less b/lib/forms.less index b7eb15005..adc050d7a 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; + } } -- cgit v1.2.3 From ba9fcd8b57ad7974a52aecabac7c90dccda4afcb Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 17 Nov 2011 00:49:51 -0800 Subject: make uneditable inputs work with span* classes --- lib/forms.less | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'lib/forms.less') diff --git a/lib/forms.less b/lib/forms.less index adc050d7a..f590101cd 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -151,7 +151,8 @@ select:focus { } input, textarea, -select { +select, +.uneditable-input { // Default columns &.span1 { .formColumns(1); } &.span2 { .formColumns(2); } -- cgit v1.2.3 From 4e6275d0fe0880d32633a2c139dad8d3e2745bb6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 17 Nov 2011 01:28:42 -0800 Subject: update property order and do some misc cleanup --- lib/forms.less | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) (limited to 'lib/forms.less') diff --git a/lib/forms.less b/lib/forms.less index f590101cd..845eec185 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -69,11 +69,11 @@ input[type=radio] { // Reset the file input to browser defaults input[type=file] { - background-color: @white; - background-color: initial; padding: initial; - border: initial; line-height: initial; + border: initial; + background-color: @white; + background-color: initial; .box-shadow(none); } @@ -89,14 +89,14 @@ input[type=submit] { select, input[type=file] { height: @baseLineHeight * 1.5; // In IE7, the height of the select element cannot be changed by height, only font-size - line-height: @baseLineHeight * 1.5; *margin-top: 4px; /* For IE7, add top margin to align select with labels */ + line-height: @baseLineHeight * 1.5; } // Make multiple select elements height not fixed select[multiple] { - background-color: @white; // Fixes Chromium bug? height: inherit; + background-color: @white; // Fixes Chromium bug? } textarea { @@ -110,16 +110,16 @@ textarea { input, textarea { + .box-shadow(inset 0 1px 3px rgba(0,0,0,.1)); @transition: border linear .2s, box-shadow linear .2s; .transition(@transition); - .box-shadow(inset 0 1px 3px rgba(0,0,0,.1)); } input:focus, textarea:focus { - outline: 0; border-color: rgba(82,168,236,.8); @shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6); .box-shadow(@shadow); + outline: 0; } input[type=file]:focus, input[type=checkbox]:focus, @@ -248,8 +248,8 @@ form .clearfix.success { // For text that needs to appear as an input but should not be an input .uneditable-input { - background-color: @white; display: block; + background-color: @white; border-color: #eee; .box-shadow(inset 0 1px 2px rgba(0,0,0,.025)); cursor: not-allowed; @@ -275,10 +275,10 @@ form .clearfix.success { } .help-inline { - display: inline; - padding-left: 5px; *position: relative; /* IE6-7 */ *top: -5px; /* IE6-7 */ + display: inline; + padding-left: 5px; } // Big blocks of help text @@ -321,25 +321,25 @@ form .clearfix.success { } .add-on { position: relative; - background: #f5f5f5; - border: 1px solid #ccc; z-index: 2; float: left; display: block; width: auto; min-width: 16px; height: @baseLineHeight; - padding: 4px 4px 4px 5px; 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: lighten(@green, 30); + background-color: lighten(@green, 30); border-color: @green; } } @@ -354,9 +354,9 @@ form .clearfix.success { .border-radius(3px 0 0 3px); } .add-on { - .border-radius(0 3px 3px 0); margin-right: 0; margin-left: -1px; + .border-radius(0 3px 3px 0); } } -- cgit v1.2.3 From 3157de8d1d4b69c0f5152b4a784bd185f76c9ac4 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Fri, 25 Nov 2011 21:34:55 -0800 Subject: clean up comments for better built files --- lib/forms.less | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) (limited to 'lib/forms.less') diff --git a/lib/forms.less b/lib/forms.less index 845eec185..39c293799 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -1,7 +1,6 @@ -/* Forms.less - * Base styles for various input types, form layouts, and states - * ------------------------------------------------------------- */ - +// Forms.less +// Base styles for various input types, form layouts, and states +// ------------------------------------------------------------- // GENERAL STYLES -- cgit v1.2.3 From d48027d49567c2d38211c357d6fb8d6a5a9e8a7b Mon Sep 17 00:00:00 2001 From: Jeff Adams Date: Tue, 29 Nov 2011 11:12:32 -0600 Subject: add input width calculation fix from #408 to the 2.0 branch --- lib/forms.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'lib/forms.less') diff --git a/lib/forms.less b/lib/forms.less index 39c293799..5de55e727 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -145,7 +145,7 @@ select:focus { .formColumns(@columnSpan: 1) { display: inline-block; float: none; - width: ((@gridColumnWidth - 10) * @columnSpan) + ((@gridColumnWidth - 10) * (@columnSpan - 1)); + width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 10; margin-left: 0; } input, -- cgit v1.2.3 From 1da19bf65f9affec06ba6e1f6e5f545a8e2ea457 Mon Sep 17 00:00:00 2001 From: Jeff Adams Date: Tue, 29 Nov 2011 14:06:31 -0600 Subject: scope form feedback states to .control-group instead of unused .clearfix --- lib/forms.less | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'lib/forms.less') diff --git a/lib/forms.less b/lib/forms.less index 39c293799..23cdb28c9 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -220,15 +220,15 @@ textarea[readonly] { } } // Error -form .clearfix.error { +.control-group.error { .formFieldState(#b94a48, #ee5f5b, lighten(#ee5f5b, 30%)); } // Warning -form .clearfix.warning { +.control-group.warning { .formFieldState(#c09853, #ccae64, lighten(#CCAE64, 5%)); } // Success -form .clearfix.success { +.control-group.success { .formFieldState(#468847, #57a957, lighten(#57a957, 30%)); } -- cgit v1.2.3 From d2e56ad53d5d5c93cd6206a6829ee2054f583c5b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 10 Dec 2011 22:29:49 -0800 Subject: unstyle image inputs --- lib/forms.less | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) (limited to 'lib/forms.less') diff --git a/lib/forms.less b/lib/forms.less index e85b9f201..8d4369b18 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -53,7 +53,8 @@ select, .border-radius(3px); } -/* Mini reset for unique input types */ +// Mini reset for unique input types +input[type=image], input[type=checkbox], input[type=radio] { width: auto; @@ -98,6 +99,11 @@ select[multiple] { background-color: @white; // Fixes Chromium bug? } +// Remove shadow from image inputs +input[type=image] { + .box-shadow(none); +} + textarea { height: auto; } -- cgit v1.2.3 From 72a536393c2f2aba4f855384e94c4ce09bc2e39c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 19 Dec 2011 22:58:56 -0800 Subject: mostly docs updates, but also some bug fixes per github issues --- lib/forms.less | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'lib/forms.less') diff --git a/lib/forms.less b/lib/forms.less index 8d4369b18..a73e6f545 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -93,10 +93,14 @@ input[type=file] { line-height: @baseLineHeight * 1.5; } +// Chrome on Linux needs background color +select { + background-color: @white; +} + // Make multiple select elements height not fixed select[multiple] { height: inherit; - background-color: @white; // Fixes Chromium bug? } // Remove shadow from image inputs -- cgit v1.2.3 From 8a7abc7493a07935d4d91b2cc56a82523fd53970 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 21 Dec 2011 16:00:50 -0600 Subject: docs updates, forms updated to include error states and more examples, remove text-shadow from gradientbar mixin to fix bug --- lib/forms.less | 1 + 1 file changed, 1 insertion(+) (limited to 'lib/forms.less') diff --git a/lib/forms.less b/lib/forms.less index a73e6f545..64e77fdb4 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -325,6 +325,7 @@ textarea[readonly] { // Allow us to put symbols and text within the input field for a cleaner look .input-prepend, .input-append { + overflow: hidden; input { .border-radius(0 3px 3px 0); } -- cgit v1.2.3 From 369cedd87c4447241ce2a73ed6c8414a4cd8bdf8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 21 Dec 2011 19:31:01 -0600 Subject: update comment on select bg bug and confirmed it was fixed, scoped responsive .span* to .row --- lib/forms.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'lib/forms.less') diff --git a/lib/forms.less b/lib/forms.less index 64e77fdb4..84fddd7d1 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -93,7 +93,7 @@ input[type=file] { line-height: @baseLineHeight * 1.5; } -// Chrome on Linux needs background color +// Chrome on Linux and Mobile Safari need background-color select { background-color: @white; } -- cgit v1.2.3 From 690d3f4d1aeb97a76d22a4dfe056e33606e0bd94 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 21 Dec 2011 19:32:14 -0600 Subject: remove inline input field CSS since that's not required as all inputs are inline-block anyway --- lib/forms.less | 21 --------------------- 1 file changed, 21 deletions(-) (limited to 'lib/forms.less') diff --git a/lib/forms.less b/lib/forms.less index 84fddd7d1..99d6fcb59 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -298,27 +298,6 @@ textarea[readonly] { -// INLINE FIELDS -// ------------- - -.inline-inputs { - color: @gray; - span, input { - display: inline-block; - } - input.mini { - width: 60px; - } - input.small { - width: 90px; - } - span { - padding: 0 2px 0 1px; - } -} - - - // INPUT GROUPS // ------------ -- cgit v1.2.3 From fec02f50455c87f0e01fe74b1fb2e3cd032ade09 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 27 Dec 2011 15:40:58 -0600 Subject: clean up some css for github issues: input prepend z-index, modals revamped for responsive --- lib/forms.less | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) (limited to 'lib/forms.less') diff --git a/lib/forms.less b/lib/forms.less index 99d6fcb59..9d96e8f33 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -96,6 +96,7 @@ input[type=file] { // Chrome on Linux and Mobile Safari need background-color select { background-color: @white; + vertical-align: middle; } // Make multiple select elements height not fixed @@ -304,13 +305,10 @@ textarea[readonly] { // Allow us to put symbols and text within the input field for a cleaner look .input-prepend, .input-append { - overflow: hidden; input { .border-radius(0 3px 3px 0); } .add-on { - position: relative; - z-index: 2; float: left; display: block; width: auto; -- cgit v1.2.3 From 46d2ad5e221646807fb2bd71881860462988008e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 27 Dec 2011 16:08:07 -0600 Subject: allow select with size attr to not have fixed height --- lib/forms.less | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'lib/forms.less') diff --git a/lib/forms.less b/lib/forms.less index 9d96e8f33..e9c392c76 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -100,7 +100,8 @@ select { } // Make multiple select elements height not fixed -select[multiple] { +select[multiple], +select[size] { height: inherit; } -- cgit v1.2.3 From 53c6dbff0d6dd781df421f07acdd9e98719b41bf Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 27 Dec 2011 17:04:55 -0600 Subject: add appended input example to docs, fix help-text wrapping issue by clearing float --- lib/forms.less | 1 + 1 file changed, 1 insertion(+) (limited to 'lib/forms.less') diff --git a/lib/forms.less b/lib/forms.less index e9c392c76..5293d780a 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -306,6 +306,7 @@ textarea[readonly] { // Allow us to put symbols and text within the input field for a cleaner look .input-prepend, .input-append { + .clearfix(); // Clear the float to prevent wrapping input { .border-radius(0 3px 3px 0); } -- cgit v1.2.3 From 553030ca7de8dac3c5180629ff84fa14173513ab Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 30 Dec 2011 16:01:29 -0800 Subject: missing parantheses --- lib/forms.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'lib/forms.less') diff --git a/lib/forms.less b/lib/forms.less index 5293d780a..ededc772e 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -220,7 +220,7 @@ textarea[readonly] { border-color: @borderColor; &:focus { border-color: darken(@borderColor, 10%); - .box-shadow(0 0 6px lighten(@borderColor, 20%); + .box-shadow(0 0 6px lighten(@borderColor, 20%)); } } // Give a small background color for input-prepend/-append -- cgit v1.2.3 From 20add59de3f2b69aaa9c9b325dab20b13c75eaa1 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 5 Jan 2012 10:01:42 -0800 Subject: breaking out patterns.less even more, removing unnecessary div from checkbox and radio lists--now just labels and inputs --- lib/forms.less | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'lib/forms.less') diff --git a/lib/forms.less b/lib/forms.less index ededc772e..0c624fa88 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -391,7 +391,8 @@ textarea[readonly] { margin-left: 150px; } // Move the options list down to align with labels - .control-list { + .controls > .radio:first-child, + .controls > .checkbox:first-child { padding-top: 6px; // has to be padding because margin collaspes } // Move over buttons in .form-actions to align with .controls -- cgit v1.2.3 From 23e5fc2133dd748ba4a7df52b598a24a2915811a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 5 Jan 2012 14:11:41 -0800 Subject: Tweak the docs and address the new forms list of controls: radios and checkboxes are now hanging controls to wrap text properly --- lib/forms.less | 27 ++++++++++++++++++++++----- 1 file changed, 22 insertions(+), 5 deletions(-) (limited to 'lib/forms.less') diff --git a/lib/forms.less b/lib/forms.less index 0c624fa88..32acbdaba 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -116,6 +116,28 @@ textarea { +// 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: 6px; // has to be padding because margin collaspes +} + + + // FOCUS STATE // ----------- @@ -390,11 +412,6 @@ textarea[readonly] { .controls { margin-left: 150px; } - // Move the options list down to align with labels - .controls > .radio:first-child, - .controls > .checkbox:first-child { - 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; -- cgit v1.2.3 From c56e9d2d35299b4c9e4e3d1aabcf59cedc9143f2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 5 Jan 2012 21:43:28 -0800 Subject: massive docs update, mostly to all our new forms, and to the buttons --- lib/forms.less | 32 +++++++++++++++++++++----------- 1 file changed, 21 insertions(+), 11 deletions(-) (limited to 'lib/forms.less') diff --git a/lib/forms.less b/lib/forms.less index 32acbdaba..ddd735cc4 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -42,10 +42,11 @@ input, textarea, select, .uneditable-input { - display: inline-block; + display: block; width: 210px; height: @baseLineHeight; padding: 4px; + margin-bottom: 9px; font-size: @baseFontSize; line-height: @baseLineHeight; color: @gray; @@ -177,7 +178,6 @@ select:focus { // Grid style input sizes // This is a duplication of the main grid .columns() mixin, but subtracts 10px to account for input padding and border .formColumns(@columnSpan: 1) { - display: inline-block; float: none; width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 10; margin-left: 0; @@ -224,6 +224,7 @@ textarea[readonly] { + // FORM FIELD FEEDBACK STATES // -------------------------- @@ -289,10 +290,10 @@ textarea[readonly] { } // Placeholder text gets special styles; can't be bundled together though for some reason -:-moz-placeholder { +input:-moz-placeholder { color: @grayLight; } -::-webkit-input-placeholder { +input::-webkit-input-placeholder { color: @grayLight; } @@ -301,7 +302,7 @@ textarea[readonly] { // HELP TEXT // --------- -.help-text { +.help-block { margin-top: 5px; margin-bottom: 0; color: @grayLight; @@ -314,12 +315,6 @@ textarea[readonly] { padding-left: 5px; } -// Big blocks of help text -.help-block { - display: block; - max-width: 600px; -} - // INPUT GROUPS @@ -328,6 +323,7 @@ textarea[readonly] { // 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 { .border-radius(0 3px 3px 0); @@ -377,6 +373,8 @@ textarea[readonly] { // ----------- .search-form .search-query { + padding-left: 14px; + padding-right: 14px; .border-radius(14px); } @@ -388,6 +386,18 @@ textarea[readonly] { // Common properties // ----------------- +.search-form, +.inline-form, +.horizontal-form { + input, + textarea, + select, + .uneditable-input { + display: inline-block; + margin-bottom: 0; + } +} + // Margin to space out fieldsets .control-group { margin-bottom: @baseLineHeight; -- cgit v1.2.3 From 5cb76037ae70ca26a923750ca9441b04d2fbd6a7 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 5 Jan 2012 23:24:19 -0800 Subject: fixing conflict in dividers in navbar, fix navbar docs, fix search form in navbar --- lib/forms.less | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'lib/forms.less') diff --git a/lib/forms.less b/lib/forms.less index ddd735cc4..938983536 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -372,9 +372,10 @@ input::-webkit-input-placeholder { // SEARCH FORM // ----------- -.search-form .search-query { +.search-query { padding-left: 14px; padding-right: 14px; + margin-bottom: 0; // remove the default margin on all inputs .border-radius(14px); } -- cgit v1.2.3 From cfc2353059df628c67d19a3c5c3ead2cc6051f53 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 6 Jan 2012 23:59:22 -0800 Subject: front page docs updated to include old getting started section, update code styles to look like github gists, and lots more docs updates --- lib/forms.less | 10 ++++++++++ 1 file changed, 10 insertions(+) (limited to 'lib/forms.less') diff --git a/lib/forms.less b/lib/forms.less index 938983536..8b85d240a 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -137,6 +137,16 @@ textarea { padding-top: 6px; // has to be padding because margin collaspes } +// Radios and checkboxes on same line +.radio.inline, +.checkbox.inline { + display: inline-block; +} +.radio.inline + .radio.inline, +.checkbox.inline + .checkbox.inline { + margin-left: 10px; +} + // FOCUS STATE -- cgit v1.2.3 From 36e7660383a7639f5d538efb7dc0f349e285b42d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Jan 2012 00:26:58 -0800 Subject: fix forms in navbars, fix examples' navbars --- lib/forms.less | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'lib/forms.less') diff --git a/lib/forms.less b/lib/forms.less index 8b85d240a..9e0b84362 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -141,10 +141,11 @@ textarea { .radio.inline, .checkbox.inline { display: inline-block; + margin-bottom: 0; } .radio.inline + .radio.inline, .checkbox.inline + .checkbox.inline { - margin-left: 10px; + margin-left: 10px; // space out consecutive inline controls } -- cgit v1.2.3 From bcf1136f2c8236cd3fa28eac7e57a9a3fc17d104 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Jan 2012 00:47:53 -0800 Subject: fix form field sizing for selects, document form field grid sizing --- lib/forms.less | 63 ++++++++++++++++++++++++++++++++++++++-------------------- 1 file changed, 42 insertions(+), 21 deletions(-) (limited to 'lib/forms.less') diff --git a/lib/forms.less b/lib/forms.less index 9e0b84362..433b1ff98 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -96,8 +96,10 @@ input[type=file] { // Chrome on Linux and Mobile Safari need background-color select { - background-color: @white; + width: 220px; // default input width + 10px of padding that doesn't get applied + padding: 0; vertical-align: middle; + background-color: @white; } // Make multiple select elements height not fixed @@ -187,33 +189,52 @@ select:focus { .input-xxlarge { width: 530px; } // Grid style input sizes -// This is a duplication of the main grid .columns() mixin, but subtracts 10px to account for input padding and border -.formColumns(@columnSpan: 1) { +input[class*="span"], +select[class*="span"], +textarea[class*="span"], +.uneditable-input[class*="span"] { float: none; - width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 10; 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, -select, .uneditable-input { // Default columns - &.span1 { .formColumns(1); } - &.span2 { .formColumns(2); } - &.span3 { .formColumns(3); } - &.span4 { .formColumns(4); } - &.span5 { .formColumns(5); } - &.span6 { .formColumns(6); } - &.span7 { .formColumns(7); } - &.span8 { .formColumns(8); } - &.span9 { .formColumns(9); } - &.span10 { .formColumns(10); } - &.span11 { .formColumns(11); } - &.span12 { .formColumns(12); } - &.span13 { .formColumns(13); } - &.span14 { .formColumns(14); } - &.span15 { .formColumns(15); } - &.span16 { .formColumns(16); } + &.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); } } -- cgit v1.2.3 From d6a1402f2af5111e11a87a6029b642dc0b814854 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Jan 2012 01:03:26 -0800 Subject: update form shadows and tweak prettyprint styles --- lib/forms.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'lib/forms.less') diff --git a/lib/forms.less b/lib/forms.less index 433b1ff98..5e02b7fde 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -157,14 +157,14 @@ textarea { input, textarea { - .box-shadow(inset 0 1px 3px rgba(0,0,0,.1)); + .box-shadow(inset 0 1px 1px rgba(0,0,0,.1)); @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 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6); + @shadow: inset 0 1px 1px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6); .box-shadow(@shadow); outline: 0; } -- cgit v1.2.3 From 45d671d97f4d448780729bbb6357e9ec776f980c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Jan 2012 01:22:52 -0800 Subject: tweak spacing once more on prettify; add support for uneditable inputs to input-append and prepend --- lib/forms.less | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) (limited to 'lib/forms.less') diff --git a/lib/forms.less b/lib/forms.less index 5e02b7fde..f0b7c2ea6 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -192,7 +192,7 @@ select:focus { input[class*="span"], select[class*="span"], textarea[class*="span"], -.uneditable-input[class*="span"] { +.uneditable-input { float: none; margin-left: 0; } @@ -357,9 +357,13 @@ input::-webkit-input-placeholder { .input-append { margin-bottom: 5px; .clearfix(); // Clear the float to prevent wrapping - input { + input, + .uneditable-input { .border-radius(0 3px 3px 0); } + .uneditable-input { + border-left-color: #ccc; + } .add-on { float: left; display: block; @@ -388,10 +392,14 @@ input::-webkit-input-placeholder { } } .input-append { - input { + 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; -- cgit v1.2.3 From 7728f7b8241dc43292c3f897fdfe08a13f58e40b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Jan 2012 04:28:30 -0800 Subject: add html5 invalid state for super fancy errors via browser --- lib/forms.less | 13 +++++++++++++ 1 file changed, 13 insertions(+) (limited to 'lib/forms.less') diff --git a/lib/forms.less b/lib/forms.less index f0b7c2ea6..19e2aa8bc 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -299,6 +299,19 @@ textarea[readonly] { .formFieldState(#468847, #57a957, lighten(#57a957, 30%)); } +// HTML5 invalid states +// Shares styles with the .control-group.error above +input:invalid, +textarea:invalid, +select:invalid { + color: #b94a48; + border-color: #ee5f5b; + &:focus { + border-color: darken(#ee5f5b, 10%); + .box-shadow(0 0 6px lighten(#ee5f5b, 20%)); + } +} + // FORM ACTIONS -- cgit v1.2.3 From 2948d1c3b247a5aff1fd1f15cf72540e3f492f57 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Jan 2012 20:40:28 -0800 Subject: overhaul the entire tabs component structure and docs; remove side nav and make it a nav list to build on new .nav base class --- lib/forms.less | 1 + 1 file changed, 1 insertion(+) (limited to 'lib/forms.less') diff --git a/lib/forms.less b/lib/forms.less index 19e2aa8bc..505331044 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -20,6 +20,7 @@ legend { line-height: @baseLineHeight * 2; color: @grayDark; border-bottom: 1px solid #eee; + -webkit-margin-collapse: separate; } // Set font for forms -- cgit v1.2.3 From a40b2a636c908859c2bb7434f0c050be2dc7e70e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 14 Jan 2012 16:38:40 -0800 Subject: make inline and search form labels inline-block --- lib/forms.less | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'lib/forms.less') diff --git a/lib/forms.less b/lib/forms.less index 505331044..ed97d8dd0 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -452,6 +452,10 @@ input::-webkit-input-placeholder { margin-bottom: 0; } } +.search-form label, +.inline-form label { + display: inline-block; +} // Margin to space out fieldsets .control-group { -- cgit v1.2.3 From dab6d2b17cc2fd67c2462b5a5eb84eb58d9c72bc Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 14 Jan 2012 21:28:47 -0800 Subject: change up classes on tables and forms, fix nav list styles in example --- lib/forms.less | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'lib/forms.less') diff --git a/lib/forms.less b/lib/forms.less index ed97d8dd0..04e684c99 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -441,9 +441,9 @@ input::-webkit-input-placeholder { // Common properties // ----------------- -.search-form, -.inline-form, -.horizontal-form { +.form-search, +.form-inline, +.form-horizontal { input, textarea, select, @@ -452,8 +452,8 @@ input::-webkit-input-placeholder { margin-bottom: 0; } } -.search-form label, -.inline-form label { +.form-search label, +.form-inline label { display: inline-block; } @@ -469,7 +469,7 @@ input::-webkit-input-placeholder { // Horizontal-specific styles // -------------------------- -.horizontal-form { +.form-horizontal { // Float the labels left .control-group > label { float: left; -- cgit v1.2.3 From 9f732e90d4e8f3a598a798fb8b29a4f59c0b7631 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 15 Jan 2012 11:33:30 -0800 Subject: make horizontal form labels map to default grid sizing --- lib/forms.less | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) (limited to 'lib/forms.less') diff --git a/lib/forms.less b/lib/forms.less index 04e684c99..ef4804afc 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -461,10 +461,6 @@ input::-webkit-input-placeholder { .control-group { margin-bottom: @baseLineHeight; } -// Bold the labels so they stand out -.control-group > label { - font-weight: bold; -} // Horizontal-specific styles // -------------------------- @@ -473,16 +469,16 @@ input::-webkit-input-placeholder { // Float the labels left .control-group > label { float: left; - width: 130px; + width: 120px; padding-top: 5px; text-align: right; } // Move over all input controls and content .controls { - margin-left: 150px; + margin-left: 140px; } // Move over buttons in .form-actions to align with .controls .form-actions { - padding-left: 150px; + padding-left: 140px; } } -- cgit v1.2.3 From f43f2c0ea269e72251e7f858b44ccef966d079af Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 15 Jan 2012 12:53:35 -0800 Subject: fix grid sized horizontal form layout --- lib/forms.less | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'lib/forms.less') diff --git a/lib/forms.less b/lib/forms.less index ef4804afc..703accff8 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -469,16 +469,16 @@ input::-webkit-input-placeholder { // Float the labels left .control-group > label { float: left; - width: 120px; + width: 140px; padding-top: 5px; text-align: right; } // Move over all input controls and content .controls { - margin-left: 140px; + margin-left: 160px; } // Move over buttons in .form-actions to align with .controls .form-actions { - padding-left: 140px; + padding-left: 160px; } } -- cgit v1.2.3 From ab8f2e2767be77120fedb07269dc7db078101dba Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 18 Jan 2012 00:35:14 -0800 Subject: don't scope placeholder text color to just inputs --- lib/forms.less | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) (limited to 'lib/forms.less') diff --git a/lib/forms.less b/lib/forms.less index 703accff8..e956b0046 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -336,12 +336,7 @@ select:invalid { } // Placeholder text gets special styles; can't be bundled together though for some reason -input:-moz-placeholder { - color: @grayLight; -} -input::-webkit-input-placeholder { - color: @grayLight; -} +.placeholder(@grayLight); -- cgit v1.2.3 From 782c994060a984c10d73fdd3cc8e3fe33a2e4477 Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Fri, 20 Jan 2012 21:16:40 +0000 Subject: Remove global reset in favour of contextual reset. Rather than having a partial reset with individual elements having their styles built back up, only elements without replacement styles have specific properties 'reset'. This commit also includes: a correction to the font mixin arguments used on forms (the output is now valid CSS); the removal of `overflow-y:scroll` from the `html` element which is now known to cause some problems for jQuery modal plugins in Firefox. --- lib/forms.less | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) (limited to 'lib/forms.less') diff --git a/lib/forms.less b/lib/forms.less index e956b0046..0cc7f2035 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -8,17 +8,25 @@ // Make all forms have space below them form { - margin-bottom: @baseLineHeight; + 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; -webkit-margin-collapse: separate; } @@ -26,9 +34,10 @@ legend { // Set font for forms label, input, +button, select, textarea { - #font > .sans-serif(normal,@baseFontSize,@baseLineHeight); + #font > .sans-serif(@baseFontSize,normal,@baseLineHeight); } // Identify controls by their labels -- cgit v1.2.3 From b8c0388f8af8ae93a514efaa352f63ecdffde279 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Sun, 22 Jan 2012 20:07:17 -0800 Subject: fix sans-serif order in forms.less and rebuild --- lib/forms.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'lib/forms.less') diff --git a/lib/forms.less b/lib/forms.less index e956b0046..e728b9d72 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -28,7 +28,7 @@ label, input, select, textarea { - #font > .sans-serif(normal,@baseFontSize,@baseLineHeight); + #font > .sans-serif(@baseFontSize,normal,@baseLineHeight); } // Identify controls by their labels -- cgit v1.2.3 From 1209a3756c88043008950f74dd287b837e00f7d8 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Sun, 22 Jan 2012 20:50:35 -0800 Subject: :focus:required:invalid: http://www.alistapart.com/articles/forward-thinking-form-validation --- lib/forms.less | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'lib/forms.less') diff --git a/lib/forms.less b/lib/forms.less index e728b9d72..bdc6e3e07 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -302,9 +302,9 @@ textarea[readonly] { // HTML5 invalid states // Shares styles with the .control-group.error above -input:invalid, -textarea:invalid, -select:invalid { +input:focus:required:invalid, +textarea:focus:required:invalid, +select:focus:required:invalid { color: #b94a48; border-color: #ee5f5b; &:focus { -- cgit v1.2.3 From ff113acba88806380b995fba894d77b562ca0e0a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 23 Jan 2012 12:21:00 -0800 Subject: cut margin in half on default forms --- lib/forms.less | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'lib/forms.less') diff --git a/lib/forms.less b/lib/forms.less index 85bf26163..bf3dbe64c 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -463,13 +463,16 @@ select:focus:required:invalid { // Margin to space out fieldsets .control-group { - margin-bottom: @baseLineHeight; + margin-bottom: @baseLineHeight / 2; } // Horizontal-specific styles // -------------------------- .form-horizontal { + .control-group { + margin-bottom: @baseLineHeight; + } // Float the labels left .control-group > label { float: left; -- cgit v1.2.3 From 1954cf001926a94f7a4d51f16beaf9f2ba671d13 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 23 Jan 2012 13:46:26 -0800 Subject: comment in forms' --- lib/forms.less | 1 + 1 file changed, 1 insertion(+) (limited to 'lib/forms.less') diff --git a/lib/forms.less b/lib/forms.less index bf3dbe64c..be53c60cb 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -470,6 +470,7 @@ select:focus:required:invalid { // -------------------------- .form-horizontal { + // Increase spacing between groups .control-group { margin-bottom: @baseLineHeight; } -- cgit v1.2.3 From e829001e5cb488a7708878b074205fc41e82fc82 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 24 Jan 2012 12:28:20 -0800 Subject: attempt to fix select list alignment in Firefox by removing padding. not quite fixed 100%, but getting there. --- lib/forms.less | 1 - 1 file changed, 1 deletion(-) (limited to 'lib/forms.less') diff --git a/lib/forms.less b/lib/forms.less index be53c60cb..1f424abaa 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -107,7 +107,6 @@ input[type=file] { // Chrome on Linux and Mobile Safari need background-color select { width: 220px; // default input width + 10px of padding that doesn't get applied - padding: 0; vertical-align: middle; background-color: @white; } -- cgit v1.2.3 From 40e92221a616bfe4e9500bcf2b72c86844f7f03f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 24 Jan 2012 16:54:35 -0800 Subject: revamp alert message and error state color/text/bg to be variables --- lib/forms.less | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'lib/forms.less') diff --git a/lib/forms.less b/lib/forms.less index 1f424abaa..2b24fb2f0 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -295,17 +295,17 @@ textarea[readonly] { border-color: @textColor; } } -// Error -.control-group.error { - .formFieldState(#b94a48, #ee5f5b, lighten(#ee5f5b, 30%)); -} // Warning .control-group.warning { - .formFieldState(#c09853, #ccae64, lighten(#CCAE64, 5%)); + .formFieldState(@warningText, @warningBorder, @warningBackground); +} +// Error +.control-group.error { + .formFieldState(@errorText, @errorBorder, @errorBackground); } // Success .control-group.success { - .formFieldState(#468847, #57a957, lighten(#57a957, 30%)); + .formFieldState(@successText, @successBorder, @successBackground); } // HTML5 invalid states -- cgit v1.2.3 From 6ab56051fdf916f03efb8aa6675e50bdd1cc3155 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 24 Jan 2012 23:35:34 -0800 Subject: fix up docs css for responsive and subnav, fix forms error states --- lib/forms.less | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'lib/forms.less') diff --git a/lib/forms.less b/lib/forms.less index 2b24fb2f0..e35b23da0 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -297,15 +297,15 @@ textarea[readonly] { } // Warning .control-group.warning { - .formFieldState(@warningText, @warningBorder, @warningBackground); + .formFieldState(@warningText, @warningText, @warningBackground); } // Error .control-group.error { - .formFieldState(@errorText, @errorBorder, @errorBackground); + .formFieldState(@errorText, @errorText, @errorBackground); } // Success .control-group.success { - .formFieldState(@successText, @successBorder, @successBackground); + .formFieldState(@successText, @successText, @successBackground); } // HTML5 invalid states -- cgit v1.2.3 From b8fa6cfacf61a02ab769b9031253c7b06111fa7c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 25 Jan 2012 01:22:29 -0800 Subject: move css builder and downloader to dedicated page, start to update remaining sections on LESS docs page --- lib/forms.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'lib/forms.less') diff --git a/lib/forms.less b/lib/forms.less index e35b23da0..100b0ab91 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -166,14 +166,14 @@ textarea { input, textarea { - .box-shadow(inset 0 1px 1px rgba(0,0,0,.1)); + .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,.1), 0 0 8px rgba(82,168,236,.6); + @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6); .box-shadow(@shadow); outline: 0; } -- cgit v1.2.3 From d3c5dd4e6acc421e06ef72680e794cfd9d52a04a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 25 Jan 2012 11:21:44 -0800 Subject: updated comments in forms.less and added uneditable-textarea class to extend uneditable-input --- lib/forms.less | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) (limited to 'lib/forms.less') diff --git a/lib/forms.less b/lib/forms.less index 100b0ab91..178c21018 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -63,6 +63,10 @@ select, border: 1px solid #ccc; .border-radius(3px); } +.uneditable-textarea { + width: auto; + height: auto; +} // Mini reset for unique input types input[type=image], @@ -72,7 +76,7 @@ input[type=radio] { height: auto; padding: 0; margin: 3px 0; - *margin-top: 0; /* IE6-7 */ + *margin-top: 0; /* IE7 */ line-height: normal; border: none; cursor: pointer; @@ -99,7 +103,7 @@ input[type=submit] { // Set the height of select and file controls to match text inputs select, input[type=file] { - height: @baseLineHeight * 1.5; // In IE7, the height of the select element cannot be changed by height, only font-size + height: @baseLineHeight * 1.5; /* 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: @baseLineHeight * 1.5; } -- cgit v1.2.3 From b8511568637dfa4decb3f0475436a3dfa637a57d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 25 Jan 2012 11:26:45 -0800 Subject: change form fields back to inline-block to allow for inline-help text in default form markup --- lib/forms.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'lib/forms.less') diff --git a/lib/forms.less b/lib/forms.less index 178c21018..70a065bdb 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -52,7 +52,7 @@ input, textarea, select, .uneditable-input { - display: block; + display: inline-block; width: 210px; height: @baseLineHeight; padding: 4px; -- cgit v1.2.3 From 58d08a2db3e2ed1b789a5290ced2f0327c9c163b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 25 Jan 2012 11:35:08 -0800 Subject: enable support for form states on select elements --- lib/forms.less | 1 + 1 file changed, 1 insertion(+) (limited to 'lib/forms.less') diff --git a/lib/forms.less b/lib/forms.less index 70a065bdb..3b35a172c 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -283,6 +283,7 @@ textarea[readonly] { } // Style inputs accordingly input, + select, textarea { color: @textColor; border-color: @borderColor; -- cgit v1.2.3 From 86191d898b2520611b537892e33be3b179f83199 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 25 Jan 2012 11:51:13 -0800 Subject: height auto on mutli select --- lib/forms.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'lib/forms.less') diff --git a/lib/forms.less b/lib/forms.less index 3b35a172c..355a33a30 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -118,7 +118,7 @@ select { // Make multiple select elements height not fixed select[multiple], select[size] { - height: inherit; + height: auto; } // Remove shadow from image inputs -- cgit v1.2.3 From 2b2c72b9aae6db9505d0fdb3abc1832de8e0ce7f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 25 Jan 2012 12:04:19 -0800 Subject: fix select alignment and height --- lib/forms.less | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'lib/forms.less') diff --git a/lib/forms.less b/lib/forms.less index 355a33a30..7451f36ef 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -103,15 +103,15 @@ input[type=submit] { // Set the height of select and file controls to match text inputs select, input[type=file] { - height: @baseLineHeight * 1.5; /* In IE7, the height of the select element cannot be changed by height, only font-size */ + 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: @baseLineHeight * 1.5; + 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 - vertical-align: middle; + vertical-align: baseline; background-color: @white; } -- cgit v1.2.3 From 94ea3b62f09c840db5efe5e48815d011ca7e43d1 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 25 Jan 2012 21:28:24 -0800 Subject: fix forms examples and allow for inputs in labels --- lib/forms.less | 11 +++++++++++ 1 file changed, 11 insertions(+) (limited to 'lib/forms.less') diff --git a/lib/forms.less b/lib/forms.less index 7451f36ef..3acb8c5dc 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -68,6 +68,13 @@ select, 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], @@ -474,6 +481,10 @@ select:focus:required:invalid { // -------------------------- .form-horizontal { + // Legend collapses margin, so we're relegated to padding + legend + .control-group { + padding-top: @baseLineHeight * 1.5; + } // Increase spacing between groups .control-group { margin-bottom: @baseLineHeight; -- cgit v1.2.3 From 0ef4b6419fd83170dd62049a2850c5e8466635c9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 26 Jan 2012 10:00:09 -0800 Subject: overhaul frontpage jumbotron, add js for twitter buttons back in, fix up some form ids and classes, straighten out the use of primary button variable --- lib/forms.less | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'lib/forms.less') diff --git a/lib/forms.less b/lib/forms.less index 3acb8c5dc..744649f90 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -133,10 +133,16 @@ input[type=image] { .box-shadow(none); } +// Make textarea height behave textarea { height: auto; } +// Hidden inputs +input[type=hidden] { + display: none; +} + // CHECKBOXES & RADIOS -- cgit v1.2.3 From c13de3db607dad06ce992e78ffdb8c2fa6871e70 Mon Sep 17 00:00:00 2001 From: Pete Hopkins Date: Thu, 26 Jan 2012 13:56:18 -0500 Subject: Fixes off-by-1px between checkbox and form label (all browsers) --- lib/forms.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'lib/forms.less') diff --git a/lib/forms.less b/lib/forms.less index 744649f90..4aec1ec1a 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -162,7 +162,7 @@ input[type=hidden] { // Move the options list down to align with labels .controls > .radio:first-child, .controls > .checkbox:first-child { - padding-top: 6px; // has to be padding because margin collaspes + padding-top: 5px; // has to be padding because margin collaspes } // Radios and checkboxes on same line -- cgit v1.2.3 From f76444c8585f3a720e0af2cedd33acddc718b962 Mon Sep 17 00:00:00 2001 From: Pete Hopkins Date: Thu, 26 Jan 2012 14:11:05 -0500 Subject: Clears border-radius on checkboxes because they look bad on IE --- lib/forms.less | 1 + 1 file changed, 1 insertion(+) (limited to 'lib/forms.less') diff --git a/lib/forms.less b/lib/forms.less index 4aec1ec1a..b2bd7b8cc 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -87,6 +87,7 @@ input[type=radio] { line-height: normal; border: none; cursor: pointer; + .border-radius(0); } // Reset the file input to browser defaults -- cgit v1.2.3 From b9413460afe2bdfac18889953447622d13eb1968 Mon Sep 17 00:00:00 2001 From: Pete Hopkins Date: Thu, 26 Jan 2012 16:02:27 -0500 Subject: Makes inputs and buttons align middle so they line up in all browsers --- lib/forms.less | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'lib/forms.less') diff --git a/lib/forms.less b/lib/forms.less index b2bd7b8cc..4ee636683 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -119,7 +119,6 @@ input[type=file] { // Chrome on Linux and Mobile Safari need background-color select { width: 220px; // default input width + 10px of padding that doesn't get applied - vertical-align: baseline; background-color: @white; } @@ -377,9 +376,9 @@ select:focus:required:invalid { } .help-inline { - *position: relative; /* IE6-7 */ - *top: -5px; /* IE6-7 */ - display: inline; + display: inline-block; + margin-bottom: 9px; + vertical-align: middle; padding-left: 5px; } @@ -469,6 +468,7 @@ select:focus:required:invalid { input, textarea, select, + .help-inline, .uneditable-input { display: inline-block; margin-bottom: 0; -- cgit v1.2.3 From d8e1001836f869436df2de2905411b2236c8cbad Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 26 Jan 2012 15:39:37 -0800 Subject: fix legend margin collapse --- lib/forms.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'lib/forms.less') diff --git a/lib/forms.less b/lib/forms.less index 4ee636683..9e2e1dc1b 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -28,7 +28,6 @@ legend { color: @grayDark; border: 0; border-bottom: 1px solid #eee; - -webkit-margin-collapse: separate; } // Set font for forms @@ -490,7 +489,8 @@ select:focus:required:invalid { .form-horizontal { // Legend collapses margin, so we're relegated to padding legend + .control-group { - padding-top: @baseLineHeight * 1.5; + margin-top: @baseLineHeight; + -webkit-margin-top-collapse: separate; } // Increase spacing between groups .control-group { -- cgit v1.2.3 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... --- lib/forms.less | 514 --------------------------------------------------------- 1 file changed, 514 deletions(-) delete mode 100644 lib/forms.less (limited to 'lib/forms.less') diff --git a/lib/forms.less b/lib/forms.less deleted file mode 100644 index 9e2e1dc1b..000000000 --- a/lib/forms.less +++ /dev/null @@ -1,514 +0,0 @@ -// 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