bootstrap 4.3.1 → 4.6.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (86) hide show
  1. checksums.yaml +4 -4
  2. data/.travis.yml +15 -1
  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 +1073 -1076
  7. data/assets/javascripts/bootstrap.min.js +4 -4
  8. data/assets/javascripts/bootstrap/alert.js +42 -49
  9. data/assets/javascripts/bootstrap/button.js +111 -64
  10. data/assets/javascripts/bootstrap/carousel.js +162 -177
  11. data/assets/javascripts/bootstrap/collapse.js +97 -122
  12. data/assets/javascripts/bootstrap/dropdown.js +163 -189
  13. data/assets/javascripts/bootstrap/modal.js +213 -194
  14. data/assets/javascripts/bootstrap/popover.js +51 -72
  15. data/assets/javascripts/bootstrap/scrollspy.js +80 -109
  16. data/assets/javascripts/bootstrap/tab.js +72 -79
  17. data/assets/javascripts/bootstrap/toast.js +96 -107
  18. data/assets/javascripts/bootstrap/tooltip.js +186 -201
  19. data/assets/javascripts/bootstrap/util.js +41 -20
  20. data/assets/stylesheets/_bootstrap-grid.scss +5 -4
  21. data/assets/stylesheets/_bootstrap-reboot.scss +4 -4
  22. data/assets/stylesheets/_bootstrap.scss +4 -4
  23. data/assets/stylesheets/bootstrap/_alert.scss +1 -0
  24. data/assets/stylesheets/bootstrap/_badge.scss +1 -1
  25. data/assets/stylesheets/bootstrap/_breadcrumb.scss +3 -2
  26. data/assets/stylesheets/bootstrap/_button-group.scss +1 -1
  27. data/assets/stylesheets/bootstrap/_buttons.scss +13 -8
  28. data/assets/stylesheets/bootstrap/_card.scss +42 -45
  29. data/assets/stylesheets/bootstrap/_carousel.scss +7 -7
  30. data/assets/stylesheets/bootstrap/_close.scss +2 -3
  31. data/assets/stylesheets/bootstrap/_code.scss +1 -1
  32. data/assets/stylesheets/bootstrap/_custom-forms.scss +38 -19
  33. data/assets/stylesheets/bootstrap/_dropdown.scss +7 -6
  34. data/assets/stylesheets/bootstrap/_forms.scss +26 -9
  35. data/assets/stylesheets/bootstrap/_functions.scss +63 -5
  36. data/assets/stylesheets/bootstrap/_grid.scss +32 -11
  37. data/assets/stylesheets/bootstrap/_images.scss +2 -2
  38. data/assets/stylesheets/bootstrap/_input-group.scss +21 -6
  39. data/assets/stylesheets/bootstrap/_list-group.scss +36 -31
  40. data/assets/stylesheets/bootstrap/_mixins.scss +3 -3
  41. data/assets/stylesheets/bootstrap/_modal.scss +26 -15
  42. data/assets/stylesheets/bootstrap/_nav.scss +7 -7
  43. data/assets/stylesheets/bootstrap/_navbar.scss +55 -17
  44. data/assets/stylesheets/bootstrap/_pagination.scss +5 -4
  45. data/assets/stylesheets/bootstrap/_popover.scss +8 -9
  46. data/assets/stylesheets/bootstrap/_print.scss +2 -2
  47. data/assets/stylesheets/bootstrap/_progress.scss +7 -3
  48. data/assets/stylesheets/bootstrap/_reboot.scss +39 -38
  49. data/assets/stylesheets/bootstrap/_spinners.scss +14 -4
  50. data/assets/stylesheets/bootstrap/_tables.scss +3 -3
  51. data/assets/stylesheets/bootstrap/_toasts.scss +4 -2
  52. data/assets/stylesheets/bootstrap/_type.scss +3 -3
  53. data/assets/stylesheets/bootstrap/_utilities.scss +2 -1
  54. data/assets/stylesheets/bootstrap/_variables.scss +58 -35
  55. data/assets/stylesheets/bootstrap/mixins/_background-variant.scss +5 -3
  56. data/assets/stylesheets/bootstrap/mixins/_badge.scss +1 -1
  57. data/assets/stylesheets/bootstrap/mixins/_border-radius.scss +27 -14
  58. data/assets/stylesheets/bootstrap/mixins/_buttons.scss +11 -8
  59. data/assets/stylesheets/bootstrap/mixins/_caret.scss +8 -8
  60. data/assets/stylesheets/bootstrap/mixins/_float.scss +3 -3
  61. data/assets/stylesheets/bootstrap/mixins/_forms.scss +42 -49
  62. data/assets/stylesheets/bootstrap/mixins/_grid-framework.scss +29 -15
  63. data/assets/stylesheets/bootstrap/mixins/_grid.scss +25 -7
  64. data/assets/stylesheets/bootstrap/mixins/_hover.scss +4 -4
  65. data/assets/stylesheets/bootstrap/mixins/_image.scss +2 -2
  66. data/assets/stylesheets/bootstrap/mixins/_list-group.scss +1 -1
  67. data/assets/stylesheets/bootstrap/mixins/_lists.scss +1 -1
  68. data/assets/stylesheets/bootstrap/mixins/_nav-divider.scss +2 -1
  69. data/assets/stylesheets/bootstrap/mixins/_reset-text.scss +1 -1
  70. data/assets/stylesheets/bootstrap/mixins/_screen-reader.scss +4 -3
  71. data/assets/stylesheets/bootstrap/mixins/_table-row.scss +1 -1
  72. data/assets/stylesheets/bootstrap/mixins/_text-emphasis.scss +3 -2
  73. data/assets/stylesheets/bootstrap/mixins/_transition.scss +18 -8
  74. data/assets/stylesheets/bootstrap/utilities/_background.scss +2 -2
  75. data/assets/stylesheets/bootstrap/utilities/_borders.scss +1 -1
  76. data/assets/stylesheets/bootstrap/utilities/_interactions.scss +5 -0
  77. data/assets/stylesheets/bootstrap/utilities/_text.scss +4 -4
  78. data/bootstrap.gemspec +1 -1
  79. data/lib/bootstrap/version.rb +2 -2
  80. data/tasks/updater/network.rb +2 -2
  81. data/test/dummy_rails/app/assets/config/manifest.js +3 -0
  82. data/test/dummy_rails/app/assets/stylesheets/.browserslistrc +1 -0
  83. data/test/gemfiles/rails_6_0.gemfile +7 -0
  84. data/test/support/dummy_rails_integration.rb +3 -1
  85. data/test/test_helper.rb +18 -13
  86. metadata +11 -5
