bootstrap 4.2.1 → 4.3.0

Sign up to get free protection for your applications and to get access to all the features.

Potentially problematic release.


This version of bootstrap might be problematic. Click here for more details.

Files changed (75) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +1 -1
  3. data/assets/javascripts/bootstrap-sprockets.js +5 -5
  4. data/assets/javascripts/bootstrap.js +133 -94
  5. data/assets/javascripts/bootstrap.min.js +3 -3
  6. data/assets/javascripts/bootstrap/alert.js +10 -10
  7. data/assets/javascripts/bootstrap/button.js +8 -8
  8. data/assets/javascripts/bootstrap/carousel.js +14 -12
  9. data/assets/javascripts/bootstrap/collapse.js +10 -10
  10. data/assets/javascripts/bootstrap/dropdown.js +22 -18
  11. data/assets/javascripts/bootstrap/modal.js +19 -13
  12. data/assets/javascripts/bootstrap/popover.js +10 -10
  13. data/assets/javascripts/bootstrap/scrollspy.js +10 -10
  14. data/assets/javascripts/bootstrap/tab.js +14 -11
  15. data/assets/javascripts/bootstrap/toast.js +15 -10
  16. data/assets/javascripts/bootstrap/tooltip.js +41 -26
  17. data/assets/javascripts/bootstrap/util.js +11 -7
  18. data/assets/stylesheets/_bootstrap-grid.scss +3 -3
  19. data/assets/stylesheets/_bootstrap-reboot.scss +3 -3
  20. data/assets/stylesheets/_bootstrap.scss +3 -3
  21. data/assets/stylesheets/bootstrap/_badge.scss +2 -1
  22. data/assets/stylesheets/bootstrap/_buttons.scss +2 -5
  23. data/assets/stylesheets/bootstrap/_card.scss +13 -34
  24. data/assets/stylesheets/bootstrap/_carousel.scss +1 -2
  25. data/assets/stylesheets/bootstrap/_close.scss +1 -4
  26. data/assets/stylesheets/bootstrap/_code.scss +5 -5
  27. data/assets/stylesheets/bootstrap/_custom-forms.scss +11 -11
  28. data/assets/stylesheets/bootstrap/_dropdown.scss +20 -20
  29. data/assets/stylesheets/bootstrap/_forms.scss +12 -16
  30. data/assets/stylesheets/bootstrap/_functions.scss +3 -3
  31. data/assets/stylesheets/bootstrap/_images.scss +1 -1
  32. data/assets/stylesheets/bootstrap/_input-group.scss +3 -3
  33. data/assets/stylesheets/bootstrap/_jumbotron.scss +1 -0
  34. data/assets/stylesheets/bootstrap/_list-group.scss +33 -5
  35. data/assets/stylesheets/bootstrap/_mixins.scss +6 -0
  36. data/assets/stylesheets/bootstrap/_modal.scss +47 -4
  37. data/assets/stylesheets/bootstrap/_navbar.scss +3 -8
  38. data/assets/stylesheets/bootstrap/_pagination.scss +0 -5
  39. data/assets/stylesheets/bootstrap/_popover.scss +46 -58
  40. data/assets/stylesheets/bootstrap/_print.scss +1 -1
  41. data/assets/stylesheets/bootstrap/_progress.scss +15 -6
  42. data/assets/stylesheets/bootstrap/_reboot.scss +28 -7
  43. data/assets/stylesheets/bootstrap/_spinners.scss +2 -0
  44. data/assets/stylesheets/bootstrap/_tables.scss +3 -5
  45. data/assets/stylesheets/bootstrap/_toasts.scss +3 -2
  46. data/assets/stylesheets/bootstrap/_tooltip.scss +1 -1
  47. data/assets/stylesheets/bootstrap/_transitions.scss +0 -2
  48. data/assets/stylesheets/bootstrap/_type.scss +15 -15
  49. data/assets/stylesheets/bootstrap/_utilities.scss +1 -0
  50. data/assets/stylesheets/bootstrap/_variables.scss +129 -97
  51. data/assets/stylesheets/bootstrap/mixins/_badge.scss +6 -0
  52. data/assets/stylesheets/bootstrap/mixins/_border-radius.scss +29 -1
  53. data/assets/stylesheets/bootstrap/mixins/_box-shadow.scss +16 -1
  54. data/assets/stylesheets/bootstrap/mixins/_buttons.scss +3 -7
  55. data/assets/stylesheets/bootstrap/mixins/_caret.scss +4 -4
  56. data/assets/stylesheets/bootstrap/mixins/_deprecate.scss +10 -0
  57. data/assets/stylesheets/bootstrap/mixins/_float.scss +3 -0
  58. data/assets/stylesheets/bootstrap/mixins/_forms.scss +8 -14
  59. data/assets/stylesheets/bootstrap/mixins/_image.scss +2 -2
  60. data/assets/stylesheets/bootstrap/mixins/_pagination.scss +1 -1
  61. data/assets/stylesheets/bootstrap/mixins/_reset-text.scss +1 -1
  62. data/assets/stylesheets/bootstrap/mixins/_size.scss +1 -0
  63. data/assets/stylesheets/bootstrap/mixins/_text-emphasis.scss +5 -3
  64. data/assets/stylesheets/bootstrap/mixins/_text-hide.scss +1 -3
  65. data/assets/stylesheets/bootstrap/mixins/_transition.scss +1 -1
  66. data/assets/stylesheets/bootstrap/mixins/_visibility.scss +1 -0
  67. data/assets/stylesheets/bootstrap/utilities/_borders.scss +13 -1
  68. data/assets/stylesheets/bootstrap/utilities/_display.scss +6 -18
  69. data/assets/stylesheets/bootstrap/utilities/_float.scss +5 -3
  70. data/assets/stylesheets/bootstrap/utilities/_stretched-link.scss +19 -0
  71. data/assets/stylesheets/bootstrap/utilities/_text.scss +6 -1
  72. data/assets/stylesheets/bootstrap/utilities/_visibility.scss +4 -2
  73. data/assets/stylesheets/bootstrap/vendor/_rfs.scss +212 -0
  74. data/lib/bootstrap/version.rb +2 -2
  75. metadata +5 -2
