bootstrap-generators 3.0.2.2 → 3.1.0

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 (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
  }