From 20eae67147da15a75250a09f0932c0f3f2198b2b Mon Sep 17 00:00:00 2001 From: Milos Gavrilovic Date: Thu, 10 May 2012 12:25:22 +0300 Subject: Update .placeholder() mixin call In less/mixins.less this mixin is being created with @placeholderText color as default, which is actually set as @placeholderText: @grayLight in less/variables.less so it's redundant to make call like this: .placeholder(@grayLight); --- 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 7d967c6b3..61e29b697 100644 --- a/less/forms.less +++ b/less/forms.less @@ -344,7 +344,7 @@ select:focus:required:invalid { } // Placeholder text gets special styles; can't be bundled together though for some reason -.placeholder(@grayLight); +.placeholder(); -- cgit v1.2.3 From a2fb9ed42f4fedbf2045601bedc8dace4d8bbd36 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 13 May 2012 17:43:04 -0700 Subject: #3449: make legend and form-actions the same border color --- less/forms.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'less/forms.less') diff --git a/less/forms.less b/less/forms.less index 61e29b697..9f95dd64f 100644 --- a/less/forms.less +++ b/less/forms.less @@ -27,7 +27,7 @@ legend { line-height: @baseLineHeight * 2; color: @grayDark; border: 0; - border-bottom: 1px solid #eee; + border-bottom: 1px solid #e5e5e5; // Small small { @@ -329,7 +329,7 @@ select:focus:required:invalid { margin-top: @baseLineHeight; margin-bottom: @baseLineHeight; background-color: @formActionsBackground; - border-top: 1px solid #ddd; + border-top: 1px solid #e5e5e5; .clearfix(); // Adding clearfix to allow for .pull-right button containers } -- cgit v1.2.3 From a0809ceebe5332a1c3e355a762d1bff3e477ce37 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 14 May 2012 23:40:06 -0700 Subject: add forms test page for all html5 input types and refactor selectors --- less/forms.less | 131 ++++++++++++++++++++++++++------------------------------ 1 file changed, 60 insertions(+), 71 deletions(-) (limited to 'less/forms.less') diff --git a/less/forms.less b/less/forms.less index 9f95dd64f..f9a994a7b 100644 --- a/less/forms.less +++ b/less/forms.less @@ -58,69 +58,88 @@ label { color: @grayDark; } -// Inputs, Textareas, Selects -input, -textarea, +// Form controls +// ------------------------- + +// Shared resets select, -.uneditable-input { +textarea, +input[type="text"], +input[type="password"], +input[type="datetime"], +input[type="datetime-local"], +input[type="date"], +input[type="month"], +input[type="time"], +input[type="week"], +input[type="number"], +input[type="email"], +input[type="url"], +input[type="search"], +input[type="tel"], +input[type="color"] { display: inline-block; - width: 210px; height: @baseLineHeight; padding: 4px; margin-bottom: 9px; font-size: @baseFontSize; line-height: @baseLineHeight; color: @gray; +} + +// Textual inputs and textareas +textarea, +input[type="text"], +input[type="password"], +input[type="datetime"], +input[type="datetime-local"], +input[type="date"], +input[type="month"], +input[type="time"], +input[type="week"], +input[type="number"], +input[type="email"], +input[type="url"], +input[type="search"], +input[type="tel"], +input[type="color"] { background-color: @inputBackground; border: 1px solid @inputBorder; .border-radius(@inputBorderRadius); + .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); + @transition: border linear .2s, box-shadow linear .2s; + .transition(@transition); } -.uneditable-textarea { - width: auto; - height: auto; + +input[type="radio"], +input[type="checkbox"] { + } -// Inputs within a label -label input, -label textarea, -label select { - display: block; +input[type="button"], +input[type="submit"], +input[type="reset"] { + } -// 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; - cursor: pointer; - background-color: transparent; - border: 0 \9; /* IE9 and down */ - .border-radius(0); +input[type="file"] { + +} + +input[type="hidden"] { + } + input[type="image"] { - border: 0; + } -// Reset the file input to browser defaults -input[type="file"] { - width: auto; - padding: initial; - line-height: initial; - background-color: @inputBackground; - background-color: initial; - border: initial; - .box-shadow(none); +input[type="range"] { + } -// Help out input buttons -input[type="button"], -input[type="reset"], -input[type="submit"] { +// Make uneditable textareas behave like a textarea +.uneditable-textarea { width: auto; height: auto; } @@ -133,37 +152,13 @@ input[type="file"] { line-height: 28px; } -// Reset line-height for IE -input[type="file"] { - line-height: 18px \9; -} - -// 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: @inputBackground; -} - // 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; -} @@ -207,12 +202,6 @@ input[type="hidden"] { // 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); -- cgit v1.2.3 From e28efd7da07d20d706421b3c868ccc08e0e3077d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 14 May 2012 23:42:32 -0700 Subject: consolidate and relabel new form selectors --- less/forms.less | 16 +++------------- 1 file changed, 3 insertions(+), 13 deletions(-) (limited to 'less/forms.less') diff --git a/less/forms.less b/less/forms.less index f9a994a7b..4a218033a 100644 --- a/less/forms.less +++ b/less/forms.less @@ -61,7 +61,7 @@ label { // Form controls // ------------------------- -// Shared resets +// Shared size and type resets select, textarea, input[type="text"], @@ -87,7 +87,7 @@ input[type="color"] { color: @gray; } -// Textual inputs and textareas +// Reset background, border, and box-shadow for textual inputs and textarea textarea, input[type="text"], input[type="password"], @@ -111,31 +111,21 @@ input[type="color"] { .transition(@transition); } +// Unused selectors input[type="radio"], input[type="checkbox"] { - } - input[type="button"], input[type="submit"], input[type="reset"] { - } - input[type="file"] { - } - input[type="hidden"] { - } - input[type="image"] { - } - input[type="range"] { - } // Make uneditable textareas behave like a textarea -- cgit v1.2.3 From ecf84bdac51a9c56d18c4a25b3d5b0c66a09151a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 15 May 2012 00:17:02 -0700 Subject: correct regressions against 2.0.3 --- less/forms.less | 37 +++++++++++++++++++++++++------------ 1 file changed, 25 insertions(+), 12 deletions(-) (limited to 'less/forms.less') diff --git a/less/forms.less b/less/forms.less index 4a218033a..277cdf42f 100644 --- a/less/forms.less +++ b/less/forms.less @@ -87,7 +87,13 @@ input[type="color"] { color: @gray; } -// Reset background, border, and box-shadow for textual inputs and textarea +// Reset appearance properties for textual inputs and textarea +// Declare width for legacy (can't be on input[type=*] selectors or it's too specific) +input, +textarea { + width: 210px; +} +// Everything else textarea, input[type="text"], input[type="password"], @@ -111,21 +117,22 @@ input[type="color"] { .transition(@transition); } -// Unused selectors +// Position radios and checkboxes better input[type="radio"], input[type="checkbox"] { + margin: 3px 0; + *margin-top: 0; /* IE7 */ + line-height: normal; + cursor: pointer; } -input[type="button"], + +// Reset width of input buttons, radios, checkboxes input[type="submit"], -input[type="reset"] { -} -input[type="file"] { -} -input[type="hidden"] { -} -input[type="image"] { -} -input[type="range"] { +input[type="reset"], +input[type="button"], +input[type="radio"], +input[type="checkbox"] { + width: auto; // Override of generic input selector } // Make uneditable textareas behave like a textarea @@ -142,6 +149,12 @@ input[type="file"] { line-height: 28px; } +// Make select elements obey height by applying a border +select { + width: 220px; // default input width + 10px of padding that doesn't get applied + border: 1px solid #bbb; +} + // Make multiple select elements height not fixed select[multiple], select[size] { -- cgit v1.2.3 From 532569fe59bbc8a1a74d7984279749f736cbdd3a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 15 May 2012 09:04:44 -0700 Subject: updated forms to rearrange focus state, reinstate uneditable-input, and a few other cleanup tidbits --- less/forms.less | 42 ++++++++++++++++++------------------------ 1 file changed, 18 insertions(+), 24 deletions(-) (limited to 'less/forms.less') diff --git a/less/forms.less b/less/forms.less index 277cdf42f..f0fd90f8d 100644 --- a/less/forms.less +++ b/less/forms.less @@ -77,7 +77,8 @@ input[type="email"], input[type="url"], input[type="search"], input[type="tel"], -input[type="color"] { +input[type="color"], +.uneditable-input { display: inline-block; height: @baseLineHeight; padding: 4px; @@ -115,6 +116,14 @@ input[type="color"] { .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); @transition: border linear .2s, box-shadow linear .2s; .transition(@transition); + + // Focus state + &:focus { + border-color: rgba(82,168,236,.8); + outline: 0; + outline: thin dotted \9; /* IE6-9 */ + .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)"); + } } // Position radios and checkboxes better @@ -161,7 +170,13 @@ select[size] { height: auto; } - +// Focus for select, file, radio, and checkbox +select:focus, +input[type="file"]:focus, +input[type="radio"]:focus, +input[type="checkbox"]:focus { + .tab-focus(); +} @@ -202,26 +217,6 @@ select[size] { -// FOCUS STATE -// ----------- - -input:focus, -textarea:focus { - border-color: rgba(82,168,236,.8); - outline: 0; - outline: thin dotted \9; /* IE6-9 */ - .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)"); -} -input[type="file"]:focus, -input[type="radio"]:focus, -input[type="checkbox"]:focus, -select:focus { - .tab-focus(); - .box-shadow(none); // override for file inputs -} - - - // INPUT SIZES // ----------- @@ -252,8 +247,7 @@ textarea[class*="span"], // GRID SIZING FOR INPUTS // ---------------------- -#grid > .input (@gridColumnWidth, @gridGutterWidth); - +#grid > .input(@gridColumnWidth, @gridGutterWidth); -- cgit v1.2.3 From a9d4b667ff6349a54cdd470c82c7ef3c88de4165 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 15 May 2012 09:07:19 -0700 Subject: finish fixing uneditable-input and remake --- less/forms.less | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'less/forms.less') diff --git a/less/forms.less b/less/forms.less index 277cdf42f..d70dd9c4d 100644 --- a/less/forms.less +++ b/less/forms.less @@ -77,7 +77,8 @@ input[type="email"], input[type="url"], input[type="search"], input[type="tel"], -input[type="color"] { +input[type="color"], +.uneditable-input { display: inline-block; height: @baseLineHeight; padding: 4px; @@ -108,7 +109,8 @@ input[type="email"], input[type="url"], input[type="search"], input[type="tel"], -input[type="color"] { +input[type="color"], +.uneditable-input { background-color: @inputBackground; border: 1px solid @inputBorder; .border-radius(@inputBorderRadius); -- cgit v1.2.3 From 78790da03c2f18912215c6dc4c19d88e636c31dd Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 17 May 2012 22:00:49 -0700 Subject: fix resizing issues from incorrectly changing <767px grid classes to inline-block, fix height issue on textareas --- 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 606446638..582bb413b 100644 --- a/less/forms.less +++ b/less/forms.less @@ -94,6 +94,10 @@ input, textarea { width: 210px; } +// Reset height since textareas have rows +textarea { + height: auto; +} // Everything else textarea, input[type="text"], -- cgit v1.2.3 From a7529e158be8153fd350d19445e9e93261050c55 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 25 May 2012 09:19:10 -0700 Subject: remove color from labels --- less/forms.less | 1 - 1 file changed, 1 deletion(-) (limited to 'less/forms.less') diff --git a/less/forms.less b/less/forms.less index 582bb413b..a7e525a76 100644 --- a/less/forms.less +++ b/less/forms.less @@ -55,7 +55,6 @@ textarea { label { display: block; margin-bottom: 5px; - color: @grayDark; } // Form controls -- cgit v1.2.3 From 7875e4833cb7d00db2967078fd6f51adbfd4a351 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 28 May 2012 17:32:24 -0700 Subject: fix broken css tests, add fluid input-prepend/-append to tests, fix input-prepend/append for responsive for both fluid and fixed sizing --- 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 a7e525a76..1163fe914 100644 --- a/less/forms.less +++ b/less/forms.less @@ -245,6 +245,15 @@ textarea[class*="span"], float: none; margin-left: 0; } +// Ensure input-prepend/append never wraps +.input-append input[class*="span"], +.input-append .uneditable-input[class*="span"], +.input-prepend input[class*="span"], +.input-prepend .uneditable-input[class*="span"], +.row-fluid .input-prepend [class*="span"], +.row-fluid .input-append [class*="span"] { + display: inline-block; +} -- cgit v1.2.3