less-rails-bootstrap 2.3.3 → 3.0.0.rc1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (72) hide show
  1. data/.gitignore +1 -0
  2. data/CHANGELOG.md +4 -0
  3. data/README.md +7 -11
  4. data/lib/less/rails/bootstrap/version.rb +1 -1
  5. data/scripts/update_bootstrap.sh +37 -8
  6. data/test/cases/usage_css_spec.rb +15 -12
  7. data/test/cases/usage_js_spec.rb +4 -4
  8. data/test/dummy_app/app/assets/stylesheets/fonts.css.less +2 -0
  9. data/test/dummy_app/app/assets/stylesheets/framework.css.less +4 -2
  10. data/test/dummy_app/app/assets/stylesheets/individual.css.less +2 -2
  11. data/test/spec_helper.rb +1 -2
  12. data/vendor/assets/javascripts/twitter/bootstrap.js +0 -1
  13. data/vendor/assets/javascripts/twitter/bootstrap/affix.js +58 -49
  14. data/vendor/assets/javascripts/twitter/bootstrap/alert.js +36 -37
  15. data/vendor/assets/javascripts/twitter/bootstrap/button.js +41 -39
  16. data/vendor/assets/javascripts/twitter/bootstrap/carousel.js +131 -125
  17. data/vendor/assets/javascripts/twitter/bootstrap/collapse.js +108 -96
  18. data/vendor/assets/javascripts/twitter/bootstrap/dropdown.js +72 -87
  19. data/vendor/assets/javascripts/twitter/bootstrap/modal.js +149 -155
  20. data/vendor/assets/javascripts/twitter/bootstrap/popover.js +60 -59
  21. data/vendor/assets/javascripts/twitter/bootstrap/scrollspy.js +103 -107
  22. data/vendor/assets/javascripts/twitter/bootstrap/tab.js +73 -82
  23. data/vendor/assets/javascripts/twitter/bootstrap/tooltip.js +258 -255
  24. data/vendor/assets/javascripts/twitter/bootstrap/transition.js +34 -38
  25. data/vendor/frameworks/twitter/bootstrap/accordion.less +9 -12
  26. data/vendor/frameworks/twitter/bootstrap/alerts.less +43 -53
  27. data/vendor/frameworks/twitter/bootstrap/bootstrap.less +21 -21
  28. data/vendor/frameworks/twitter/bootstrap/breadcrumbs.less +7 -8
  29. data/vendor/frameworks/twitter/bootstrap/button-groups.less +93 -151
  30. data/vendor/frameworks/twitter/bootstrap/buttons.less +93 -164
  31. data/vendor/frameworks/twitter/bootstrap/carousel.less +110 -63
  32. data/vendor/frameworks/twitter/bootstrap/close.less +18 -17
  33. data/vendor/frameworks/twitter/bootstrap/code.less +14 -20
  34. data/vendor/frameworks/twitter/bootstrap/component-animations.less +10 -3
  35. data/vendor/frameworks/twitter/bootstrap/dropdowns.less +66 -143
  36. data/vendor/frameworks/twitter/bootstrap/forms.less +281 -548
  37. data/vendor/frameworks/twitter/bootstrap/grid.less +194 -11
  38. data/vendor/frameworks/twitter/bootstrap/media.less +8 -7
  39. data/vendor/frameworks/twitter/bootstrap/mixins.less +290 -446
  40. data/vendor/frameworks/twitter/bootstrap/modals.less +92 -51
  41. data/vendor/frameworks/twitter/bootstrap/navbar.less +285 -402
  42. data/vendor/frameworks/twitter/bootstrap/navs.less +176 -348
  43. data/vendor/frameworks/twitter/bootstrap/pager.less +45 -33
  44. data/vendor/frameworks/twitter/bootstrap/pagination.less +89 -104
  45. data/vendor/frameworks/twitter/bootstrap/popovers.less +53 -51
  46. data/vendor/frameworks/twitter/bootstrap/progress-bars.less +28 -45
  47. data/vendor/frameworks/twitter/bootstrap/responsive-utilities.less +92 -32
  48. data/vendor/frameworks/twitter/bootstrap/scaffolding.less +60 -18
  49. data/vendor/frameworks/twitter/bootstrap/tables.less +131 -164
  50. data/vendor/frameworks/twitter/bootstrap/thumbnails.less +20 -31
  51. data/vendor/frameworks/twitter/bootstrap/tooltip.less +45 -20
  52. data/vendor/frameworks/twitter/bootstrap/type.less +84 -99
  53. data/vendor/frameworks/twitter/bootstrap/utilities.less +17 -5
  54. data/vendor/frameworks/twitter/bootstrap/variables.less +446 -179
  55. data/vendor/frameworks/twitter/bootstrap/wells.less +5 -5
  56. metadata +41 -44
  57. data/vendor/assets/images/twitter/bootstrap/glyphicons-halflings-white.png +0 -0
  58. data/vendor/assets/images/twitter/bootstrap/glyphicons-halflings.png +0 -0
  59. data/vendor/assets/javascripts/twitter/bootstrap/typeahead.js +0 -335
  60. data/vendor/assets/stylesheets/twitter/bootstrap-responsive.css.less +0 -1
  61. data/vendor/assets/stylesheets/twitter/bootstrap.css.less +0 -1
  62. data/vendor/frameworks/twitter/bootstrap.less +0 -1
  63. data/vendor/frameworks/twitter/bootstrap/hero-unit.less +0 -25
  64. data/vendor/frameworks/twitter/bootstrap/labels-badges.less +0 -84
  65. data/vendor/frameworks/twitter/bootstrap/layouts.less +0 -16
  66. data/vendor/frameworks/twitter/bootstrap/reset.less +0 -216
  67. data/vendor/frameworks/twitter/bootstrap/responsive-1200px-min.less +0 -28
  68. data/vendor/frameworks/twitter/bootstrap/responsive-767px-max.less +0 -193
  69. data/vendor/frameworks/twitter/bootstrap/responsive-768px-979px.less +0 -19
  70. data/vendor/frameworks/twitter/bootstrap/responsive-navbar.less +0 -189
  71. data/vendor/frameworks/twitter/bootstrap/responsive.less +0 -48
  72. data/vendor/frameworks/twitter/bootstrap/sprites.less +0 -197
