bootstrap-sass 3.0.3.0 → 3.1.0.0

Sign up to get free protection for your applications and to get access to all the features.

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
  }