@@ -3,26 +3,47 @@
3
3
  // Set the container width, and override it for fixed navbars in media queries.
4
4
 
5
5
  @if $enable-grid-classes {
6
- .container {
6
+ // Single container class with breakpoint max-widths
7
+ .container,
8
+ // 100% wide container at all breakpoints
9
+ .container-fluid {
7
10
  @include make-container();
8
- @include make-container-max-widths();
9
11
  }
10
- }
11
12
 
12
- // Fluid container
13
- //
14
- // Utilizes the mixin meant for fixed width containers, but with 100% width for
15
- // fluid, full width layouts.
13
+ // Responsive containers that are 100% wide until a breakpoint
14
+ @each $breakpoint, $container-max-width in $container-max-widths {
15
+ .container-#{$breakpoint} {
16
+ @extend .container-fluid;
17
+ }
16
18
 
17
- @if $enable-grid-classes {
18
- .container-fluid {
19
- @include make-container();
19
+ @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
20
+ %responsive-container-#{$breakpoint} {
21
+ max-width: $container-max-width;
22
+ }
23
+
24
+ // Extend each breakpoint which is smaller or equal to the current breakpoint
25
+ $extend-breakpoint: true;
26
+
27
+ @each $name, $width in $grid-breakpoints {
28
+ @if ($extend-breakpoint) {
29
+ .container#{breakpoint-infix($name, $grid-breakpoints)} {
30
+ @extend %responsive-container-#{$breakpoint};
31
+ }
32
+
33
+ // Once the current breakpoint is reached, stop extending
34
+ @if ($breakpoint == $name) {
35
+ $extend-breakpoint: false;
36
+ }
37
+ }
38
+ }
39
+ }
20
40
  }