@@ -13,6 +13,7 @@
13
13
  vertical-align: text-bottom;
14
14
  border: $spinner-border-width solid currentColor;
15
15
  border-right-color: transparent;
16
+ // stylelint-disable-next-line property-blacklist
16
17
  border-radius: 50%;
17
18
  animation: spinner-border .75s linear infinite;
18
19
  }
@@ -42,6 +43,7 @@
42
43
  height: $spinner-height;
43
44
  vertical-align: text-bottom;
44
45
  background-color: currentColor;
46
+ // stylelint-disable-next-line property-blacklist
45
47
  border-radius: 50%;
46
48
  opacity: 0;
47
49
  animation: spinner-grow .75s linear infinite;
@@ -5,6 +5,7 @@
5
5
  .table {
6
6
  width: 100%;
7
7
  margin-bottom: $spacer;
8
+ color: $table-color;
8
9
  background-color: $table-bg; // Reset for nesting within parents with `background-color`.
9
10
 
10
11
  th,
@@ -22,10 +23,6 @@
22
23
  tbody + tbody {
23
24
  border-top: (2 * $table-border-width) solid $table-border-color;
24
25
  }
25
-
26
- .table {
27
- background-color: $body-bg;
28
- }
29
26
  }
30
27
 
31
28
 
@@ -88,6 +85,7 @@
88
85
  .table-hover {
89
86
  tbody tr {
90
87
  @include hover {
88
+ color: $table-hover-color;
91
89
  background-color: $table-hover-bg;
92
90
  }
93
91
  }
@@ -152,6 +150,7 @@
152
150
  &.table-hover {
153
151
  tbody tr {
154
152
  @include hover {
153
+ color: $table-dark-hover-color;
155
154
  background-color: $table-dark-hover-bg;
156
155
  }
157
156
  }
@@ -175,7 +174,6 @@
175
174
  width: 100%;
176
175
  overflow-x: auto;
177
176
  -webkit-overflow-scrolling: touch;
178
- -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057
179
177
 
180
178
  // Prevent double border on horizontal scroll due to use of `display: block;`
181
179
  > .table-bordered {
@@ -1,14 +1,15 @@
1
1
  .toast {
2
2
  max-width: $toast-max-width;
3
3
  overflow: hidden; // cheap rounded corners on nested items
4
- font-size: $toast-font-size; // knock it down to 14px
4
+ @include font-size($toast-font-size);
5
+ color: $toast-color;
5
6
  background-color: $toast-background-color;
6
7
  background-clip: padding-box;
7
8
  border: $toast-border-width solid $toast-border-color;
8
- border-radius: $toast-border-radius;
9
9
  box-shadow: $toast-box-shadow;
10
10
  backdrop-filter: blur(10px);
11
11
  opacity: 0;
12
+ @include border-radius($toast-border-radius);
12
13
 
13
14
  &:not(:last-child) {
14
15
  margin-bottom: $toast-padding-x;
@@ -7,7 +7,7 @@
7
7
  // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
8
8
  // So reset our font and text properties to avoid inheriting weird values.
9
9
  @include reset-text();
10
- font-size: $tooltip-font-size;
10
+ @include font-size($tooltip-font-size);
11
11
  // Allow breaking very long words so they don't overflow the tooltip's bounds
12
12
  word-wrap: break-word;
13
13
  opacity: 0;
@@ -1,5 +1,3 @@
1
- // stylelint-disable selector-no-qualifying-type
2
-
3
1
  .fade {
4
2
  @include transition($transition-fade);
5
3
 
@@ -13,36 +13,36 @@ h1, h2, h3, h4, h5, h6,
13
13
  color: $headings-color;
14
14
  }
15
15
 
16
- h1, .h1 { font-size: $h1-font-size; }
17
- h2, .h2 { font-size: $h2-font-size; }
18
- h3, .h3 { font-size: $h3-font-size; }
19
- h4, .h4 { font-size: $h4-font-size; }
20
- h5, .h5 { font-size: $h5-font-size; }
21
- h6, .h6 { font-size: $h6-font-size; }
16
+ h1, .h1 { @include font-size($h1-font-size); }
17
+ h2, .h2 { @include font-size($h2-font-size); }
18
+ h3, .h3 { @include font-size($h3-font-size); }
19
+ h4, .h4 { @include font-size($h4-font-size); }
20
+ h5, .h5 { @include font-size($h5-font-size); }
21
+ h6, .h6 { @include font-size($h6-font-size); }
22
22
 
23
23
  .lead {
24
- font-size: $lead-font-size;
24
+ @include font-size($lead-font-size);
25
25
  font-weight: $lead-font-weight;
26
26
  }
27
27
 
28
28
  // Type display classes
29
29
  .display-1 {
30
- font-size: $display1-size;
30
+ @include font-size($display1-size);
31
31
  font-weight: $display1-weight;
32
32
  line-height: $display-line-height;
33
33
  }
34
34
  .display-2 {
35
- font-size: $display2-size;
35
+ @include font-size($display2-size);
36
36
  font-weight: $display2-weight;
37
37
  line-height: $display-line-height;
38
38
  }
39
39
  .display-3 {
40
- font-size: $display3-size;
40
+ @include font-size($display3-size);
41
41
  font-weight: $display3-weight;
42
42
  line-height: $display-line-height;
43
43
  }
44
44
  .display-4 {
45
- font-size: $display4-size;
45
+ @include font-size($display4-size);
46
46
  font-weight: $display4-weight;
47
47
  line-height: $display-line-height;
48
48
  }
@@ -66,7 +66,7 @@ hr {
66
66
 
67
67
  small,
68
68
  .small {
69
- font-size: $small-font-size;
69
+ @include font-size($small-font-size);
70
70
  font-weight: $font-weight-normal;
71
71
  }
72
72
 
@@ -104,19 +104,19 @@ mark,
104
104
 
105
105
  // Builds on `abbr`
106
106
  .initialism {
107
- font-size: 90%;
107
+ @include font-size(90%);
108
108
  text-transform: uppercase;
109
109
  }
110
110
 
111
111
  // Blockquotes
112
112
  .blockquote {
113
113
  margin-bottom: $spacer;
114
- font-size: $blockquote-font-size;
114
+ @include font-size($blockquote-font-size);
115
115
  }
116
116
 
117
117
  .blockquote-footer {
118
118
  display: block;
119
- font-size: $blockquote-small-font-size;
119
+ @include font-size($blockquote-small-font-size);
120
120
  color: $blockquote-small-color;
121
121
 
122
122
  &::before {
@@ -11,6 +11,7 @@
11
11
  @import "utilities/screenreaders";
12
12
  @import "utilities/shadows";
13
13
  @import "utilities/sizing";
14
+ @import "utilities/stretched-link";
14
15
  @import "utilities/spacing";
15
16
  @import "utilities/text";
16
17
  @import "utilities/visibility";
@@ -114,8 +114,11 @@ $enable-transitions: true !default;
114
114
  $enable-prefers-reduced-motion-media-query: true !default;
115
115
  $enable-hover-media-query: false !default; // Deprecated, no longer affects any compiled CSS
116
116
  $enable-grid-classes: true !default;
117
+ $enable-pointer-cursor-for-buttons: true !default;
117
118
  $enable-print-styles: true !default;
119
+ $enable-responsive-font-sizes: false !default;
118
120
  $enable-validation-icons: true !default;
121
+ $enable-deprecation-messages: true !default;
119
122
 
120
123
 
121
124
  // Spacing
@@ -185,38 +188,28 @@ $paragraph-margin-bottom: 1rem !default;
185
188
  // Define the minimum dimensions at which your layout will change,
186
189
  // adapting to different screen sizes, for use in media queries.
187
190
 
188
- $grid-breakpoints: () !default;
189
- // stylelint-disable-next-line scss/dollar-variable-default
190
- $grid-breakpoints: map-merge(
191
- (
192
- xs: 0,
193
- sm: 576px,
194
- md: 768px,
195
- lg: 992px,
196
- xl: 1200px
197
- ),
198
- $grid-breakpoints
199
- );
191
+ $grid-breakpoints: (
192
+ xs: 0,
193
+ sm: 576px,
194
+ md: 768px,
195
+ lg: 992px,
196
+ xl: 1200px
197
+ ) !default;
200
198
 
201
199
  @include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
202
- @include _assert-starts-at-zero($grid-breakpoints);
200
+ @include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");
203
201
 
204
202
 
205
203
  // Grid containers
206
204
  //
207
205
  // Define the maximum width of `.container` for different screen sizes.
208
206
 
209
- $container-max-widths: () !default;
210
- // stylelint-disable-next-line scss/dollar-variable-default
211
- $container-max-widths: map-merge(
212
- (
213
- sm: 540px,
214
- md: 720px,
215
- lg: 960px,
216
- xl: 1140px
217
- ),
218
- $container-max-widths
219
- );
207
+ $container-max-widths: (
208
+ sm: 540px,
209
+ md: 720px,
210
+ lg: 960px,
211
+ xl: 1140px
212
+ ) !default;
220
213
 
221
214
  @include _assert-ascending($container-max-widths, "$container-max-widths");
222
215
 
@@ -253,6 +246,8 @@ $component-active-color: $white !default;
253
246
  $component-active-bg: theme-color("primary") !default;
254
247
 
255
248
  $caret-width: .3em !default;
249
+ $caret-vertical-align: $caret-width * .85 !default;
250
+ $caret-spacing: $caret-width * .85 !default;
256
251
 
257
252
  $transition-base: all .2s ease-in-out !default;
258
253
  $transition-fade: opacity .15s linear !default;
@@ -264,13 +259,13 @@ $embed-responsive-aspect-ratios: join(
264
259
  (
265
260
  (21 9),
266
261
  (16 9),
267
- (3 4),
262
+ (4 3),
268
263
  (1 1),
269
264
  ),
270
265
  $embed-responsive-aspect-ratios
271
266
  );
272
267
 
273
- // Fonts
268
+ // Typography
274
269
  //
275
270
  // Font, line-height, and color for body text, headings, and more.
276
271
 
@@ -281,8 +276,8 @@ $font-family-base: $font-family-sans-serif !default;
281
276
  // stylelint-enable value-keyword-case
282
277
 
283
278
  $font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
284
- $font-size-lg: ($font-size-base * 1.25) !default;
285
- $font-size-sm: ($font-size-base * .875) !default;
279
+ $font-size-lg: $font-size-base * 1.25 !default;
280
+ $font-size-sm: $font-size-base * .875 !default;
286
281
 
287
282
  $font-weight-lighter: lighter !default;
288
283
  $font-weight-light: 300 !default;
@@ -301,10 +296,10 @@ $h5-font-size: $font-size-base * 1.25 !default;
301
296
  $h6-font-size: $font-size-base !default;
302
297
 
303
298
  $headings-margin-bottom: $spacer / 2 !default;
304
- $headings-font-family: inherit !default;
299
+ $headings-font-family: null !default;
305
300
  $headings-font-weight: 500 !default;
306
301
  $headings-line-height: 1.2 !default;
307
- $headings-color: inherit !default;
302
+ $headings-color: null !default;
308
303
 
309
304
  $display1-size: 6rem !default;
310
305
  $display2-size: 5.5rem !default;
@@ -317,7 +312,7 @@ $display3-weight: 300 !default;
317
312
  $display4-weight: 300 !default;
318
313
  $display-line-height: $headings-line-height !default;
319
314
 
320
- $lead-font-size: ($font-size-base * 1.25) !default;
315
+ $lead-font-size: $font-size-base * 1.25 !default;
321
316
  $lead-font-weight: 300 !default;
322
317
 
323
318
  $small-font-size: 80% !default;
@@ -326,7 +321,7 @@ $text-muted: $gray-600 !default;
326
321
 
327
322
  $blockquote-small-color: $gray-600 !default;
328
323
  $blockquote-small-font-size: $small-font-size !default;
329
- $blockquote-font-size: ($font-size-base * 1.25) !default;
324
+ $blockquote-font-size: $font-size-base * 1.25 !default;
330
325
 
331
326
  $hr-border-color: rgba($black, .1) !default;
332
327
  $hr-border-width: $border-width !default;
@@ -352,21 +347,25 @@ $hr-margin-y: $spacer !default;
352
347
  $table-cell-padding: .75rem !default;
353
348
  $table-cell-padding-sm: .3rem !default;
354
349
 
355
- $table-bg: transparent !default;
350
+ $table-color: $body-color !default;
351
+ $table-bg: null !default;
356
352
  $table-accent-bg: rgba($black, .05) !default;
353
+ $table-hover-color: $table-color !default;
357
354
  $table-hover-bg: rgba($black, .075) !default;
358
355
  $table-active-bg: $table-hover-bg !default;
359
356
 
360
357
  $table-border-width: $border-width !default;
361
- $table-border-color: $gray-300 !default;
358
+ $table-border-color: $border-color !default;
362
359
 
363
360
  $table-head-bg: $gray-200 !default;
364
361
  $table-head-color: $gray-700 !default;
365
362
 
366
- $table-dark-bg: $gray-900 !default;
363
+ $table-dark-color: $white !default;
364
+ $table-dark-bg: $gray-800 !default;
367
365
  $table-dark-accent-bg: rgba($white, .05) !default;
366
+ $table-dark-hover-color: $table-dark-color !default;
368
367
  $table-dark-hover-bg: rgba($white, .075) !default;
369
- $table-dark-border-color: lighten($gray-900, 7.5%) !default;
368
+ $table-dark-border-color: lighten($table-dark-bg, 7.5%) !default;
370
369
  $table-dark-color: $white !default;
371
370
 
372
371
  $table-striped-order: odd !default;
@@ -383,6 +382,7 @@ $table-border-level: -6 !default;
383
382
 
384
383
  $input-btn-padding-y: .375rem !default;
385
384
  $input-btn-padding-x: .75rem !default;
385
+ $input-btn-font-family: null !default;
386
386
  $input-btn-font-size: $font-size-base !default;
387
387
  $input-btn-line-height: $line-height-base !default;
388
388
 
@@ -409,6 +409,7 @@ $input-btn-border-width: $border-width !default;
409
409
 
410
410
  $btn-padding-y: $input-btn-padding-y !default;
411
411
  $btn-padding-x: $input-btn-padding-x !default;
412
+ $btn-font-family: $input-btn-font-family !default;
412
413
  $btn-font-size: $input-btn-font-size !default;
413
414
  $btn-line-height: $input-btn-line-height !default;
414
415
 
@@ -449,6 +450,7 @@ $label-margin-bottom: .5rem !default;
449
450
 
450
451
  $input-padding-y: $input-btn-padding-y !default;
451
452
  $input-padding-x: $input-btn-padding-x !default;
453
+ $input-font-family: $input-btn-font-family !default;
452
454
  $input-font-size: $input-btn-font-size !default;
453
455
  $input-font-weight: $font-weight-base !default;
454
456
  $input-line-height: $input-btn-line-height !default;
@@ -486,14 +488,13 @@ $input-plaintext-color: $body-color !default;
486
488
 
487
489
  $input-height-border: $input-border-width * 2 !default;
488
490
 
489
- $input-height-inner: ($input-btn-font-size * $input-btn-line-height) + ($input-btn-padding-y * 2) !default;
490
- $input-height: calc(#{$input-height-inner} + #{$input-height-border}) !default;
491
-
492
- $input-height-inner-sm: ($input-btn-font-size-sm * $input-btn-line-height-sm) + ($input-btn-padding-y-sm * 2) !default;
493
- $input-height-sm: calc(#{$input-height-inner-sm} + #{$input-height-border}) !default;
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;
494
494
 
495
- $input-height-inner-lg: ($input-btn-font-size-lg * $input-btn-line-height-lg) + ($input-btn-padding-y-lg * 2) !default;
496
- $input-height-lg: calc(#{$input-height-inner-lg} + #{$input-height-border}) !default;
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;
497
498
 
498
499
  $input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
499
500
 
@@ -535,7 +536,7 @@ $custom-control-indicator-checked-disabled-bg: rgba(theme-color("primary"), .5)
535
536
  $custom-control-indicator-checked-box-shadow: none !default;
536
537
  $custom-control-indicator-checked-border-color: $custom-control-indicator-checked-bg !default;
537
538
 
538
- $custom-control-indicator-focus-box-shadow: $input-btn-focus-box-shadow !default;
539
+ $custom-control-indicator-focus-box-shadow: $input-focus-box-shadow !default;
539
540
  $custom-control-indicator-focus-border-color: $input-focus-border-color !default;
540
541
 
541
542
  $custom-control-indicator-active-color: $component-active-color !default;
@@ -559,8 +560,10 @@ $custom-switch-width: $custom-control-indicator-size *
559
560
  $custom-switch-indicator-border-radius: $custom-control-indicator-size / 2 !default;
560
561
  $custom-switch-indicator-size: calc(#{$custom-control-indicator-size} - #{$custom-control-indicator-border-width * 4}) !default;
561
562
 
562
- $custom-select-padding-y: $input-btn-padding-y !default;
563
- $custom-select-padding-x: $input-btn-padding-x !default;
563
+ $custom-select-padding-y: $input-padding-y !default;
564
+ $custom-select-padding-x: $input-padding-x !default;
565
+ $custom-select-font-family: $input-font-family !default;
566
+ $custom-select-font-size: $input-font-size !default;
564
567
  $custom-select-height: $input-height !default;
565
568
  $custom-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator
566
569
  $custom-select-font-weight: $input-font-weight !default;
@@ -574,9 +577,9 @@ $custom-select-indicator-color: $gray-800 !default;
574
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;
575
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)
576
579
 
577
- $custom-select-feedback-icon-padding-right: $input-height-inner * 3 / 4 + $custom-select-padding-x + $custom-select-indicator-padding !default;
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;
578
581
  $custom-select-feedback-icon-position: center right ($custom-select-padding-x + $custom-select-indicator-padding) !default;
579
- $custom-select-feedback-icon-size: ($input-height-inner / 2) ($input-height-inner / 2) !default;
582
+ $custom-select-feedback-icon-size: $input-height-inner-half $input-height-inner-half !default;
580
583
 
581
584
  $custom-select-border-width: $input-border-width !default;
582
585
  $custom-select-border-color: $input-border-color !default;
@@ -585,16 +588,16 @@ $custom-select-box-shadow: inset 0 1px 2px rgba($black, .075) !default;
585
588
 
586
589
  $custom-select-focus-border-color: $input-focus-border-color !default;
587
590
  $custom-select-focus-width: $input-focus-width !default;
588
- $custom-select-focus-box-shadow: 0 0 0 $custom-select-focus-width rgba($custom-select-focus-border-color, .5) !default;
591
+ $custom-select-focus-box-shadow: 0 0 0 $custom-select-focus-width $input-btn-focus-color !default;
589
592
 
590
593
  $custom-select-padding-y-sm: $input-padding-y-sm !default;
591
594
  $custom-select-padding-x-sm: $input-padding-x-sm !default;
592
- $custom-select-font-size-sm: $input-btn-font-size-sm !default;
595
+ $custom-select-font-size-sm: $input-font-size-sm !default;
593
596
  $custom-select-height-sm: $input-height-sm !default;
594
597
 
595
598
  $custom-select-padding-y-lg: $input-padding-y-lg !default;
596
599
  $custom-select-padding-x-lg: $input-padding-x-lg !default;
597
- $custom-select-font-size-lg: $input-btn-font-size-lg !default;
600
+ $custom-select-font-size-lg: $input-font-size-lg !default;
598
601
  $custom-select-height-lg: $input-height-lg !default;
599
602
 
600
603
  $custom-range-track-width: 100% !default;
@@ -624,6 +627,7 @@ $custom-file-disabled-bg: $input-disabled-bg !default;
624
627
  $custom-file-padding-y: $input-padding-y !default;
625
628
  $custom-file-padding-x: $input-padding-x !default;
626
629
  $custom-file-line-height: $input-line-height !default;
630
+ $custom-file-font-family: $input-font-family !default;
627
631
  $custom-file-font-weight: $input-font-weight !default;
628
632
  $custom-file-color: $input-color !default;
629
633
  $custom-file-bg: $input-bg !default;
@@ -648,38 +652,23 @@ $form-feedback-invalid-color: theme-color("danger") !default;
648
652
  $form-feedback-icon-valid-color: $form-feedback-valid-color !default;
649
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;
650
654
  $form-feedback-icon-invalid-color: $form-feedback-invalid-color !default;
651
- $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='%23d9534f' 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;
652
-
653
-
654
- // Dropdowns
655
- //
656
- // Dropdown menu container and contents.
657
-
658
- $dropdown-min-width: 10rem !default;
659
- $dropdown-padding-y: .5rem !default;
660
- $dropdown-spacer: .125rem !default;
661
- $dropdown-bg: $white !default;
662
- $dropdown-border-color: rgba($black, .15) !default;
663
- $dropdown-border-radius: $border-radius !default;
664
- $dropdown-border-width: $border-width !default;
665
- $dropdown-inner-border-radius: calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default;
666
- $dropdown-divider-bg: $gray-200 !default;
667
- $dropdown-box-shadow: 0 .5rem 1rem rgba($black, .175) !default;
668
-
669
- $dropdown-link-color: $gray-900 !default;
670
- $dropdown-link-hover-color: darken($gray-900, 5%) !default;
671
- $dropdown-link-hover-bg: $gray-100 !default;
672
-
673
- $dropdown-link-active-color: $component-active-color !default;
674
- $dropdown-link-active-bg: $component-active-bg !default;
675
-
676
- $dropdown-link-disabled-color: $gray-600 !default;
677
-
678
- $dropdown-item-padding-y: .25rem !default;
679
- $dropdown-item-padding-x: 1.5rem !default;
680
-
681
- $dropdown-header-color: $gray-600 !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;
682
656
 
657
+ $form-validation-states: () !default;
658
+ // stylelint-disable-next-line scss/dollar-variable-default
659
+ $form-validation-states: map-merge(
660
+ (
661
+ "valid": (
662
+ "color": $form-feedback-valid-color,
663
+ "icon": $form-feedback-icon-valid
664
+ ),
665
+ "invalid": (
666
+ "color": $form-feedback-invalid-color,
667
+ "icon": $form-feedback-icon-invalid
668
+ ),
669
+ ),
670
+ $form-validation-states
671
+ );
683
672
 
684
673
  // Z-index master list
685
674
  //
@@ -755,6 +744,39 @@ $navbar-dark-brand-color: $navbar-dark-active-color !default;
755
744
  $navbar-dark-brand-hover-color: $navbar-dark-active-color !default;
756
745
 
757
746
 
747
+ // Dropdowns
748
+ //
749
+ // Dropdown menu container and contents.
750
+
751
+ $dropdown-min-width: 10rem !default;
752
+ $dropdown-padding-y: .5rem !default;
753
+ $dropdown-spacer: .125rem !default;
754
+ $dropdown-font-size: $font-size-base !default;
755
+ $dropdown-color: $body-color !default;
756
+ $dropdown-bg: $white !default;
757
+ $dropdown-border-color: rgba($black, .15) !default;
758
+ $dropdown-border-radius: $border-radius !default;
759
+ $dropdown-border-width: $border-width !default;
760
+ $dropdown-inner-border-radius: calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default;
761
+ $dropdown-divider-bg: $gray-200 !default;
762
+ $dropdown-divider-margin-y: $nav-divider-margin-y !default;
763
+ $dropdown-box-shadow: 0 .5rem 1rem rgba($black, .175) !default;
764
+
765
+ $dropdown-link-color: $gray-900 !default;
766
+ $dropdown-link-hover-color: darken($gray-900, 5%) !default;
767
+ $dropdown-link-hover-bg: $gray-100 !default;
768
+
769
+ $dropdown-link-active-color: $component-active-color !default;
770
+ $dropdown-link-active-bg: $component-active-bg !default;
771
+
772
+ $dropdown-link-disabled-color: $gray-600 !default;
773
+
774
+ $dropdown-item-padding-y: .25rem !default;
775
+ $dropdown-item-padding-x: 1.5rem !default;
776
+
777
+ $dropdown-header-color: $gray-600 !default;
778
+
779
+
758
780
  // Pagination
759
781
 
760
782
  $pagination-padding-y: .5rem !default;
@@ -789,6 +811,7 @@ $pagination-disabled-border-color: $gray-300 !default;
789
811
  // Jumbotron
790
812
 
791
813
  $jumbotron-padding: 2rem !default;
814
+ $jumbotron-color: null !default;
792
815
  $jumbotron-bg: $gray-200 !default;
793
816
 
794
817
 
@@ -801,7 +824,8 @@ $card-border-radius: $border-radius !default;
801
824
  $card-border-color: rgba($black, .125) !default;
802
825
  $card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default;
803
826
  $card-cap-bg: rgba($black, .03) !default;
804
- $card-cap-color: inherit !default;
827
+ $card-cap-color: null !default;
828
+ $card-color: null !default;
805
829
  $card-bg: $white !default;
806
830
 
807
831
  $card-img-overlay-padding: 1.25rem !default;
@@ -866,19 +890,21 @@ $popover-arrow-outer-color: fade-in($popover-border-color, .05) !default
866
890
 
867
891
 
868
892
  // Toasts
869
- $toast-max-width: 350px !default;
870
- $toast-padding-x: .75rem !default;
871
- $toast-padding-y: .25rem !default;
872
- $toast-font-size: .875rem !default;
873
- $toast-background-color: rgba($white, .85) !default;
874
- $toast-border-width: 1px !default;
875
- $toast-border-color: rgba(0, 0, 0, .1) !default;
876
- $toast-border-radius: .25rem !default;
877
- $toast-box-shadow: 0 .25rem .75rem rgba($black, .1) !default;
878
893
 
879
- $toast-header-color: $gray-600 !default;
880
- $toast-header-background-color: rgba($white, .85) !default;
881
- $toast-header-border-color: rgba(0, 0, 0, .05) !default;
894
+ $toast-max-width: 350px !default;
895
+ $toast-padding-x: .75rem !default;
896
+ $toast-padding-y: .25rem !default;
897
+ $toast-font-size: .875rem !default;
898
+ $toast-color: null !default;
899
+ $toast-background-color: rgba($white, .85) !default;
900
+ $toast-border-width: 1px !default;
901
+ $toast-border-color: rgba(0, 0, 0, .1) !default;
902
+ $toast-border-radius: .25rem !default;
903
+ $toast-box-shadow: 0 .25rem .75rem rgba($black, .1) !default;
904
+
905
+ $toast-header-color: $gray-600 !default;
906
+ $toast-header-background-color: rgba($white, .85) !default;
907
+ $toast-header-border-color: rgba(0, 0, 0, .05) !default;
882
908
 
883
909
 
884
910
  // Badges
@@ -889,6 +915,9 @@ $badge-padding-y: .25em !default;
889
915
  $badge-padding-x: .4em !default;
890
916
  $badge-border-radius: $border-radius !default;
891
917
 
918
+ $badge-transition: $btn-transition !default;
919
+ $badge-focus-width: $input-btn-focus-width !default;
920
+
892
921
  $badge-pill-padding-x: .6em !default;
893
922
  // Use a higher than normal value to ensure completely rounded edges when
894
923
  // customizing padding or font-size on labels.
@@ -905,6 +934,7 @@ $modal-dialog-margin-y-sm-up: 1.75rem !default;
905
934
 
906
935
  $modal-title-line-height: $line-height-base !default;
907
936
 
937
+ $modal-content-color: null !default;
908
938
  $modal-content-bg: $white !default;
909
939
  $modal-content-border-color: rgba($black, .2) !default;
910
940
  $modal-content-border-width: $border-width !default;
@@ -914,7 +944,7 @@ $modal-content-box-shadow-sm-up: 0 .5rem 1rem rgba($black, .5) !default;
914
944
 
915
945
  $modal-backdrop-bg: $black !default;
916
946
  $modal-backdrop-opacity: .5 !default;
917
- $modal-header-border-color: $gray-200 !default;
947
+ $modal-header-border-color: $border-color !default;
918
948
  $modal-footer-border-color: $modal-header-border-color !default;
919
949
  $modal-header-border-width: $modal-content-border-width !default;
920
950
  $modal-footer-border-width: $modal-header-border-width !default;
@@ -951,7 +981,7 @@ $alert-color-level: 6 !default;
951
981
  // Progress bars
952
982
 
953
983
  $progress-height: 1rem !default;
954
- $progress-font-size: ($font-size-base * .75) !default;
984
+ $progress-font-size: $font-size-base * .75 !default;
955
985
  $progress-bg: $gray-200 !default;
956
986
  $progress-border-radius: $border-radius !default;
957
987
  $progress-box-shadow: inset 0 .1rem .1rem rgba($black, .1) !default;
@@ -963,6 +993,7 @@ $progress-bar-transition: width .6s ease !default;
963
993
 
964
994
  // List group
965
995
 
996
+ $list-group-color: null !default;
966
997
  $list-group-bg: $white !default;
967
998
  $list-group-border-color: rgba($black, .125) !default;
968
999
  $list-group-border-width: $border-width !default;
@@ -1081,6 +1112,7 @@ $pre-scrollable-max-height: 340px !default;
1081
1112
 
1082
1113
  // Utilities
1083
1114
 
1115
+ $displays: none, inline, inline-block, block, table, table-row, table-cell, flex, inline-flex !default;
1084
1116
  $overflows: auto, hidden !default;
1085
1117
  $positions: static, relative, absolute, fixed, sticky !default;
1086
1118