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
@@ -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;
@@ -15,7 +15,7 @@
15
15
  display: block;
16
16
  padding: $nav-link-padding-y $nav-link-padding-x;
17
17
 
18
- @include hover-focus {
18
+ @include hover-focus() {
19
19
  text-decoration: none;
20
20
  }
21
21
 
@@ -42,7 +42,7 @@
42
42
  border: $nav-tabs-border-width solid transparent;
43
43
  @include border-top-radius($nav-tabs-border-radius);
44
44
 
45
- @include hover-focus {
45
+ @include hover-focus() {
46
46
  border-color: $nav-tabs-link-hover-border-color;
47
47
  }
48
48
 
@@ -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
  }
@@ -23,7 +23,7 @@
23
23
  }
24
24
 
25
25
  &:focus {
26
- z-index: 2;
26
+ z-index: 3;
27
27
  outline: $pagination-focus-outline;
28
28
  box-shadow: $pagination-focus-box-shadow;
29
29
  }
@@ -43,7 +43,7 @@
43
43
  }
44
44
 
45
45
  &.active .page-link {
46
- z-index: 1;
46
+ z-index: 3;
47
47
  color: $pagination-active-color;
48
48
  background-color: $pagination-active-bg;
49
49
  border-color: $pagination-active-border-color;
@@ -22,7 +22,7 @@
22
22
  display: block;
23
23
  width: $popover-arrow-width;
24
24
  height: $popover-arrow-height;
25
- margin: 0 $border-radius-lg;
25
+ margin: 0 $popover-border-radius;
26
26
 
27
27
  &::before,
28
28
  &::after {
@@ -39,7 +39,7 @@
39
39
  margin-bottom: $popover-arrow-height;
40
40
 
41
41
  > .arrow {
42
- bottom: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
42
+ bottom: subtract(-$popover-arrow-height, $popover-border-width);
43
43
 
44
44
  &::before {
45
45
  bottom: 0;
@@ -59,10 +59,10 @@
59
59
  margin-left: $popover-arrow-height;
60
60
 
61
61
  > .arrow {
62
- left: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
62
+ left: subtract(-$popover-arrow-height, $popover-border-width);
63
63
  width: $popover-arrow-height;
64
64
  height: $popover-arrow-width;
65
- margin: $border-radius-lg 0; // make sure the arrow does not touch the popover's rounded corners
65
+ margin: $popover-border-radius 0; // make sure the arrow does not touch the popover's rounded corners
66
66
 
67
67
  &::before {
68
68
  left: 0;
@@ -82,7 +82,7 @@
82
82
  margin-top: $popover-arrow-height;
83
83
 
84
84
  > .arrow {
85
- top: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
85
+ top: subtract(-$popover-arrow-height, $popover-border-width);
86
86
 
87
87
  &::before {
88
88
  top: 0;
@@ -114,10 +114,10 @@
114
114
  margin-right: $popover-arrow-height;
115
115
 
116
116
  > .arrow {
117
- right: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
117
+ right: subtract(-$popover-arrow-height, $popover-border-width);
118
118
  width: $popover-arrow-height;
119
119
  height: $popover-arrow-width;
120
- margin: $border-radius-lg 0; // make sure the arrow does not touch the popover's rounded corners
120
+ margin: $popover-border-radius 0; // make sure the arrow does not touch the popover's rounded corners
121
121
 
122
122
  &::before {
123
123
  right: 0;
@@ -157,8 +157,7 @@
157
157
  color: $popover-header-color;
158
158
  background-color: $popover-header-bg;
159
159
  border-bottom: $popover-border-width solid darken($popover-header-bg, 5%);
160
- $offset-border-width: calc(#{$border-radius-lg} - #{$popover-border-width});
161
- @include border-top-radius($offset-border-width);
160
+ @include border-top-radius($popover-inner-border-radius);
162
161
 
163
162
  &:empty {
164
163
  display: none;
@@ -1,6 +1,6 @@
1
1
  // stylelint-disable declaration-no-important, selector-no-qualifying-type
2
2
 
3
- // Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css
3
+ // Source: https://github.com/h5bp/main.css/blob/master/src/_print.css
4
4
 
5
5
  // ==========================================================================
6
6
  // Print styles.
@@ -57,7 +57,7 @@
57
57
 
58
58
  //
59
59
  // Printing Tables:
60
- // http://css-discuss.incutio.com/wiki/Printing_Tables
60
+ // https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
61
61
  //
62
62
 
63
63
  thead {
@@ -20,6 +20,7 @@
20
20
  display: flex;
21
21
  flex-direction: column;
22
22
  justify-content: center;
23
+ overflow: hidden;
23
24
  color: $progress-bar-color;
24
25
  text-align: center;
25
26
  white-space: nowrap;
@@ -36,8 +37,10 @@
36
37
  .progress-bar-animated {
37
38
  animation: progress-bar-stripes $progress-bar-animation-timing;
38
39
 
39
- @media (prefers-reduced-motion: reduce) {
40
- animation: none;
40
+ @if $enable-prefers-reduced-motion-media-query {
41
+ @media (prefers-reduced-motion: reduce) {
42
+ animation: none;
43
+ }
41
44
  }
42
45
  }
43
46
  }
@@ -54,12 +54,16 @@ body {
54
54
  background-color: $body-bg; // 2
55
55
  }
56
56
 
57
- // Suppress the focus outline on elements that cannot be accessed via keyboard.
58
- // This prevents an unwanted focus outline from appearing around elements that
59
- // might still respond to pointer events.
60
- //
61
- // Credit: https://github.com/suitcss/base
62
- [tabindex="-1"]:focus {
57
+ // Future-proof rule: in browsers that support :focus-visible, suppress the focus outline
58
+ // on elements that programmatically receive focus but wouldn't normally show a visible
59
+ // focus outline. In general, this would mean that the outline is only applied if the
60
+ // interaction that led to the element receiving programmatic focus was a keyboard interaction,
61
+ // or the browser has somehow determined that the user is primarily a keyboard user and/or
62
+ // wants focus outlines to always be presented.
63
+ //
64
+ // See https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
65
+ // and https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/
66
+ [tabindex="-1"]:focus:not(:focus-visible) {
63
67
  outline: 0 !important;
64
68
  }
65
69
 
@@ -184,30 +188,25 @@ a {
184
188
  text-decoration: $link-decoration;
185
189
  background-color: transparent; // Remove the gray background on active links in IE 10.
186
190
 
187
- @include hover {
191
+ @include hover() {
188
192
  color: $link-hover-color;
189
193
  text-decoration: $link-hover-decoration;
190
194
  }
191
195
  }
192
196
 
193
- // And undo these styles for placeholder links/named anchors (without href)
194
- // which have not been made explicitly keyboard-focusable (without tabindex).
197
+ // And undo these styles for placeholder links/named anchors (without href).
195
198
  // It would be more straightforward to just use a[href] in previous block, but that
196
199
  // causes specificity issues in many other styles that are too complex to fix.
197
200
  // See https://github.com/twbs/bootstrap/issues/19402
198
201
 
199
- a:not([href]):not([tabindex]) {
202
+ a:not([href]) {
200
203
  color: inherit;
201
204
  text-decoration: none;
202
205
 
203
- @include hover-focus {
206
+ @include hover() {
204
207
  color: inherit;
205
208
  text-decoration: none;
206
209
  }
207
-
208
- &:focus {
209
- outline: 0;
210
- }
211
210
  }
212
211
 
213
212
 
@@ -1,3 +1,4 @@
1
+ // Do not forget to update getting-started/theming.md!
1
2
  :root {
2
3
  // Custom variable values only support SassScript inside `#{}`.
3
4
  @each $color, $value in $colors {
@@ -84,7 +84,7 @@
84
84
 
85
85
  .table-hover {
86
86
  tbody tr {
87
- @include hover {
87
+ @include hover() {
88
88
  color: $table-hover-color;
89
89
  background-color: $table-hover-bg;
90
90
  }
@@ -142,14 +142,14 @@
142
142
  }
143
143
 
144
144
  &.table-striped {
145
- tbody tr:nth-of-type(odd) {
145
+ tbody tr:nth-of-type(#{$table-striped-order}) {
146
146
  background-color: $table-dark-accent-bg;
147
147
  }
148
148
  }
149
149
 
150
150
  &.table-hover {
151
151
  tbody tr {
152
- @include hover {
152
+ @include hover() {
153
153
  color: $table-dark-hover-color;
154
154
  background-color: $table-dark-hover-bg;
155
155
  }
@@ -82,12 +82,12 @@ mark,
82
82
  //
83
83
 
84
84
  .list-unstyled {
85
- @include list-unstyled;
85
+ @include list-unstyled();
86
86
  }
87
87
 
88
88
  // Inline turns list items into inline-block
89
89
  .list-inline {
90
- @include list-unstyled;
90
+ @include list-unstyled();
91
91
  }
92
92
  .list-inline-item {
93
93
  display: inline-block;
@@ -101,6 +101,13 @@ $yiq-contrasted-threshold: 150 !default;
101
101
  $yiq-text-dark: $gray-900 !default;
102
102
  $yiq-text-light: $white !default;
103
103
 
104
+ // Characters which are escaped by the escape-svg function
105
+ $escaped-characters: (
106
+ ("<","%3c"),
107
+ (">","%3e"),
108
+ ("#","%23"),
109
+ ) !default;
110
+
104
111
 
105
112
  // Options
106
113
  //
@@ -220,6 +227,7 @@ $container-max-widths: (
220
227
 
221
228
  $grid-columns: 12 !default;
222
229
  $grid-gutter-width: 30px !default;
230
+ $grid-row-columns: 6 !default;
223
231
 
224
232
 
225
233
  // Components
@@ -366,7 +374,6 @@ $table-dark-accent-bg: rgba($white, .05) !default;
366
374
  $table-dark-hover-color: $table-dark-color !default;
367
375
  $table-dark-hover-bg: rgba($white, .075) !default;
368
376
  $table-dark-border-color: lighten($table-dark-bg, 7.5%) !default;
369
- $table-dark-color: $white !default;
370
377
 
371
378
  $table-striped-order: odd !default;
372
379
 
@@ -412,6 +419,7 @@ $btn-padding-x: $input-btn-padding-x !default;
412
419
  $btn-font-family: $input-btn-font-family !default;
413
420
  $btn-font-size: $input-btn-font-size !default;
414
421
  $btn-line-height: $input-btn-line-height !default;
422
+ $btn-white-space: null !default; // Set to `nowrap` to prevent text wrapping
415
423
 
416
424
  $btn-padding-y-sm: $input-btn-padding-y-sm !default;
417
425
  $btn-padding-x-sm: $input-btn-padding-x-sm !default;
@@ -488,13 +496,13 @@ $input-plaintext-color: $body-color !default;
488
496
 
489
497
  $input-height-border: $input-border-width * 2 !default;
490
498
 
491
- $input-height-inner: calc(#{$input-line-height * 1em} + #{$input-padding-y * 2}) !default;
492
- $input-height-inner-half: calc(#{$input-line-height * .5em} + #{$input-padding-y}) !default;
493
- $input-height-inner-quarter: calc(#{$input-line-height * .25em} + #{$input-padding-y / 2}) !default;
499
+ $input-height-inner: add($input-line-height * 1em, $input-padding-y * 2) !default;
500
+ $input-height-inner-half: add($input-line-height * .5em, $input-padding-y) !default;
501
+ $input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y / 2) !default;
494
502
 
495
- $input-height: calc(#{$input-line-height * 1em} + #{$input-padding-y * 2} + #{$input-height-border}) !default;
496
- $input-height-sm: calc(#{$input-line-height-sm * 1em} + #{$input-btn-padding-y-sm * 2} + #{$input-height-border}) !default;
497
- $input-height-lg: calc(#{$input-line-height-lg * 1em} + #{$input-btn-padding-y-lg * 2} + #{$input-height-border}) !default;
503
+ $input-height: add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default;
504
+ $input-height-sm: add($input-line-height-sm * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default;
505
+ $input-height-lg: add($input-line-height-lg * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default;
498
506
 
499
507
  $input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
500
508
 
@@ -518,6 +526,7 @@ $custom-forms-transition: background-color .15s ease-in-out, borde
518
526
 
519
527
  $custom-control-gutter: .5rem !default;
520
528
  $custom-control-spacer-x: 1rem !default;
529
+ $custom-control-cursor: null !default;
521
530
 
522
531
  $custom-control-indicator-size: 1rem !default;
523
532
  $custom-control-indicator-bg: $input-bg !default;
@@ -527,6 +536,8 @@ $custom-control-indicator-box-shadow: $input-box-shadow !default;
527
536
  $custom-control-indicator-border-color: $gray-500 !default;
528
537
  $custom-control-indicator-border-width: $input-border-width !default;
529
538
 
539
+ $custom-control-label-color: null !default;
540
+
530
541
  $custom-control-indicator-disabled-bg: $input-disabled-bg !default;
531
542
  $custom-control-label-disabled-color: $gray-600 !default;
532
543
 
@@ -545,20 +556,20 @@ $custom-control-indicator-active-box-shadow: none !default;
545
556
  $custom-control-indicator-active-border-color: $custom-control-indicator-active-bg !default;
546
557
 
547
558
  $custom-checkbox-indicator-border-radius: $border-radius !default;
548
- $custom-checkbox-indicator-icon-checked: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e"), "#", "%23") !default;
559
+ $custom-checkbox-indicator-icon-checked: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/></svg>") !default;
549
560
 
550
561
  $custom-checkbox-indicator-indeterminate-bg: $component-active-bg !default;
551
562
  $custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default;
552
- $custom-checkbox-indicator-icon-indeterminate: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3e%3cpath stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/%3e%3c/svg%3e"), "#", "%23") !default;
563
+ $custom-checkbox-indicator-icon-indeterminate: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'><path stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/></svg>") !default;
553
564
  $custom-checkbox-indicator-indeterminate-box-shadow: none !default;
554
565
  $custom-checkbox-indicator-indeterminate-border-color: $custom-checkbox-indicator-indeterminate-bg !default;
555
566
 
556
567
  $custom-radio-indicator-border-radius: 50% !default;
557
- $custom-radio-indicator-icon-checked: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='#{$custom-control-indicator-checked-color}'/%3e%3c/svg%3e"), "#", "%23") !default;
568
+ $custom-radio-indicator-icon-checked: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'><circle r='3' fill='#{$custom-control-indicator-checked-color}'/></svg>") !default;
558
569
 
559
570
  $custom-switch-width: $custom-control-indicator-size * 1.75 !default;
560
571
  $custom-switch-indicator-border-radius: $custom-control-indicator-size / 2 !default;
561
- $custom-switch-indicator-size: calc(#{$custom-control-indicator-size} - #{$custom-control-indicator-border-width * 4}) !default;
572
+ $custom-switch-indicator-size: subtract($custom-control-indicator-size, $custom-control-indicator-border-width * 4) !default;
562
573
 
563
574
  $custom-select-padding-y: $input-padding-y !default;
564
575
  $custom-select-padding-x: $input-padding-x !default;
@@ -574,10 +585,10 @@ $custom-select-bg: $input-bg !default;
574
585
  $custom-select-disabled-bg: $gray-200 !default;
575
586
  $custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions
576
587
  $custom-select-indicator-color: $gray-800 !default;
577
- $custom-select-indicator: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e"), "#", "%23") !default;
578
- $custom-select-background: $custom-select-indicator no-repeat right $custom-select-padding-x center / $custom-select-bg-size !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
588
+ $custom-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'><path fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>") !default;
589
+ $custom-select-background: escape-svg($custom-select-indicator) no-repeat right $custom-select-padding-x center / $custom-select-bg-size !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
579
590
 
580
- $custom-select-feedback-icon-padding-right: calc((1em + #{2 * $custom-select-padding-y}) * 3 / 4 + #{$custom-select-padding-x + $custom-select-indicator-padding}) !default;
591
+ $custom-select-feedback-icon-padding-right: add(1em * .75, (2 * $custom-select-padding-y * .75) + $custom-select-padding-x + $custom-select-indicator-padding) !default;
581
592
  $custom-select-feedback-icon-position: center right ($custom-select-padding-x + $custom-select-indicator-padding) !default;
582
593
  $custom-select-feedback-icon-size: $input-height-inner-half $input-height-inner-half !default;
583
594
 
@@ -650,9 +661,9 @@ $form-feedback-valid-color: theme-color("success") !default;
650
661
  $form-feedback-invalid-color: theme-color("danger") !default;
651
662
 
652
663
  $form-feedback-icon-valid-color: $form-feedback-valid-color !default;
653
- $form-feedback-icon-valid: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"), "#", "%23") !default;
664
+ $form-feedback-icon-valid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>") !default;
654
665
  $form-feedback-icon-invalid-color: $form-feedback-invalid-color !default;
655
- $form-feedback-icon-invalid: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$form-feedback-icon-invalid-color}' viewBox='-2 -2 7 7'%3e%3cpath stroke='#{$form-feedback-icon-invalid-color}' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E"), "#", "%23") !default;
666
+ $form-feedback-icon-invalid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>") !default;
656
667
 
657
668
  $form-validation-states: () !default;
658
669
  // stylelint-disable-next-line scss/dollar-variable-default
@@ -728,14 +739,14 @@ $navbar-dark-color: rgba($white, .5) !default;
728
739
  $navbar-dark-hover-color: rgba($white, .75) !default;
729
740
  $navbar-dark-active-color: $white !default;
730
741
  $navbar-dark-disabled-color: rgba($white, .25) !default;
731
- $navbar-dark-toggler-icon-bg: str-replace(url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"), "#", "%23") !default;
742
+ $navbar-dark-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
732
743
  $navbar-dark-toggler-border-color: rgba($white, .1) !default;
733
744
 
734
745
  $navbar-light-color: rgba($black, .5) !default;
735
746
  $navbar-light-hover-color: rgba($black, .7) !default;
736
747
  $navbar-light-active-color: rgba($black, .9) !default;
737
748
  $navbar-light-disabled-color: rgba($black, .3) !default;
738
- $navbar-light-toggler-icon-bg: str-replace(url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"), "#", "%23") !default;
749
+ $navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
739
750
  $navbar-light-toggler-border-color: rgba($black, .1) !default;
740
751
 
741
752
  $navbar-light-brand-color: $navbar-light-active-color !default;
@@ -757,7 +768,7 @@ $dropdown-bg: $white !default;
757
768
  $dropdown-border-color: rgba($black, .15) !default;
758
769
  $dropdown-border-radius: $border-radius !default;
759
770
  $dropdown-border-width: $border-width !default;
760
- $dropdown-inner-border-radius: calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default;
771
+ $dropdown-inner-border-radius: subtract($dropdown-border-radius, $dropdown-border-width) !default;
761
772
  $dropdown-divider-bg: $gray-200 !default;
762
773
  $dropdown-divider-margin-y: $nav-divider-margin-y !default;
763
774
  $dropdown-box-shadow: 0 .5rem 1rem rgba($black, .175) !default;
@@ -822,9 +833,10 @@ $card-spacer-x: 1.25rem !default;
822
833
  $card-border-width: $border-width !default;
823
834
  $card-border-radius: $border-radius !default;
824
835
  $card-border-color: rgba($black, .125) !default;
825
- $card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default;
836
+ $card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default;
826
837
  $card-cap-bg: rgba($black, .03) !default;
827
838
  $card-cap-color: null !default;
839
+ $card-height: null !default;
828
840
  $card-color: null !default;
829
841
  $card-bg: $white !default;
830
842
 
@@ -871,6 +883,7 @@ $popover-max-width: 276px !default;
871
883
  $popover-border-width: $border-width !default;
872
884
  $popover-border-color: rgba($black, .2) !default;
873
885
  $popover-border-radius: $border-radius-lg !default;
886
+ $popover-inner-border-radius: subtract($popover-border-radius, $popover-border-width) !default;
874
887
  $popover-box-shadow: 0 .25rem .5rem rgba($black, .2) !default;
875
888
 
876
889
  $popover-header-bg: darken($popover-bg, 3%) !default;
@@ -929,6 +942,9 @@ $badge-pill-border-radius: 10rem !default;
929
942
  // Padding applied to the modal body
930
943
  $modal-inner-padding: 1rem !default;
931
944
 
945
+ // Margin between elements in footer, must be lower than or equal to 2 * $modal-inner-padding
946
+ $modal-footer-margin-between: .5rem !default;
947
+
932
948
  $modal-dialog-margin: .5rem !default;
933
949
  $modal-dialog-margin-y-sm-up: 1.75rem !default;
934
950
 
@@ -939,6 +955,7 @@ $modal-content-bg: $white !default;
939
955
  $modal-content-border-color: rgba($black, .2) !default;
940
956
  $modal-content-border-width: $border-width !default;
941
957
  $modal-content-border-radius: $border-radius-lg !default;
958
+ $modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
942
959
  $modal-content-box-shadow-xs: 0 .25rem .5rem rgba($black, .5) !default;
943
960
  $modal-content-box-shadow-sm-up: 0 .5rem 1rem rgba($black, .5) !default;
944
961
 
@@ -960,6 +977,7 @@ $modal-sm: 300px !default;
960
977
  $modal-fade-transform: translate(0, -50px) !default;
961
978
  $modal-show-transform: none !default;
962
979
  $modal-transition: transform .3s ease-out !default;
980
+ $modal-scale-transform: scale(1.02) !default;
963
981
 
964
982
 
965
983
  // Alerts
@@ -1035,6 +1053,8 @@ $figure-caption-color: $gray-600 !default;
1035
1053
 
1036
1054
  // Breadcrumbs
1037
1055
 
1056
+ $breadcrumb-font-size: null !default;
1057
+
1038
1058
  $breadcrumb-padding-y: .75rem !default;
1039
1059
  $breadcrumb-padding-x: 1rem !default;
1040
1060
  $breadcrumb-item-padding: .5rem !default;
@@ -1069,8 +1089,8 @@ $carousel-caption-color: $white !default;
1069
1089
 
1070
1090
  $carousel-control-icon-width: 20px !default;
1071
1091
 
1072
- $carousel-control-prev-icon-bg: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e"), "#", "%23") !default;
1073
- $carousel-control-next-icon-bg: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e"), "#", "%23") !default;
1092
+ $carousel-control-prev-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' width='8' height='8' viewBox='0 0 8 8'><path d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/></svg>") !default;
1093
+ $carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' width='8' height='8' viewBox='0 0 8 8'><path d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/></svg>") !default;
1074
1094
 
1075
1095
  $carousel-transition-duration: .6s !default;
1076
1096
  $carousel-transition: transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)