diff options
Diffstat (limited to 'less/forms.less')
| -rw-r--r-- | less/forms.less | 183 |
1 files changed, 91 insertions, 92 deletions
diff --git a/less/forms.less b/less/forms.less index 7d967c6b3..1163fe914 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 { @@ -55,72 +55,101 @@ textarea { label { display: block; margin-bottom: 5px; - color: @grayDark; } -// Inputs, Textareas, Selects -input, -textarea, +// Form controls +// ------------------------- + +// Shared size and type resets select, +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"], .uneditable-input { display: inline-block; - width: 210px; height: @baseLineHeight; padding: 4px; margin-bottom: 9px; font-size: @baseFontSize; line-height: @baseLineHeight; color: @gray; - background-color: @inputBackground; - border: 1px solid @inputBorder; - .border-radius(@inputBorderRadius); } -.uneditable-textarea { - width: auto; + +// 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; +} +// Reset height since textareas have rows +textarea { height: auto; } +// Everything else +textarea, +input[type="text"], +input[type="password"], +input[type="datetime"], +input[type="datetime-local"], +input[type="date"], +input[type="month"], +input[type="time"], +input[type="week"], +input[type="number"], +input[type="email"], +input[type="url"], +input[type="search"], +input[type="tel"], +input[type="color"], +.uneditable-input { + 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); -// Inputs within a label -label input, -label textarea, -label select { - display: block; + // 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)"); + } } -// Mini reset for unique input types -input[type="image"], -input[type="checkbox"], -input[type="radio"] { - width: auto; - height: auto; - padding: 0; +// Position radios and checkboxes better +input[type="radio"], +input[type="checkbox"] { 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="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); +// Reset width of input buttons, radios, checkboxes +input[type="submit"], +input[type="reset"], +input[type="button"], +input[type="radio"], +input[type="checkbox"] { + width: auto; // Override of generic input selector } -// 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,15 +162,10 @@ 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 +// Make select elements obey height by applying a border select { width: 220px; // default input width + 10px of padding that doesn't get applied - background-color: @inputBackground; + border: 1px solid #bbb; } // Make multiple select elements height not fixed @@ -150,19 +174,12 @@ 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; +// Focus for select, file, radio, and checkbox +select:focus, +input[type="file"]:focus, +input[type="radio"]:focus, +input[type="checkbox"]:focus { + .tab-focus(); } @@ -204,32 +221,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); - 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 // ----------- @@ -254,14 +245,22 @@ 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; +} // GRID SIZING FOR INPUTS // ---------------------- -#grid > .input (@gridColumnWidth, @gridGutterWidth); - +#grid > .input(@gridColumnWidth, @gridGutterWidth); @@ -329,7 +328,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 } @@ -344,7 +343,7 @@ select:focus:required:invalid { } // Placeholder text gets special styles; can't be bundled together though for some reason -.placeholder(@grayLight); +.placeholder(); |