bootstrap 4.3.0 → 4.5.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (89) 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 +1186 -1056
  7. data/assets/javascripts/bootstrap.min.js +4 -4
  8. data/assets/javascripts/bootstrap/alert.js +45 -65
  9. data/assets/javascripts/bootstrap/button.js +114 -80
  10. data/assets/javascripts/bootstrap/carousel.js +131 -186
  11. data/assets/javascripts/bootstrap/collapse.js +86 -140
  12. data/assets/javascripts/bootstrap/dropdown.js +152 -207
  13. data/assets/javascripts/bootstrap/modal.js +204 -214
  14. data/assets/javascripts/bootstrap/popover.js +41 -95
  15. data/assets/javascripts/bootstrap/scrollspy.js +69 -127
  16. data/assets/javascripts/bootstrap/tab.js +75 -95
  17. data/assets/javascripts/bootstrap/toast.js +87 -127
  18. data/assets/javascripts/bootstrap/tooltip.js +298 -198
  19. data/assets/javascripts/bootstrap/util.js +41 -20
  20. data/assets/stylesheets/_bootstrap-grid.scss +4 -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 +4 -1
  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 +6 -6
  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 +34 -17
  33. data/assets/stylesheets/bootstrap/_dropdown.scss +6 -5
  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 +1 -2
  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 +6 -3
  43. data/assets/stylesheets/bootstrap/_navbar.scss +45 -15
  44. data/assets/stylesheets/bootstrap/_pagination.scss +3 -2
  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 +6 -2
  48. data/assets/stylesheets/bootstrap/_reboot.scss +32 -31
  49. data/assets/stylesheets/bootstrap/_root.scss +1 -0
  50. data/assets/stylesheets/bootstrap/_spinners.scss +3 -2
  51. data/assets/stylesheets/bootstrap/_tables.scss +3 -3
  52. data/assets/stylesheets/bootstrap/_toasts.scss +4 -2
  53. data/assets/stylesheets/bootstrap/_type.scss +2 -2
  54. data/assets/stylesheets/bootstrap/_utilities.scss +2 -1
  55. data/assets/stylesheets/bootstrap/_variables.scss +51 -32
  56. data/assets/stylesheets/bootstrap/mixins/_background-variant.scss +5 -3
  57. data/assets/stylesheets/bootstrap/mixins/_badge.scss +1 -1
  58. data/assets/stylesheets/bootstrap/mixins/_border-radius.scss +27 -14
  59. data/assets/stylesheets/bootstrap/mixins/_buttons.scss +11 -8
  60. data/assets/stylesheets/bootstrap/mixins/_caret.scss +8 -8
  61. data/assets/stylesheets/bootstrap/mixins/_float.scss +3 -3
  62. data/assets/stylesheets/bootstrap/mixins/_forms.scss +35 -49
  63. data/assets/stylesheets/bootstrap/mixins/_grid-framework.scss +29 -15
  64. data/assets/stylesheets/bootstrap/mixins/_grid.scss +25 -7
  65. data/assets/stylesheets/bootstrap/mixins/_hover.scss +4 -4
  66. data/assets/stylesheets/bootstrap/mixins/_image.scss +1 -1
  67. data/assets/stylesheets/bootstrap/mixins/_list-group.scss +1 -1
  68. data/assets/stylesheets/bootstrap/mixins/_lists.scss +1 -1
  69. data/assets/stylesheets/bootstrap/mixins/_nav-divider.scss +2 -1
  70. data/assets/stylesheets/bootstrap/mixins/_reset-text.scss +1 -1
  71. data/assets/stylesheets/bootstrap/mixins/_screen-reader.scss +4 -3
  72. data/assets/stylesheets/bootstrap/mixins/_table-row.scss +1 -1
  73. data/assets/stylesheets/bootstrap/mixins/_text-emphasis.scss +3 -2
  74. data/assets/stylesheets/bootstrap/mixins/_transition.scss +18 -8
  75. data/assets/stylesheets/bootstrap/utilities/_background.scss +2 -2
  76. data/assets/stylesheets/bootstrap/utilities/_borders.scss +1 -1
  77. data/assets/stylesheets/bootstrap/utilities/_interactions.scss +5 -0
  78. data/assets/stylesheets/bootstrap/utilities/_text.scss +4 -4
  79. data/assets/stylesheets/bootstrap/vendor/_rfs.scss +0 -8
  80. data/bootstrap.gemspec +1 -1
  81. data/lib/bootstrap/version.rb +2 -2
  82. data/tasks/updater/js.rb +1 -1
  83. data/tasks/updater/network.rb +2 -2
  84. data/test/dummy_rails/app/assets/config/manifest.js +3 -0
  85. data/test/dummy_rails/app/assets/stylesheets/.browserslistrc +1 -0
  86. data/test/gemfiles/rails_6_0.gemfile +7 -0
  87. data/test/support/dummy_rails_integration.rb +3 -1
  88. data/test/test_helper.rb +18 -13
  89. 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,
