sass-twitter-bootstrap 2.0.1 → 2.1.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (66) hide show
  1. data/lib/sass/twitter/bootstrap/version.rb +1 -1
  2. data/vendor/assets/images/glyphicons-halflings-white.png +0 -0
  3. data/vendor/assets/images/glyphicons-halflings.png +0 -0
  4. data/vendor/assets/javascripts/twitter/bootstrap-affix.js +104 -0
  5. data/vendor/assets/javascripts/twitter/bootstrap-alert.js +28 -32
  6. data/vendor/assets/javascripts/twitter/bootstrap-button.js +29 -33
  7. data/vendor/assets/javascripts/twitter/bootstrap-carousel.js +43 -24
  8. data/vendor/assets/javascripts/twitter/bootstrap-collapse.js +50 -28
  9. data/vendor/assets/javascripts/twitter/bootstrap-dropdown.js +77 -19
  10. data/vendor/assets/javascripts/twitter/bootstrap-modal.js +113 -84
  11. data/vendor/assets/javascripts/twitter/bootstrap-popover.js +19 -11
  12. data/vendor/assets/javascripts/twitter/bootstrap-scrollspy.js +50 -24
  13. data/vendor/assets/javascripts/twitter/bootstrap-tab.js +13 -8
  14. data/vendor/assets/javascripts/twitter/bootstrap-tooltip.js +44 -39
  15. data/vendor/assets/javascripts/twitter/bootstrap-transition.js +29 -20
  16. data/vendor/assets/javascripts/twitter/bootstrap-typeahead.js +73 -44
  17. data/vendor/assets/javascripts/twitter/bootstrap.js +12 -0
  18. data/vendor/assets/stylesheets/tests/css-tests.css +1 -12
  19. data/vendor/assets/stylesheets/tests/css-tests.html +22 -125
  20. data/vendor/assets/stylesheets/tests/navbar.html +39 -38
  21. data/vendor/assets/stylesheets/twitter/_accordion.scss +8 -2
  22. data/vendor/assets/stylesheets/twitter/_alerts.scss +16 -21
  23. data/vendor/assets/stylesheets/twitter/_breadcrumbs.scss +12 -10
  24. data/vendor/assets/stylesheets/twitter/_button-groups.scss +137 -39
  25. data/vendor/assets/stylesheets/twitter/_buttons.scss +129 -81
  26. data/vendor/assets/stylesheets/twitter/_carousel.scss +13 -3
  27. data/vendor/assets/stylesheets/twitter/_close.scss +16 -3
  28. data/vendor/assets/stylesheets/twitter/_code.scss +11 -10
  29. data/vendor/assets/stylesheets/twitter/_component-animations.scss +12 -8
  30. data/vendor/assets/stylesheets/twitter/_dropdowns.scss +133 -53
  31. data/vendor/assets/stylesheets/twitter/_forms.scss +298 -170
  32. data/vendor/assets/stylesheets/twitter/_grid.scss +17 -4
  33. data/vendor/assets/stylesheets/twitter/_hero-unit.scss +7 -3
  34. data/vendor/assets/stylesheets/twitter/_labels-badges.scss +69 -0
  35. data/vendor/assets/stylesheets/twitter/_layouts.scss +2 -3
  36. data/vendor/assets/stylesheets/twitter/_mixins.scss +359 -258
  37. data/vendor/assets/stylesheets/twitter/_modals.scss +26 -12
  38. data/vendor/assets/stylesheets/twitter/_navbar.scss +318 -143
  39. data/vendor/assets/stylesheets/twitter/_navs.scss +87 -56
  40. data/vendor/assets/stylesheets/twitter/_pager.scss +16 -6
  41. data/vendor/assets/stylesheets/twitter/_pagination.scss +23 -14
  42. data/vendor/assets/stylesheets/twitter/_popovers.scss +101 -33
  43. data/vendor/assets/stylesheets/twitter/_progress-bars.scss +43 -16
  44. data/vendor/assets/stylesheets/twitter/_reset.scss +16 -6
  45. data/vendor/assets/stylesheets/twitter/_responsive-1200px-min.scss +28 -0
  46. data/vendor/assets/stylesheets/twitter/_responsive-767px-max.scss +174 -0
  47. data/vendor/assets/stylesheets/twitter/_responsive-768px-979px.scss +19 -0
  48. data/vendor/assets/stylesheets/twitter/_responsive-navbar.scss +177 -0
  49. data/vendor/assets/stylesheets/twitter/_responsive-utilities.scss +58 -0
  50. data/vendor/assets/stylesheets/twitter/_scaffolding.scss +32 -11
  51. data/vendor/assets/stylesheets/twitter/_sprites.scss +49 -14
  52. data/vendor/assets/stylesheets/twitter/_tables.scss +115 -42
  53. data/vendor/assets/stylesheets/twitter/_thumbnails.scss +23 -6
  54. data/vendor/assets/stylesheets/twitter/_tooltip.scss +47 -12
  55. data/vendor/assets/stylesheets/twitter/_type.scss +96 -93
  56. data/vendor/assets/stylesheets/twitter/_utilities.scss +24 -2
  57. data/vendor/assets/stylesheets/twitter/_variables.scss +202 -31
  58. data/vendor/assets/stylesheets/twitter/_wells.scss +17 -5
  59. data/vendor/assets/stylesheets/twitter/bootstrap.scss +3 -7
  60. data/vendor/assets/stylesheets/twitter/responsive.scss +15 -301
  61. metadata +10 -7
  62. data/vendor/assets/stylesheets/tests/buttons.html +0 -139
  63. data/vendor/assets/stylesheets/tests/forms-responsive.html +0 -71
  64. data/vendor/assets/stylesheets/tests/navbar-fixed-top.html +0 -104
  65. data/vendor/assets/stylesheets/tests/navbar-static-top.html +0 -107
  66. data/vendor/assets/stylesheets/twitter/_labels.scss +0 -32
