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.
- checksums.yaml +4 -4
- data/.travis.yml +4 -0
- data/CHANGELOG.md +2 -14
- data/README.md +1 -1
- data/assets/javascripts/bootstrap-sprockets.js +7 -7
- data/assets/javascripts/bootstrap.js +376 -290
- data/assets/javascripts/bootstrap.min.js +2 -2
- data/assets/javascripts/bootstrap/alert.js +9 -10
- data/assets/javascripts/bootstrap/button.js +72 -25
- data/assets/javascripts/bootstrap/carousel.js +40 -27
- data/assets/javascripts/bootstrap/collapse.js +36 -22
- data/assets/javascripts/bootstrap/dropdown.js +75 -54
- data/assets/javascripts/bootstrap/modal.js +94 -59
- data/assets/javascripts/bootstrap/popover.js +36 -22
- data/assets/javascripts/bootstrap/scrollspy.js +35 -21
- data/assets/javascripts/bootstrap/tab.js +9 -10
- data/assets/javascripts/bootstrap/toast.js +58 -38
- data/assets/javascripts/bootstrap/tooltip.js +98 -76
- data/assets/javascripts/bootstrap/util.js +21 -4
- data/assets/stylesheets/_bootstrap-grid.scss +1 -1
- data/assets/stylesheets/_bootstrap-reboot.scss +1 -1
- data/assets/stylesheets/_bootstrap.scss +1 -1
- data/assets/stylesheets/bootstrap/_badge.scss +1 -1
- data/assets/stylesheets/bootstrap/_breadcrumb.scss +2 -1
- data/assets/stylesheets/bootstrap/_button-group.scss +1 -1
- data/assets/stylesheets/bootstrap/_buttons.scss +4 -2
- data/assets/stylesheets/bootstrap/_card.scss +17 -28
- data/assets/stylesheets/bootstrap/_carousel.scss +6 -6
- data/assets/stylesheets/bootstrap/_close.scss +2 -2
- data/assets/stylesheets/bootstrap/_code.scss +1 -1
- data/assets/stylesheets/bootstrap/_custom-forms.scss +22 -8
- data/assets/stylesheets/bootstrap/_dropdown.scss +3 -3
- data/assets/stylesheets/bootstrap/_forms.scss +17 -9
- data/assets/stylesheets/bootstrap/_functions.scss +49 -1
- data/assets/stylesheets/bootstrap/_grid.scss +25 -8
- data/assets/stylesheets/bootstrap/_images.scss +2 -2
- data/assets/stylesheets/bootstrap/_input-group.scss +2 -4
- data/assets/stylesheets/bootstrap/_list-group.scss +31 -22
- data/assets/stylesheets/bootstrap/_mixins.scss +3 -3
- data/assets/stylesheets/bootstrap/_modal.scss +26 -16
- data/assets/stylesheets/bootstrap/_nav.scss +3 -3
- data/assets/stylesheets/bootstrap/_navbar.scss +45 -15
- data/assets/stylesheets/bootstrap/_pagination.scss +2 -2
- data/assets/stylesheets/bootstrap/_popover.scss +8 -9
- data/assets/stylesheets/bootstrap/_print.scss +2 -2
- data/assets/stylesheets/bootstrap/_progress.scss +5 -2
- data/assets/stylesheets/bootstrap/_reboot.scss +14 -15
- data/assets/stylesheets/bootstrap/_root.scss +1 -0
- data/assets/stylesheets/bootstrap/_tables.scss +3 -3
- data/assets/stylesheets/bootstrap/_type.scss +2 -2
- data/assets/stylesheets/bootstrap/_variables.scss +42 -22
- data/assets/stylesheets/bootstrap/mixins/_background-variant.scss +3 -2
- data/assets/stylesheets/bootstrap/mixins/_badge.scss +1 -1
- data/assets/stylesheets/bootstrap/mixins/_buttons.scss +5 -2
- data/assets/stylesheets/bootstrap/mixins/_caret.scss +8 -8
- data/assets/stylesheets/bootstrap/mixins/_float.scss +3 -3
- data/assets/stylesheets/bootstrap/mixins/_forms.scss +32 -47
- data/assets/stylesheets/bootstrap/mixins/_grid-framework.scss +8 -3
- data/assets/stylesheets/bootstrap/mixins/_grid.scss +18 -0
- data/assets/stylesheets/bootstrap/mixins/_hover.scss +4 -4
- data/assets/stylesheets/bootstrap/mixins/_image.scss +1 -1
- data/assets/stylesheets/bootstrap/mixins/_list-group.scss +1 -1
- data/assets/stylesheets/bootstrap/mixins/_lists.scss +1 -1
- data/assets/stylesheets/bootstrap/mixins/_nav-divider.scss +2 -1
- data/assets/stylesheets/bootstrap/mixins/_reset-text.scss +1 -1
- data/assets/stylesheets/bootstrap/mixins/_screen-reader.scss +3 -2
- data/assets/stylesheets/bootstrap/mixins/_table-row.scss +1 -1
- data/assets/stylesheets/bootstrap/mixins/_text-emphasis.scss +3 -2
- data/assets/stylesheets/bootstrap/utilities/_background.scss +1 -1
- data/assets/stylesheets/bootstrap/utilities/_text.scss +2 -2
- data/bootstrap.gemspec +1 -1
- data/lib/bootstrap/version.rb +2 -2
- data/test/dummy_rails/app/assets/config/manifest.js +3 -0
- data/test/dummy_rails/app/assets/stylesheets/.browserslistrc +1 -0
- data/test/support/dummy_rails_integration.rb +3 -1
- data/test/test_helper.rb +18 -13
- 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) {
|
@@ -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
|
-
|
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:
|
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
|
-
|
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
|
-
|
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
|
-
|
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
|
-
|
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
|
-
|
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
|
-
|
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
|
@@ -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
|
}
|
@@ -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;
|