3 // --------------------------------------------------
9 // Make all forms have space below them
11 margin: 0 0 @baseLineHeight;
20 // Groups of fields with labels on top (legends)
25 margin-bottom: @baseLineHeight;
26 font-size: @baseFontSize * 1.5;
27 line-height: @baseLineHeight * 2;
30 border-bottom: 1px solid #e5e5e5;
34 font-size: @baseLineHeight * .75;
45 #font > .shorthand(@baseFontSize,normal,@baseLineHeight); // Set size, weight, line-height here
51 font-family: @baseFontFamily; // And only set font-family here for those that need it (note the missing label element)
54 // Identify controls by their labels
61 // -------------------------
63 // Shared size and type resets
67 input[type="password"],
68 input[type="datetime"],
69 input[type="datetime-local"],
81 display: inline-block;
82 height: @baseLineHeight;
85 font-size: @baseFontSize;
86 line-height: @baseLineHeight;
88 .border-radius(@inputBorderRadius);
91 // Reset appearance properties for textual inputs and textarea
92 // Declare width for legacy (can't be on input[type=*] selectors or it's too specific)
96 width: 206px; // plus 12px padding and 2px border
98 // Reset height since textareas have rows
105 input[type="password"],
106 input[type="datetime"],
107 input[type="datetime-local"],
112 input[type="number"],
115 input[type="search"],
119 background-color: @inputBackground;
120 border: 1px solid @inputBorder;
121 .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
122 .transition(~"border linear .2s, box-shadow linear .2s");
126 border-color: rgba(82,168,236,.8);
128 outline: thin dotted \9; /* IE6-9 */
129 .box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6));
133 // Position radios and checkboxes better
135 input[type="checkbox"] {
137 *margin-top: 0; /* IE7 */
138 margin-top: 1px \9; /* IE8-9 */
143 // Reset width of input images, buttons, radios, checkboxes
146 input[type="submit"],
148 input[type="button"],
150 input[type="checkbox"] {
151 width: auto; // Override of generic input selector
154 // Set the height of select and file controls to match text inputs
157 height: 30px; /* In IE7, the height of the select element cannot be changed by height, only font-size */
158 *margin-top: 4px; /* For IE7, add top margin to align select with labels */
162 // Make select elements obey height by applying a border
164 width: 220px; // default input width + 10px of padding that doesn't get applied
165 border: 1px solid @inputBorder;
166 background-color: @inputBackground; // Chrome on Linux and Mobile Safari need background-color
169 // Make multiple select elements height not fixed
175 // Focus for select, file, radio, and checkbox
177 input[type="file"]:focus,
178 input[type="radio"]:focus,
179 input[type="checkbox"]:focus {
185 // -------------------------
187 // Make uneditable inputs look inactive
189 .uneditable-textarea {
191 background-color: darken(@inputBackground, 1%);
192 border-color: @inputBorder;
193 .box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
197 // For text that needs to appear as an input but should not be an input
199 overflow: hidden; // prevent text from wrapping, but still cut it off like an input does
203 // Make uneditable textareas behave like a textarea
204 .uneditable-textarea {
211 // -------------------------
213 // Placeholder text gets special styles because when browsers invalidate entire lines if it doesn’t understand a selector
220 // CHECKBOXES & RADIOS
221 // -------------------
223 // Indent the labels to position radios/checkboxes as hanging
226 min-height: 18px; // clear the floating input if there is no label text
229 .radio input[type="radio"],
230 .checkbox input[type="checkbox"] {
235 // Move the options list down to align with labels
236 .controls > .radio:first-child,
237 .controls > .checkbox:first-child {
238 padding-top: 5px; // has to be padding because margin collaspes
241 // Radios and checkboxes on same line
242 // TODO v3: Convert .inline to .control-inline
245 display: inline-block;
248 vertical-align: middle;
250 .radio.inline + .radio.inline,
251 .checkbox.inline + .checkbox.inline {
252 margin-left: 10px; // space out consecutive inline controls
260 // General classes for quick sizes
261 .input-mini { width: 60px; }
262 .input-small { width: 90px; }
263 .input-medium { width: 150px; }
264 .input-large { width: 210px; }
265 .input-xlarge { width: 270px; }
266 .input-xxlarge { width: 530px; }
268 // Grid style input sizes
269 input[class*="span"],
270 select[class*="span"],
271 textarea[class*="span"],
272 .uneditable-input[class*="span"],
273 // Redeclare since the fluid row class is more specific
274 .row-fluid input[class*="span"],
275 .row-fluid select[class*="span"],
276 .row-fluid textarea[class*="span"],
277 .row-fluid .uneditable-input[class*="span"] {
281 // Ensure input-prepend/append never wraps
282 .input-append input[class*="span"],
283 .input-append .uneditable-input[class*="span"],
284 .input-prepend input[class*="span"],
285 .input-prepend .uneditable-input[class*="span"],
286 .row-fluid input[class*="span"],
287 .row-fluid select[class*="span"],
288 .row-fluid textarea[class*="span"],
289 .row-fluid .uneditable-input[class*="span"],
290 .row-fluid .input-prepend [class*="span"],
291 .row-fluid .input-append [class*="span"] {
292 display: inline-block;
297 // GRID SIZING FOR INPUTS
298 // ----------------------
301 #grid > .input(@gridColumnWidth, @gridGutterWidth);
303 // Control row for multiple inputs per line
305 .clearfix(); // Clear the float from controls
307 .controls-row [class*="span"] {
308 float: left; // Float to collapse white-space for proper grid alignment
317 // Disabled and read-only inputs
325 background-color: @inputDisabledBackground;
327 // Explicitly reset the colors here
328 input[type="radio"][disabled],
329 input[type="checkbox"][disabled],
330 input[type="radio"][readonly],
331 input[type="checkbox"][readonly] {
332 background-color: transparent;
338 // FORM FIELD FEEDBACK STATES
339 // --------------------------
342 .control-group.warning {
343 .formFieldState(@warningText, @warningText, @warningBackground);
346 .control-group.error {
347 .formFieldState(@errorText, @errorText, @errorBackground);
350 .control-group.success {
351 .formFieldState(@successText, @successText, @successBackground);
354 .control-group.info {
355 .formFieldState(@infoText, @infoText, @infoBackground);
358 // HTML5 invalid states
359 // Shares styles with the .control-group.error above
360 input:focus:required:invalid,
361 textarea:focus:required:invalid,
362 select:focus:required:invalid {
364 border-color: #ee5f5b;
366 border-color: darken(#ee5f5b, 10%);
367 .box-shadow(0 0 6px lighten(#ee5f5b, 20%));
377 padding: (@baseLineHeight - 1) 20px @baseLineHeight;
378 margin-top: @baseLineHeight;
379 margin-bottom: @baseLineHeight;
380 background-color: @formActionsBackground;
381 border-top: 1px solid #e5e5e5;
382 .clearfix(); // Adding clearfix to allow for .pull-right button containers
392 color: lighten(@textColor, 15%); // lighten the text some for contrast
396 display: block; // account for any element using help-block
397 margin-bottom: @baseLineHeight / 2;
401 display: inline-block;
403 vertical-align: middle;
412 // Allow us to put symbols and text within the input field for a cleaner look
417 white-space: nowrap; // Prevent span and input from separating
422 position: relative; // placed here by default so that on :focus we can place the input above the .add-on for full border and box-shadow goodness
423 margin-bottom: 0; // prevent bottom margin from screwing up alignment in stacked forms
425 font-size: @baseFontSize;
427 .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
428 // Make input on top when focused so blue border and shadow always show
434 display: inline-block;
436 height: @baseLineHeight;
439 font-size: @baseFontSize;
441 line-height: @baseLineHeight;
443 text-shadow: 0 1px 0 @white;
444 background-color: @grayLighter;
445 border: 1px solid #ccc;
453 background-color: lighten(@green, 30);
454 border-color: @green;
464 .border-radius(@inputBorderRadius 0 0 @inputBorderRadius);
471 .border-radius(@inputBorderRadius 0 0 @inputBorderRadius);
479 .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
482 // Remove all border-radius for inputs with both prepend and append
483 .input-prepend.input-append {
492 .border-radius(@inputBorderRadius 0 0 @inputBorderRadius);
497 .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
508 padding-right: 4px \9;
510 padding-left: 4px \9; /* IE7-8 doesn't have border-radius, so don't indent the padding */
511 margin-bottom: 0; // Remove the default margin on all inputs
512 .border-radius(15px);
515 /* Allow for input prepend/append in search forms */
516 .form-search .input-append .search-query,
517 .form-search .input-prepend .search-query {
518 .border-radius(0); // Override due to specificity
520 .form-search .input-append .search-query {
521 .border-radius(14px 0 0 14px);
523 .form-search .input-append .btn {
524 .border-radius(0 14px 14px 0);
526 .form-search .input-prepend .search-query {
527 .border-radius(0 14px 14px 0);
529 .form-search .input-prepend .btn {
530 .border-radius(14px 0 0 14px);
536 // HORIZONTAL & VERTICAL FORMS
537 // ---------------------------
552 display: inline-block;
555 vertical-align: middle;
557 // Re-hide hidden elements due to specifity
564 .form-search .btn-group,
565 .form-inline .btn-group {
566 display: inline-block;
568 // Remove margin for input-prepend/-append
569 .form-search .input-append,
570 .form-inline .input-append,
571 .form-search .input-prepend,
572 .form-inline .input-prepend {
575 // Inline checkbox/radio labels (remove padding on left)
577 .form-search .checkbox,
579 .form-inline .checkbox {
582 vertical-align: middle;
584 // Remove float and margin, set to inline-block
585 .form-search .radio input[type="radio"],
586 .form-search .checkbox input[type="checkbox"],
587 .form-inline .radio input[type="radio"],
588 .form-inline .checkbox input[type="checkbox"] {
595 // Margin to space out fieldsets
597 margin-bottom: @baseLineHeight / 2;
600 // Legend collapses margin, so next element is responsible for spacing
601 legend + .control-group {
602 margin-top: @baseLineHeight;
603 -webkit-margin-top-collapse: separate;
606 // Horizontal-specific styles
607 // --------------------------
610 // Increase spacing between groups
612 margin-bottom: @baseLineHeight;
615 // Float the labels left
618 width: @horizontalComponentOffset - 20;
622 // Move over all input controls and content
624 // Super jank IE7 fix to ensure the inputs in .input-append and input-prepend
625 // don't inherit the margin of the parent, in this case .controls
626 *display: inline-block;
628 margin-left: @horizontalComponentOffset;
631 *padding-left: @horizontalComponentOffset;
634 // Remove bottom margin on block level help text since that's accounted for on .control-group
638 // And apply it only to .help-block instances that follow a form control
643 margin-top: @baseLineHeight / 2;
646 // Move over buttons in .form-actions to align with .controls
648 padding-left: @horizontalComponentOffset;