@@ -5,28 +5,29 @@
5
5
 
6
6
  .close {
7
7
  float: right;
8
- font-size: 20px;
8
+ font-size: (@font-size-base * 1.5);
9
9
  font-weight: bold;
10
- line-height: @baseLineHeight;
11
- color: @black;
12
- text-shadow: 0 1px 0 rgba(255,255,255,1);
13
- .opacity(20);
10
+ line-height: 1;
11
+ color: @close-color;
12
+ text-shadow: @close-text-shadow;
13
+ .opacity(.2);
14
+
14
15
  &:hover,
15
16
  &:focus {
16
- color: @black;
17
+ color: @close-color;
17
18
  text-decoration: none;
18
19
  cursor: pointer;
19
- .opacity(40);
20
+ .opacity(.5);
20
21
  }
21
- }
22
22
 
23
- // Additional properties for button version
24
- // iOS requires the button element instead of an anchor tag.
25
- // If you want the anchor version, it requires `href="#"`.
26
- button.close {
27
- padding: 0;
28
- cursor: pointer;
29
- background: transparent;
30
- border: 0;
31
- -webkit-appearance: none;
23
+ // Additional properties for button version
24
+ // iOS requires the button element instead of an anchor tag.
25
+ // If you want the anchor version, it requires `href="#"`.
26
+ button& {
27
+ padding: 0;
28
+ cursor: pointer;
29
+ background: transparent;
30
+ border: 0;
31
+ -webkit-appearance: none;
32
+ }
32
33
  }
@@ -6,48 +6,42 @@
6
6
  // Inline and block code styles
7
7
  code,
8
8
  pre {
9
- padding: 0 3px 2px;
10
- #font > #family > .monospace;
11
- font-size: @baseFontSize - 2;
12
- color: @grayDark;
13
- .border-radius(3px);
9
+ font-family: @font-family-monospace;
14
10
  }
15
11
 
16
12
  // Inline code
17
13
  code {
18
14
  padding: 2px 4px;
19
- color: #d14;
20
- background-color: #f7f7f9;
21
- border: 1px solid #e1e1e8;
15
+ font-size: 90%;
16
+ color: @code-color;
17
+ background-color: @code-bg;
22
18
  white-space: nowrap;
19
+ border-radius: 4px;
23
20
  }
24
21
 
25
22
  // Blocks of code
