bootstrap 4.3.1 → 4.4.1

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 might be problematic. Click here for more details.

Files changed (77) hide show
  1. checksums.yaml +4 -4
  2. data/.travis.yml +4 -0
  3. data/CHANGELOG.md +2 -14
  4. data/README.md +1 -1
  5. data/assets/javascripts/bootstrap-sprockets.js +7 -7
  6. data/assets/javascripts/bootstrap.js +376 -290
  7. data/assets/javascripts/bootstrap.min.js +2 -2
  8. data/assets/javascripts/bootstrap/alert.js +9 -10
  9. data/assets/javascripts/bootstrap/button.js +72 -25
  10. data/assets/javascripts/bootstrap/carousel.js +40 -27
  11. data/assets/javascripts/bootstrap/collapse.js +36 -22
  12. data/assets/javascripts/bootstrap/dropdown.js +75 -54
  13. data/assets/javascripts/bootstrap/modal.js +94 -59
  14. data/assets/javascripts/bootstrap/popover.js +36 -22
  15. data/assets/javascripts/bootstrap/scrollspy.js +35 -21
  16. data/assets/javascripts/bootstrap/tab.js +9 -10
  17. data/assets/javascripts/bootstrap/toast.js +58 -38
  18. data/assets/javascripts/bootstrap/tooltip.js +98 -76
  19. data/assets/javascripts/bootstrap/util.js +21 -4
  20. data/assets/stylesheets/_bootstrap-grid.scss +1 -1
  21. data/assets/stylesheets/_bootstrap-reboot.scss +1 -1
  22. data/assets/stylesheets/_bootstrap.scss +1 -1
  23. data/assets/stylesheets/bootstrap/_badge.scss +1 -1
  24. data/assets/stylesheets/bootstrap/_breadcrumb.scss +2 -1
  25. data/assets/stylesheets/bootstrap/_button-group.scss +1 -1
  26. data/assets/stylesheets/bootstrap/_buttons.scss +4 -2
  27. data/assets/stylesheets/bootstrap/_card.scss +17 -28
  28. data/assets/stylesheets/bootstrap/_carousel.scss +6 -6
  29. data/assets/stylesheets/bootstrap/_close.scss +2 -2
  30. data/assets/stylesheets/bootstrap/_code.scss +1 -1
  31. data/assets/stylesheets/bootstrap/_custom-forms.scss +22 -8
  32. data/assets/stylesheets/bootstrap/_dropdown.scss +3 -3
  33. data/assets/stylesheets/bootstrap/_forms.scss +17 -9
  34. data/assets/stylesheets/bootstrap/_functions.scss +49 -1
  35. data/assets/stylesheets/bootstrap/_grid.scss +25 -8
  36. data/assets/stylesheets/bootstrap/_images.scss +2 -2
  37. data/assets/stylesheets/bootstrap/_input-group.scss +2 -4
  38. data/assets/stylesheets/bootstrap/_list-group.scss +31 -22
  39. data/assets/stylesheets/bootstrap/_mixins.scss +3 -3
  40. data/assets/stylesheets/bootstrap/_modal.scss +26 -16
  41. data/assets/stylesheets/bootstrap/_nav.scss +3 -3
  42. data/assets/stylesheets/bootstrap/_navbar.scss +45 -15
  43. data/assets/stylesheets/bootstrap/_pagination.scss +2 -2
  44. data/assets/stylesheets/bootstrap/_popover.scss +8 -9
  45. data/assets/stylesheets/bootstrap/_print.scss +2 -2
  46. data/assets/stylesheets/bootstrap/_progress.scss +5 -2
  47. data/assets/stylesheets/bootstrap/_reboot.scss +14 -15
  48. data/assets/stylesheets/bootstrap/_root.scss +1 -0
  49. data/assets/stylesheets/bootstrap/_tables.scss +3 -3
  50. data/assets/stylesheets/bootstrap/_type.scss +2 -2
  51. data/assets/stylesheets/bootstrap/_variables.scss +42 -22
  52. data/assets/stylesheets/bootstrap/mixins/_background-variant.scss +3 -2
  53. data/assets/stylesheets/bootstrap/mixins/_badge.scss +1 -1
  54. data/assets/stylesheets/bootstrap/mixins/_buttons.scss +5 -2
  55. data/assets/stylesheets/bootstrap/mixins/_caret.scss +8 -8
  56. data/assets/stylesheets/bootstrap/mixins/_float.scss +3 -3
  57. data/assets/stylesheets/bootstrap/mixins/_forms.scss +32 -47
  58. data/assets/stylesheets/bootstrap/mixins/_grid-framework.scss +8 -3
  59. data/assets/stylesheets/bootstrap/mixins/_grid.scss +18 -0
  60. data/assets/stylesheets/bootstrap/mixins/_hover.scss +4 -4
  61. data/assets/stylesheets/bootstrap/mixins/_image.scss +1 -1
  62. data/assets/stylesheets/bootstrap/mixins/_list-group.scss +1 -1
  63. data/assets/stylesheets/bootstrap/mixins/_lists.scss +1 -1
  64. data/assets/stylesheets/bootstrap/mixins/_nav-divider.scss +2 -1
  65. data/assets/stylesheets/bootstrap/mixins/_reset-text.scss +1 -1
  66. data/assets/stylesheets/bootstrap/mixins/_screen-reader.scss +3 -2
  67. data/assets/stylesheets/bootstrap/mixins/_table-row.scss +1 -1
  68. data/assets/stylesheets/bootstrap/mixins/_text-emphasis.scss +3 -2
  69. data/assets/stylesheets/bootstrap/utilities/_background.scss +1 -1
  70. data/assets/stylesheets/bootstrap/utilities/_text.scss +2 -2
  71. data/bootstrap.gemspec +1 -1
  72. data/lib/bootstrap/version.rb +2 -2
  73. data/test/dummy_rails/app/assets/config/manifest.js +3 -0
  74. data/test/dummy_rails/app/assets/stylesheets/.browserslistrc +1 -0
  75. data/test/support/dummy_rails_integration.rb +3 -1
  76. data/test/test_helper.rb +18 -13
  77. metadata +8 -5
