bootstrap-generators 3.0.2.2 → 3.1.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (98) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +2 -2
  3. data/Rakefile +7 -6
  4. data/bootstrap-generators.gemspec +1 -1
  5. data/lib/bootstrap/generators/version.rb +1 -1
  6. data/lib/generators/bootstrap/install/templates/assets/stylesheets/bootstrap-variables.less +354 -164
  7. data/lib/generators/bootstrap/install/templates/assets/stylesheets/bootstrap-variables.scss +359 -165
  8. data/lib/generators/bootstrap/install/templates/form_builders/form_builder/_form.html.erb +3 -3
  9. data/lib/generators/bootstrap/install/templates/form_builders/form_builder/_form.html.haml +3 -3
  10. data/lib/generators/bootstrap/install/templates/form_builders/form_builder/_form.html.slim +3 -3
  11. data/lib/generators/bootstrap/install/templates/layouts/starter.html.erb +1 -0
  12. data/lib/generators/bootstrap/install/templates/layouts/starter.html.haml +1 -0
  13. data/lib/generators/bootstrap/install/templates/layouts/starter.html.slim +2 -0
  14. data/readme-template.md.erb +14 -0
  15. data/vendor/assets/fonts/{glyphicons-halflings-regular.eot → bootstrap/glyphicons-halflings-regular.eot} +0 -0
  16. data/vendor/assets/fonts/{glyphicons-halflings-regular.svg → bootstrap/glyphicons-halflings-regular.svg} +0 -0
  17. data/vendor/assets/fonts/{glyphicons-halflings-regular.ttf → bootstrap/glyphicons-halflings-regular.ttf} +0 -0
  18. data/vendor/assets/fonts/{glyphicons-halflings-regular.woff → bootstrap/glyphicons-halflings-regular.woff} +0 -0
  19. data/vendor/assets/javascripts/bootstrap/affix.js +34 -23
  20. data/vendor/assets/javascripts/bootstrap/alert.js +5 -15
  21. data/vendor/assets/javascripts/bootstrap/button.js +24 -26
  22. data/vendor/assets/javascripts/bootstrap/carousel.js +20 -32
  23. data/vendor/assets/javascripts/bootstrap/collapse.js +7 -16
  24. data/vendor/assets/javascripts/bootstrap/dropdown.js +23 -30
  25. data/vendor/assets/javascripts/bootstrap/modal.js +25 -28
  26. data/vendor/assets/javascripts/bootstrap/popover.js +14 -21
  27. data/vendor/assets/javascripts/bootstrap/scrollspy.js +17 -22
  28. data/vendor/assets/javascripts/bootstrap/tab.js +7 -17
  29. data/vendor/assets/javascripts/bootstrap/tooltip.js +52 -39
  30. data/vendor/assets/javascripts/bootstrap/transition.js +11 -19
  31. data/vendor/assets/stylesheets/bootstrap.css +1209 -2476
  32. data/vendor/twitter/bootstrap/less/badges.less +10 -6
  33. data/vendor/twitter/bootstrap/less/breadcrumbs.less +4 -1
  34. data/vendor/twitter/bootstrap/less/button-groups.less +17 -44
  35. data/vendor/twitter/bootstrap/less/buttons.less +10 -13
  36. data/vendor/twitter/bootstrap/less/carousel.less +1 -0
  37. data/vendor/twitter/bootstrap/less/code.less +10 -0
  38. data/vendor/twitter/bootstrap/less/dropdowns.less +31 -10
  39. data/vendor/twitter/bootstrap/less/forms.less +89 -34
  40. data/vendor/twitter/bootstrap/less/glyphicons.less +5 -9
  41. data/vendor/twitter/bootstrap/less/grid.less +36 -29
  42. data/vendor/twitter/bootstrap/less/input-groups.less +40 -19
  43. data/vendor/twitter/bootstrap/less/jumbotron.less +11 -7
  44. data/vendor/twitter/bootstrap/less/labels.less +6 -0
  45. data/vendor/twitter/bootstrap/less/list-group.less +25 -3
  46. data/vendor/twitter/bootstrap/less/mixins.less +140 -72
  47. data/vendor/twitter/bootstrap/less/modals.less +18 -12
  48. data/vendor/twitter/bootstrap/less/navbar.less +65 -73
  49. data/vendor/twitter/bootstrap/less/navs.less +2 -22
  50. data/vendor/twitter/bootstrap/less/normalize.less +139 -122
  51. data/vendor/twitter/bootstrap/less/pager.less +5 -5
  52. data/vendor/twitter/bootstrap/less/pagination.less +6 -3
  53. data/vendor/twitter/bootstrap/less/panels.less +73 -15
  54. data/vendor/twitter/bootstrap/less/print.less +0 -4
  55. data/vendor/twitter/bootstrap/less/progress-bars.less +0 -12
  56. data/vendor/twitter/bootstrap/less/responsive-utilities.less +13 -129
  57. data/vendor/twitter/bootstrap/less/scaffolding.less +17 -2
  58. data/vendor/twitter/bootstrap/less/tables.less +19 -22
  59. data/vendor/twitter/bootstrap/less/theme.less +1 -1
  60. data/vendor/twitter/bootstrap/less/thumbnails.less +9 -3
  61. data/vendor/twitter/bootstrap/less/tooltip.less +1 -1
  62. data/vendor/twitter/bootstrap/less/type.less +123 -106
  63. data/vendor/twitter/bootstrap/less/variables.less +354 -164
  64. data/vendor/twitter/bootstrap/less/wells.less +1 -1
  65. data/vendor/twitter/bootstrap/sass/_badges.scss +10 -6
  66. data/vendor/twitter/bootstrap/sass/_breadcrumbs.scss +4 -1
  67. data/vendor/twitter/bootstrap/sass/_button-groups.scss +15 -42
  68. data/vendor/twitter/bootstrap/sass/_buttons.scss +10 -13
  69. data/vendor/twitter/bootstrap/sass/_carousel.scss +1 -0
  70. data/vendor/twitter/bootstrap/sass/_code.scss +10 -0
  71. data/vendor/twitter/bootstrap/sass/_dropdowns.scss +31 -11
  72. data/vendor/twitter/bootstrap/sass/_forms.scss +88 -34
  73. data/vendor/twitter/bootstrap/sass/_glyphicons.scss +5 -9
  74. data/vendor/twitter/bootstrap/sass/_grid.scss +36 -29
  75. data/vendor/twitter/bootstrap/sass/_input-groups.scss +40 -19
  76. data/vendor/twitter/bootstrap/sass/_jumbotron.scss +11 -7
  77. data/vendor/twitter/bootstrap/sass/_labels.scss +6 -0
  78. data/vendor/twitter/bootstrap/sass/_list-group.scss +25 -3
  79. data/vendor/twitter/bootstrap/sass/_mixins.scss +135 -65
  80. data/vendor/twitter/bootstrap/sass/_modals.scss +17 -11
  81. data/vendor/twitter/bootstrap/sass/_navbar.scss +62 -70
  82. data/vendor/twitter/bootstrap/sass/_navs.scss +1 -21
  83. data/vendor/twitter/bootstrap/sass/_normalize.scss +139 -122
  84. data/vendor/twitter/bootstrap/sass/_pager.scss +4 -4
  85. data/vendor/twitter/bootstrap/sass/_pagination.scss +6 -3
  86. data/vendor/twitter/bootstrap/sass/_panels.scss +72 -14
  87. data/vendor/twitter/bootstrap/sass/_print.scss +0 -4
  88. data/vendor/twitter/bootstrap/sass/_progress-bars.scss +0 -12
  89. data/vendor/twitter/bootstrap/sass/_responsive-utilities.scss +6 -124
  90. data/vendor/twitter/bootstrap/sass/_scaffolding.scss +17 -2
  91. data/vendor/twitter/bootstrap/sass/_tables.scss +7 -18
  92. data/vendor/twitter/bootstrap/sass/_theme.scss +1 -1
  93. data/vendor/twitter/bootstrap/sass/_thumbnails.scss +13 -7
  94. data/vendor/twitter/bootstrap/sass/_tooltip.scss +1 -1
  95. data/vendor/twitter/bootstrap/sass/_type.scss +122 -105
  96. data/vendor/twitter/bootstrap/sass/_variables.scss +359 -165
  97. data/vendor/twitter/bootstrap/sass/_wells.scss +1 -1
  98. metadata +7 -7
