bootstrap-sass 3.0.3.0 → 3.1.0.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.

Potentially problematic release.


This version of bootstrap-sass might be problematic. Click here for more details.

Files changed (70) hide show
  1. checksums.yaml +4 -4
  2. data/.gitignore +1 -1
  3. data/CHANGELOG.md +4 -0
  4. data/CONTRIBUTING.md +2 -2
  5. data/Gemfile +1 -1
  6. data/LICENSE +17 -10
  7. data/README.md +17 -17
  8. data/Rakefile +7 -2
  9. data/bootstrap-sass.gemspec +9 -9
  10. data/bower.json +22 -0
  11. data/composer.json +35 -0
  12. data/lib/bootstrap-sass.rb +1 -3
  13. data/lib/bootstrap-sass/sass_functions.rb +4 -3
  14. data/lib/bootstrap-sass/version.rb +2 -2
  15. data/tasks/converter.rb +21 -15
  16. data/tasks/converter/fonts_conversion.rb +7 -3
  17. data/tasks/converter/js_conversion.rb +20 -3
  18. data/tasks/converter/less_conversion.rb +89 -60
  19. data/tasks/converter/logger.rb +6 -14
  20. data/tasks/converter/network.rb +7 -32
  21. data/test/compilation_test.rb +1 -1
  22. data/test/dummy/app/views/pages/root.html.slim +8 -2
  23. data/test/dummy/config/application.rb +2 -2
  24. data/test/gemfiles/sass_3_2.gemfile +1 -1
  25. data/test/gemfiles/sass_head.gemfile +2 -3
  26. data/test/sprockets_rails_test.rb +21 -0
  27. data/vendor/assets/javascripts/bootstrap/affix.js +34 -23
  28. data/vendor/assets/javascripts/bootstrap/alert.js +5 -15
  29. data/vendor/assets/javascripts/bootstrap/button.js +21 -29
  30. data/vendor/assets/javascripts/bootstrap/carousel.js +16 -28
  31. data/vendor/assets/javascripts/bootstrap/collapse.js +7 -16
  32. data/vendor/assets/javascripts/bootstrap/dropdown.js +19 -26
  33. data/vendor/assets/javascripts/bootstrap/modal.js +25 -28
  34. data/vendor/assets/javascripts/bootstrap/popover.js +14 -21
  35. data/vendor/assets/javascripts/bootstrap/scrollspy.js +16 -21
  36. data/vendor/assets/javascripts/bootstrap/tab.js +7 -17
  37. data/vendor/assets/javascripts/bootstrap/tooltip.js +52 -39
  38. data/vendor/assets/javascripts/bootstrap/transition.js +11 -19
  39. data/vendor/assets/stylesheets/bootstrap/_badges.scss +4 -0
  40. data/vendor/assets/stylesheets/bootstrap/_breadcrumbs.scss +4 -1
  41. data/vendor/assets/stylesheets/bootstrap/_button-groups.scss +8 -9
  42. data/vendor/assets/stylesheets/bootstrap/_buttons.scss +8 -8
  43. data/vendor/assets/stylesheets/bootstrap/_code.scss +10 -0
  44. data/vendor/assets/stylesheets/bootstrap/_dropdowns.scss +28 -3
  45. data/vendor/assets/stylesheets/bootstrap/_forms.scss +81 -38
  46. data/vendor/assets/stylesheets/bootstrap/_glyphicons.scss +1 -5
  47. data/vendor/assets/stylesheets/bootstrap/_grid.scss +26 -5
  48. data/vendor/assets/stylesheets/bootstrap/_input-groups.scss +39 -18
  49. data/vendor/assets/stylesheets/bootstrap/_jumbotron.scss +3 -5
  50. data/vendor/assets/stylesheets/bootstrap/_list-group.scss +25 -3
  51. data/vendor/assets/stylesheets/bootstrap/_mixins.scss +124 -41
  52. data/vendor/assets/stylesheets/bootstrap/_modals.scss +15 -6
  53. data/vendor/assets/stylesheets/bootstrap/_navbar.scss +21 -17
  54. data/vendor/assets/stylesheets/bootstrap/_navs.scss +1 -1
  55. data/vendor/assets/stylesheets/bootstrap/_normalize.scss +139 -122
  56. data/vendor/assets/stylesheets/bootstrap/_pager.scss +4 -4
  57. data/vendor/assets/stylesheets/bootstrap/_pagination.scss +6 -3
  58. data/vendor/assets/stylesheets/bootstrap/_panels.scss +63 -15
  59. data/vendor/assets/stylesheets/bootstrap/_print.scss +0 -4
  60. data/vendor/assets/stylesheets/bootstrap/_responsive-utilities.scss +6 -124
  61. data/vendor/assets/stylesheets/bootstrap/_scaffolding.scss +17 -2
  62. data/vendor/assets/stylesheets/bootstrap/_tables.scss +3 -1
  63. data/vendor/assets/stylesheets/bootstrap/_theme.scss +3 -3
  64. data/vendor/assets/stylesheets/bootstrap/_thumbnails.scss +4 -4
  65. data/vendor/assets/stylesheets/bootstrap/_tooltip.scss +1 -1
  66. data/vendor/assets/stylesheets/bootstrap/_type.scss +77 -62
  67. data/vendor/assets/stylesheets/bootstrap/_variables.scss +350 -163
  68. data/vendor/assets/stylesheets/bootstrap/_wells.scss +1 -1
  69. data/vendor/assets/stylesheets/bootstrap/bootstrap.scss +38 -38
  70. metadata +22 -4
