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
@@ -2,16 +2,17 @@
2
2
 
3
3
  // Contextual backgrounds
4
4
 
5
- @mixin bg-variant($parent, $color) {
5
+ @mixin bg-variant($parent, $color, $ignore-warning: false) {
6
6
  #{$parent} {
7
7
  background-color: $color !important;
8
8
  }
9
9
  a#{$parent},
10
10
  button#{$parent} {
11
- @include hover-focus {
11
+ @include hover-focus() {
12
12
  background-color: darken($color, 10%) !important;
13
13
  }
14
14
  }
15
+ @include deprecate("The `bg-variant` mixin", "v4.4.0", "v5", $ignore-warning);
15
16
  }
16
17
 
17
18
  @mixin bg-gradient-variant($parent, $color) {
@@ -3,7 +3,7 @@
3
3
  background-color: $bg;
4
4
 
5
5
  @at-root a#{&} {
6
- @include hover-focus {
6
+ @include hover-focus() {
7
7
  color: color-yiq($bg);
8
8
  background-color: darken($bg, 10%);
9
9
  }
@@ -9,7 +9,7 @@
9
9
  border-color: $border;
10
10
  @include box-shadow($btn-box-shadow);
11
11
 
12
- @include hover {
12
+ @include hover() {
13
13
  color: color-yiq($hover-background);
14
14
  @include gradient-bg($hover-background);
15
15
  border-color: $hover-border;
@@ -17,6 +17,9 @@
17
17
 
18
18
  &:focus,
19
19
  &.focus {
20
+ color: color-yiq($hover-background);
21
+ @include gradient-bg($hover-background);
22
+ border-color: $hover-border;
20
23
  // Avoid using mixin so we can pass custom focus shadow properly
21
24
  @if $enable-shadows {
22
25
  box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
@@ -62,7 +65,7 @@
62
65
  color: $color;
63
66
  border-color: $color;
64
67
 
65
- @include hover {
68
+ @include hover() {
66
69
  color: $color-hover;
67
70
  background-color: $active-background;
68
71
  border-color: $active-border;
@@ -1,25 +1,25 @@
1
- @mixin caret-down {
1
+ @mixin caret-down() {
2
2
  border-top: $caret-width solid;
3
3
  border-right: $caret-width solid transparent;
4
4
  border-bottom: 0;
5
5
  border-left: $caret-width solid transparent;
6
6
  }
7
7
 
8
- @mixin caret-up {
8
+ @mixin caret-up() {
9
9
  border-top: 0;
10
10
  border-right: $caret-width solid transparent;
11
11
  border-bottom: $caret-width solid;
12
12
  border-left: $caret-width solid transparent;
13
13
  }
14
14
 
15
- @mixin caret-right {
15
+ @mixin caret-right() {
16
16
  border-top: $caret-width solid transparent;
17
17
  border-right: 0;
18
18
  border-bottom: $caret-width solid transparent;
19
19
  border-left: $caret-width solid;
20
20
  }
21
21
 
22
- @mixin caret-left {
22
+ @mixin caret-left() {
23
23
  border-top: $caret-width solid transparent;
24
24
  border-right: $caret-width solid;
25
25
  border-bottom: $caret-width solid transparent;
@@ -33,11 +33,11 @@
33
33
  vertical-align: $caret-vertical-align;
34
34
  content: "";
35
35
  @if $direction == down {
36
- @include caret-down;
36
+ @include caret-down();
37
37
  } @else if $direction == up {
38
- @include caret-up;
38
+ @include caret-up();
39
39
  } @else if $direction == right {
40
- @include caret-right;
40
+ @include caret-right();
41
41
  }
42
42
  }
43
43
 
@@ -51,7 +51,7 @@
51
51
  margin-right: $caret-spacing;
52
52
  vertical-align: $caret-vertical-align;
53
53
  content: "";
54
- @include caret-left;
54
+ @include caret-left();
55
55
  }
56
56
  }
57
57
 
@@ -1,14 +1,14 @@
1
1
  // stylelint-disable declaration-no-important
2
2
 
3
- @mixin float-left {
3
+ @mixin float-left() {
4
4
  float: left !important;
5
5
  @include deprecate("The `float-left` mixin", "v4.3.0", "v5");
6
6
  }
7
- @mixin float-right {
7
+ @mixin float-right() {
8
8
  float: right !important;
9
9
  @include deprecate("The `float-right` mixin", "v4.3.0", "v5");
10
10
  }
11
- @mixin float-none {
11
+ @mixin float-none() {
12
12
  float: none !important;
13
13
  @include deprecate("The `float-none` mixin", "v4.3.0", "v5");
14
14
  }
@@ -10,7 +10,7 @@
10
10
  //
11
11
  // Example usage: change the default blue border and shadow to white for better
12
12
  // contrast against a dark gray background.
13
- @mixin form-control-focus() {
13
+ @mixin form-control-focus($ignore-warning: false) {
14
14
  &:focus {
15
15
  color: $input-focus-color;
16
16
  background-color: $input-focus-bg;
@@ -23,8 +23,23 @@
23
23
  box-shadow: $input-focus-box-shadow;
24
24
  }
25
25
  }
26
+ @include deprecate("The `form-control-focus()` mixin", "v4.4.0", "v5", $ignore-warning);
26
27
  }
27
28
 
29
+ // This mixin uses an `if()` technique to be compatible with Dart Sass
30
+ // See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details
31
+ @mixin form-validation-state-selector($state) {
32
+ @if ($state == "valid" or $state == "invalid") {
33
+ .was-validated #{if(&, "&", "")}:#{$state},
34
+ #{if(&, "&", "")}.is-#{$state} {
35
+ @content;
36
+ }
37
+ } @else {
38
+ #{if(&, "&", "")}.is-#{$state} {
39
+ @content;
40
+ }
41
+ }
42
+ }
28
43
 
29
44
  @mixin form-validation-state($state, $color, $icon) {
30
45
  .#{$state}-feedback {
@@ -50,16 +65,22 @@
50
65
  @include border-radius($form-feedback-tooltip-border-radius);
51
66
  }
52
67
 
68
+ @include form-validation-state-selector($state) {
69
+ ~ .#{$state}-feedback,
70
+ ~ .#{$state}-tooltip {
71
+ display: block;
72
+ }
73
+ }
74
+
53
75
  .form-control {
54
- .was-validated &:#{$state},
55
- &.is-#{$state} {
76
+ @include form-validation-state-selector($state) {
56
77
  border-color: $color;
57
78
 
58
79
  @if $enable-validation-icons {
59
80
  padding-right: $input-height-inner;
60
- background-image: $icon;
81
+ background-image: escape-svg($icon);
61
82
  background-repeat: no-repeat;
62
- background-position: center right $input-height-inner-quarter;
83
+ background-position: right $input-height-inner-quarter center;
63
84
  background-size: $input-height-inner-half $input-height-inner-half;
64
85
  }
65
86
 
@@ -67,18 +88,12 @@
67
88
  border-color: $color;
68
89
  box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
69
90
  }
70
-
71
- ~ .#{$state}-feedback,
72
- ~ .#{$state}-tooltip {
73
- display: block;
74
- }
75
91
  }
76
92
  }
77
93
 
78
94
  // stylelint-disable-next-line selector-no-qualifying-type
79
95
  textarea.form-control {
80
- .was-validated &:#{$state},
81
- &.is-#{$state} {
96
+ @include form-validation-state-selector($state) {
82
97
  @if $enable-validation-icons {
83
98
  padding-right: $input-height-inner;
84
99
  background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
@@ -87,41 +102,23 @@
87
102
  }
88
103
 
89
104
  .custom-select {
90
- .was-validated &:#{$state},
91
- &.is-#{$state} {
105
+ @include form-validation-state-selector($state) {
92
106
  border-color: $color;
93
107
 
94
108
  @if $enable-validation-icons {
95
109
  padding-right: $custom-select-feedback-icon-padding-right;
96
- background: $custom-select-background, $icon $custom-select-bg no-repeat $custom-select-feedback-icon-position / $custom-select-feedback-icon-size;
110
+ background: $custom-select-background, escape-svg($icon) $custom-select-bg no-repeat $custom-select-feedback-icon-position / $custom-select-feedback-icon-size;
97
111
  }
98
112
 
99
113
  &:focus {
100
114
  border-color: $color;
101
115
  box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
102
116
  }
103
-
104
- ~ .#{$state}-feedback,
105
- ~ .#{$state}-tooltip {
106
- display: block;
107
- }
108
- }
109
- }
110
-
111
-
112
- .form-control-file {
113
- .was-validated &:#{$state},
114
- &.is-#{$state} {
115
- ~ .#{$state}-feedback,
116
- ~ .#{$state}-tooltip {
117
- display: block;
118
- }
119
117
  }
120
118
  }
121
119
 
122
120
  .form-check-input {
123
- .was-validated &:#{$state},
124
- &.is-#{$state} {
121
+ @include form-validation-state-selector($state) {
125
122
  ~ .form-check-label {
126
123
  color: $color;
127
124
  }
@@ -134,8 +131,7 @@
134
131
  }
135
132
 
136
133
  .custom-control-input {
137
- .was-validated &:#{$state},
138
- &.is-#{$state} {
134
+ @include form-validation-state-selector($state) {
139
135
  ~ .custom-control-label {
140
136
  color: $color;
141
137
 
@@ -144,11 +140,6 @@
144
140
  }
145
141
  }
146
142
 
147
- ~ .#{$state}-feedback,
148
- ~ .#{$state}-tooltip {
149
- display: block;
150
- }
151
-
152
143
  &:checked {
153
144
  ~ .custom-control-label::before {
154
145
  border-color: lighten($color, 10%);
@@ -170,17 +161,11 @@
170
161
 
171
162
  // custom file
172
163
  .custom-file-input {
173
- .was-validated &:#{$state},
174
- &.is-#{$state} {
164
+ @include form-validation-state-selector($state) {
175
165
  ~ .custom-file-label {
176
166
  border-color: $color;
177
167
  }
178
168
 
179
- ~ .#{$state}-feedback,
180
- ~ .#{$state}-tooltip {
181
- display: block;
182
- }
183
-
184
169
  &:focus {
185
170
  ~ .custom-file-label {
186
171
  border-color: $color;
@@ -33,10 +33,15 @@
33
33
  flex-grow: 1;
34
34
  max-width: 100%;
35
35
  }
36
+
37
+ @for $i from 1 through $grid-row-columns {
38
+ .row-cols#{$infix}-#{$i} {
39
+ @include row-cols($i);
40
+ }
41
+ }
42
+
36
43
  .col#{$infix}-auto {
37
- flex: 0 0 auto;
38
- width: auto;
39
- max-width: 100%; // Reset earlier grid tiers
44
+ @include make-col-auto();
40
45
  }
41
46
 
42
47
  @for $i from 1 through $columns {
@@ -45,7 +45,25 @@
45
45
  max-width: percentage($size / $columns);
46
46
  }
47
47
 
48
+ @mixin make-col-auto() {
49
+ flex: 0 0 auto;
50
+ width: auto;
51
+ max-width: 100%; // Reset earlier grid tiers
52
+ }
53
+
48
54
  @mixin make-col-offset($size, $columns: $grid-columns) {
49
55
  $num: $size / $columns;
50
56
  margin-left: if($num == 0, 0, percentage($num));
51
57
  }
58
+
59
+ // Row columns
60
+ //
61
+ // Specify on a parent element(e.g., .row) to force immediate children into NN
62
+ // numberof columns. Supports wrapping to new lines, but does not do a Masonry
63
+ // style grid.
64
+ @mixin row-cols($count) {
65
+ & > * {
66
+ flex: 0 0 100% / $count;
67
+ max-width: 100% / $count;
68
+ }
69
+ }
@@ -9,18 +9,18 @@
9
9
  //
10
10
  // Issue: https://github.com/twbs/bootstrap/issues/25195
11
11
 
12
- @mixin hover {
12
+ @mixin hover() {
13
13
  &:hover { @content; }
14
14
  }
15
15
 
16
- @mixin hover-focus {
16
+ @mixin hover-focus() {
17
17
  &:hover,
18
18
  &:focus {
19
19
  @content;
20
20
  }
21
21
  }
22
22
 
23
- @mixin plain-hover-focus {
23
+ @mixin plain-hover-focus() {
24
24
  &,
25
25
  &:hover,
26
26
  &:focus {
@@ -28,7 +28,7 @@
28
28
  }
29
29
  }
30
30
 
31
- @mixin hover-focus-active {
31
+ @mixin hover-focus-active() {
32
32
  &:hover,
33
33
  &:focus,
34
34
  &:active {
@@ -7,7 +7,7 @@
7
7
  //
8
8
  // Keep images from scaling beyond the width of their parents.
9
9
 
10
- @mixin img-fluid {
10
+ @mixin img-fluid() {
11
11
  // Part 1: Set a maximum relative to the parent
12
12
  max-width: 100%;
13
13
  // Part 2: Override the height to auto, otherwise images will be stretched
@@ -6,7 +6,7 @@
6
6
  background-color: $background;
7
7
 
8
8
  &.list-group-item-action {
9
- @include hover-focus {
9
+ @include hover-focus() {
10
10
  color: $color;
11
11
  background-color: darken($background, 5%);
12
12
  }
@@ -1,7 +1,7 @@
1
1
  // Lists
2
2
 
3
3
  // Unstyled keeps list items block level, just removes default browser padding and list-style
4
- @mixin list-unstyled {
4
+ @mixin list-unstyled() {
5
5
  padding-left: 0;
6
6
  list-style: none;
7
7
  }
@@ -2,9 +2,10 @@
2
2
  //
3
3
  // Dividers (basically an hr) within dropdowns and nav lists
4
4
 
5
- @mixin nav-divider($color: $nav-divider-color, $margin-y: $nav-divider-margin-y) {
5
+ @mixin nav-divider($color: $nav-divider-color, $margin-y: $nav-divider-margin-y, $ignore-warning: false) {
6
6
  height: 0;
7
7
  margin: $margin-y 0;
8
8
  overflow: hidden;
9
9
  border-top: 1px solid $color;
10
+ @include deprecate("The `nav-divider()` mixin", "v4.4.0", "v5", $ignore-warning);
10
11
  }
@@ -1,4 +1,4 @@
1
- @mixin reset-text {
1
+ @mixin reset-text() {
2
2
  font-family: $font-family-base;
3
3
  // We deliberately do NOT reset font-size or word-wrap.
4
4
  font-style: normal;
@@ -3,11 +3,12 @@
3
3
  // See: https://a11yproject.com/posts/how-to-hide-content/
4
4
  // See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
5
5
 
6
- @mixin sr-only {
6
+ @mixin sr-only() {
7
7
  position: absolute;
8
8
  width: 1px;
9
9
  height: 1px;
10
10
  padding: 0;
11
+ margin: -1px; // Fix for https://github.com/twbs/bootstrap/issues/25686
11
12
  overflow: hidden;
12
13
  clip: rect(0, 0, 0, 0);
13
14
  white-space: nowrap;
@@ -20,7 +21,7 @@
20
21
  //
21
22
  // Credit: HTML5 Boilerplate
22
23
 
23
- @mixin sr-only-focusable {
24
+ @mixin sr-only-focusable() {
24
25
  &:active,
25
26
  &:focus {
26
27
  position: static;
@@ -26,7 +26,7 @@
26
26
  $hover-background: darken($background, 5%);
27
27
 
28
28
  .table-#{$state} {
29
- @include hover {
29
+ @include hover() {
30
30
  background-color: $hover-background;
31
31
 
32
32
  > td,