21
41
  }
22
42
 
43
+
23
44
  // Row
24
45
  //
25
- // Rows contain and clear the floats of your columns.
46
+ // Rows contain your columns.
26
47
 
27
48
  @if $enable-grid-classes {
28
49
  .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
  //
@@ -17,9 +17,8 @@
17
17
  > .custom-file {
18
18
  position: relative; // For focus state's z-index
19
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
20
  width: 1%;
21
+ min-width: 0; // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size
23
22
  margin-bottom: 0;
24
23
 
25
24
  + .form-control,
@@ -43,7 +42,6 @@
43
42
 
44
43
  > .form-control,
45
44
  > .custom-select {
46
- &:not(:last-child) { @include border-right-radius(0); }
47
45
  &:not(:first-child) { @include border-left-radius(0); }
48
46
  }
49
47
 
@@ -54,9 +52,24 @@
54
52
  align-items: center;
55
53
 
56
54
  &:not(:last-child) .custom-file-label,
57
- &:not(:last-child) .custom-file-label::after { @include border-right-radius(0); }
58
55
  &:not(:first-child) .custom-file-label { @include border-left-radius(0); }
59
56
  }
57
+
58
+ &:not(.has-validation) {
59
+ > .form-control:not(:last-child),
60
+ > .custom-select:not(:last-child),
61
+ > .custom-file:not(:last-child) .custom-file-label::after {
62
+ @include border-right-radius(0);
63
+ }
64
+ }
65
+
66
+ &.has-validation {
67
+ > .form-control:nth-last-child(n + 3),
68
+ > .custom-select:nth-last-child(n + 3),
69
+ > .custom-file:nth-last-child(n + 3) .custom-file-label::after {
70
+ @include border-right-radius(0);
71
+ }
72
+ }
60
73
  }
61
74
 
62
75
 
@@ -176,8 +189,10 @@
176
189
 
177
190
  .input-group > .input-group-prepend > .btn,
178
191
  .input-group > .input-group-prepend > .input-group-text,
179
- .input-group > .input-group-append:not(:last-child) > .btn,
180
- .input-group > .input-group-append:not(:last-child) > .input-group-text,
192
+ .input-group:not(.has-validation) > .input-group-append:not(:last-child) > .btn,
193
+ .input-group:not(.has-validation) > .input-group-append:not(:last-child) > .input-group-text,
194
+ .input-group.has-validation > .input-group-append:nth-last-child(n + 3) > .btn,
195
+ .input-group.has-validation > .input-group-append:nth-last-child(n + 3) > .input-group-text,
181
196
  .input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