@@ -1,25 +1,15 @@
1
1
  /* ========================================================================
2
- * Bootstrap: tooltip.js v3.0.3
2
+ * Bootstrap: tooltip.js v3.1.0
3
3
  * http://getbootstrap.com/javascript/#tooltip
4
4
  * Inspired by the original jQuery.tipsy by Jason Frame
5
5
  * ========================================================================
6
- * Copyright 2013 Twitter, Inc.
7
- *
8
- * Licensed under the Apache License, Version 2.0 (the "License");
9
- * you may not use this file except in compliance with the License.
10
- * You may obtain a copy of the License at
11
- *
12
- * http://www.apache.org/licenses/LICENSE-2.0
13
- *
14
- * Unless required by applicable law or agreed to in writing, software
15
- * distributed under the License is distributed on an "AS IS" BASIS,
16
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
17
- * See the License for the specific language governing permissions and
18
- * limitations under the License.
6
+ * Copyright 2011-2014 Twitter, Inc.
7
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
19
8
  * ======================================================================== */
20
9
 
21
10
 
22
- +function ($) { "use strict";
11
+ +function ($) {
12
+ 'use strict';
23
13
 
24
14
  // TOOLTIP PUBLIC CLASS DEFINITION
25
15
  // ===============================
@@ -36,15 +26,15 @@
36
26
  }
37
27
 
38
28
  Tooltip.DEFAULTS = {
39
- animation: true
40
- , placement: 'top'
41
- , selector: false
42
- , template: '<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
43
- , trigger: 'hover focus'
44
- , title: ''
45
- , delay: 0
46
- , html: false
47
- , container: false
29
+ animation: true,
30
+ placement: 'top',
31
+ selector: false,
32
+ template: '<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',
33
+ trigger: 'hover focus',
34
+ title: '',
35
+ delay: 0,
36
+ html: false,
37
+ container: false
48
38
  }
49
39
 
50
40
  Tooltip.prototype.init = function (type, element, options) {
@@ -61,8 +51,8 @@
61
51
  if (trigger == 'click') {
62
52
  this.$element.on('click.' + this.type, this.options.selector, $.proxy(this.toggle, this))
63
53
  } else if (trigger != 'manual') {
64
- var eventIn = trigger == 'hover' ? 'mouseenter' : 'focus'
65
- var eventOut = trigger == 'hover' ? 'mouseleave' : 'blur'
54
+ var eventIn = trigger == 'hover' ? 'mouseenter' : 'focusin'
55
+ var eventOut = trigger == 'hover' ? 'mouseleave' : 'focusout'
66
56
 
67
57
  this.$element.on(eventIn + '.' + this.type, this.options.selector, $.proxy(this.enter, this))
68
58
  this.$element.on(eventOut + '.' + this.type, this.options.selector, $.proxy(this.leave, this))
@@ -83,8 +73,8 @@
83
73
 
84
74
  if (options.delay && typeof options.delay == 'number') {
85
75
  options.delay = {
86
- show: options.delay
87
- , hide: options.delay
76
+ show: options.delay,
77
+ hide: options.delay
88
78
  }
89
79
  }
90
80
 
@@ -133,12 +123,13 @@
133
123
  }
134
124
 
135
125
  Tooltip.prototype.show = function () {
136
- var e = $.Event('show.bs.'+ this.type)
126
+ var e = $.Event('show.bs.' + this.type)
137
127
 
138
128
  if (this.hasContent() && this.enabled) {
139
129
  this.$element.trigger(e)
140
130
 
141
131
  if (e.isDefaultPrevented()) return
132
+ var that = this;
142
133
 
143
134
  var $tip = this.tip()
144
135
 
@@ -188,11 +179,21 @@
188
179
  var calculatedOffset = this.getCalculatedOffset(placement, pos, actualWidth, actualHeight)
189
180
 
190
181
  this.applyPlacement(calculatedOffset, placement)
191
- this.$element.trigger('shown.bs.' + this.type)
182
+ this.hoverState = null
183
+
184
+ var complete = function() {
185
+ that.$element.trigger('shown.bs.' + that.type)
186
+ }
187
+
188
+ $.support.transition && this.$tip.hasClass('fade') ?
189
+ $tip
190
+ .one($.support.transition.end, complete)
191
+ .emulateTransitionEnd(150) :
192
+ complete()
192
193
  }
193
194
  }
194
195
 
195
- Tooltip.prototype.applyPlacement = function(offset, placement) {
196
+ Tooltip.prototype.applyPlacement = function (offset, placement) {
196
197
  var replace
197
198
  var $tip = this.tip()
198
199
  var width = $tip[0].offsetWidth
@@ -209,9 +210,18 @@
209
210
  offset.top = offset.top + marginTop
210
211
  offset.left = offset.left + marginLeft
211
212
 
212
- $tip
213
- .offset(offset)
214
- .addClass('in')
213
+ // $.fn.offset doesn't round pixel values
214
+ // so we use setOffset directly with our own function B-0
215
+ $.offset.setOffset($tip[0], $.extend({
216
+ using: function (props) {
217
+ $tip.css({
218
+ top: Math.round(props.top),
219
+ left: Math.round(props.left)
220
+ })
221
+ }
222
+ }, offset), 0)
223
+
224
+ $tip.addClass('in')
215
225
 
216
226
  // check to see if placing tip in new offset caused the tip to resize itself
217
227
  var actualWidth = $tip[0].offsetWidth
@@ -243,8 +253,8 @@
243
253
  if (replace) $tip.offset(offset)
244
254
  }
245
255
 
246
- Tooltip.prototype.replaceArrow = function(delta, dimension, position) {
247
- this.arrow().css(position, delta ? (50 * (1 - delta / dimension) + "%") : '')
256
+ Tooltip.prototype.replaceArrow = function (delta, dimension, position) {
257
+ this.arrow().css(position, delta ? (50 * (1 - delta / dimension) + '%') : '')
248
258
  }
249
259
 
250
260
  Tooltip.prototype.setContent = function () {
@@ -262,6 +272,7 @@
262
272
 
263
273
  function complete() {
264
274
  if (that.hoverState != 'in') $tip.detach()
275
+ that.$element.trigger('hidden.bs.' + that.type)
265
276
  }
266
277
 
267
278
  this.$element.trigger(e)
@@ -276,7 +287,7 @@
276
287
  .emulateTransitionEnd(150) :
277
288
  complete()
278
289
 
279
- this.$element.trigger('hidden.bs.' + this.type)
290
+ this.hoverState = null
280
291
 
281
292
  return this
282
293
  }
@@ -295,8 +306,8 @@
295
306
  Tooltip.prototype.getPosition = function () {
296
307
  var el = this.$element[0]
297
308
  return $.extend({}, (typeof el.getBoundingClientRect == 'function') ? el.getBoundingClientRect() : {
298
- width: el.offsetWidth
299
- , height: el.offsetHeight
309
+ width: el.offsetWidth,
310
+ height: el.offsetHeight
300
311
  }, this.$element.offset())
301
312
  }
302
313
 
@@ -352,6 +363,7 @@
352
363
  }
353
364
 
354
365
  Tooltip.prototype.destroy = function () {
366
+ clearTimeout(this.timeout)
355
367
  this.hide().$element.off('.' + this.type).removeData('bs.' + this.type)
356
368
  }
357
369
 
@@ -367,6 +379,7 @@
367
379
  var data = $this.data('bs.tooltip')
368
380
  var options = typeof option == 'object' && option
369
381
 
382
+ if (!data && option == 'destroy') return
370
383
  if (!data) $this.data('bs.tooltip', (data = new Tooltip(this, options)))
371
384
  if (typeof option == 'string') data[option]()
372
385
  })
@@ -1,24 +1,14 @@
1
1
  /* ========================================================================
2
- * Bootstrap: transition.js v3.0.3
2
+ * Bootstrap: transition.js v3.1.0
3
3
  * http://getbootstrap.com/javascript/#transitions
4
4
  * ========================================================================
5
- * Copyright 2013 Twitter, Inc.
6
- *
7
- * Licensed under the Apache License, Version 2.0 (the "License");
8
- * you may not use this file except in compliance with the License.
9
- * You may obtain a copy of the License at
10
- *
11
- * http://www.apache.org/licenses/LICENSE-2.0
12
- *
13
- * Unless required by applicable law or agreed to in writing, software
14
- * distributed under the License is distributed on an "AS IS" BASIS,
15
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
16
- * See the License for the specific language governing permissions and
17
- * limitations under the License.
5
+ * Copyright 2011-2014 Twitter, Inc.
6
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
18
7
  * ======================================================================== */
19
8
 
20
9
 
21
- +function ($) { "use strict";
10
+ +function ($) {
11
+ 'use strict';
22
12
 
23
13
  // CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/)
24
14
  // ============================================================
@@ -27,10 +17,10 @@
27
17
  var el = document.createElement('bootstrap')
28
18
 
29
19
  var transEndEventNames = {
30
- 'WebkitTransition' : 'webkitTransitionEnd'
31
- , 'MozTransition' : 'transitionend'
32
- , 'OTransition' : 'oTransitionEnd otransitionend'
33
- , 'transition' : 'transitionend'
20
+ 'WebkitTransition' : 'webkitTransitionEnd',
21
+ 'MozTransition' : 'transitionend',
22
+ 'OTransition' : 'oTransitionEnd otransitionend',
23
+ 'transition' : 'transitionend'
34
24
  }
35
25
 
36
26
  for (var name in transEndEventNames) {
@@ -38,6 +28,8 @@
38
28
  return { end: transEndEventNames[name] }
39
29
  }
40
30
  }
31
+
32
+ return false // explicit for ie8 ( ._.)
41
33
  }
42
34
 
43
35
  // http://blog.alexmaccaw.com/css-transitions
@@ -28,6 +28,10 @@
28
28
  position: relative;
29
29
  top: -1px;
30
30
  }
