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

Files changed (53) hide show
  1. checksums.yaml +4 -4
  2. data/.travis.yml +11 -1
  3. data/README.md +1 -1
  4. data/assets/javascripts/bootstrap-sprockets.js +7 -7
  5. data/assets/javascripts/bootstrap.js +516 -617
  6. data/assets/javascripts/bootstrap.min.js +3 -3
  7. data/assets/javascripts/bootstrap/alert.js +19 -27
  8. data/assets/javascripts/bootstrap/button.js +50 -56
  9. data/assets/javascripts/bootstrap/carousel.js +88 -99
  10. data/assets/javascripts/bootstrap/collapse.js +43 -53
  11. data/assets/javascripts/bootstrap/dropdown.js +75 -93
  12. data/assets/javascripts/bootstrap/modal.js +87 -91
  13. data/assets/javascripts/bootstrap/popover.js +15 -21
  14. data/assets/javascripts/bootstrap/scrollspy.js +39 -53
  15. data/assets/javascripts/bootstrap/tab.js +44 -52
  16. data/assets/javascripts/bootstrap/toast.js +33 -41
  17. data/assets/javascripts/bootstrap/tooltip.js +53 -65
  18. data/assets/javascripts/bootstrap/util.js +9 -5
  19. data/assets/stylesheets/_bootstrap-grid.scss +3 -3
  20. data/assets/stylesheets/_bootstrap-reboot.scss +3 -3
  21. data/assets/stylesheets/_bootstrap.scss +3 -3
  22. data/assets/stylesheets/bootstrap/_breadcrumb.scss +2 -0
  23. data/assets/stylesheets/bootstrap/_buttons.scss +10 -7
  24. data/assets/stylesheets/bootstrap/_card.scss +11 -7
  25. data/assets/stylesheets/bootstrap/_close.scss +0 -1
  26. data/assets/stylesheets/bootstrap/_custom-forms.scss +2 -1
  27. data/assets/stylesheets/bootstrap/_dropdown.scss +2 -1
  28. data/assets/stylesheets/bootstrap/_forms.scss +9 -0
  29. data/assets/stylesheets/bootstrap/_functions.scss +12 -5
  30. data/assets/stylesheets/bootstrap/_grid.scss +9 -1
  31. data/assets/stylesheets/bootstrap/_input-group.scss +2 -1
  32. data/assets/stylesheets/bootstrap/_list-group.scss +9 -13
  33. data/assets/stylesheets/bootstrap/_modal.scss +2 -0
  34. data/assets/stylesheets/bootstrap/_nav.scss +1 -0
  35. data/assets/stylesheets/bootstrap/_pagination.scss +1 -0
  36. data/assets/stylesheets/bootstrap/_progress.scss +1 -0
  37. data/assets/stylesheets/bootstrap/_reboot.scss +10 -12
  38. data/assets/stylesheets/bootstrap/_spinners.scss +1 -0
  39. data/assets/stylesheets/bootstrap/_utilities.scss +2 -1
  40. data/assets/stylesheets/bootstrap/_variables.scss +4 -0
  41. data/assets/stylesheets/bootstrap/mixins/_background-variant.scss +2 -1
  42. data/assets/stylesheets/bootstrap/mixins/_border-radius.scss +26 -13
  43. data/assets/stylesheets/bootstrap/mixins/_buttons.scss +6 -6
  44. data/assets/stylesheets/bootstrap/mixins/_forms.scss +2 -2
  45. data/assets/stylesheets/bootstrap/mixins/_grid-framework.scss +25 -15
  46. data/assets/stylesheets/bootstrap/mixins/_transition.scss +17 -7
  47. data/assets/stylesheets/bootstrap/utilities/_background.scss +1 -1
  48. data/assets/stylesheets/bootstrap/utilities/_interactions.scss +5 -0
  49. data/assets/stylesheets/bootstrap/utilities/_text.scss +1 -2
  50. data/lib/bootstrap/version.rb +2 -2
  51. data/tasks/updater/network.rb +2 -2
  52. data/test/gemfiles/rails_6_0.gemfile +7 -0
  53. metadata +6 -3
@@ -19,15 +19,18 @@
19
19
  margin-left: 0;
20
20
  }
21
21
 