26
23
  pre {
27
24
  display: block;
28
- padding: (@baseLineHeight - 1) / 2;
29
- margin: 0 0 @baseLineHeight / 2;
30
- font-size: @baseFontSize - 1; // 14px to 13px
31
- line-height: @baseLineHeight;
25
+ padding: ((@line-height-computed - 1) / 2);
26
+ margin: 0 0 (@line-height-computed / 2);
27
+ font-size: (@font-size-base - 1); // 14px to 13px
28
+ line-height: @line-height-base;
32
29
  word-break: break-all;
33
30
  word-wrap: break-word;
34
- white-space: pre;
35
- white-space: pre-wrap;
36
- background-color: #f5f5f5;
37
- border: 1px solid #ccc; // fallback for IE7-8
38
- border: 1px solid rgba(0,0,0,.15);
39
- .border-radius(@baseBorderRadius);
31
+ color: @gray-dark;
32
+ background-color: @pre-bg;
33
+ border: 1px solid @pre-border-color;
34
+ border-radius: @border-radius-base;
40
35
 
41
36
  // Make prettyprint styles more spaced out for readability
42
37
  &.prettyprint {
43
- margin-bottom: @baseLineHeight;
38
+ margin-bottom: @line-height-computed;
44
39
  }
45
40
 
46
41
  // Account for some code outputs that place code tags in pre tags
47
42
  code {
48
43
  padding: 0;
49
44
  color: inherit;
50
- white-space: pre;
51
45
  white-space: pre-wrap;
52
46
  background-color: transparent;
53
47
  border: 0;
@@ -2,6 +2,10 @@
2
2
  // Component animations
3
3
  // --------------------------------------------------
4
4
 
5
+ // Heads up!
6
+ //
7
+ // We don't use the `.opacity()` mixin here since it causes a bug with text
8
+ // fields in IE7-8. Source: https://github.com/twitter/bootstrap/pull/3552.
5
9
 
6
10
  .fade {
7
11
  opacity: 0;
@@ -12,11 +16,14 @@
12
16
  }
13
17
 
14
18
  .collapse {
19
+ display: none;
20
+ &.in {
21
+ display: block;
22
+ }
23
+ }
24
+ .collapsing {
15
25
  position: relative;
16
26
  height: 0;
17
27
  overflow: hidden;
18
28
  .transition(height .35s ease);
19
- &.in {
20
- height: auto;
21
- }
22
29
  }
@@ -3,62 +3,39 @@
3
3
  // --------------------------------------------------
4
4
 
5
5
 
6
- // Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
7
- .dropup,
8
- .dropdown {
9
- position: relative;
10
- }
11
- .dropdown-toggle {
12
- // The caret makes the toggle a bit too tall in IE7
13
- *margin-bottom: -3px;
14
- }
15
- .dropdown-toggle:active,
16
- .open .dropdown-toggle {
17
- outline: 0;
18
- }
19
-
20
6
  // Dropdown arrow/caret
21
7
  // --------------------
22
8
  .caret {
23
9
  display: inline-block;
24
10
  width: 0;
25
11
  height: 0;
26
- vertical-align: top;
27
- border-top: 4px solid @black;
12
+ margin-left: 2px;
13
+ vertical-align: middle;
14
+ border-top: 4px solid @dropdown-caret-color;
28
15
  border-right: 4px solid transparent;
29
16
  border-left: 4px solid transparent;
30
17
  content: "";
31
18
  }
32
19
 
33
- // Place the caret
34
- .dropdown .caret {
35
- margin-top: 8px;
36
- margin-left: 2px;
37
- }
38
-
39
20
  // The dropdown menu (ul)
40
21
  // ----------------------
41
22
  .dropdown-menu {
42
23
  position: absolute;
43
24
  top: 100%;
44
25
  left: 0;
45
- z-index: @zindexDropdown;
26
+ z-index: @zindex-dropdown;
46
27
  display: none; // none by default, but block on "open" of the menu
47
28
  float: left;
48
29
  min-width: 160px;
49
30
  padding: 5px 0;
50
31
  margin: 2px 0 0; // override default ul
51
32
  list-style: none;
52
- background-color: @dropdownBackground;
53
- border: 1px solid #ccc; // Fallback for IE7-8
54
- border: 1px solid @dropdownBorder;
55
- *border-right-width: 2px;
56
- *border-bottom-width: 2px;
57
- .border-radius(6px);
58
- .box-shadow(0 5px 10px rgba(0,0,0,.2));
59
- -webkit-background-clip: padding-box;
60
- -moz-background-clip: padding;
61
- background-clip: padding-box;
33
+ background-color: @dropdown-bg;
34
+ border: 1px solid @dropdown-fallback-border; // IE8 fallback
35
+ border: 1px solid @dropdown-border;
36
+ border-radius: @border-radius-base;
37
+ .box-shadow(0 6px 12px rgba(0,0,0,.175));
38
+ .background-clip(padding-box);
62
39
 
63
40
  // Aligns the dropdown menu to right
64
41
  &.pull-right {
@@ -68,7 +45,7 @@
68
45
 
69
46
  // Dividers (basically an hr) within the dropdown
70
47
  .divider {
71
- .nav-divider(@dropdownDividerTop, @dropdownDividerBottom);
48
+ .nav-divider(@dropdown-divider-bg);
72
49
  }
73
50
 
74
51
  // Links within the dropdown menu
@@ -77,64 +54,84 @@
77
54
  padding: 3px 20px;
78
55
  clear: both;
79
56
  font-weight: normal;
80
- line-height: @baseLineHeight;
81
- color: @dropdownLinkColor;
82
- white-space: nowrap;
57
+ line-height: @line-height-base;
58
+ color: @dropdown-link-color;
59
+ white-space: nowrap; // prevent links from randomly breaking onto new lines
83
60
  }
84
61
  }
85
62
 
86
63
  // Hover/Focus state
87
64
  // -----------
88
- .dropdown-menu > li > a:hover,
89
- .dropdown-menu > li > a:focus,
90
- .dropdown-submenu:hover > a,
91
- .dropdown-submenu:focus > a {
92
- text-decoration: none;
93
- color: @dropdownLinkColorHover;
94
- #gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));
65
+ .dropdown-menu > li > a {
66
+ &:hover,
67
+ &:focus {
68
+ text-decoration: none;
69
+ color: @dropdown-link-hover-color;
70
+ #gradient > .vertical(@start-color: @dropdown-link-hover-bg; @end-color: darken(@dropdown-link-hover-bg, 5%));
71
+ }
95
72
  }
96
73
 
97
74
  // Active state
98
75
  // ------------
99
- .dropdown-menu > .active > a,
100
- .dropdown-menu > .active > a:hover,
101
- .dropdown-menu > .active > a:focus {
102
- color: @dropdownLinkColorActive;
103
- text-decoration: none;
104
- outline: 0;
105
- #gradient > .vertical(@dropdownLinkBackgroundActive, darken(@dropdownLinkBackgroundActive, 5%));
76
+ .dropdown-menu > .active > a {
77
+ &,
78
+ &:hover,
79
+ &:focus {
80
+ color: @dropdown-link-active-color;
81
+ text-decoration: none;
82
+ outline: 0;
83
+ #gradient > .vertical(@start-color: @dropdown-link-active-bg; @end-color: darken(@dropdown-link-active-bg, 5%));
84
+ }
106
85
  }
107
86
 
108
87
  // Disabled state
109
88
  // --------------
110
89
  // Gray out text and ensure the hover/focus state remains gray
111
- .dropdown-menu > .disabled > a,
112
- .dropdown-menu > .disabled > a:hover,
113
- .dropdown-menu > .disabled > a:focus {
114
- color: @grayLight;
90
+ .dropdown-menu > .disabled > a {
91
+ &,
92
+ &:hover,
93
+ &:focus {
94
+ color: @gray-light;
95
+ }
115
96
  }
116
97
  // Nuke hover/focus effects
117
- .dropdown-menu > .disabled > a:hover,
118
- .dropdown-menu > .disabled > a:focus {
119
- text-decoration: none;
120
- background-color: transparent;
121
- background-image: none; // Remove CSS gradient
122
- .reset-filter();
123
- cursor: default;
98
+ .dropdown-menu > .disabled > a {
99
+ &:hover,
100
+ &:focus {
101
+ text-decoration: none;
102
+ background-color: transparent;
103
+ background-image: none; // Remove CSS gradient
104
+ .reset-filter();
105
+ cursor: not-allowed;
106
+ }
124
107
  }
125
108
 
126
109
  // Open state for the dropdown
127
110
  // ---------------------------
128
111
  .open {
129
- // IE7's z-index only goes to the nearest positioned ancestor, which would
130
- // make the menu appear below buttons that appeared later on the page
131
- *z-index: @zindexDropdown;
132
-
133
- & > .dropdown-menu {
112
+ // Show the menu
113
+ > .dropdown-menu {
134
114
  display: block;
135
115
  }
116
+
117
+ // Remove the outline when :focus is triggered
118
+ > a {
119
+ outline: 0;
120
+ }
121
+ }
122
+
123
+ // Dropdown section headers
124
+ // ---------------------------
125
+ .dropdown-header {
126
+ display: block;
127
+ padding: 3px 20px;
128
+ font-size: @font-size-small;
129
+ line-height: @line-height-base;
130
+ color: @gray-light;
136
131
  }
137
132
 
133
+
134
+
138
135
  // Backdrop to catch body clicks on mobile, etc.
139
136
  // ---------------------------
140
137
  .dropdown-backdrop {
@@ -143,7 +140,7 @@
143
140
  right: 0;
144
141
  bottom: 0;
145
142
  top: 0;
146
- z-index: @zindexDropdown - 10;
143
+ z-index: @zindex-dropdown - 10;
147
144
  }
148
145
 
149
146
  // Right aligned dropdowns
@@ -162,7 +159,7 @@
162
159
  // Reverse the caret
163
160
  .caret {
164
161
  border-top: 0;
165
- border-bottom: 4px solid @black;
162
+ border-bottom: 4px solid @dropdown-caret-color;
166
163
  content: "";
167
164
  }
168
165
  // Different positioning for bottom up menu
@@ -172,77 +169,3 @@
172
169
  margin-bottom: 1px;
173
170
  }
174
171
  }
175
-
176
- // Sub menus
177
- // ---------------------------
178
- .dropdown-submenu {
179
- position: relative;
180
- }
181
- // Default dropdowns
182
- .dropdown-submenu > .dropdown-menu {
183
- top: 0;
184
- left: 100%;
185
- margin-top: -6px;
186
- margin-left: -1px;
187
- .border-radius(0 6px 6px 6px);
188
- }
189
- .dropdown-submenu:hover > .dropdown-menu {
190
- display: block;
191
- }
192
-
193
- // Dropups
194
- .dropup .dropdown-submenu > .dropdown-menu {
195
- top: auto;
196
- bottom: 0;
197
- margin-top: 0;
198
- margin-bottom: -2px;
199
- .border-radius(5px 5px 5px 0);
200
- }
201
-
202
- // Caret to indicate there is a submenu
203
- .dropdown-submenu > a:after {
204
- display: block;
205
- content: " ";
206
- float: right;
207
- width: 0;
208
- height: 0;
209
- border-color: transparent;
210
- border-style: solid;
211
- border-width: 5px 0 5px 5px;
212
- border-left-color: darken(@dropdownBackground, 20%);
213
- margin-top: 5px;
214
- margin-right: -10px;
215
- }
216
- .dropdown-submenu:hover > a:after {
217
- border-left-color: @dropdownLinkColorHover;
218
- }
219
-
220
- // Left aligned submenus
221
- .dropdown-submenu.pull-left {
222
- // Undo the float
223
- // Yes, this is awkward since .pull-left adds a float, but it sticks to our conventions elsewhere.
224
- float: none;
225
-
226
- // Positioning the submenu
227
- > .dropdown-menu {
228
- left: -100%;
229
- margin-left: 10px;
230
- .border-radius(6px 0 6px 6px);
231
- }
232
- }
233
-
234
- // Tweak nav headers
235
- // -----------------
236
- // Increase padding from 15px to 20px on sides
237
- .dropdown .dropdown-menu .nav-header {
238
- padding-left: 20px;
239
- padding-right: 20px;
240
- }
241
-
242
- // Typeahead
243
- // ---------
244
- .typeahead {
245
- z-index: 1051;
246
- margin-top: 2px; // give it some space to breathe
247
- .border-radius(@baseBorderRadius);
248
- }
@@ -3,13 +3,9 @@
3
3
  // --------------------------------------------------
4
4
 
5
5
 
6
- // GENERAL STYLES
7
- // --------------
8
-
9
- // Make all forms have space below them
10
- form {
11
- margin: 0 0 @baseLineHeight;
12
- }
6
+ // Normalize non-controls
7
+ //
8
+ // Restyle and baseline non-control form elements.
13
9
 
14
10
  fieldset {
15
11
  padding: 0;
@@ -17,153 +13,43 @@ fieldset {
17
13
  border: 0;
18
14
  }
19
15
 
20
- // Groups of fields with labels on top (legends)
21
16
  legend {
22
17
  display: block;
23
18
  width: 100%;
24
19
  padding: 0;
25
- margin-bottom: @baseLineHeight;
26
- font-size: @baseFontSize * 1.5;
27
- line-height: @baseLineHeight * 2;
28
- color: @grayDark;
20
+ margin-bottom: @line-height-computed;
21
+ font-size: (@font-size-base * 1.5);
22
+ line-height: inherit;
23
+ color: @gray-dark;
29
24
  border: 0;
30
- border-bottom: 1px solid #e5e5e5;
31
-
32
- // Small
33
- small {
34
- font-size: @baseLineHeight * .75;
35
- color: @grayLight;
36
- }
25
+ border-bottom: 1px solid @legend-border-color;
37
26
  }
38
27
 
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
28
  label {
56
- display: block;
29
+ display: inline-block;
57
30
  margin-bottom: 5px;
31
+ font-weight: bold;
58
32
  }
59
33
 
60
- // Form controls
61
- // -------------------------
62
-
63
- // Shared size and type resets
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"],
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
34
 
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");
35
+ // Normalize form controls
124
36
 
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
- }
37
+ // Override content-box in Normalize (* isn't specific enough)
38
+ input[type="search"] {
39
+ .box-sizing(border-box);
132
40
  }
133
41
 
134
42
  // Position radios and checkboxes better
135
43
  input[type="radio"],
136
44
  input[type="checkbox"] {
137
45
  margin: 4px 0 0;
138
- *margin-top: 0; /* IE7 */
139
46
  margin-top: 1px \9; /* IE8-9 */
140
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
50
  // Set the height of select and file controls to match text inputs
155
- select,
156
51
  input[type="file"] {
157
- height: @inputHeight; /* 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 */
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
52
+ display: block;
167
53
  }
168
54
 
169
55
  // Make multiple select elements height not fixed
@@ -172,519 +58,366 @@ select[size] {
172
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
68
  // Focus for select, file, radio, and checkbox
176
- select:focus,
177
69
  input[type="file"]:focus,
178
70
  input[type="radio"]:focus,
179
71
  input[type="checkbox"]:focus {
180
72
  .tab-focus();
181
73
  }
182
74
 
75
+ // Fix for Chrome number input
76
+ // Setting certain font-sizes causes the `I` bar to appear on hover of the bottom increment button.
77
+ // See https://github.com/twbs/bootstrap/issues/8350 for more.
78
+ input[type="number"] {
79
+ &::-webkit-outer-spin-button,
80
+ &::-webkit-inner-spin-button {
81
+ height: auto;
82
+ }
83
+ }
183
84
 
184
- // Uneditable inputs
185
- // -------------------------
186
85
 
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
- .box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
194
- cursor: not-allowed;
86
+ // Placeholder
87
+ //
88
+ // Placeholder text gets special styles because when browsers invalidate entire
89
+ // lines if it doesn't understand a selector/
90
+ .form-control {
91
+ .placeholder();
195
92
  }
196
93
 
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;
201
- }
202
94
 
203
- // Make uneditable textareas behave like a textarea
204
- .uneditable-textarea {
205
- width: auto;
206
- height: auto;
95
+ // Common form controls
96
+ //
97
+ // Shared size and type resets for form controls. Apply `.form-control` to any
98
+ // of the following form controls:
99
+ //
100
+ // select
101
+ // textarea
102
+ // input[type="text"]
103
+ // input[type="password"]
104
+ // input[type="datetime"]
105
+ // input[type="datetime-local"]
106
+ // input[type="date"]
107
+ // input[type="month"]
108
+ // input[type="time"]
109
+ // input[type="week"]
110
+ // input[type="number"]
111
+ // input[type="email"]
112
+ // input[type="url"]
113
+ // input[type="search"]
114
+ // input[type="tel"]
115
+ // input[type="color"]
116
+
117
+ .form-control {
118
+ display: block;
119
+ width: 100%;
120
+ height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
121
+ padding: @padding-base-vertical @padding-base-horizontal;
122
+ font-size: @font-size-base;
123
+ line-height: @line-height-base;
124
+ color: @gray;
125
+ vertical-align: middle;
126
+ background-color: @input-bg;
127
+ border: 1px solid @input-border;
128
+ border-radius: @input-border-radius;
129
+ .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
130
+ .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
131
+
132
+ &:focus {
133
+ border-color: rgba(82,168,236,.8);
134
+ outline: 0;
135
+ .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)");
136
+ }
137
+
138
+ // Disabled and read-only inputs
139
+ // Note: HTML5 says that inputs under a fieldset > legend:first-child won't be
140
+ // disabled if the fieldset is disabled. Due to implementation difficulty,
141
+ // we don't honor that edge case; we style them as disabled anyway.
142
+ &[disabled],
143
+ &[readonly],
144
+ fieldset[disabled] & {
145
+ cursor: not-allowed;
146
+ background-color: @input-bg-disabled;
147
+ }
148
+
149
+ // Reset height for `textarea`s
150
+ textarea& {
151
+ height: auto;
152
+ }
207
153
  }
208
154
 
209
155
 
210
- // Placeholder
211
- // -------------------------
156
+ // Form groups
157
+ //
158
+ // Designed to help with the organization and spacing of vertical forms. For
159
+ // horizontal forms, use the predefined grid classes.
212
160
 
213
- // Placeholder text gets special styles because when browsers invalidate entire lines if it doesn't understand a selector
214
- input,
215
- textarea {
216
- .placeholder();
161
+ .form-group {
162
+ margin-bottom: 15px;
217
163
  }
218
164
 
219
165
 
220
- // CHECKBOXES & RADIOS
221
- // -------------------
166
+ // Checkboxes and radios
167
+ //
168
+ // Indent the labels to position radios/checkboxes as hanging controls.
222
169
 
223
- // Indent the labels to position radios/checkboxes as hanging
224
170
  .radio,
225
171
  .checkbox {
226
- min-height: @baseLineHeight; // clear the floating input if there is no label text
172
+ display: block;
173
+ min-height: @line-height-computed; // clear the floating input if there is no label text
174
+ margin-top: 10px;
175
+ margin-bottom: 10px;
227
176
  padding-left: 20px;
177
+ vertical-align: middle;
178
+ label {
179
+ display: inline;
180
+ margin-bottom: 0;
181
+ font-weight: normal;
182
+ cursor: pointer;
183
+ }
228
184
  }
229
185
  .radio input[type="radio"],
230
- .checkbox input[type="checkbox"] {
186
+ .radio-inline input[type="radio"],
187
+ .checkbox input[type="checkbox"],
188
+ .checkbox-inline input[type="checkbox"] {
231
189
  float: left;
232
190
  margin-left: -20px;
233
191
  }
234
-
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
192
+ .radio + .radio,
193
+ .checkbox + .checkbox {
194
+ margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing
239
195
  }
240
196
 
241
197
  // Radios and checkboxes on same line
242
- // TODO v3: Convert .inline to .control-inline
243
- .radio.inline,
244
- .checkbox.inline {
198
+ .radio-inline,
199
+ .checkbox-inline {
245
200
  display: inline-block;
246
- padding-top: 5px;
201
+ padding-left: 20px;
247
202
  margin-bottom: 0;
248
203
  vertical-align: middle;
204
+ font-weight: normal;
205
+ cursor: pointer;
249
206
  }
250
- .radio.inline + .radio.inline,
251
- .checkbox.inline + .checkbox.inline {
207
+ .radio-inline + .radio-inline,
208
+ .checkbox-inline + .checkbox-inline {
209
+ margin-top: 0;
252
210
  margin-left: 10px; // space out consecutive inline controls
253
211
  }
254
212
 
255
213
 
256
214
 
257
- // INPUT SIZES
258
- // -----------
259
-
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; }
267
-
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"] {
278
- float: none;
279
- margin-left: 0;
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
- }
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;
215
+ // Form control sizing
216
+ //
217
+ // Relative text size, padding, and border-radii changes for form controls. For
218
+ // horizontal sizing, wrap controls in the predefined grid classes. `<select>`
219
+ // element gets special love because it's special, and that's a fact!
220
+
221
+ .form-control {
222
+ &.input-large {
223
+ height: @input-height-large;
224
+ padding: @padding-large-vertical @padding-large-horizontal;
225
+ font-size: @font-size-large;
226
+ border-radius: @border-radius-large;
227
+ }
228
+ &.input-small {
229
+ height: @input-height-small;
230
+ padding: @padding-small-vertical @padding-small-horizontal;
231
+ font-size: @font-size-small;
232
+ border-radius: @border-radius-small;
233
+ }
335
234
  }
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;
235
+ select {
236
+ &.input-large {
237
+ height: @input-height-large;
238
+ line-height: @input-height-large;
239
+ }
240
+ &.input-small {
241
+ height: @input-height-small;
242
+ line-height: @input-height-small;
243
+ }
342
244
  }
343
245
 
344
246
 
345
-
346
-
347
- // FORM FIELD FEEDBACK STATES
348
- // --------------------------
247
+ // Form control feedback states
248
+ //
249
+ // Apply contextual and semantic states to individual form controls.
349
250
 
350
251
  // Warning
351
- .control-group.warning {
352
- .formFieldState(@warningText, @warningText, @warningBackground);
252
+ .has-warning {
253
+ .form-control-validation(@state-warning-text, @state-warning-text, @state-warning-bg);
353
254
  }
354
255
  // Error
355
- .control-group.error {
356
- .formFieldState(@errorText, @errorText, @errorBackground);
256
+ .has-error {
257
+ .form-control-validation(@state-danger-text, @state-danger-text, @state-danger-bg);
357
258
  }
358
259
  // Success
359
- .control-group.success {
360
- .formFieldState(@successText, @successText, @successBackground);
361
- }
362
- // Success
363
- .control-group.info {
364
- .formFieldState(@infoText, @infoText, @infoBackground);
365
- }
366
-
367
- // HTML5 invalid states
368
- // Shares styles with the .control-group.error above
369
- input:focus:invalid,
370
- textarea:focus:invalid,
371
- select:focus:invalid {
372
- color: #b94a48;
373
- border-color: #ee5f5b;
374
- &:focus {
375
- border-color: darken(#ee5f5b, 10%);
376
- @shadow: 0 0 6px lighten(#ee5f5b, 20%);
377
- .box-shadow(@shadow);
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
260
+ .has-success {
261
+ .form-control-validation(@state-success-text, @state-success-text, @state-success-bg);
393
262
  }
394
263
 
395
264
 
396
-
397
- // HELP TEXT
398
- // ---------
399
-
400
- .help-block,
401
- .help-inline {
402
- color: lighten(@textColor, 15%); // lighten the text some for contrast
403
- }
265
+ // Help text
266
+ //
267
+ // Apply to any element you wish to create light text for placement immediately
268
+ // below a form control. Use for general help, formatting, or instructional text.
404
269
 
405
270
  .help-block {
406
271
  display: block; // account for any element using help-block
407
- margin-bottom: @baseLineHeight / 2;
408
- }
409
-
410
- .help-inline {
411
- display: inline-block;
412
- .ie7-inline-block();
413
- vertical-align: middle;
414
- padding-left: 5px;
272
+ margin-top: 5px;
273
+ margin-bottom: 10px;
274
+ color: lighten(@text-color, 25%); // lighten the text some for contrast
415
275
  }
416
276
 
417
277
 
418
278
 
419
- // INPUT GROUPS
420
- // ------------
279
+ // Input groups
280
+ // --------------------------------------------------
421
281
 
422
- // Allow us to put symbols and text within the input field for a cleaner look
423
- .input-append,
424
- .input-prepend {
425
- display: inline-block;
426
- margin-bottom: @baseLineHeight / 2;
427
- vertical-align: middle;
428
- font-size: 0; // white space collapse hack
429
- white-space: nowrap; // Prevent span and input from separating
430
-
431
- // Reset the white space collapse hack
432
- input,
433
- select,
434
- .uneditable-input,
435
- .dropdown-menu,
436
- .popover {
437
- font-size: @baseFontSize;
282
+ // Base styles
283
+ // -------------------------
284
+ .input-group {
285
+ display: table;
286
+ border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table
287
+
288
+ // Undo padding and float of grid classes
289
+ &.col {
290
+ float: none;
291
+ padding-left: 0;
292
+ padding-right: 0;
438
293
  }
439
294
 
440
- input,
441
- select,
442
- .uneditable-input {
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
444
- margin-bottom: 0; // prevent bottom margin from screwing up alignment in stacked forms
445
- *margin-left: 0;
446
- vertical-align: top;
447
- .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
448
- // Make input on top when focused so blue border and shadow always show
449
- &:focus {
450
- z-index: 2;
451
- }
452
- }
453
- .add-on {
454
- display: inline-block;
455
- width: auto;
456
- height: @baseLineHeight;
457
- min-width: 16px;
458
- padding: 4px 5px;
459
- font-size: @baseFontSize;
460
- font-weight: normal;
461
- line-height: @baseLineHeight;
462
- text-align: center;
463
- text-shadow: 0 1px 0 @white;
464
- background-color: @grayLighter;
465
- border: 1px solid #ccc;
466
- }
467
- .add-on,
468
- .btn,
469
- .btn-group > .dropdown-toggle {
470
- vertical-align: top;
471
- .border-radius(0);
472
- }
473
- .active {
474
- background-color: lighten(@green, 30);
475
- border-color: @green;
295
+ .form-control {
296
+ width: 100%;
297
+ margin-bottom: 0;
476
298
  }
477
299
  }
478
300
 
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
- }
301
+ // Display as table-cell
302
+ // -------------------------
303
+ .input-group-addon,
304
+ .input-group-btn,
305
+ .input-group .form-control {
306
+ display: table-cell;
490
307
 
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);
308
+ &:not(:first-child):not(:last-child) {
309
+ border-radius: 0;
509
310
  }
510
311
  }
312
+ // Addon and addon wrapper for buttons
313
+ .input-group-addon,
314
+ .input-group-btn {
315
+ width: 1%;
316
+ white-space: nowrap;
317
+ vertical-align: middle; // Match the inputs
318
+ }
511
319
 
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);
320
+ // Text input groups
321
+ // -------------------------
322
+ .input-group-addon {
323
+ .box-sizing(border-box);
324
+ padding: @padding-base-vertical @padding-base-horizontal;
325
+ font-size: @font-size-base;
326
+ font-weight: normal;
327
+ line-height: @line-height-base;
328
+ text-align: center;
329
+ background-color: @gray-lighter;
330
+ border: 1px solid @input-group-addon-border-color;
331
+ border-radius: @border-radius-base;
332
+
333
+ &.input-small {
334
+ padding: @padding-small-vertical @padding-small-horizontal;
335
+ font-size: @font-size-small;
336
+ border-radius: @border-radius-small;
531
337
  }
532
- .btn-group:first-child {
533
- margin-left: 0;
338
+ &.input-large {
339
+ padding: @padding-large-vertical @padding-large-horizontal;
340
+ font-size: @font-size-large;
341
+ border-radius: @border-radius-large;
534
342
  }
535
343
  }
536
344
 
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);
345
+ // Reset rounded corners
346
+ .input-group .form-control:first-child,
347
+ .input-group-addon:first-child,
348
+ .input-group-btn:first-child > .btn,
349
+ .input-group-btn:first-child > .dropdown-toggle,
350
+ .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
351
+ .border-right-radius(0);
550
352
  }
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
353
+ .input-group-addon:first-child {
354
+ border-right: 0;
556
355
  }
557
- .form-search .input-append .search-query {
558
- .border-radius(14px 0 0 14px);
356
+ .input-group .form-control:last-child,
357
+ .input-group-addon:last-child,
358
+ .input-group-btn:last-child > .btn,
359
+ .input-group-btn:last-child > .dropdown-toggle,
360
+ .input-group-btn:first-child > .btn:not(:first-child) {
361
+ .border-left-radius(0);
559
362
  }
560
- .form-search .input-append .btn {
561
- .border-radius(0 14px 14px 0);
363
+ .input-group-addon:last-child {
364
+ border-left: 0;
562
365
  }
563
- .form-search .input-prepend .search-query {
564
- .border-radius(0 14px 14px 0);
366
+
367
+ // Button input groups
368
+ // -------------------------
369
+ .input-group-btn {
370
+ position: relative;
371
+ white-space: nowrap;
565
372
  }
566
- .form-search .input-prepend .btn {
567
- .border-radius(14px 0 0 14px);
373
+ .input-group-btn > .btn {
374
+ position: relative;
375
+ // Jankily prevent input button groups from wrapping
376
+ + .btn {
377
+ margin-left: -4px;
378
+ }
379
+ // Bring the "active" button to the front
380
+ &:hover,
381
+ &:active {
382
+ z-index: 2;
383
+ }
568
384
  }
569
385
 
570
386
 
387
+ // Inline forms
388
+ // --------------------------------------------------
571
389
 
572
-
573
- // HORIZONTAL & VERTICAL FORMS
574
- // ---------------------------
575
-
576
- // Common properties
577
- // -----------------
578
-
579
- .form-search,
580
- .form-inline,
581
- .form-horizontal {
582
- input,
583
- textarea,
584
- select,
585
- .help-inline,
586
- .uneditable-input,
587
- .input-prepend,
588
- .input-append {
390
+ .form-inline {
391
+ .form-control,
392
+ .radio,
393
+ .checkbox {
589
394
  display: inline-block;
590
- .ie7-inline-block();
591
- margin-bottom: 0;
592
- vertical-align: middle;
593
395
  }
594
- // Re-hide hidden elements due to specifity
595
- .hide {
596
- display: none;
396
+ .radio,
397
+ .checkbox {
398
+ margin-top: 0;
399
+ margin-bottom: 0;
597
400
  }
598
401
  }
599
- .form-search label,
600
- .form-inline label,
601
- .form-search .btn-group,
602
- .form-inline .btn-group {
603
- display: inline-block;
604
- }
605
- // Remove margin for input-prepend/-append
606
- .form-search .input-append,
607
- .form-inline .input-append,
608
- .form-search .input-prepend,
609
- .form-inline .input-prepend {
610
- margin-bottom: 0;
611
- }
612
- // Inline checkbox/radio labels (remove padding on left)
613
- .form-search .radio,
614
- .form-search .checkbox,
615
- .form-inline .radio,
616
- .form-inline .checkbox {
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
402
 
631
403
 
632
- // Margin to space out fieldsets
633
- .control-group {
634
- margin-bottom: @baseLineHeight / 2;
635
- }
404
+ // Horizontal forms
405
+ // --------------------------------------------------
406
+ // Horizontal forms are built on grid classes.
636
407
 
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;
408
+ .form-horizontal .control-label {
409
+ padding-top: 6px;
641
410
  }
642
411
 
643
- // Horizontal-specific styles
644
- // --------------------------
645
-
646
412
  .form-horizontal {
647
- // Increase spacing between groups
648
- .control-group {
649
- margin-bottom: @baseLineHeight;
650
- .clearfix();
413
+ .form-group {
414
+ .make-row();
651
415
  }
652
- // Float the labels left
653
- .control-label {
654
- float: left;
655
- width: @horizontalComponentOffset - 20;
656
- padding-top: 5px;
416
+ }
417
+
418
+ // Only right align form labels here when the columns stop stacking
419
+ @media (min-width: @screen-tablet) {
420
+ .form-horizontal .control-label {
657
421
  text-align: right;
658
422
  }
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
423
  }