@@ -1,6 +1,6 @@
1
- // Forms.scss
2
- // Base styles for various input types, form layouts, and states
3
- // -------------------------------------------------------------
1
+ //
2
+ // Forms
3
+ // --------------------------------------------------
4
4
 
5
5
 
6
6
  // GENERAL STYLES
@@ -22,12 +22,12 @@ legend {
22
22
  display: block;
23
23
  width: 100%;
24
24
  padding: 0;
25
- margin-bottom: $baseLineHeight * 1.5;
25
+ margin-bottom: $baseLineHeight;
26
26
  font-size: $baseFontSize * 1.5;
27
27
  line-height: $baseLineHeight * 2;
28
28
  color: $grayDark;
29
29
  border: 0;
30
- border-bottom: 1px solid #eee;
30
+ border-bottom: 1px solid #e5e5e5;
31
31
 
32
32
  // Small
33
33
  small {
@@ -42,104 +42,128 @@ input,
42
42
  button,
43
43
  select,
44
44
  textarea {
45
- @include font-shorthand(); // Set size, weight, line-height here
45
+ @include font-shorthand($baseFontSize, normal, $baseLineHeight); // Set size, weight, line-height here
46
46
  }
47
47
  input,
48
48
  button,
49
49
  select,
50
50
  textarea {
51
- @include font-family-sans-serif(); // And only set font-family here for those that need it (note the missing label element)
51
+ font-family: $baseFontFamily; // And only set font-family here for those that need it (note the missing label element)
52
52
  }
53
53
 
54
54
  // Identify controls by their labels
55
55
  label {
56
56
  display: block;
57
57
  margin-bottom: 5px;
58
- color: $grayDark;
59
58
  }
60
59
 
61
- // Inputs, Textareas, Selects
62
- input,
63
- textarea,
60
+ // Form controls
61
+ // -------------------------
62
+
63
+ // Shared size and type resets
64
64
  select,
65
+ textarea,
66
+ input[type="text"],
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"],
65
80
  .uneditable-input {
66
81
  display: inline-block;
67
- width: 210px;
68
82
  height: $baseLineHeight;
69
- padding: 4px;
83
+ padding: 4px 6px;
70
84
  margin-bottom: 9px;
71
85
  font-size: $baseFontSize;
72
86
  line-height: $baseLineHeight;
73
87
  color: $gray;
74
- border: 1px solid #ccc;
75
- @include border-radius(3px);
88
+ @include border-radius($inputBorderRadius);
76
89
  }
77
- .uneditable-textarea {
78
- width: auto;
90
+
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)
93
+ input,
94
+ textarea,
95
+ .uneditable-input {
96
+ width: 206px; // plus 12px padding and 2px border
97
+ }
98
+ // Reset height since textareas have rows
99
+ textarea {
79
100
  height: auto;
80
101
  }
102
+ // Everything else
103
+ textarea,
104
+ input[type="text"],
105
+ input[type="password"],
106
+ input[type="datetime"],
107
+ input[type="datetime-local"],
108
+ input[type="date"],
109
+ input[type="month"],
110
+ input[type="time"],
111
+ input[type="week"],
112
+ input[type="number"],
113
+ input[type="email"],
114
+ input[type="url"],
115
+ input[type="search"],
116
+ input[type="tel"],
117
+ input[type="color"],
118
+ .uneditable-input {
119
+ background-color: $inputBackground;
120
+ border: 1px solid $inputBorder;
121
+ @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
122
+ @include transition(#{border linear .2s, box-shadow linear .2s});
81
123
 
82
- // Inputs within a label
83
- label input,
84
- label textarea,
85
- label select {
86
- display: block;
124
+ // Focus state
125
+ &:focus {
126
+ border-color: rgba(82,168,236,.8);
127
+ outline: 0;
128
+ outline: thin dotted \9; /* IE6-9 */
129
+ @include box-shadow(#{inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)});
130
+ }
87
131
  }
88
132
 
89
- // Mini reset for unique input types
90
- input[type="image"],
91
- input[type="checkbox"],
92
- input[type="radio"] {
93
- width: auto;
94
- height: auto;
95
- padding: 0;
96
- margin: 3px 0;
133
+ // Position radios and checkboxes better
134
+ input[type="radio"],
135
+ input[type="checkbox"] {
136
+ margin: 4px 0 0;
97
137
  *margin-top: 0; /* IE7 */
138
+ margin-top: 1px \9; /* IE8-9 */
98
139
  line-height: normal;
99
140
  cursor: pointer;
100
- @include border-radius(0);
101
- border: 0 \9; /* IE9 and down */
102
- }
103
- input[type="image"] {
104
- border: 0;
105
- }
106
-
107
- // Reset the file input to browser defaults
108
- input[type="file"] {
109
- width: auto;
110
- padding: initial;
111
- line-height: initial;
112
- border: initial;
113
- background-color: $white;
114
- background-color: initial;
115
- @include box-shadow(none);
116
141
  }
117
142
 
118
- // Help out input buttons
119
- input[type="button"],
143
+ // Reset width of input images, buttons, radios, checkboxes
144
+ input[type="file"],
145
+ input[type="image"],
146
+ input[type="submit"],
120
147
  input[type="reset"],
121
- input[type="submit"] {
122
- width: auto;
123
- height: auto;
148
+ input[type="button"],
149
+ input[type="radio"],
150
+ input[type="checkbox"] {
151
+ width: auto; // Override of generic input selector
124
152
  }
125
153
 
126
154
  // Set the height of select and file controls to match text inputs
127
155
  select,
128
156
  input[type="file"] {
129
- height: 28px; /* In IE7, the height of the select element cannot be changed by height, only font-size */
157
+ height: 30px; /* In IE7, the height of the select element cannot be changed by height, only font-size */
130
158
  *margin-top: 4px; /* For IE7, add top margin to align select with labels */
131
- line-height: 28px;
159
+ line-height: 30px;
132
160
  }
133
161
 
134
- // Reset line-height for IE
135
- input[type="file"] {
136
- line-height: 18px \9;
137
- }
138
-
139
- // Chrome on Linux and Mobile Safari need background-color
162
+ // Make select elements obey height by applying a border
140
163
  select {
141
164
  width: 220px; // default input width + 10px of padding that doesn't get applied
142
- background-color: $white;
165
+ border: 1px solid $inputBorder;
166
+ background-color: $inputBackground; // Chrome on Linux and Mobile Safari need background-color
143
167
  }
144
168
 
145
169
  // Make multiple select elements height not fixed
@@ -148,22 +172,50 @@ select[size] {
148
172
  height: auto;
149
173
  }
150
174
 
151
- // Remove shadow from image inputs
152
- input[type="image"] {
153
- @include box-shadow(none);
175
+ // Focus for select, file, radio, and checkbox
176
+ select:focus,
177
+ input[type="file"]:focus,
178
+ input[type="radio"]:focus,
179
+ input[type="checkbox"]:focus {
180
+ @include tab-focus();
154
181
  }
155
182
 
156
- // Make textarea height behave
157
- textarea {
158
- height: auto;
183
+
184
+ // Uneditable inputs
185
+ // -------------------------
186
+
187
+ // Make uneditable inputs look inactive
188
+ .uneditable-input,
189
+ .uneditable-textarea {
190
+ color: $grayLight;
191
+ background-color: darken($inputBackground, 1%);
192
+ border-color: $inputBorder;
193
+ @include box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
194
+ cursor: not-allowed;
195
+ }
196
+
197
+ // For text that needs to appear as an input but should not be an input
198
+ .uneditable-input {
199
+ overflow: hidden; // prevent text from wrapping, but still cut it off like an input does
200
+ white-space: nowrap;
159
201
  }
160
202
 
161
- // Hidden inputs
162
- input[type="hidden"] {
163
- display: none;
203
+ // Make uneditable textareas behave like a textarea
204
+ .uneditable-textarea {
205
+ width: auto;
206
+ height: auto;
164
207
  }
165
208
 
166
209
 
210
+ // Placeholder
211
+ // -------------------------
212
+
213
+ // Placeholder text gets special styles because when browsers invalidate entire lines if it doesn’t understand a selector
214
+ input,
215
+ textarea {
216
+ @include placeholder();
217
+ }
218
+
167
219
 
168
220
  // CHECKBOXES & RADIOS
169
221
  // -------------------
@@ -171,6 +223,7 @@ input[type="hidden"] {
171
223
  // Indent the labels to position radios/checkboxes as hanging
172
224
  .radio,
173
225
  .checkbox {
226
+ min-height: 18px; // clear the floating input if there is no label text
174
227
  padding-left: 18px;
175
228
  }
176
229
  .radio input[type="radio"],
@@ -201,33 +254,6 @@ input[type="hidden"] {
201
254
 
202
255
 
203
256
 
204
- // FOCUS STATE
205
- // -----------
206
-
207
- input,
208
- textarea {
209
- @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
210
- $transition: border linear .2s, box-shadow linear .2s;
211
- @include transition($transition);
212
- }
213
- input:focus,
214
- textarea:focus {
215
- border-color: rgba(82,168,236,.8);
216
- $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
217
- @include box-shadow($shadow);
218
- outline: 0;
219
- outline: thin dotted \9; /* IE6-9 */
220
- }
221
- input[type="file"]:focus,
222
- input[type="radio"]:focus,
223
- input[type="checkbox"]:focus,
224
- select:focus {
225
- @include box-shadow(none); // override for file inputs
226
- @include tab-focus();
227
- }
228
-
229
-
230
-
231
257
  // INPUT SIZES
232
258
  // -----------
233
259
 
@@ -243,17 +269,44 @@ select:focus {
243
269
  input[class*="span"],
244
270
  select[class*="span"],
245
271
  textarea[class*="span"],
246
- .uneditable-input {
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"] {
247
278
  float: none;
248
279
  margin-left: 0;
249
280
  }
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;
293
+ }
250
294
 
251
295
 
252
296
 
253
297
  // GRID SIZING FOR INPUTS
254
298
  // ----------------------
255
299
 
256
- @include inputGridSystem-generate($gridColumns, $gridColumnWidth, $gridGutterWidth);
300
+ // Grid sizes
301
+ @include grid-input($gridColumnWidth, $gridGutterWidth);
302
+
303
+ // Control row for multiple inputs per line
304
+ .controls-row {
305
+ @include clearfix(); // Clear the float from controls
306
+ }
307
+ .controls-row [class*="span"] {
308
+ float: left; // Float to collapse white-space for proper grid alignment
309
+ }
257
310
 
258
311
 
259
312
 
@@ -268,9 +321,15 @@ textarea[disabled],
268
321
  input[readonly],
269
322
  select[readonly],
270
323
  textarea[readonly] {
271
- background-color: #f5f5f5;
272
- border-color: #ddd;
273
324
  cursor: not-allowed;
325
+ background-color: $inputDisabledBackground;
326
+ }
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;
274
333
  }
275
334
 
276
335
 
@@ -291,6 +350,10 @@ textarea[readonly] {
291
350
  .control-group.success {
292
351
  @include formFieldState($successText, $successText, $successBackground);
293
352
  }
353
+ // Info
354
+ .control-group.info {
355
+ @include formFieldState($infoText, $infoText, $infoBackground);
356
+ }
294
357
 
295
358
  // HTML5 invalid states
296
359
  // Shares styles with the .control-group.error above
@@ -301,7 +364,7 @@ select:focus:required:invalid {
301
364
  border-color: #ee5f5b;
302
365
  &:focus {
303
366
  border-color: darken(#ee5f5b, 10%);
304
- @include box-shadow(0 0 6px lighten(#ee5f5b, 20%));
367
+ @include box-shadow(0 0 6px lighten(#ee5f5b, 20%));
305
368
  }
306
369
  }
307
370
 
@@ -314,38 +377,29 @@ select:focus:required:invalid {
314
377
  padding: ($baseLineHeight - 1) 20px $baseLineHeight;
315
378
  margin-top: $baseLineHeight;
316
379
  margin-bottom: $baseLineHeight;
317
- background-color: #f5f5f5;
318
- border-top: 1px solid #ddd;
319
- }
320
-
321
- // For text that needs to appear as an input but should not be an input
322
- .uneditable-input {
323
- display: block;
324
- background-color: $white;
325
- border-color: #eee;
326
- @include box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
327
- cursor: not-allowed;
380
+ background-color: $formActionsBackground;
381
+ border-top: 1px solid #e5e5e5;
382
+ @include clearfix(); // Adding clearfix to allow for .pull-right button containers
328
383
  }
329
384
 
330
- // Placeholder text gets special styles; can't be bundled together though for some reason
331
- @include placeholder($grayLight);
332
-
333
385
 
334
386
 
335
387
  // HELP TEXT
336
388
  // ---------
337
389
 
390
+ .help-block,
391
+ .help-inline {
392
+ color: lighten($textColor, 15%); // lighten the text some for contrast
393
+ }
394
+
338
395
  .help-block {
339
396
  display: block; // account for any element using help-block
340
- margin-top: 5px;
341
- margin-bottom: 0;
342
- color: $grayLight;
397
+ margin-bottom: $baseLineHeight / 2;
343
398
  }
344
399
 
345
400
  .help-inline {
346
401
  display: inline-block;
347
402
  @include ie7-inline-block();
348
- margin-bottom: 9px;
349
403
  vertical-align: middle;
350
404
  padding-left: 5px;
351
405
  }
@@ -356,37 +410,44 @@ select:focus:required:invalid {
356
410
  // ------------
357
411
 
358
412
  // Allow us to put symbols and text within the input field for a cleaner look
359
- .input-prepend,
360
- .input-append {
413
+ .input-append,
414
+ .input-prepend {
361
415
  margin-bottom: 5px;
362
- @include clearfix(); // Clear the float to prevent wrapping
416
+ font-size: 0;
417
+ white-space: nowrap; // Prevent span and input from separating
418
+
363
419
  input,
420
+ select,
364
421
  .uneditable-input {
365
- @include border-radius(0 3px 3px 0);
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
424
+ *margin-left: 0;
425
+ font-size: $baseFontSize;
426
+ vertical-align: top;
427
+ @include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
428
+ // Make input on top when focused so blue border and shadow always show
366
429
  &:focus {
367
- position: relative;
368
430
  z-index: 2;
369
431
  }
370
432
  }
371
- .uneditable-input {
372
- border-left-color: #ccc;
373
- }
374
433
  .add-on {
375
- float: left;
376
- display: block;
434
+ display: inline-block;
377
435
  width: auto;
378
- min-width: 16px;
379
436
  height: $baseLineHeight;
380
- margin-right: -1px;
437
+ min-width: 16px;
381
438
  padding: 4px 5px;
439
+ font-size: $baseFontSize;
382
440
  font-weight: normal;
383
441
  line-height: $baseLineHeight;
384
- color: $grayLight;
385
442
  text-align: center;
386
443
  text-shadow: 0 1px 0 $white;
387
- background-color: #f5f5f5;
444
+ background-color: $grayLighter;
388
445
  border: 1px solid #ccc;
389
- @include border-radius(3px 0 0 3px);
446
+ }
447
+ .add-on,
448
+ .btn {
449
+ vertical-align: top;
450
+ @include border-radius(0);
390
451
  }
391
452
  .active {
392
453
  background-color: lighten($green, 30);
@@ -394,33 +455,46 @@ select:focus:required:invalid {
394
455
  }
395
456
  }
396
457
  .input-prepend {
397
- .add-on {
398
- *margin-top: 1px; /* IE6-7 */
458
+ .add-on,
459
+ .btn {
460
+ margin-right: -1px;
461
+ }
462
+ .add-on:first-child,
463
+ .btn:first-child {
464
+ @include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
399
465
  }
400
466
  }
401
467
  .input-append {
402
468
  input,
469
+ select,
403
470
  .uneditable-input {
404
- float: left;
405
- @include border-radius(3px 0 0 3px);
471
+ @include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
472
+ }
473
+ .add-on,
474
+ .btn {
475
+ margin-left: -1px;
406
476
  }
477
+ .add-on:last-child,
478
+ .btn:last-child {
479
+ @include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
480
+ }
481
+ }
482
+ // Remove all border-radius for inputs with both prepend and append
483
+ .input-prepend.input-append {
484
+ input,
485
+ select,
407
486
  .uneditable-input {
408
- border-left-color: #eee;
409
- border-right-color: #ccc;
487
+ @include border-radius(0);
410
488
  }
411
- .add-on {
412
- margin-right: 0;
413
- margin-left: -1px;
414
- @include border-radius(0 3px 3px 0);
489
+ .add-on:first-child,
490
+ .btn:first-child {
491
+ margin-right: -1px;
492
+ @include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
415
493
  }
416
- input:first-child {
417
- // In IE7, having a hasLayout container (from clearfix's zoom:1) can make the first input
418
- // inherit the sum of its ancestors' margins.
419
- *margin-left: -160px;
420
-
421
- &+.add-on {
422
- *margin-left: -21px;
423
- }
494
+ .add-on:last-child,
495
+ .btn:last-child {
496
+ margin-left: -1px;
497
+ @include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
424
498
  }
425
499
  }
426
500
 
@@ -429,15 +503,36 @@ select:focus:required:invalid {
429
503
  // SEARCH FORM
430
504
  // -----------
431
505
 
432
- .search-query {
433
- padding-left: 14px;
506
+ input.search-query {
434
507
  padding-right: 14px;
435
- margin-bottom: 0; // remove the default margin on all inputs
436
- @include border-radius(14px);
508
+ padding-right: 4px \9;
509
+ padding-left: 14px;
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
+ @include border-radius(15px);
513
+ }
514
+
515
+ /* Allow for input prepend/append in search forms */
516
+ .form-search .input-append .search-query,
517
+ .form-search .input-prepend .search-query {
518
+ @include border-radius(0); // Override due to specificity
519
+ }
520
+ .form-search .input-append .search-query {
521
+ @include border-radius(14px 0 0 14px);
522
+ }
523
+ .form-search .input-append .btn {
524
+ @include border-radius(0 14px 14px 0);
525
+ }
526
+ .form-search .input-prepend .search-query {
527
+ @include border-radius(0 14px 14px 0);
528
+ }
529
+ .form-search .input-prepend .btn {
530
+ @include border-radius(14px 0 0 14px);
437
531
  }
438
532
 
439
533
 
440
534
 
535
+
441
536
  // HORIZONTAL & VERTICAL FORMS
442
537
  // ---------------------------
443
538
 
@@ -451,9 +546,13 @@ select:focus:required:invalid {
451
546
  textarea,
452
547
  select,
453
548
  .help-inline,
454
- .uneditable-input {
549
+ .uneditable-input,
550
+ .input-prepend,
551
+ .input-append {
455
552
  display: inline-block;
553
+ @include ie7-inline-block();
456
554
  margin-bottom: 0;
555
+ vertical-align: middle;
457
556
  }
458
557
  // Re-hide hidden elements due to specifity
459
558
  .hide {
@@ -462,27 +561,36 @@ select:focus:required:invalid {
462
561
  }
463
562
  .form-search label,
464
563
  .form-inline label,
564
+ .form-search .btn-group,
565
+ .form-inline .btn-group {
566
+ display: inline-block;
567
+ }
568
+ // Remove margin for input-prepend/-append
465
569
  .form-search .input-append,
466
570
  .form-inline .input-append,
467
571
  .form-search .input-prepend,
468
572
  .form-inline .input-prepend {
469
- display: inline-block;
470
- }
471
- // Make the prepend and append add-on vertical-align: middle;
472
- .form-search .input-append .add-on,
473
- .form-inline .input-prepend .add-on,
474
- .form-search .input-append .add-on,
475
- .form-inline .input-prepend .add-on {
476
- vertical-align: middle;
573
+ margin-bottom: 0;
477
574
  }
478
- // Inline checkbox/radio labels
575
+ // Inline checkbox/radio labels (remove padding on left)
479
576
  .form-search .radio,
480
- .form-inline .radio,
481
577
  .form-search .checkbox,
578
+ .form-inline .radio,
482
579
  .form-inline .checkbox {
580
+ padding-left: 0;
483
581
  margin-bottom: 0;
484
582
  vertical-align: middle;
485
583
  }
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"] {
589
+ float: left;
590
+ margin-right: 3px;
591
+ margin-left: 0;
592
+ }
593
+
486
594
 
487
595
  // Margin to space out fieldsets
488
596
  .control-group {
@@ -507,16 +615,36 @@ legend + .control-group {
507
615
  // Float the labels left
508
616
  .control-label {
509
617
  float: left;
510
- width: 140px;
618
+ width: $horizontalComponentOffset - 20;
511
619
  padding-top: 5px;
512
620
  text-align: right;
513
621
  }
514
622
  // Move over all input controls and content
515
623
  .controls {
516
- margin-left: 160px;
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;
627
+ *padding-left: 20px;
628
+ margin-left: $horizontalComponentOffset;
629
+ *margin-left: 0;
630
+ &:first-child {
631
+ *padding-left: $horizontalComponentOffset;
632
+ }
633
+ }
634
+ // Remove bottom margin on block level help text since that's accounted for on .control-group
635
+ .help-block {
636
+ margin-bottom: 0;
637
+ }
638
+ // And apply it only to .help-block instances that follow a form control
639
+ input,
640
+ select,
641
+ textarea {
642
+ + .help-block {
643
+ margin-top: $baseLineHeight / 2;
644
+ }
517
645
  }
518
646
  // Move over buttons in .form-actions to align with .controls
519
647
  .form-actions {
520
- padding-left: 160px;
648
+ padding-left: $horizontalComponentOffset;
521
649
  }
522
650
  }