31
+ .btn-xs & {
32
+ top: 0;
33
+ padding: 1px 5px;
34
+ }
31
35
  }
32
36
 
33
37
  // Hover state, but only for links
@@ -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
  }
@@ -37,18 +37,17 @@
37
37
 
38
38
  // Optional: Group multiple button groups together for a toolbar
39
39
  .btn-toolbar {
40
+ margin-left: -5px; // Offset the first child's margin
40
41
  @include clearfix();
41
42
 
42
- .btn-group {
43
+ .btn-group,
44
+ .input-group {
43
45
  float: left;
44
46
  }
45
- // Space out series of button groups
46
47
  > .btn,
47
- > .btn-group {
48
- + .btn,
49
- + .btn-group {
50
- margin-left: 5px;
51
- }
48
+ > .btn-group,
49
+ > .input-group {
50
+ margin-left: 5px;
52
51
  }
53
52
  }
54
53
 
@@ -188,13 +187,13 @@
188
187
  .btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
189
188
  border-radius: 0;
190
189
  }
191
- .btn-group-vertical > .btn-group:first-child {
190
+ .btn-group-vertical > .btn-group:first-child:not(:last-child) {
192
191
  > .btn:last-child,
193
192
  > .dropdown-toggle {
194
193
  @include border-bottom-radius(0);
195
194
  }
196
195
  }
197
- .btn-group-vertical > .btn-group:last-child > .btn:first-child {
196
+ .btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
198
197
  @include border-top-radius(0);
199
198
  }
200
199
 
@@ -56,14 +56,6 @@
56
56
  .btn-primary {
57
57
  @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
58
58
  }
59
- // Warning appears as orange
60
- .btn-warning {
61
- @include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border);
62
- }
63
- // Danger and error appear as red
64
- .btn-danger {
65
- @include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
66
- }
67
59
  // Success appears as green
68
60
  .btn-success {
69
61
  @include button-variant($btn-success-color, $btn-success-bg, $btn-success-border);
@@ -72,6 +64,14 @@
72
64
  .btn-info {
73
65
  @include button-variant($btn-info-color, $btn-info-bg, $btn-info-border);
74
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
+ }
75
75
 
76
76
 
77
77
  // Link buttons
@@ -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;
@@ -46,6 +46,8 @@
46
46
  background-clip: padding-box;
47
47
 
48
48
  // Aligns the dropdown menu to right
49
+ //
50
+ // Deprecated as of 3.1.0 in favor of `.dropdown-menu-[dir]`
49
51
  &.pull-right {
50
52
  right: 0;
51
53
  left: auto;
@@ -126,6 +128,25 @@
126
128
  }
127
129
  }
128
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
+
129
150
  // Dropdown section headers
130
151
  .dropdown-header {
131
152
  display: block;
@@ -142,7 +163,7 @@
142
163
  right: 0;
143
164
  bottom: 0;
144
165
  top: 0;
145
- z-index: $zindex-dropdown - 10;
166
+ z-index: ($zindex-dropdown - 10);
146
167
  }
147
168
 
148
169
  // Right aligned dropdowns
@@ -180,8 +201,12 @@
180
201
  @media (min-width: $grid-float-breakpoint) {
181
202
  .navbar-right {
182
203
  .dropdown-menu {
183
- right: 0;
184
- 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;
185
210
  }
186
211
  }
187
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,11 +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;
309
334
  }
310
335
 
311
- // Override `width: 100%;` when not within a `.form-group`
312
- select.form-control {
313
- width: auto;
336
+ .control-label {
337
+ margin-bottom: 0;
338
+ vertical-align: middle;
314
339
  }
315
340
 
316
341
  // Remove default margin on radios/checkboxes that were used for stacking, and
@@ -322,12 +347,21 @@ input[type="checkbox"],
322
347
  margin-top: 0;
323
348
  margin-bottom: 0;
324
349
  padding-left: 0;
350
+ vertical-align: middle;
325
351
  }
326
352
  .radio input[type="radio"],
327
353
  .checkbox input[type="checkbox"] {
328
354
  float: none;
329
355
  margin-left: 0;
330
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
+ }
331
365
  }
332
366
  }
333
367
 
@@ -353,7 +387,7 @@ input[type="checkbox"],
353
387
  // and other content below items
354
388
  .radio,
355
389
  .checkbox {
356
- min-height: $line-height-computed + ($padding-base-vertical + 1);
390
+ min-height: ($line-height-computed + ($padding-base-vertical + 1));
357
391
  }
358
392
 
359
393
  // Make form groups behave like rows
@@ -371,4 +405,13 @@ input[type="checkbox"],
371
405
  text-align: right;
372
406
  }
373
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
+ }
374
417
  }