182
197
  .input-group > .input-group-append:last-child > .input-group-text:not(:last-child) {
183
198
  @include border-right-radius(0);
@@ -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
 
@@ -23,7 +24,7 @@
23
24
  text-align: inherit; // For `<button>`s (anchors inherit)
24
25
 
25
26
  // Hover state
26
- @include hover-focus {
27
+ @include hover-focus() {
27
28
  z-index: 1; // Place hover/focus items above their siblings for proper border styling
28
29
  color: $list-group-action-hover-color;
29
30
  text-decoration: none;
@@ -45,19 +46,17 @@
45
46
  position: relative;
46
47
  display: block;
47
48
  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
49
  color: $list-group-color;
50
+ text-decoration: if($link-decoration == none, null, none);
51
51
  background-color: $list-group-bg;
52
52
  border: $list-group-border-width solid $list-group-border-color;
53
53
 
54
54
  &:first-child {
55
- @include border-top-radius($list-group-border-radius);
55
+ @include border-top-radius(inherit);
56
56
  }
57
57
 
58
58
  &:last-child {
59
- margin-bottom: 0;
60
- @include border-bottom-radius($list-group-border-radius);
59
+ @include border-bottom-radius(inherit);
61
60
  }
62
61
 
63
62
  &.disabled,
@@ -74,6 +73,15 @@
74
73
  background-color: $list-group-active-bg;
75
74
  border-color: $list-group-active-border-color;
76
75
  }
76
+
77
+ & + & {
78
+ border-top-width: 0;
79
+
80
+ &.active {
81
+ margin-top: -$list-group-border-width;
82
+ border-top-width: $list-group-border-width;
83
+ }
84
+ }
77
85
  }
78
86
 
79
87
 
@@ -88,20 +96,30 @@
88
96
  .list-group-horizontal#{$infix} {
89
97
  flex-direction: row;
90
98
 
91
- .list-group-item {
92
- margin-right: -$list-group-border-width;
93
- margin-bottom: 0;
94
-
99
+ > .list-group-item {
95
100
  &:first-child {
96
- @include border-left-radius($list-group-border-radius);
101
+ @include border-bottom-left-radius($list-group-border-radius);
97
102
  @include border-top-right-radius(0);
98
103
  }
99
104
 
100
105
  &:last-child {
101
- margin-right: 0;
102
- @include border-right-radius($list-group-border-radius);
106
+ @include border-top-right-radius($list-group-border-radius);
103
107
  @include border-bottom-left-radius(0);
104
108
  }
109
+
110
+ &.active {
111
+ margin-top: 0;
112
+ }
113
+
114
+ + .list-group-item {
115
+ border-top-width: $list-group-border-width;
116
+ border-left-width: 0;
117
+
118
+ &.active {
119
+ margin-left: -$list-group-border-width;
120
+ border-left-width: $list-group-border-width;
121
+ }
122
+ }
105
123
  }
106
124
  }
107
125
  }
@@ -114,26 +132,13 @@
114
132
  // useful within other components (e.g., cards).
115
133
 
116
134
  .list-group-flush {
117
- .list-group-item {
118
- border-right: 0;
119
- border-left: 0;
120
- @include border-radius(0);
135
+ @include border-radius(0);
121
136
 
122
- &:last-child {
123
- margin-bottom: -$list-group-border-width;
124
- }
125
- }
137
+ > .list-group-item {
138
+ border-width: 0 0 $list-group-border-width;
126
139
 
127
- &:first-child {
128
- .list-group-item:first-child {
129
- border-top: 0;
130
- }
131
- }
132
-
133
- &:last-child {
134
- .list-group-item:last-child {
135
- margin-bottom: 0;
136
- border-bottom: 0;
140
+ &:last-child {
141
+ border-bottom-width: 0;
137
142
  }
138
143
  }
139
144
  }
@@ -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,13 @@
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);
86
+ height: min-content; // Reset height to 0 except on IE
81
87
  content: "";
82
88
  }
83
89
 
@@ -138,7 +144,7 @@
138
144
  justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
139
145
  padding: $modal-header-padding;
140
146
  border-bottom: $modal-header-border-width solid $modal-header-border-color;
141
- @include border-top-radius($modal-content-border-radius);
147
+ @include border-top-radius($modal-content-inner-border-radius);
142
148
 
143
149
  .close {
144
150
  padding: $modal-header-padding;
@@ -158,7 +164,7 @@
158
164
  .modal-body {
159
165
  position: relative;
160
166
  // 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`.
167
+ // when there should be a fixed height on `.modal-dialog`.
162
168
  flex: 1 1 auto;
163
169
  padding: $modal-inner-padding;
164
170
  }
@@ -166,15 +172,19 @@
166
172
  // Footer (for actions)
167
173
  .modal-footer {
168
174
  display: flex;
175
+ flex-wrap: wrap;
169
176
  align-items: center; // vertically center
170
177
  justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
171
- padding: $modal-inner-padding;
178
+ padding: $modal-inner-padding - $modal-footer-margin-between / 2;
172
179
  border-top: $modal-footer-border-width solid $modal-footer-border-color;
173
- @include border-bottom-radius($modal-content-border-radius);
180
+ @include border-bottom-radius($modal-content-inner-border-radius);
174
181
 
175
- // Easily place margin between footer elements
176
- > :not(:first-child) { margin-left: .25rem; }
177
- > :not(:last-child) { margin-right: .25rem; }
182
+ // Place margin between footer elements
183
+ // This solution is far from ideal because of the universal selector usage,
184
+ // but is needed to fix https://github.com/twbs/bootstrap/issues/24800
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,19 @@
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);
220
+ height: min-content;
210
221
  }