@@ -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
 
@@ -42,7 +43,7 @@
42
43
  border: $nav-tabs-border-width solid transparent;
43
44
  @include border-top-radius($nav-tabs-border-radius);
44
45
 
45
- @include hover-focus {
46
+ @include hover-focus() {
46
47
  border-color: $nav-tabs-link-hover-border-color;
47
48
  }
48
49
 
@@ -91,6 +92,7 @@
91
92
  //
92
93
 
93
94
  .nav-fill {
95
+ > .nav-link,
94
96
  .nav-item {
95
97
  flex: 1 1 auto;
96
98
  text-align: center;
@@ -98,6 +100,7 @@
98
100
  }
99
101
 
100
102
  .nav-justified {
103
+ > .nav-link,
101
104
  .nav-item {
102
105
  flex-basis: 0;
103
106
  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
  }
@@ -139,11 +149,21 @@
139
149
 
140
150
  &#{$infix} {
141
151
  @include media-breakpoint-down($breakpoint) {
142
- > .container,
143
- > .container-fluid {
152
+ %container-navbar-expand-#{$breakpoint} {
144
153
  padding-right: 0;
145
154
  padding-left: 0;
146
155
  }
156
+
157
+ > .container,
158
+ > .container-fluid {
159
+ @extend %container-navbar-expand-#{$breakpoint};
160
+ }
161
+
162
+ @each $size, $container-max-width in $container-max-widths {
163
+ > .container#{breakpoint-infix($size, $container-max-widths)} {
164
+ @extend %container-navbar-expand-#{$breakpoint};
165
+ }
166
+ }
147
167
  }
148
168
 
149
169
  @include media-breakpoint-up($next) {
@@ -164,9 +184,19 @@
164
184
  }
165
185
 
166
186
  // For nesting containers, have to redeclare for alignment purposes
187
+ %container-nesting-#{$breakpoint} {
188
+ flex-wrap: nowrap;
189
+ }
190
+
167
191
  > .container,
168
192
  > .container-fluid {
169
- flex-wrap: nowrap;
193
+ @extend %container-nesting-#{$breakpoint};
194
+ }
195
+
196
+ @each $size, $container-max-width in $container-max-widths {
197
+ > .container#{breakpoint-infix($size, $container-max-widths)} {
198
+ @extend %container-nesting-#{$breakpoint};
199
+ }
170
200
  }
171
201
 
172
202
  .navbar-collapse {
@@ -194,7 +224,7 @@
194
224
  .navbar-brand {
195
225
  color: $navbar-light-brand-color;
196
226
 
197
- @include hover-focus {
227
+ @include hover-focus() {
198
228
  color: $navbar-light-brand-hover-color;
199
229
  }
200
230
  }
@@ -203,7 +233,7 @@
203
233
  .nav-link {
204
234
  color: $navbar-light-color;
205
235
 
206
- @include hover-focus {
236
+ @include hover-focus() {
207
237
  color: $navbar-light-hover-color;
208
238
  }
209
239
 
@@ -226,7 +256,7 @@
226
256
  }
227
257
 
228
258
  .navbar-toggler-icon {
229
- background-image: $navbar-light-toggler-icon-bg;
259
+ background-image: escape-svg($navbar-light-toggler-icon-bg);
230
260
  }
231
261
 
232
262
  .navbar-text {
@@ -234,7 +264,7 @@
234
264
  a {
235
265
  color: $navbar-light-active-color;
236
266
 
237
- @include hover-focus {
267
+ @include hover-focus() {
238
268
  color: $navbar-light-active-color;
239
269
  }
240
270
  }
@@ -246,7 +276,7 @@
246
276
  .navbar-brand {
247
277
  color: $navbar-dark-brand-color;
248
278
 
249
- @include hover-focus {
279
+ @include hover-focus() {
250
280
  color: $navbar-dark-brand-hover-color;
251
281
  }
252
282
  }
@@ -255,7 +285,7 @@
255
285
  .nav-link {
256
286
  color: $navbar-dark-color;
257
287
 
258
- @include hover-focus {
288
+ @include hover-focus() {
259
289
  color: $navbar-dark-hover-color;
260
290
  }
261
291
 
@@ -278,7 +308,7 @@
278
308
  }
279
309
 
280
310
  .navbar-toggler-icon {
281
- background-image: $navbar-dark-toggler-icon-bg;
311
+ background-image: escape-svg($navbar-dark-toggler-icon-bg);
282
312
  }
283
313
 
284
314
  .navbar-text {
@@ -286,7 +316,7 @@
286
316
  a {
287
317
  color: $navbar-dark-active-color;
288
318
 
289
- @include hover-focus {
319
+ @include hover-focus() {
290
320
  color: $navbar-dark-active-color;
291
321
  }
292
322
  }