Mercurial > wikked

comparison static/bootstrap/less/forms.less @ 149:d29e2f337b00

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Updated to Bootstrap 3.0.
author Ludovic Chabant <ludovic@chabant.com>
date Thu, 12 Dec 2013 21:54:04 -0800
parents a5a3d454eac9
children
comparison
equal deleted inserted replaced
148:f02e049d6546 149:d29e2f337b00
1 // 1 //
2 // Forms 2 // Forms
3 // -------------------------------------------------- 3 // --------------------------------------------------
4 4
5 5
6 // GENERAL STYLES 6 // Normalize non-controls
7 // -------------- 7 //
8 8 // Restyle and baseline non-control form elements.
9 // Make all forms have space below them
10 form {
11 margin: 0 0 @baseLineHeight;
12 }
13 9
14 fieldset { 10 fieldset {
15 padding: 0; 11 padding: 0;
16 margin: 0; 12 margin: 0;
17 border: 0; 13 border: 0;
18 } 14 }
19 15
20 // Groups of fields with labels on top (legends)
21 legend { 16 legend {
22 display: block; 17 display: block;
23 width: 100%; 18 width: 100%;
24 padding: 0; 19 padding: 0;
25 margin-bottom: @baseLineHeight; 20 margin-bottom: @line-height-computed;
26 font-size: @baseFontSize * 1.5; 21 font-size: (@font-size-base * 1.5);
27 line-height: @baseLineHeight * 2; 22 line-height: inherit;
28 color: @grayDark; 23 color: @legend-color;
29 border: 0; 24 border: 0;
30 border-bottom: 1px solid #e5e5e5; 25 border-bottom: 1px solid @legend-border-color;
31 26 }
32 // Small 27
33 small {
34 font-size: @baseLineHeight * .75;
35 color: @grayLight;
36 }
37 }
38
39 // Set font for forms
40 label,
41 input,
42 button,
43 select,
44 textarea {
45 #font > .shorthand(@baseFontSize,normal,@baseLineHeight); // Set size, weight, line-height here
46 }
47 input,
48 button,
49 select,
50 textarea {
51 font-family: @baseFontFamily; // And only set font-family here for those that need it (note the missing label element)
52 }
53
54 // Identify controls by their labels
55 label { 28 label {
56 display: block; 29 display: inline-block;
57 margin-bottom: 5px; 30 margin-bottom: 5px;
58 } 31 font-weight: bold;
59 32 }
60 // Form controls 33
61 // ------------------------- 34
62 35 // Normalize form controls
63 // Shared size and type resets 36
64 select, 37 // Override content-box in Normalize (* isn't specific enough)
65 textarea, 38 input[type="search"] {
66 input[type="text"], 39 .box-sizing(border-box);
67 input[type="password"],
68 input[type="datetime"],
69 input[type="datetime-local"],
70 input[type="date"],
71 input[type="month"],
72 input[type="time"],
73 input[type="week"],
74 input[type="number"],
75 input[type="email"],
76 input[type="url"],
77 input[type="search"],
78 input[type="tel"],
79 input[type="color"],
80 .uneditable-input {
81 display: inline-block;
82 height: @baseLineHeight;
83 padding: 4px 6px;
84 margin-bottom: @baseLineHeight / 2;
85 font-size: @baseFontSize;
86 line-height: @baseLineHeight;
87 color: @gray;
88 .border-radius(@inputBorderRadius);
89 vertical-align: middle;
90 }
91
92 // Reset appearance properties for textual inputs and textarea
93 // Declare width for legacy (can't be on input[type=*] selectors or it's too specific)
94 input,
95 textarea,
96 .uneditable-input {
97 width: 206px; // plus 12px padding and 2px border
98 }
99 // Reset height since textareas have rows
100 textarea {
101 height: auto;
102 }
103 // Everything else
104 textarea,
105 input[type="text"],
106 input[type="password"],
107 input[type="datetime"],
108 input[type="datetime-local"],
109 input[type="date"],
110 input[type="month"],
111 input[type="time"],
112 input[type="week"],
113 input[type="number"],
114 input[type="email"],
115 input[type="url"],
116 input[type="search"],
117 input[type="tel"],
118 input[type="color"],
119 .uneditable-input {
120 background-color: @inputBackground;
121 border: 1px solid @inputBorder;
122 .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
123 .transition(~"border linear .2s, box-shadow linear .2s");
124
125 // Focus state
126 &:focus {
127 border-color: rgba(82,168,236,.8);
128 outline: 0;
129 outline: thin dotted \9; /* IE6-9 */
130 .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)");
131 }
132 } 40 }
133 41
134 // Position radios and checkboxes better 42 // Position radios and checkboxes better
135 input[type="radio"], 43 input[type="radio"],
136 input[type="checkbox"] { 44 input[type="checkbox"] {
137 margin: 4px 0 0; 45 margin: 4px 0 0;
138 *margin-top: 0; /* IE7 */
139 margin-top: 1px \9; /* IE8-9 */ 46 margin-top: 1px \9; /* IE8-9 */
140 line-height: normal; 47 line-height: normal;
141 } 48 }
142 49
143 // Reset width of input images, buttons, radios, checkboxes
144 input[type="file"],
145 input[type="image"],
146 input[type="submit"],
147 input[type="reset"],
148 input[type="button"],
149 input[type="radio"],
150 input[type="checkbox"] {
151 width: auto; // Override of generic input selector
152 }
153
154 // Set the height of select and file controls to match text inputs 50 // Set the height of select and file controls to match text inputs
155 select,
156 input[type="file"] { 51 input[type="file"] {
157 height: @inputHeight; /* In IE7, the height of the select element cannot be changed by height, only font-size */ 52 display: block;
158 *margin-top: 4px; /* For IE7, add top margin to align select with labels */
159 line-height: @inputHeight;
160 }
161
162 // Make select elements obey height by applying a border
163 select {
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
167 } 53 }
168 54
169 // Make multiple select elements height not fixed 55 // Make multiple select elements height not fixed
170 select[multiple], 56 select[multiple],
171 select[size] { 57 select[size] {
172 height: auto; 58 height: auto;
173 } 59 }
174 60
61 // Fix optgroup Firefox bug per https://github.com/twbs/bootstrap/issues/7611
62 select optgroup {
63 font-size: inherit;
64 font-style: inherit;
65 font-family: inherit;
66 }
67
175 // Focus for select, file, radio, and checkbox 68 // Focus for select, file, radio, and checkbox
176 select:focus,
177 input[type="file"]:focus, 69 input[type="file"]:focus,
178 input[type="radio"]:focus, 70 input[type="radio"]:focus,
179 input[type="checkbox"]:focus { 71 input[type="checkbox"]:focus {
180 .tab-focus(); 72 .tab-focus();
181 } 73 }
182 74
183 75 // Fix for Chrome number input
184 // Uneditable inputs 76 // Setting certain font-sizes causes the `I` bar to appear on hover of the bottom increment button.
185 // ------------------------- 77 // See https://github.com/twbs/bootstrap/issues/8350 for more.
186 78 input[type="number"] {
187 // Make uneditable inputs look inactive 79 &::-webkit-outer-spin-button,
188 .uneditable-input, 80 &::-webkit-inner-spin-button {
189 .uneditable-textarea { 81 height: auto;
190 color: @grayLight; 82 }
191 background-color: darken(@inputBackground, 1%); 83 }
192 border-color: @inputBorder; 84
193 .box-shadow(inset 0 1px 2px rgba(0,0,0,.025)); 85 // Adjust output element
194 cursor: not-allowed; 86 output {
195 } 87 display: block;
196 88 padding-top: (@padding-base-vertical + 1);
197 // For text that needs to appear as an input but should not be an input 89 font-size: @font-size-base;
198 .uneditable-input { 90 line-height: @line-height-base;
199 overflow: hidden; // prevent text from wrapping, but still cut it off like an input does 91 color: @input-color;
200 white-space: nowrap; 92 vertical-align: middle;
201 } 93 }
202 94
203 // Make uneditable textareas behave like a textarea 95
204 .uneditable-textarea { 96 // Common form controls
205 width: auto; 97 //
206 height: auto; 98 // Shared size and type resets for form controls. Apply `.form-control` to any
207 } 99 // of the following form controls:
208 100 //
209 101 // select
210 // Placeholder 102 // textarea
211 // ------------------------- 103 // input[type="text"]
212 104 // input[type="password"]
213 // Placeholder text gets special styles because when browsers invalidate entire lines if it doesn't understand a selector 105 // input[type="datetime"]
214 input, 106 // input[type="datetime-local"]
215 textarea { 107 // input[type="date"]
108 // input[type="month"]
109 // input[type="time"]
110 // input[type="week"]
111 // input[type="number"]
112 // input[type="email"]
113 // input[type="url"]
114 // input[type="search"]
115 // input[type="tel"]
116 // input[type="color"]
117
118 .form-control {
119 display: block;
120 width: 100%;
121 height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
122 padding: @padding-base-vertical @padding-base-horizontal;
123 font-size: @font-size-base;
124 line-height: @line-height-base;
125 color: @input-color;
126 vertical-align: middle;
127 background-color: @input-bg;
128 background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
129 border: 1px solid @input-border;
130 border-radius: @input-border-radius;
131 .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
132 .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
133
134 // Customize the `:focus` state to imitate native WebKit styles.
135 .form-control-focus();
136
137 // Placeholder
138 //
139 // Placeholder text gets special styles because when browsers invalidate entire
140 // lines if it doesn't understand a selector/
216 .placeholder(); 141 .placeholder();
217 } 142
218 143 // Disabled and read-only inputs
219 144 // Note: HTML5 says that controls under a fieldset > legend:first-child won't
220 // CHECKBOXES & RADIOS 145 // be disabled if the fieldset is disabled. Due to implementation difficulty,
221 // ------------------- 146 // we don't honor that edge case; we style them as disabled anyway.
222 147 &[disabled],
223 // Indent the labels to position radios/checkboxes as hanging 148 &[readonly],
149 fieldset[disabled] & {
150 cursor: not-allowed;
151 background-color: @input-bg-disabled;
152 }
153
154 // Reset height for `textarea`s
155 textarea& {
156 height: auto;
157 }
158 }
159
160
161 // Form groups
162 //
163 // Designed to help with the organization and spacing of vertical forms. For
164 // horizontal forms, use the predefined grid classes.
165
166 .form-group {
167 margin-bottom: 15px;
168 }
169
170
171 // Checkboxes and radios
172 //
173 // Indent the labels to position radios/checkboxes as hanging controls.
174
224 .radio, 175 .radio,
225 .checkbox { 176 .checkbox {
226 min-height: @baseLineHeight; // clear the floating input if there is no label text 177 display: block;
178 min-height: @line-height-computed; // clear the floating input if there is no label text
179 margin-top: 10px;
180 margin-bottom: 10px;
227 padding-left: 20px; 181 padding-left: 20px;
182 vertical-align: middle;
183 label {
184 display: inline;
185 margin-bottom: 0;
186 font-weight: normal;
187 cursor: pointer;
188 }
228 } 189 }
229 .radio input[type="radio"], 190 .radio input[type="radio"],
230 .checkbox input[type="checkbox"] { 191 .radio-inline input[type="radio"],
192 .checkbox input[type="checkbox"],
193 .checkbox-inline input[type="checkbox"] {
231 float: left; 194 float: left;
232 margin-left: -20px; 195 margin-left: -20px;
233 } 196 }
234 197 .radio + .radio,
235 // Move the options list down to align with labels 198 .checkbox + .checkbox {
236 .controls > .radio:first-child, 199 margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing
237 .controls > .checkbox:first-child {
238 padding-top: 5px; // has to be padding because margin collaspes
239 } 200 }
240 201
241 // Radios and checkboxes on same line 202 // Radios and checkboxes on same line
242 // TODO v3: Convert .inline to .control-inline 203 .radio-inline,
243 .radio.inline, 204 .checkbox-inline {
244 .checkbox.inline {
245 display: inline-block; 205 display: inline-block;
246 padding-top: 5px; 206 padding-left: 20px;
247 margin-bottom: 0; 207 margin-bottom: 0;
248 vertical-align: middle; 208 vertical-align: middle;
249 } 209 font-weight: normal;
250 .radio.inline + .radio.inline, 210 cursor: pointer;
251 .checkbox.inline + .checkbox.inline { 211 }
212 .radio-inline + .radio-inline,
213 .checkbox-inline + .checkbox-inline {
214 margin-top: 0;
252 margin-left: 10px; // space out consecutive inline controls 215 margin-left: 10px; // space out consecutive inline controls
253 } 216 }
254 217
255 218 // Apply same disabled cursor tweak as for inputs
256 219 //
257 // INPUT SIZES 220 // Note: Neither radios nor checkboxes can be readonly.
258 // ----------- 221 input[type="radio"],
259 222 input[type="checkbox"],
260 // General classes for quick sizes 223 .radio,
261 .input-mini { width: 60px; } 224 .radio-inline,
262 .input-small { width: 90px; } 225 .checkbox,
263 .input-medium { width: 150px; } 226 .checkbox-inline {
264 .input-large { width: 210px; } 227 &[disabled],
265 .input-xlarge { width: 270px; } 228 fieldset[disabled] & {
266 .input-xxlarge { width: 530px; } 229 cursor: not-allowed;
267 230 }
268 // Grid style input sizes 231 }
269 input[class*="span"], 232
270 select[class*="span"], 233 // Form control sizing
271 textarea[class*="span"], 234 .input-sm {
272 .uneditable-input[class*="span"], 235 .input-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
273 // Redeclare since the fluid row class is more specific 236 }
274 .row-fluid input[class*="span"], 237
275 .row-fluid select[class*="span"], 238 .input-lg {
276 .row-fluid textarea[class*="span"], 239 .input-size(@input-height-large; @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large);
277 .row-fluid .uneditable-input[class*="span"] { 240 }
278 float: none; 241
279 margin-left: 0; 242
280 } 243 // Form control feedback states
281 // Ensure input-prepend/append never wraps 244 //
282 .input-append input[class*="span"], 245 // Apply contextual and semantic states to individual form controls.
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;
293 }
294
295
296
297 // GRID SIZING FOR INPUTS
298 // ----------------------
299
300 // Grid sizes
301 #grid > .input(@gridColumnWidth, @gridGutterWidth);
302
303 // Control row for multiple inputs per line
304 .controls-row {
305 .clearfix(); // Clear the float from controls
306 }
307
308 // Float to collapse white-space for proper grid alignment
309 .controls-row [class*="span"],
310 // Redeclare the fluid grid collapse since we undo the float for inputs
311 .row-fluid .controls-row [class*="span"] {
312 float: left;
313 }
314 // Explicity set top padding on all checkboxes/radios, not just first-child
315 .controls-row .checkbox[class*="span"],
316 .controls-row .radio[class*="span"] {
317 padding-top: 5px;
318 }
319
320
321
322
323 // DISABLED STATE
324 // --------------
325
326 // Disabled and read-only inputs
327 input[disabled],
328 select[disabled],
329 textarea[disabled],
330 input[readonly],
331 select[readonly],
332 textarea[readonly] {
333 cursor: not-allowed;
334 background-color: @inputDisabledBackground;
335 }
336 // Explicitly reset the colors here
337 input[type="radio"][disabled],
338 input[type="checkbox"][disabled],
339 input[type="radio"][readonly],
340 input[type="checkbox"][readonly] {
341 background-color: transparent;
342 }
343
344
345
346
347 // FORM FIELD FEEDBACK STATES
348 // --------------------------
349 246
350 // Warning 247 // Warning
351 .control-group.warning { 248 .has-warning {
352 .formFieldState(@warningText, @warningText, @warningBackground); 249 .form-control-validation(@state-warning-text; @state-warning-text; @state-warning-bg);
353 } 250 }
354 // Error 251 // Error
355 .control-group.error { 252 .has-error {
356 .formFieldState(@errorText, @errorText, @errorBackground); 253 .form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg);
357 } 254 }
358 // Success 255 // Success
359 .control-group.success { 256 .has-success {
360 .formFieldState(@successText, @successText, @successBackground); 257 .form-control-validation(@state-success-text; @state-success-text; @state-success-bg);
361 } 258 }
362 // Success 259
363 .control-group.info { 260
364 .formFieldState(@infoText, @infoText, @infoBackground); 261 // Static form control text
365 } 262 //
366 263 // Apply class to a `p` element to make any string of text align with labels in
367 // HTML5 invalid states 264 // a horizontal form layout.
368 // Shares styles with the .control-group.error above 265
369 input:focus:invalid, 266 .form-control-static {
370 textarea:focus:invalid, 267 margin-bottom: 0; // Remove default margin from `p`
371 select:focus:invalid { 268 }
372 color: #b94a48; 269
373 border-color: #ee5f5b; 270
374 &:focus { 271 // Help text
375 border-color: darken(#ee5f5b, 10%); 272 //
376 @shadow: 0 0 6px lighten(#ee5f5b, 20%); 273 // Apply to any element you wish to create light text for placement immediately
377 .box-shadow(@shadow); 274 // below a form control. Use for general help, formatting, or instructional text.
378 }
379 }
380
381
382
383 // FORM ACTIONS
384 // ------------
385
386 .form-actions {
387 padding: (@baseLineHeight - 1) 20px @baseLineHeight;
388 margin-top: @baseLineHeight;
389 margin-bottom: @baseLineHeight;
390 background-color: @formActionsBackground;
391 border-top: 1px solid #e5e5e5;
392 .clearfix(); // Adding clearfix to allow for .pull-right button containers
393 }
394
395
396
397 // HELP TEXT
398 // ---------
399
400 .help-block,
401 .help-inline {
402 color: lighten(@textColor, 15%); // lighten the text some for contrast
403 }
404 275
405 .help-block { 276 .help-block {
406 display: block; // account for any element using help-block 277 display: block; // account for any element using help-block
407 margin-bottom: @baseLineHeight / 2; 278 margin-top: 5px;
408 } 279 margin-bottom: 10px;
409 280 color: lighten(@text-color, 25%); // lighten the text some for contrast
410 .help-inline { 281 }
411 display: inline-block; 282
412 .ie7-inline-block(); 283
413 vertical-align: middle; 284
414 padding-left: 5px; 285 // Inline forms
415 } 286 //
416 287 // Make forms appear inline(-block) by adding the `.form-inline` class. Inline
417 288 // forms begin stacked on extra small (mobile) devices and then go inline when
418 289 // viewports reach <768px.
419 // INPUT GROUPS 290 //
420 // ------------ 291 // Requires wrapping inputs and labels with `.form-group` for proper display of
421 292 // default HTML form controls and our custom form controls (e.g., input groups).
422 // Allow us to put symbols and text within the input field for a cleaner look 293 //
423 .input-append, 294 // Heads up! This is mixin-ed into `.navbar-form` in navbars.less.
424 .input-prepend { 295
425 display: inline-block; 296 .form-inline {
426 margin-bottom: @baseLineHeight / 2; 297
427 vertical-align: middle; 298 // Kick in the inline
428 font-size: 0; // white space collapse hack 299 @media (min-width: @screen-sm) {
429 white-space: nowrap; // Prevent span and input from separating 300 // Inline-block all the things for "inline"
430 301 .form-group {
431 // Reset the white space collapse hack 302 display: inline-block;
432 input, 303 margin-bottom: 0;
433 select, 304 vertical-align: middle;
434 .uneditable-input, 305 }
435 .dropdown-menu, 306
436 .popover { 307 // In navbar-form, allow folks to *not* use `.form-group`
437 font-size: @baseFontSize; 308 .form-control {
438 } 309 display: inline-block;
439 310 }
440 input, 311
441 select, 312 // Override `width: 100%;` when not within a `.form-group`
442 .uneditable-input { 313 select.form-control {
443 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 314 width: auto;
444 margin-bottom: 0; // prevent bottom margin from screwing up alignment in stacked forms 315 }
445 *margin-left: 0; 316
446 vertical-align: top; 317 // Remove default margin on radios/checkboxes that were used for stacking, and
447 .border-radius(0 @inputBorderRadius @inputBorderRadius 0); 318 // then undo the floating of radios and checkboxes to match (which also avoids
448 // Make input on top when focused so blue border and shadow always show 319 // a bug in WebKit: https://github.com/twbs/bootstrap/issues/1969).
449 &:focus { 320 .radio,
450 z-index: 2; 321 .checkbox {
451 } 322 display: inline-block;
452 } 323 margin-top: 0;
453 .add-on { 324 margin-bottom: 0;
454 display: inline-block; 325 padding-left: 0;
455 width: auto; 326 }
456 height: @baseLineHeight; 327 .radio input[type="radio"],
457 min-width: 16px; 328 .checkbox input[type="checkbox"] {
458 padding: 4px 5px; 329 float: none;
459 font-size: @baseFontSize; 330 margin-left: 0;
460 font-weight: normal; 331 }
461 line-height: @baseLineHeight; 332 }
462 text-align: center; 333 }
463 text-shadow: 0 1px 0 @white; 334
464 background-color: @grayLighter; 335
465 border: 1px solid #ccc; 336 // Horizontal forms
466 } 337 //
467 .add-on, 338 // Horizontal forms are built on grid classes and allow you to create forms with
468 .btn, 339 // labels on the left and inputs on the right.
469 .btn-group > .dropdown-toggle { 340
470 vertical-align: top;
471 .border-radius(0);
472 }
473 .active {
474 background-color: lighten(@green, 30);
475 border-color: @green;
476 }
477 }
478
479 .input-prepend {
480 .add-on,
481 .btn {
482 margin-right: -1px;
483 }
484 .add-on:first-child,
485 .btn:first-child {
486 // FYI, `.btn:first-child` accounts for a button group that's prepended
487 .border-radius(@inputBorderRadius 0 0 @inputBorderRadius);
488 }
489 }
490
491 .input-append {
492 input,
493 select,
494 .uneditable-input {
495 .border-radius(@inputBorderRadius 0 0 @inputBorderRadius);
496 + .btn-group .btn:last-child {
497 .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
498 }
499 }
500 .add-on,
501 .btn,
502 .btn-group {
503 margin-left: -1px;
504 }
505 .add-on:last-child,
506 .btn:last-child,
507 .btn-group:last-child > .dropdown-toggle {
508 .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
509 }
510 }
511
512 // Remove all border-radius for inputs with both prepend and append
513 .input-prepend.input-append {
514 input,
515 select,
516 .uneditable-input {
517 .border-radius(0);
518 + .btn-group .btn {
519 .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
520 }
521 }
522 .add-on:first-child,
523 .btn:first-child {
524 margin-right: -1px;
525 .border-radius(@inputBorderRadius 0 0 @inputBorderRadius);
526 }
527 .add-on:last-child,
528 .btn:last-child {
529 margin-left: -1px;
530 .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
531 }
532 .btn-group:first-child {
533 margin-left: 0;
534 }
535 }
536
537
538
539
540 // SEARCH FORM
541 // -----------
542
543 input.search-query {
544 padding-right: 14px;
545 padding-right: 4px \9;
546 padding-left: 14px;
547 padding-left: 4px \9; /* IE7-8 doesn't have border-radius, so don't indent the padding */
548 margin-bottom: 0; // Remove the default margin on all inputs
549 .border-radius(15px);
550 }
551
552 /* Allow for input prepend/append in search forms */
553 .form-search .input-append .search-query,
554 .form-search .input-prepend .search-query {
555 .border-radius(0); // Override due to specificity
556 }
557 .form-search .input-append .search-query {
558 .border-radius(14px 0 0 14px);
559 }
560 .form-search .input-append .btn {
561 .border-radius(0 14px 14px 0);
562 }
563 .form-search .input-prepend .search-query {
564 .border-radius(0 14px 14px 0);
565 }
566 .form-search .input-prepend .btn {
567 .border-radius(14px 0 0 14px);
568 }
569
570
571
572
573 // HORIZONTAL & VERTICAL FORMS
574 // ---------------------------
575
576 // Common properties
577 // -----------------
578
579 .form-search,
580 .form-inline,
581 .form-horizontal { 341 .form-horizontal {
582 input, 342
583 textarea, 343 // Consistent vertical alignment of labels, radios, and checkboxes
584 select, 344 .control-label,
585 .help-inline, 345 .radio,
586 .uneditable-input, 346 .checkbox,
587 .input-prepend, 347 .radio-inline,
588 .input-append { 348 .checkbox-inline {
589 display: inline-block; 349 margin-top: 0;
590 .ie7-inline-block();
591 margin-bottom: 0; 350 margin-bottom: 0;
592 vertical-align: middle; 351 padding-top: (@padding-base-vertical + 1); // Default padding plus a border
593 } 352 }
594 // Re-hide hidden elements due to specifity 353 // Account for padding we're adding to ensure the alignment and of help text
595 .hide { 354 // and other content below items
596 display: none; 355 .radio,
597 } 356 .checkbox {
598 } 357 min-height: @line-height-computed + (@padding-base-vertical + 1);
599 .form-search label, 358 }
600 .form-inline label, 359
601 .form-search .btn-group, 360 // Make form groups behave like rows
602 .form-inline .btn-group { 361 .form-group {
603 display: inline-block; 362 .make-row();
604 } 363 }
605 // Remove margin for input-prepend/-append 364
606 .form-search .input-append, 365 .form-control-static {
607 .form-inline .input-append, 366 padding-top: (@padding-base-vertical + 1);
608 .form-search .input-prepend, 367 }
609 .form-inline .input-prepend { 368
610 margin-bottom: 0; 369 // Only right align form labels here when the columns stop stacking
611 } 370 @media (min-width: @screen-sm-min) {
612 // Inline checkbox/radio labels (remove padding on left) 371 .control-label {
613 .form-search .radio, 372 text-align: right;
614 .form-search .checkbox, 373 }
615 .form-inline .radio, 374 }
616 .form-inline .checkbox { 375 }
617 padding-left: 0;
618 margin-bottom: 0;
619 vertical-align: middle;
620 }
621 // Remove float and margin, set to inline-block
622 .form-search .radio input[type="radio"],
623 .form-search .checkbox input[type="checkbox"],
624 .form-inline .radio input[type="radio"],
625 .form-inline .checkbox input[type="checkbox"] {
626 float: left;
627 margin-right: 3px;
628 margin-left: 0;
629 }
630
631
632 // Margin to space out fieldsets
633 .control-group {
634 margin-bottom: @baseLineHeight / 2;
635 }
636
637 // Legend collapses margin, so next element is responsible for spacing
638 legend + .control-group {
639 margin-top: @baseLineHeight;
640 -webkit-margin-top-collapse: separate;
641 }
642
643 // Horizontal-specific styles
644 // --------------------------
645
646 .form-horizontal {
647 // Increase spacing between groups
648 .control-group {
649 margin-bottom: @baseLineHeight;
650 .clearfix();
651 }
652 // Float the labels left
653 .control-label {
654 float: left;
655 width: @horizontalComponentOffset - 20;
656 padding-top: 5px;
657 text-align: right;
658 }
659 // Move over all input controls and content
660 .controls {
661 // Super jank IE7 fix to ensure the inputs in .input-append and input-prepend
662 // don't inherit the margin of the parent, in this case .controls
663 *display: inline-block;
664 *padding-left: 20px;
665 margin-left: @horizontalComponentOffset;
666 *margin-left: 0;
667 &:first-child {
668 *padding-left: @horizontalComponentOffset;
669 }
670 }
671 // Remove bottom margin on block level help text since that's accounted for on .control-group
672 .help-block {
673 margin-bottom: 0;
674 }
675 // And apply it only to .help-block instances that follow a form control
676 input,
677 select,
678 textarea,
679 .uneditable-input,
680 .input-prepend,
681 .input-append {
682 + .help-block {
683 margin-top: @baseLineHeight / 2;
684 }
685 }
686 // Move over buttons in .form-actions to align with .controls
687 .form-actions {
688 padding-left: @horizontalComponentOffset;
689 }
690 }