@@ -30,8 +30,14 @@
30
30
  border: 0;
31
31
  }
32
32
 
33
+ // Remove select outline from select box in FF
34
+ &:-moz-focusring {
35
+ color: transparent;
36
+ text-shadow: 0 0 0 $input-color;
37
+ }
38
+
33
39
  // Customize the `:focus` state to imitate native WebKit styles.
34
- @include form-control-focus();
40
+ @include form-control-focus($ignore-warning: true);
35
41
 
36
42
  // Placeholder
37
43
  &::placeholder {
@@ -80,23 +86,23 @@ select.form-control {
80
86
  // For use with horizontal and inline forms, when you need the label (or legend)
81
87
  // text to align with the form controls.
82
88
  .col-form-label {
83
- padding-top: calc(#{$input-padding-y} + #{$input-border-width});
84
- padding-bottom: calc(#{$input-padding-y} + #{$input-border-width});
89
+ padding-top: add($input-padding-y, $input-border-width);
90
+ padding-bottom: add($input-padding-y, $input-border-width);
85
91
  margin-bottom: 0; // Override the `<label>/<legend>` default
86
92
  @include font-size(inherit); // Override the `<legend>` default
87
93
  line-height: $input-line-height;
88
94
  }
89
95
 
90
96
  .col-form-label-lg {
91
- padding-top: calc(#{$input-padding-y-lg} + #{$input-border-width});
92
- padding-bottom: calc(#{$input-padding-y-lg} + #{$input-border-width});
97
+ padding-top: add($input-padding-y-lg, $input-border-width);
98
+ padding-bottom: add($input-padding-y-lg, $input-border-width);
93
99
  @include font-size($input-font-size-lg);
94
100
  line-height: $input-line-height-lg;
95
101
  }
96
102
 
97
103
  .col-form-label-sm {
98
- padding-top: calc(#{$input-padding-y-sm} + #{$input-border-width});
99
- padding-bottom: calc(#{$input-padding-y-sm} + #{$input-border-width});
104
+ padding-top: add($input-padding-y-sm, $input-border-width);
105
+ padding-bottom: add($input-padding-y-sm, $input-border-width);
100
106
  @include font-size($input-font-size-sm);
101
107
  line-height: $input-line-height-sm;
102
108
  }
@@ -110,9 +116,9 @@ select.form-control {
110
116
  .form-control-plaintext {
111
117
  display: block;
112
118
  width: 100%;
113
- padding-top: $input-padding-y;
114
- padding-bottom: $input-padding-y;
119
+ padding: $input-padding-y 0;
115
120
  margin-bottom: 0; // match inputs if this class comes on inputs with default margins
121
+ @include font-size($input-font-size);
116
122
  line-height: $input-line-height;
117
123
  color: $input-plaintext-color;
118
124
  background-color: transparent;
@@ -210,6 +216,8 @@ textarea.form-control {
210
216
  margin-top: $form-check-input-margin-y;
211
217
  margin-left: -$form-check-input-gutter;
212
218
 
219
+ // Use [disabled] and :disabled for workaround https://github.com/twbs/bootstrap/issues/28247
220
+ &[disabled] ~ .form-check-label,
213
221
  &:disabled ~ .form-check-label {
214
222
  color: $text-muted;
215
223
  }
@@ -8,7 +8,7 @@
8
8
  $prev-key: null;
9
9
  $prev-num: null;
10
10
  @each $key, $num in $map {
11
- @if $prev-num == null or unit($num) == "%" {
11
+ @if $prev-num == null or unit($num) == "%" or unit($prev-num) == "%" {
12
12
  // Do nothing
13
13
  } @else if not comparable($prev-num, $num) {
14
14
  @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
@@ -48,6 +48,17 @@
48
48
  @return $string;
49
49
  }
50
50
 
51
+ // See https://codepen.io/kevinweber/pen/dXWoRw
52
+ @function escape-svg($string) {
53
+ @if str-index($string, "data:image/svg+xml") {
54
+ @each $char, $encoded in $escaped-characters {
55
+ $string: str-replace($string, $char, $encoded);
56
+ }
57
+ }
58
+
59
+ @return $string;
60
+ }
61
+
51
62
  // Color contrast
52
63
  @function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light) {
53
64
  $r: red($color);
@@ -84,3 +95,40 @@
84
95
 
85
96
  @return mix($color-base, $color, $level * $theme-color-interval);
86
97
  }
98
+
99
+ // Return valid calc
100
+ @function add($value1, $value2, $return-calc: true) {
101
+ @if $value1 == null {
102
+ @return $value2;
103
+ }
104
+
105
+ @if $value2 == null {
106
+ @return $value1;
107
+ }
108
+
109
+ @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
110
+ @return $value1 + $value2;
111
+ }
112
+
113
+ @return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + unquote(" + ") + $value2);
114
+ }
115
+
116
+ @function subtract($value1, $value2, $return-calc: true) {
117
+ @if $value1 == null and $value2 == null {
118
+ @return null;
119
+ }
120
+
121
+ @if $value1 == null {
122
+ @return -$value2;
123
+ }
124
+
125
+ @if $value2 == null {
126
+ @return $value1;
127
+ }
128
+
129
+ @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
130
+ @return $value1 - $value2;
131
+ }
132
+
133
+ @return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(" - ") + $value2);
134
+ }
@@ -3,26 +3,43 @@
3
3
  // Set the container width, and override it for fixed navbars in media queries.
4
4
 
5
5
  @if $enable-grid-classes {
6
+ // Single container class with breakpoint max-widths
6
7
  .container {
7
8
  @include make-container();
8
9
  @include make-container-max-widths();
9
10
  }
10
- }
11
-
12
- // Fluid container
13
- //
14
- // Utilizes the mixin meant for fixed width containers, but with 100% width for
15
- // fluid, full width layouts.
16
11
 
17
- @if $enable-grid-classes {
12
+ // 100% wide container at all breakpoints
18
13
  .container-fluid {
19
14
  @include make-container();
20
15
  }
16
+
17
+ // Responsive containers that are 100% wide until a breakpoint
18
+ @each $breakpoint, $container-max-width in $container-max-widths {
19
+ .container-#{$breakpoint} {
20
+ @extend .container-fluid;
21
+ }
22
+
23
+ @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
24
+ %responsive-container-#{$breakpoint} {
25
+ max-width: $container-max-width;
26
+ }
27
+
28
+ @each $name, $width in $grid-breakpoints {
29
+ @if ($container-max-width > $width or $breakpoint == $name) {
30
+ .container#{breakpoint-infix($name, $grid-breakpoints)} {
31
+ @extend %responsive-container-#{$breakpoint};
32
+ }
33
+ }
34
+ }
35
+ }
36
+ }
21
37
  }
22
38
 
39
+
23
40
  // Row
24
41
  //
25
- // Rows contain and clear the floats of your columns.
42
+ // Rows contain your columns.
26
43
 
27
44
  @if $enable-grid-classes {
28
45
  .row {
@@ -6,7 +6,7 @@
6
6
  // which weren't expecting the images within themselves to be involuntarily resized.
7
7
  // See also https://github.com/twbs/bootstrap/issues/18178
8
8
  .img-fluid {
9
- @include img-fluid;
9
+ @include img-fluid();
10
10
  }
11
11
 
12
12
 
@@ -19,7 +19,7 @@
19
19
  @include box-shadow($thumbnail-box-shadow);
20
20
 
21
21
  // Keep them at most 100% wide
22
- @include img-fluid;
22
+ @include img-fluid();
23
23
  }
24
24
 
25
25
  //
@@ -16,10 +16,8 @@
16
16
  > .custom-select,
17
17
  > .custom-file {
18
18
  position: relative; // For focus state's z-index
19
- flex: 1 1 auto;
20
- // Add width 1% and flex-basis auto to ensure that button will not wrap out
21
- // the column. Applies to IE Edge+ and Firefox. Chrome does not require this.
22
- width: 1%;
19
+ flex: 1 1 0%;
20
+ min-width: 0; // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size
23
21
  margin-bottom: 0;
24
22
 
25
23
  + .form-control,
@@ -23,7 +23,7 @@
23
23
  text-align: inherit; // For `<button>`s (anchors inherit)
24
24
 
25
25
  // Hover state
26
- @include hover-focus {
26
+ @include hover-focus() {
27
27
  z-index: 1; // Place hover/focus items above their siblings for proper border styling
28
28
  color: $list-group-action-hover-color;
29
29
  text-decoration: none;
@@ -45,8 +45,6 @@
45
45
  position: relative;
46
46
  display: block;
47
47
  padding: $list-group-item-padding-y $list-group-item-padding-x;
48
- // Place the border on the list items and negative margin up for better styling
49
- margin-bottom: -$list-group-border-width;
50
48
  color: $list-group-color;
51
49
  background-color: $list-group-bg;
52
50
  border: $list-group-border-width solid $list-group-border-color;
@@ -56,7 +54,6 @@
56
54
  }
57
55
 
58
56
  &:last-child {
59
- margin-bottom: 0;
60
57
  @include border-bottom-radius($list-group-border-radius);
61
58
  }
62
59
 
@@ -74,6 +71,15 @@
74
71
  background-color: $list-group-active-bg;
75
72
  border-color: $list-group-active-border-color;
76
73
  }
74
+
75
+ & + & {
76
+ border-top-width: 0;
77
+
78
+ &.active {
79
+ margin-top: -$list-group-border-width;
80
+ border-top-width: $list-group-border-width;
81
+ }
82
+ }
77
83
  }
78
84
 
79
85
 
@@ -89,19 +95,29 @@
89
95
  flex-direction: row;
90
96
 
91
97
  .list-group-item {
92
- margin-right: -$list-group-border-width;
93
- margin-bottom: 0;
94
-
95
98
  &:first-child {
96
- @include border-left-radius($list-group-border-radius);
99
+ @include border-bottom-left-radius($list-group-border-radius);
97
100
  @include border-top-right-radius(0);
98
101
  }
99
102
 
100
103
  &:last-child {
101
- margin-right: 0;
102
- @include border-right-radius($list-group-border-radius);
104
+ @include border-top-right-radius($list-group-border-radius);
103
105
  @include border-bottom-left-radius(0);
104
106
  }
107
+
108
+ &.active {
109
+ margin-top: 0;
110
+ }
111
+
112
+ & + .list-group-item {
113
+ border-top-width: $list-group-border-width;
114
+ border-left-width: 0;
115
+
116
+ &.active {
117
+ margin-left: -$list-group-border-width;
118
+ border-left-width: $list-group-border-width;
119
+ }
120
+ }
105
121
  }
106
122
  }
107
123
  }
@@ -115,25 +131,18 @@
115
131
 
116
132
  .list-group-flush {
117
133
  .list-group-item {
118
- border-right: 0;
119
- border-left: 0;
134
+ border-right-width: 0;
135
+ border-left-width: 0;
120
136
  @include border-radius(0);
121
137
 
122
- &:last-child {
123
- margin-bottom: -$list-group-border-width;
124
- }
125
- }
126
-
127
- &:first-child {
128
- .list-group-item:first-child {
129
- border-top: 0;
138
+ &:first-child {
139
+ border-top-width: 0;
130
140
  }
131
141
  }
132
142
 
133
143
  &:last-child {
134
144
  .list-group-item:last-child {
135
- margin-bottom: 0;
136
- border-bottom: 0;
145
+ border-bottom-width: 0;
137
146
  }
138
147
  }
139
148
  }
@@ -22,7 +22,7 @@
22
22
  @import "mixins/text-truncate";
23
23
  @import "mixins/visibility";
24
24
 
25
- // // Components
25
+ // Components
26
26
  @import "mixins/alert";
27
27
  @import "mixins/buttons";
28
28
  @import "mixins/caret";
@@ -33,14 +33,14 @@
33
33
  @import "mixins/forms";
34
34
  @import "mixins/table-row";
35
35
 
36
- // // Skins
36
+ // Skins
37
37
  @import "mixins/background-variant";
38
38
  @import "mixins/border-radius";
39
39
  @import "mixins/box-shadow";
40
40
  @import "mixins/gradients";
41
41
  @import "mixins/transition";
42
42
 
43
- // // Layout
43
+ // Layout
44
44
  @import "mixins/clearfix";
45
45
  @import "mixins/grid-framework";
46
46
  @import "mixins/grid";
@@ -48,14 +48,19 @@
48
48
  .modal.show & {
49
49
  transform: $modal-show-transform;
50
50
  }
51
+
52
+ // When trying to close, animate focus to scale
53
+ .modal.modal-static & {
54
+ transform: $modal-scale-transform;
55
+ }
51
56
  }
52
57
 
53
58
  .modal-dialog-scrollable {
54
59
  display: flex; // IE10/11
55
- max-height: calc(100% - #{$modal-dialog-margin * 2});
60
+ max-height: subtract(100%, $modal-dialog-margin * 2);
56
61
 
57
62
  .modal-content {
58
- max-height: calc(100vh - #{$modal-dialog-margin * 2}); // IE10/11
63
+ max-height: subtract(100vh, $modal-dialog-margin * 2); // IE10/11
59
64
  overflow: hidden;
60
65
  }
61
66
 
@@ -72,12 +77,12 @@
72
77
  .modal-dialog-centered {
73
78
  display: flex;
74
79
  align-items: center;
75
- min-height: calc(100% - #{$modal-dialog-margin * 2});
80
+ min-height: subtract(100%, $modal-dialog-margin * 2);
76
81
 
77
82
  // Ensure `modal-dialog-centered` extends the full height of the view (IE10/11)
78
83
  &::before {
79
84
  display: block; // IE10
80
- height: calc(100vh - #{$modal-dialog-margin * 2});
85
+ height: subtract(100vh, $modal-dialog-margin * 2);
81
86
  content: "";
82
87
  }
83
88
 
@@ -138,7 +143,7 @@
138
143
  justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
139
144
  padding: $modal-header-padding;
140
145
  border-bottom: $modal-header-border-width solid $modal-header-border-color;
141
- @include border-top-radius($modal-content-border-radius);
146
+ @include border-top-radius($modal-content-inner-border-radius);
142
147
 
143
148
  .close {
144
149
  padding: $modal-header-padding;
@@ -158,7 +163,7 @@
158
163
  .modal-body {
159
164
  position: relative;
160
165
  // Enable `flex-grow: 1` so that the body take up as much space as possible
161
- // when should there be a fixed height on `.modal-dialog`.
166
+ // when there should be a fixed height on `.modal-dialog`.
162
167
  flex: 1 1 auto;
163
168
  padding: $modal-inner-padding;
164
169
  }
@@ -166,15 +171,20 @@
166
171
  // Footer (for actions)
167
172
  .modal-footer {
168
173
  display: flex;
174
+ flex-wrap: wrap;
169
175
  align-items: center; // vertically center
170
176
  justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
171
- padding: $modal-inner-padding;
177
+ padding: $modal-inner-padding - $modal-footer-margin-between / 2;
172
178
  border-top: $modal-footer-border-width solid $modal-footer-border-color;
173
- @include border-bottom-radius($modal-content-border-radius);
174
-
175
- // Easily place margin between footer elements
176
- > :not(:first-child) { margin-left: .25rem; }
177
- > :not(:last-child) { margin-right: .25rem; }
179
+ @include border-bottom-radius($modal-content-inner-border-radius);
180
+
181
+ // Place margin between footer elements
182
+ // This solution is far from ideal because of the universal selector usage,
183
+ // but is needed to fix https://github.com/twbs/bootstrap/issues/24800
184
+ // stylelint-disable-next-line selector-max-universal
185
+ > * {
186
+ margin: $modal-footer-margin-between / 2;
187
+ }
178
188
  }
179
189
 
180
190
  // Measure scrollbar width for padding body during modal show/hide
@@ -195,18 +205,18 @@
195
205
  }
196
206
 
197
207
  .modal-dialog-scrollable {
198
- max-height: calc(100% - #{$modal-dialog-margin-y-sm-up * 2});
208
+ max-height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);
199
209
 
200
210
  .modal-content {
201
- max-height: calc(100vh - #{$modal-dialog-margin-y-sm-up * 2});
211
+ max-height: subtract(100vh, $modal-dialog-margin-y-sm-up * 2);
202
212
  }
203
213
  }
204
214
 
205
215
  .modal-dialog-centered {
206
- min-height: calc(100% - #{$modal-dialog-margin-y-sm-up * 2});
216
+ min-height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);
207
217
 
208
218
  &::before {
209
- height: calc(100vh - #{$modal-dialog-margin-y-sm-up * 2});
219
+ height: subtract(100vh, $modal-dialog-margin-y-sm-up * 2);
210
220
  }
211
221
  }
212
222