@@ -9,7 +9,7 @@
9
9
  padding: 19px;
10
10
  margin-bottom: 20px;
11
11
  background-color: @well-bg;
12
- border: 1px solid darken(@well-bg, 7%);
12
+ border: 1px solid @well-border;
13
13
  border-radius: @border-radius-base;
14
14
  .box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
15
15
  blockquote {
@@ -22,6 +22,16 @@
22
22
  &:empty {
23
23
  display: none;
24
24
  }
25
+
26
+ // Quick fix for badges in buttons
27
+ .btn & {
28
+ position: relative;
29
+ top: -1px;
30
+ }
31
+ .btn-xs & {
32
+ top: 0;
33
+ padding: 1px 5px;
34
+ }
25
35
  }
26
36
 
27
37
  // Hover state, but only for links
@@ -34,12 +44,6 @@ a.badge {
34
44
  }
35
45
  }
36
46
 
37
- // Quick fix for labels/badges in buttons
38
- .btn .badge {
39
- position: relative;
40
- top: -1px;
41
- }
42
-
43
47
  // Account for counters in navs
44
48
  a.list-group-item.active > .badge,
45
49
  .nav-pills > .active > a > .badge {
@@ -4,19 +4,22 @@
4
4
 
5
5
 
6
6
  .breadcrumb {
7
- padding: 8px 15px;
7
+ padding: $breadcrumb-padding-vertical $breadcrumb-padding-horizontal;
8
8
  margin-bottom: $line-height-computed;
9
9
  list-style: none;
10
10
  background-color: $breadcrumb-bg;
11
11
  border-radius: $border-radius-base;
12
+
12
13
  > li {
13
14
  display: inline-block;
15
+
14
16
  + li:before {
15
17
  content: "#{$breadcrumb-separator}\00a0"; // Unicode space added since inline-block means non-collapsing white-space
16
18
  padding: 0 5px;
17
19
  color: $breadcrumb-color;
18
20
  }
19
21
  }
22
+
20
23
  > .active {
21
24
  color: $breadcrumb-active-color;
22
25
  }
@@ -2,37 +2,6 @@
2
2
  // Button groups
3
3
  // --------------------------------------------------
4
4
 
5
- // Button carets
6
- //
7
- // Match the button text color to the arrow/caret for indicating dropdown-ness.
8
-
9
- .caret {
10
- .btn-default & {
11
- border-top-color: $btn-default-color;
12
- }
13
- .btn-primary &,
14
- .btn-success &,
15
- .btn-warning &,
16
- .btn-danger &,
17
- .btn-info & {
18
- border-top-color: #fff;
19
- }
20
- }
21
- .dropup {
22
- .btn-default .caret {
23
- border-bottom-color: $btn-default-color;
24
- }
25
- .btn-primary,
26
- .btn-success,
27
- .btn-warning,
28
- .btn-danger,
29
- .btn-info {
30
- .caret {
31
- border-bottom-color: #fff;
32
- }
33
- }
34
- }
35
-
36
5
  // Make the div behave like a button
37
6
  .btn-group,
38
7
  .btn-group-vertical {
@@ -68,18 +37,17 @@
68
37
 
69
38
  // Optional: Group multiple button groups together for a toolbar
70
39
  .btn-toolbar {
40
+ margin-left: -5px; // Offset the first child's margin
71
41
  @include clearfix();
72
42
 
73
- .btn-group {
43
+ .btn-group,
44
+ .input-group {
74
45
  float: left;
75
46
  }
76
- // Space out series of button groups
77
47
  > .btn,
78
- > .btn-group {
79
- + .btn,
80
- + .btn-group {
81
- margin-left: 5px;
82
- }
48
+ > .btn-group,
49
+ > .input-group {
50
+ margin-left: 5px;
83
51
  }
84
52
  }
85
53
 
@@ -178,7 +146,8 @@
178
146
 
179
147
  .btn-group-vertical {
180
148
  > .btn,
181
- > .btn-group {
149
+ > .btn-group,
150
+ > .btn-group > .btn {
182
151
  display: block;
183
152
  float: none;
184
153
  width: 100%;
@@ -218,13 +187,13 @@
218
187
  .btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
219
188
  border-radius: 0;
220
189
  }
221
- .btn-group-vertical > .btn-group:first-child {
190
+ .btn-group-vertical > .btn-group:first-child:not(:last-child) {
222
191
  > .btn:last-child,
223
192
  > .dropdown-toggle {
224
193
  @include border-bottom-radius(0);
225
194
  }
226
195
  }
227
- .btn-group-vertical > .btn-group:last-child > .btn:first-child {
196
+ .btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
228
197
  @include border-top-radius(0);
229
198
  }
230
199
 
@@ -238,11 +207,15 @@
238
207
  width: 100%;
239
208
  table-layout: fixed;
240
209
  border-collapse: separate;
241
- .btn {
210
+ > .btn,
211
+ > .btn-group {
242
212
  float: none;
243
213
  display: table-cell;
244
214
  width: 1%;
245
215
  }
216
+ > .btn-group .btn {
217
+ width: 100%;
218
+ }
246
219
  }
247
220
 
248
221
 
@@ -6,7 +6,6 @@
6
6
  // Base styles
7
7
  // --------------------------------------------------
8
8
 
9
- // Core styles
10
9
  .btn {
11
10
  display: inline-block;
12
11
  margin-bottom: 0; // For input.btn
@@ -45,7 +44,6 @@
45
44
  @include opacity(.65);
46
45
  @include box-shadow(none);
47
46
  }
48
-
49
47
  }
50
48
 
51
49
 
@@ -58,14 +56,6 @@
58
56
  .btn-primary {
59
57
  @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
60
58
  }
61
- // Warning appears as orange
62
- .btn-warning {
63
- @include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border);
64
- }
65
- // Danger and error appear as red
66
- .btn-danger {
67
- @include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
68
- }
69
59
  // Success appears as green
70
60
  .btn-success {
71
61
  @include button-variant($btn-success-color, $btn-success-bg, $btn-success-border);
@@ -74,6 +64,14 @@
74
64
  .btn-info {
75
65
  @include button-variant($btn-info-color, $btn-info-bg, $btn-info-border);
76
66
  }
67
+ // Warning appears as orange
68
+ .btn-warning {
69
+ @include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border);
70
+ }
71
+ // Danger and error appear as red
72
+ .btn-danger {
73
+ @include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
74
+ }
77
75
 
78
76
 
79
77
  // Link buttons
@@ -123,13 +121,12 @@
123
121
  // line-height: ensure even-numbered height of button next to large input
124
122
  @include button-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $line-height-large, $border-radius-large);
125
123
  }
126
- .btn-sm,
127
- .btn-xs {
124
+ .btn-sm {
128
125
  // line-height: ensure proper height of button next to small input
129
126
  @include button-size($padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $border-radius-small);
130
127
  }
131
128
  .btn-xs {
132
- padding: 1px 5px;
129
+ @include button-size($padding-xs-vertical, $padding-xs-horizontal, $font-size-small, $line-height-small, $border-radius-small);
133
130
  }
134
131
 
135
132
 
@@ -91,6 +91,7 @@
91
91
  // Hover/focus state
92
92
  &:hover,
93
93
  &:focus {
94
+ outline: none;
94
95
  color: $carousel-control-color;
95
96
  text-decoration: none;
96
97
  @include opacity(.9);
@@ -21,6 +21,16 @@ code {
21
21
  border-radius: $border-radius-base;
22
22
  }
23
23
 
24
+ // User input typically entered via keyboard
25
+ kbd {
26
+ padding: 2px 4px;
27
+ font-size: 90%;
28
+ color: $kbd-color;
29
+ background-color: $kbd-bg;
30
+ border-radius: $border-radius-small;
31
+ box-shadow: inset 0 -1px 0 rgba(0,0,0,.25);
32
+ }
33
+
24
34
  // Blocks of code
25
35
  pre {
26
36
  display: block;
@@ -10,12 +10,9 @@
10
10
  height: 0;
11
11
  margin-left: 2px;
12
12
  vertical-align: middle;
13
- border-top: $caret-width-base solid $dropdown-caret-color;
13
+ border-top: $caret-width-base solid;
14
14
  border-right: $caret-width-base solid transparent;
15
15
  border-left: $caret-width-base solid transparent;
16
- // Firefox fix for https://github.com/twbs/bootstrap/issues/9538. Once fixed,
17
- // we can just straight up remove this.
18
- border-bottom: 0 dotted;
19
16
  }
20
17
 
21
18
  // The dropdown wrapper (div)
@@ -49,6 +46,8 @@
49
46
  background-clip: padding-box;
50
47
 
51
48
  // Aligns the dropdown menu to right
49
+ //
50
+ // Deprecated as of 3.1.0 in favor of `.dropdown-menu-[dir]`
52
51
  &.pull-right {
53
52
  right: 0;
54
53
  left: auto;
@@ -129,6 +128,25 @@
129
128
  }
130
129
  }
131
130
 
131
+ // Menu positioning
132
+ //
133
+ // Add extra class to `.dropdown-menu` to flip the alignment of the dropdown
134
+ // menu with the parent.
135
+ .dropdown-menu-right {
136
+ left: auto; // Reset the default from `.dropdown-menu`
137
+ right: 0;
138
+ }
139
+ // With v3, we enabled auto-flipping if you have a dropdown within a right
140
+ // aligned nav component. To enable the undoing of that, we provide an override
141
+ // to restore the default dropdown menu alignment.
142
+ //
143
+ // This is only for left-aligning a dropdown menu within a `.navbar-right` or
144
+ // `.pull-right` nav component.
145
+ .dropdown-menu-left {
146
+ left: 0;
147
+ right: auto;
148
+ }
149
+
132
150
  // Dropdown section headers
133
151
  .dropdown-header {
134
152
  display: block;
@@ -145,7 +163,7 @@
145
163
  right: 0;
146
164
  bottom: 0;
147
165
  top: 0;
148
- z-index: $zindex-dropdown - 10;
166
+ z-index: ($zindex-dropdown - 10);
149
167
  }
150
168
 
151
169
  // Right aligned dropdowns
@@ -163,10 +181,8 @@
163
181
  .navbar-fixed-bottom .dropdown {
164
182
  // Reverse the caret
165
183
  .caret {
166
- // Firefox fix for https://github.com/twbs/bootstrap/issues/9538. Once this
167
- // gets fixed, restore `border-top: 0;`.
168
- border-top: 0 dotted;
169
- border-bottom: $caret-width-base solid $dropdown-caret-color;
184
+ border-top: 0;
185
+ border-bottom: $caret-width-base solid;
170
186
  content: "";
171
187
  }
172
188
  // Different positioning for bottom up menu
@@ -185,8 +201,12 @@
185
201
  @media (min-width: $grid-float-breakpoint) {
186
202
  .navbar-right {
187
203
  .dropdown-menu {
188
- right: 0;
189
- left: auto;
204
+ right: 0; left: auto;
205
+ }
206
+ // Necessary for overrides of the default right aligned menu.
207
+ // Will remove come v4 in all likelihood.
208
+ .dropdown-menu-left {
209
+ left: 0; right: auto;
190
210
  }
191
211
  }
192
212
  }
@@ -11,6 +11,10 @@ fieldset {
11
11
  padding: 0;
12
12
  margin: 0;
13
13
  border: 0;
14
+ // Chrome and Firefox set a `min-width: -webkit-min-content;` on fieldsets,
15
+ // so we reset that to ensure it behaves more like a standard block element.
16
+ // See https://github.com/twbs/bootstrap/issues/12359.
17
+ min-width: 0;
14
18
  }
15
19
 
16
20
  legend {
@@ -33,6 +37,10 @@ label {
33
37
 
34
38
 
35
39
  // Normalize form controls
40
+ //
41
+ // While most of our form styles require extra classes, some basic normalization
42
+ // is required to ensure optimum display with or without those classes to better
43
+ // address browser inconsistencies.
36
44
 
37
45
  // Override content-box in Normalize (* isn't specific enough)
38
46
  input[type="search"] {
@@ -47,41 +55,30 @@ input[type="checkbox"] {
47
55
  line-height: normal;
48
56
  }
49
57
 
50
- // Set the height of select and file controls to match text inputs
58
+ // Set the height of file controls to match text inputs
51
59
  input[type="file"] {
52
60
  display: block;
53
61
  }
54
62
 
63
+ // Make range inputs behave like textual form controls
64
+ input[type="range"] {
65
+ display: block;
66
+ width: 100%;
67
+ }
68
+
55
69
  // Make multiple select elements height not fixed
56
70
  select[multiple],
57
71
  select[size] {
58
72
  height: auto;
59
73
  }
60
74
 
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
-
68
- // Focus for select, file, radio, and checkbox
75
+ // Focus for file, radio, and checkbox
69
76
  input[type="file"]:focus,
70
77
  input[type="radio"]:focus,
71
78
  input[type="checkbox"]:focus {
72
79
  @include tab-focus();
73
80
  }
74
81
 
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
- }
84
-
85
82
  // Adjust output element
86
83
  output {
87
84
  display: block;
@@ -89,7 +86,6 @@ output {
89
86
  font-size: $font-size-base;
90
87
  line-height: $line-height-base;
91
88
  color: $input-color;
92
- vertical-align: middle;
93
89
  }
94
90
 
95
91
 
@@ -123,7 +119,6 @@ output {
123
119
  font-size: $font-size-base;
124
120
  line-height: $line-height-base;
125
121
  color: $input-color;
126
- vertical-align: middle;
127
122
  background-color: $input-bg;
128
123
  background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
129
124
  border: 1px solid $input-border;
@@ -135,9 +130,6 @@ output {
135
130
  @include form-control-focus();
136
131
 
137
132
  // Placeholder
138
- //
139
- // Placeholder text gets special styles because when browsers invalidate entire
140
- // lines if it doesn't understand a selector/
141
133
  @include placeholder();
142
134
 
143
135
  // Disabled and read-only inputs
@@ -149,6 +141,7 @@ output {
149
141
  fieldset[disabled] & {
150
142
  cursor: not-allowed;
151
143
  background-color: $input-bg-disabled;
144
+ opacity: 1; // iOS fix for unreadable disabled content
152
145
  }
153
146
 
154
147
  // [converter] extracted textarea& to textarea.form-control
@@ -159,6 +152,14 @@ textarea.form-control {
159
152
  height: auto;
160
153
  }
161
154
 
155
+ // Special styles for iOS date input
156
+ //
157
+ // In Mobile Safari, date inputs require a pixel line-height that matches the
158
+ // given height of the input.
159
+ input[type="date"] {
160
+ line-height: $input-height-base;
161
+ }
162
+
162
163
 
163
164
  // Form groups
164
165
  //
@@ -181,10 +182,8 @@ textarea.form-control {
181
182
  margin-top: 10px;
182
183
  margin-bottom: 10px;
183
184
  padding-left: 20px;
184
- vertical-align: middle;
185
185
  label {
186
186
  display: inline;
187
- margin-bottom: 0;
188
187
  font-weight: normal;
189
188
  cursor: pointer;
190
189
  }
@@ -232,7 +231,11 @@ input[type="checkbox"],
232
231
  }
233
232
  }
234
233
 
234
+
235
235
  // Form control sizing
236
+ //
237
+ // Build on `.form-control` with modifier classes to decrease or increase the
238
+ // height and font-size of form controls.
236
239
 
237
240
  @include input-size('.input-sm', $input-height-small, $padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $border-radius-small);
238
241
 
@@ -243,18 +246,38 @@ input[type="checkbox"],
243
246
  //
244
247
  // Apply contextual and semantic states to individual form controls.
245
248
 
246
- // Warning
249
+ .has-feedback {
250
+ // Enable absolute positioning
251
+ position: relative;
252
+
253
+ // Ensure icons don't overlap text
254
+ .form-control {
255
+ padding-right: ($input-height-base * 1.25);
256
+ }
257
+
258
+ // Feedback icon (requires .glyphicon classes)
259
+ .form-control-feedback {
260
+ position: absolute;
261
+ top: ($line-height-computed + 5); // Height of the `label` and its margin
262
+ right: 0;
263
+ display: block;
264
+ width: $input-height-base;
265
+ height: $input-height-base;
266
+ line-height: $input-height-base;
267
+ text-align: center;
268
+ }
269
+ }
270
+
271
+ // Feedback states
272
+ .has-success {
273
+ @include form-control-validation($state-success-text, $state-success-text, $state-success-bg);
274
+ }
247
275
  .has-warning {
248
276
  @include form-control-validation($state-warning-text, $state-warning-text, $state-warning-bg);
249
277
  }
250
- // Error
251
278
  .has-error {
252
279
  @include form-control-validation($state-danger-text, $state-danger-text, $state-danger-bg);
253
280
  }
254
- // Success
255
- .has-success {
256
- @include form-control-validation($state-success-text, $state-success-text, $state-success-bg);
257
- }
258
281
 
259
282
 
260
283
  // Static form control text
@@ -295,9 +318,9 @@ input[type="checkbox"],
295
318
  .form-inline {
296
319
 
297
320
  // Kick in the inline
298
- @media (min-width: $screen-sm) {
321
+ @media (min-width: $screen-sm-min) {
299
322
  // Inline-block all the things for "inline"
300
- .form-group {
323
+ .form-group {
301
324
  display: inline-block;
302
325
  margin-bottom: 0;
303
326
  vertical-align: middle;
@@ -306,6 +329,13 @@ input[type="checkbox"],
306
329
  // In navbar-form, allow folks to *not* use `.form-group`
307
330
  .form-control {
308
331
  display: inline-block;
332
+ width: auto; // Prevent labels from stacking above inputs in `.form-group`
333
+ vertical-align: middle;
334
+ }
335
+
336
+ .control-label {
337
+ margin-bottom: 0;
338
+ vertical-align: middle;
309
339
  }
310
340
 
311
341
  // Remove default margin on radios/checkboxes that were used for stacking, and
@@ -317,12 +347,21 @@ input[type="checkbox"],
317
347
  margin-top: 0;
318
348
  margin-bottom: 0;
319
349
  padding-left: 0;
350
+ vertical-align: middle;
320
351
  }
321
352
  .radio input[type="radio"],
322
353
  .checkbox input[type="checkbox"] {
323
354
  float: none;
324
355
  margin-left: 0;
325
356
  }
357
+
358
+ // Validation states
359
+ //
360
+ // Reposition the icon because it's now within a grid column and columns have
361
+ // `position: relative;` on them. Also accounts for the grid gutter padding.
362
+ .has-feedback .form-control-feedback {
363
+ top: 0;
364
+ }
326
365
  }
327
366
  }
328
367
 
@@ -344,6 +383,12 @@ input[type="checkbox"],
344
383
  margin-bottom: 0;
345
384
  padding-top: ($padding-base-vertical + 1); // Default padding plus a border
346
385
  }
386
+ // Account for padding we're adding to ensure the alignment and of help text
387
+ // and other content below items
388
+ .radio,
389
+ .checkbox {
390
+ min-height: ($line-height-computed + ($padding-base-vertical + 1));
391
+ }
347
392
 
348
393
  // Make form groups behave like rows
349
394
  .form-group {
@@ -360,4 +405,13 @@ input[type="checkbox"],
360
405
  text-align: right;
361
406
  }
362
407
  }
408
+
409
+ // Validation states
410
+ //
411
+ // Reposition the icon because it's now within a grid column and columns have
412
+ // `position: relative;` on them. Also accounts for the grid gutter padding.
413
+ .has-feedback .form-control-feedback {
414
+ top: 0;
415
+ right: ($grid-gutter-width / 2);
416
+ }
363
417
  }