211
222
  }
212
223
 
@@ -1,7 +1,7 @@
1
1
  // Base class
2
2
  //
3
3
  // Kickstart any navigation component with a set of style resets. Works with
4
- // `<nav>`s or `<ul>`s.
4
+ // `<nav>`s, `<ul>`s or `<ol>`s.
5
5
 
6
6
  .nav {
7
7
  display: flex;
@@ -14,8 +14,9 @@
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
- @include hover-focus {
19
+ @include hover-focus() {
19
20
  text-decoration: none;
20
21
  }
21
22
 
@@ -34,15 +35,12 @@
34
35
  .nav-tabs {
35
36
  border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
36
37
 
37
- .nav-item {
38
- margin-bottom: -$nav-tabs-border-width;
39
- }
40
-
41
38
  .nav-link {
39
+ margin-bottom: -$nav-tabs-border-width;
42
40
  border: $nav-tabs-border-width solid transparent;
43
41
  @include border-top-radius($nav-tabs-border-radius);
44
42
 
45
- @include hover-focus {
43
+ @include hover-focus() {
46
44
  border-color: $nav-tabs-link-hover-border-color;
47
45
  }
48
46
 
@@ -91,6 +89,7 @@
91
89
  //
92
90
 
93
91
  .nav-fill {
92
+ > .nav-link,
94
93
  .nav-item {
95
94
  flex: 1 1 auto;
96
95
  text-align: center;
@@ -98,6 +97,7 @@
98
97
  }
99
98
 
100
99
  .nav-justified {
100
+ > .nav-link,
101
101
  .nav-item {
102
102
  flex-basis: 0;
103
103
  flex-grow: 1;
@@ -25,13 +25,23 @@
25
25
 
26
26
  // Because flex properties aren't inherited, we need to redeclare these first
27
27
  // few properties so that content nested within behave properly.
28
- > .container,
29
- > .container-fluid {
28
+ %container-flex-properties {
30
29
  display: flex;
31
30
  flex-wrap: wrap;
32
31
  align-items: center;
33
32
  justify-content: space-between;
34
33
  }
34
+
35
+ .container,
36
+ .container-fluid {
37
+ @extend %container-flex-properties;
38
+ }
39
+
40
+ @each $breakpoint, $container-max-width in $container-max-widths {
41
+ > .container#{breakpoint-infix($breakpoint, $container-max-widths)} {
42
+ @extend %container-flex-properties;
43
+ }
44
+ }
35
45
  }
36
46
 
37
47
 
@@ -48,7 +58,7 @@
48
58
  line-height: inherit;
49
59
  white-space: nowrap;
50
60
 
51
- @include hover-focus {
61
+ @include hover-focus() {
52
62
  text-decoration: none;
53
63
  }
54
64
  }
@@ -113,7 +123,7 @@
113
123
  border: $border-width solid transparent; // remove default button style
114
124
  @include border-radius($navbar-toggler-border-radius);
115
125
 
116
- @include hover-focus {
126
+ @include hover-focus() {
117
127
  text-decoration: none;
118
128
  }
119
129
  }
@@ -126,8 +136,12 @@
126
136
  height: 1.5em;
127
137
  vertical-align: middle;
128
138
  content: "";
129
- background: no-repeat center center;
130
- background-size: 100% 100%;
139
+ background: 50% / 100% 100% no-repeat;
140
+ }
141
+
142
+ .navbar-nav-scroll {
143
+ max-height: $navbar-nav-scroll-max-height;
144
+ overflow-y: auto;
131
145
  }
132
146
 
133
147
  // Generate series of `.navbar-expand-*` responsive classes for configuring
@@ -139,11 +153,21 @@
139
153
 
140
154
  &#{$infix} {
141
155
  @include media-breakpoint-down($breakpoint) {
142
- > .container,
143
- > .container-fluid {
156
+ %container-navbar-expand-#{$breakpoint} {
144
157
  padding-right: 0;
145
158
  padding-left: 0;
146
159
  }
160
+
161
+ > .container,
162
+ > .container-fluid {
163
+ @extend %container-navbar-expand-#{$breakpoint};
164
+ }
165
+
166
+ @each $size, $container-max-width in $container-max-widths {
167
+ > .container#{breakpoint-infix($size, $container-max-widths)} {
168
+ @extend %container-navbar-expand-#{$breakpoint};
169
+ }
170
+ }
147
171
  }
148
172
 
149
173
  @include media-breakpoint-up($next) {
@@ -164,9 +188,23 @@
164
188
  }
165
189
 
166
190
  // For nesting containers, have to redeclare for alignment purposes
191
+ %container-nesting-#{$breakpoint} {
192
+ flex-wrap: nowrap;
193
+ }
194
+
167
195
  > .container,
168
196
  > .container-fluid {
169
- flex-wrap: nowrap;
197
+ @extend %container-nesting-#{$breakpoint};
198
+ }
199
+
200
+ @each $size, $container-max-width in $container-max-widths {
201
+ > .container#{breakpoint-infix($size, $container-max-widths)} {
202
+ @extend %container-nesting-#{$breakpoint};
203
+ }
204
+ }
205
+
206
+ .navbar-nav-scroll {
207
+ overflow: visible;
170
208
  }
171
209
 
172
210
  .navbar-collapse {
@@ -194,7 +232,7 @@
194
232
  .navbar-brand {
195
233
  color: $navbar-light-brand-color;
196
234
 
197
- @include hover-focus {
235
+ @include hover-focus() {
198
236
  color: $navbar-light-brand-hover-color;
199
237
  }
200
238
  }
@@ -203,7 +241,7 @@
203
241
  .nav-link {
204
242
  color: $navbar-light-color;
205
243
 
206
- @include hover-focus {
244
+ @include hover-focus() {
207
245
  color: $navbar-light-hover-color;
208
246
  }
209
247
 
@@ -226,7 +264,7 @@
226
264
  }
227
265
 
228
266
  .navbar-toggler-icon {
229
- background-image: $navbar-light-toggler-icon-bg;
267
+ background-image: escape-svg($navbar-light-toggler-icon-bg);
230
268
  }
231
269
 
232
270
  .navbar-text {
@@ -234,7 +272,7 @@
234
272
  a {
235
273
  color: $navbar-light-active-color;
236
274
 
237
- @include hover-focus {
275
+ @include hover-focus() {
238
276
  color: $navbar-light-active-color;
239
277
  }
240
278
  }
@@ -246,7 +284,7 @@
246
284
  .navbar-brand {
247
285
  color: $navbar-dark-brand-color;
248
286
 
249
- @include hover-focus {
287
+ @include hover-focus() {
250
288
  color: $navbar-dark-brand-hover-color;
251
289
  }
252
290
  }
@@ -255,7 +293,7 @@
255
293
  .nav-link {
256
294
  color: $navbar-dark-color;
257
295
 
258
- @include hover-focus {
296
+ @include hover-focus() {
259
297
  color: $navbar-dark-hover-color;
260
298
  }
261
299
 
@@ -278,7 +316,7 @@
278
316
  }
279
317
 
280
318
  .navbar-toggler-icon {
281
- background-image: $navbar-dark-toggler-icon-bg;
319
+ background-image: escape-svg($navbar-dark-toggler-icon-bg);
282
320
  }
283
321
 
284
322
  .navbar-text {
@@ -286,7 +324,7 @@
286
324
  a {
287
325
  color: $navbar-dark-active-color;
288
326
 
289
- @include hover-focus {
327
+ @include hover-focus() {
290
328
  color: $navbar-dark-active-color;
291
329
  }
292
330
  }