22
- > .list-group:first-child {
23
- .list-group-item:first-child {
24
- @include border-top-radius($card-border-radius);
22
+ > .list-group {
23
+ border-top: inherit;
24
+ border-bottom: inherit;
25
+
26
+ &:first-child {
27
+ border-top-width: 0;
28
+ @include border-top-radius($card-inner-border-radius);
25
29
  }
26
- }
27
30
 
28
- > .list-group:last-child {
29
- .list-group-item:last-child {
30
- @include border-bottom-radius($card-border-radius);
31
+ &:last-child {
32
+ border-bottom-width: 0;
33
+ @include border-bottom-radius($card-inner-border-radius);
31
34
  }
32
35
  }
33
36
  }
@@ -90,6 +93,7 @@
90
93
 
91
94
  .card-footer {
92
95
  padding: $card-spacer-y $card-spacer-x;
96
+ color: $card-cap-color;
93
97
  background-color: $card-cap-bg;
94
98
  border-top: $card-border-width solid $card-border-color;
95
99
 
@@ -30,7 +30,6 @@ button.close {
30
30
  padding: 0;
31
31
  background-color: transparent;
32
32
  border: 0;
33
- appearance: none;
34
33
  }
35
34
 
36
35
  // Future-proof disabling of clicks on `<a>` elements
@@ -237,8 +237,9 @@
237
237
  border-color: $custom-select-focus-border-color;
238
238
  outline: 0;
239
239
  @if $enable-shadows {
240
- box-shadow: $custom-select-box-shadow, $custom-select-focus-box-shadow;
240
+ @include box-shadow($custom-select-box-shadow, $custom-select-focus-box-shadow);
241
241
  } @else {
242
+ // Avoid using mixin so we can pass custom focus shadow properly
242
243
  box-shadow: $custom-select-focus-box-shadow;
243
244
  }
244
245
 
@@ -128,6 +128,7 @@
128
128
  font-weight: $font-weight-normal;
129
129
  color: $dropdown-link-color;
130
130
  text-align: inherit; // For `<button>`s
131
+ text-decoration: if($link-decoration == none, null, none);
131
132
  white-space: nowrap; // prevent links from randomly breaking onto new lines
132
133
  background-color: transparent; // For `<button>`s
133
134
  border: 0; // For `<button>`s
@@ -176,7 +177,7 @@
176
177
  // Dropdown section headers
177
178
  .dropdown-header {
178
179
  display: block;
179
- padding: $dropdown-padding-y $dropdown-item-padding-x;
180
+ padding: $dropdown-header-padding;
180
181
  margin-bottom: 0; // for use with heading elements
181
182
  @include font-size($font-size-sm);
182
183
  color: $dropdown-header-color;
@@ -59,6 +59,15 @@
59
59
  }
60
60
  }
61
61
 
62
+ input[type="date"],
63
+ input[type="time"],
64
+ input[type="datetime-local"],
65
+ input[type="month"] {
66
+ &.form-control {
67
+ appearance: none; // Fix appearance for date inputs in Safari
68
+ }
69
+ }
70
+
62
71
  select.form-control {
63
72
  &:focus::-ms-value {
64
73
  // Suppress the nested default white text on blue background highlight given to
@@ -23,10 +23,12 @@
23
23
  // Starts at zero
24
24
  // Used to ensure the min-width of the lowest breakpoint starts at 0.
25
25
  @mixin _assert-starts-at-zero($map, $map-name: "$grid-breakpoints") {
26
- $values: map-values($map);
27
- $first-value: nth($values, 1);
28
- @if $first-value != 0 {
29
- @warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
26
+ @if length($map) > 0 {
27
+ $values: map-values($map);
28
+ $first-value: nth($values, 1);
29
+ @if $first-value != 0 {
30
+ @warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
31
+ }
30
32
  }
31
33
  }
32
34
 
@@ -52,7 +54,12 @@
52
54
  @function escape-svg($string) {
53
55
  @if str-index($string, "data:image/svg+xml") {
54
56
  @each $char, $encoded in $escaped-characters {
55
- $string: str-replace($string, $char, $encoded);
57
+ // Do not escape the url brackets
58
+ @if str-index($string, "url(") == 1 {
59
+ $string: url("#{str-replace(str-slice($string, 6, -3), $char, $encoded)}");
60
+ } @else {
61
+ $string: str-replace($string, $char, $encoded);
62
+ }
56
63
  }
57
64
  }
58
65
 
@@ -25,11 +25,19 @@
25
25
  max-width: $container-max-width;
26
26
  }
27
27
 
28
+ // Extend each breakpoint which is smaller or equal to the current breakpoint
29
+ $extend-breakpoint: true;
30
+
28
31
  @each $name, $width in $grid-breakpoints {
29
- @if ($container-max-width > $width or $breakpoint == $name) {
32
+ @if ($extend-breakpoint) {
30
33
  .container#{breakpoint-infix($name, $grid-breakpoints)} {
31
34
  @extend %responsive-container-#{$breakpoint};
32
35
  }
36
+
37
+ // Once the current breakpoint is reached, stop extending
38
+ @if ($breakpoint == $name) {
39
+ $extend-breakpoint: false;
40
+ }
33
41
  }
34
42
  }
35
43
  }
@@ -16,7 +16,8 @@
16
16
  > .custom-select,
17
17
  > .custom-file {
18
18
  position: relative; // For focus state's z-index
19
- flex: 1 1 0%;
19
+ flex: 1 1 auto;
20
+ width: 1%;
20
21
  min-width: 0; // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size
21
22
  margin-bottom: 0;
22
23
 
@@ -9,6 +9,7 @@
9
9
  // No need to set list-style: none; since .list-group-item is block level
10
10
  padding-left: 0; // reset padding because ul and ol
11
11
  margin-bottom: 0;
12
+ @include border-radius($list-group-border-radius);
12
13
  }
13
14
 
14
15
 
@@ -46,15 +47,16 @@
46
47
  display: block;
47
48
  padding: $list-group-item-padding-y $list-group-item-padding-x;
48
49
  color: $list-group-color;
50
+ text-decoration: if($link-decoration == none, null, none);
49
51
  background-color: $list-group-bg;
50
52
  border: $list-group-border-width solid $list-group-border-color;
51
53
 
52
54
  &:first-child {
53
- @include border-top-radius($list-group-border-radius);
55
+ @include border-top-radius(inherit);
54
56
  }
55
57
 
56
58
  &:last-child {
57
- @include border-bottom-radius($list-group-border-radius);
59
+ @include border-bottom-radius(inherit);
58
60
  }
59
61
 
60
62
  &.disabled,
@@ -94,7 +96,7 @@
94
96
  .list-group-horizontal#{$infix} {
95
97
  flex-direction: row;
96
98
 
97
- .list-group-item {
99
+ > .list-group-item {
98
100
  &:first-child {
99
101
  @include border-bottom-left-radius($list-group-border-radius);
100
102
  @include border-top-right-radius(0);
@@ -130,18 +132,12 @@
130
132
  // useful within other components (e.g., cards).
131
133
 
132
134
  .list-group-flush {
133
- .list-group-item {
134
- border-right-width: 0;
135
- border-left-width: 0;
136
- @include border-radius(0);
135
+ @include border-radius(0);
137
136
 
138
- &:first-child {
139
- border-top-width: 0;
140
- }
141
- }
137
+ > .list-group-item {
138
+ border-width: 0 0 $list-group-border-width;
142
139
 
143
- &:last-child {
144
- .list-group-item:last-child {
140
+ &:last-child {
145
141
  border-bottom-width: 0;
146
142
  }
147
143
  }
@@ -83,6 +83,7 @@
83
83
  &::before {
84
84
  display: block; // IE10
85
85
  height: subtract(100vh, $modal-dialog-margin * 2);
86
+ height: min-content; // Reset height to 0 except on IE
86
87
  content: "";
87
88
  }
88
89
 
@@ -217,6 +218,7 @@
217
218
 
218
219
  &::before {
219
220
  height: subtract(100vh, $modal-dialog-margin-y-sm-up * 2);
221
+ height: min-content;
220
222
  }
221
223
  }
222
224
 
@@ -14,6 +14,7 @@
14
14
  .nav-link {
15
15
  display: block;
16
16
  padding: $nav-link-padding-y $nav-link-padding-x;
17
+ text-decoration: if($link-decoration == none, null, none);
17
18
 
18
19
  @include hover-focus() {
19
20
  text-decoration: none;
@@ -11,6 +11,7 @@
11
11
  margin-left: -$pagination-border-width;
12
12
  line-height: $pagination-line-height;
13
13
  color: $pagination-color;
14
+ text-decoration: if($link-decoration == none, null, none);
14
15
  background-color: $pagination-bg;
15
16
  border: $pagination-border-width solid $pagination-border-color;
16
17
 
@@ -10,6 +10,7 @@
10
10
  display: flex;
11
11
  height: $progress-height;
12
12
  overflow: hidden; // force rounded corners by cropping it
13
+ line-height: 0;
13
14
  @include font-size($progress-font-size);
14
15
  background-color: $progress-bg;
15
16
  @include border-radius($progress-border-radius);
@@ -229,6 +229,9 @@ pre {
229
229
  margin-bottom: 1rem;
230
230
  // Don't allow content to break outside
231
231
  overflow: auto;
232
+ // Disable auto-hiding scrollbar in IE & legacy Edge to avoid overlap,
233
+ // making it impossible to interact with the content
234
+ -ms-overflow-style: scrollbar;
232
235
  }
233
236
 
234
237
 
@@ -330,6 +333,13 @@ select {
330
333
  text-transform: none; // Remove the inheritance of text transform in Firefox
331
334
  }
332
335
 
336
+ // Set the cursor for non-`<button>` buttons
337
+ //
338
+ // Details at https://github.com/twbs/bootstrap/pull/30562
339
+ [role="button"] {
340
+ cursor: pointer;
341
+ }
342
+
333
343
  // Remove the inheritance of word-wrap in Safari.
334
344
  //
335
345
  // Details at https://github.com/twbs/bootstrap/issues/24990
@@ -376,18 +386,6 @@ input[type="checkbox"] {
376
386
  }
377
387
 
378
388
 
379
- input[type="date"],
380
- input[type="time"],
381
- input[type="datetime-local"],
382
- input[type="month"] {
383
- // Remove the default appearance of temporal inputs to avoid a Mobile Safari
384
- // bug where setting a custom line-height prevents text from being vertically
385
- // centered within the input.
386
- // See https://bugs.webkit.org/show_bug.cgi?id=139848
387
- // and https://github.com/twbs/bootstrap/issues/11266
388
- -webkit-appearance: listbox;
389
- }
390
-
391
389
  textarea {
392
390
  overflow: auto; // Remove the default vertical scrollbar in IE.
393
391
  // Textareas should really only resize vertically so they don't break their (horizontal) containers.
@@ -34,6 +34,7 @@
34
34
  }
35
35
  50% {
36
36
  opacity: 1;
37
+ transform: none;
37
38
  }
38
39
  }
39
40
 
@@ -6,12 +6,13 @@
6
6
  @import "utilities/embed";
7
7
  @import "utilities/flex";
8
8
  @import "utilities/float";
9
+ @import "utilities/interactions";
9
10
  @import "utilities/overflow";
10
11
  @import "utilities/position";
11
12
  @import "utilities/screenreaders";
12
13
  @import "utilities/shadows";
13
14
  @import "utilities/sizing";
14
- @import "utilities/stretched-link";
15
15
  @import "utilities/spacing";
16
+ @import "utilities/stretched-link";
16
17
  @import "utilities/text";
17
18
  @import "utilities/visibility";
@@ -106,6 +106,8 @@ $escaped-characters: (
106
106
  ("<","%3c"),
107
107
  (">","%3e"),
108
108
  ("#","%23"),
109
+ ("(","%28"),
110
+ (")","%29"),
109
111
  ) !default;
110
112
 
111
113
 
@@ -786,6 +788,7 @@ $dropdown-item-padding-y: .25rem !default;
786
788
  $dropdown-item-padding-x: 1.5rem !default;
787
789
 
788
790
  $dropdown-header-color: $gray-600 !default;
791
+ $dropdown-header-padding: $dropdown-padding-y $dropdown-item-padding-x !default;
789
792
 
790
793
 
791
794
  // Pagination
@@ -1135,6 +1138,7 @@ $pre-scrollable-max-height: 340px !default;
1135
1138
  $displays: none, inline, inline-block, block, table, table-row, table-cell, flex, inline-flex !default;
1136
1139
  $overflows: auto, hidden !default;
1137
1140
  $positions: static, relative, absolute, fixed, sticky !default;
1141
+ $user-selects: all, auto, none !default;
1138
1142
 
1139
1143
 
1140
1144
  // Printing
@@ -15,8 +15,9 @@
15
15
  @include deprecate("The `bg-variant` mixin", "v4.4.0", "v5", $ignore-warning);
16
16
  }
17
17
 
18
- @mixin bg-gradient-variant($parent, $color) {
18
+ @mixin bg-gradient-variant($parent, $color, $ignore-warning: false) {
19
19
  #{$parent} {
20
20
  background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important;
21
21
  }
22
+ @include deprecate("The `bg-gradient-variant` mixin", "v4.5.0", "v5", $ignore-warning);
22
23
  }
@@ -1,9 +1,22 @@
1
1
  // stylelint-disable property-blacklist
2
2
  // Single side border-radius
3
3
 
4
+ // Helper function to replace negative values with 0
5
+ @function valid-radius($radius) {
6
+ $return: ();
7
+ @each $value in $radius {
8
+ @if type-of($value) == number {
9
+ $return: append($return, max($value, 0));
10
+ } @else {
11
+ $return: append($return, $value);
12
+ }
13
+ }
14
+ @return $return;
15
+ }
16
+
4
17
  @mixin border-radius($radius: $border-radius, $fallback-border-radius: false) {
5
18
  @if $enable-rounded {
6
- border-radius: $radius;
19
+ border-radius: valid-radius($radius);
7
20
  }
8
21
  @else if $fallback-border-radius != false {
9
22
  border-radius: $fallback-border-radius;
@@ -12,52 +25,52 @@
12
25
 
13
26
  @mixin border-top-radius($radius) {
14
27
  @if $enable-rounded {
15
- border-top-left-radius: $radius;
16
- border-top-right-radius: $radius;
28
+ border-top-left-radius: valid-radius($radius);
29
+ border-top-right-radius: valid-radius($radius);
17
30
  }
18
31
  }
19
32
 
20
33
  @mixin border-right-radius($radius) {
21
34
  @if $enable-rounded {
22
- border-top-right-radius: $radius;
23
- border-bottom-right-radius: $radius;
35
+ border-top-right-radius: valid-radius($radius);
36
+ border-bottom-right-radius: valid-radius($radius);
24
37
  }
25
38
  }
26
39
 
27
40
  @mixin border-bottom-radius($radius) {
28
41
  @if $enable-rounded {
29
- border-bottom-right-radius: $radius;
30
- border-bottom-left-radius: $radius;
42
+ border-bottom-right-radius: valid-radius($radius);
43
+ border-bottom-left-radius: valid-radius($radius);
31
44
  }
32
45
  }
33
46
 
34
47
  @mixin border-left-radius($radius) {
35
48
  @if $enable-rounded {
36
- border-top-left-radius: $radius;
37
- border-bottom-left-radius: $radius;
49
+ border-top-left-radius: valid-radius($radius);
50
+ border-bottom-left-radius: valid-radius($radius);
38
51
  }
39
52
  }
40
53
 
41
54
  @mixin border-top-left-radius($radius) {
42
55
  @if $enable-rounded {
43
- border-top-left-radius: $radius;
56
+ border-top-left-radius: valid-radius($radius);
44
57
  }
45
58
  }
46
59
 
47
60
  @mixin border-top-right-radius($radius) {
48
61
  @if $enable-rounded {
49
- border-top-right-radius: $radius;
62
+ border-top-right-radius: valid-radius($radius);
50
63
  }
51
64
  }
52
65
 
53
66
  @mixin border-bottom-right-radius($radius) {
54
67
  @if $enable-rounded {
55
- border-bottom-right-radius: $radius;
68
+ border-bottom-right-radius: valid-radius($radius);
56
69
  }
57
70
  }
58
71
 
59
72
  @mixin border-bottom-left-radius($radius) {
60
73
  @if $enable-rounded {
61
- border-bottom-left-radius: $radius;
74
+ border-bottom-left-radius: valid-radius($radius);
62
75
  }
63
76
  }
@@ -20,10 +20,10 @@
20
20
  color: color-yiq($hover-background);
21
21
  @include gradient-bg($hover-background);
22
22
  border-color: $hover-border;
23
- // Avoid using mixin so we can pass custom focus shadow properly
24
23
  @if $enable-shadows {
25
- box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
24
+ @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5));
26
25
  } @else {
26
+ // Avoid using mixin so we can pass custom focus shadow properly
27
27
  box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
28
28
  }
29
29
  }
@@ -51,10 +51,10 @@
51
51
  border-color: $active-border;
52
52
 
53
53
  &:focus {
54
- // Avoid using mixin so we can pass custom focus shadow properly
55
54
  @if $enable-shadows and $btn-active-box-shadow != none {
56
- box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
55
+ @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5));
57
56
  } @else {
57
+ // Avoid using mixin so we can pass custom focus shadow properly
58
58
  box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
59
59
  }
60
60
  }
@@ -90,10 +90,10 @@
90
90
  border-color: $active-border;
91
91
 
92
92
  &:focus {
93
- // Avoid using mixin so we can pass custom focus shadow properly
94
93
  @if $enable-shadows and $btn-active-box-shadow != none {
95
- box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5);
94
+ @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5));
96
95
  } @else {
96
+ // Avoid using mixin so we can pass custom focus shadow properly
97
97
  box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
98
98
  }
99
99
  }