bootstrap 5.0.2 → 5.1.3

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.
Files changed (54) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +1 -1
  3. data/assets/javascripts/bootstrap/alert.js +78 -48
  4. data/assets/javascripts/bootstrap/base-component.js +22 -17
  5. data/assets/javascripts/bootstrap/button.js +19 -12
  6. data/assets/javascripts/bootstrap/carousel.js +66 -44
  7. data/assets/javascripts/bootstrap/collapse.js +114 -131
  8. data/assets/javascripts/bootstrap/dom/data.js +5 -5
  9. data/assets/javascripts/bootstrap/dom/event-handler.js +11 -5
  10. data/assets/javascripts/bootstrap/dom/manipulator.js +6 -6
  11. data/assets/javascripts/bootstrap/dom/selector-engine.js +49 -7
  12. data/assets/javascripts/bootstrap/dropdown.js +96 -106
  13. data/assets/javascripts/bootstrap/modal.js +241 -87
  14. data/assets/javascripts/bootstrap/offcanvas.js +203 -57
  15. data/assets/javascripts/bootstrap/popover.js +25 -58
  16. data/assets/javascripts/bootstrap/scrollspy.js +47 -66
  17. data/assets/javascripts/bootstrap/tab.js +41 -22
  18. data/assets/javascripts/bootstrap/toast.js +124 -29
  19. data/assets/javascripts/bootstrap/tooltip.js +122 -104
  20. data/assets/javascripts/bootstrap-sprockets.js +7 -7
  21. data/assets/javascripts/bootstrap.js +660 -630
  22. data/assets/javascripts/bootstrap.min.js +2 -2
  23. data/assets/stylesheets/_bootstrap-grid.scss +3 -1
  24. data/assets/stylesheets/_bootstrap-reboot.scss +2 -4
  25. data/assets/stylesheets/_bootstrap.scss +2 -1
  26. data/assets/stylesheets/bootstrap/_card.scss +2 -1
  27. data/assets/stylesheets/bootstrap/_functions.scss +51 -12
  28. data/assets/stylesheets/bootstrap/_grid.scss +11 -0
  29. data/assets/stylesheets/bootstrap/_helpers.scss +2 -0
  30. data/assets/stylesheets/bootstrap/_mixins.scss +1 -0
  31. data/assets/stylesheets/bootstrap/_modal.scss +1 -11
  32. data/assets/stylesheets/bootstrap/_navbar.scss +30 -1
  33. data/assets/stylesheets/bootstrap/_offcanvas.scss +4 -0
  34. data/assets/stylesheets/bootstrap/_placeholders.scss +51 -0
  35. data/assets/stylesheets/bootstrap/_reboot.scss +12 -8
  36. data/assets/stylesheets/bootstrap/_root.scss +40 -2
  37. data/assets/stylesheets/bootstrap/_tables.scss +8 -4
  38. data/assets/stylesheets/bootstrap/_toasts.scss +2 -2
  39. data/assets/stylesheets/bootstrap/_transitions.scss +6 -0
  40. data/assets/stylesheets/bootstrap/_utilities.scss +44 -8
  41. data/assets/stylesheets/bootstrap/_variables.scss +184 -11
  42. data/assets/stylesheets/bootstrap/bootstrap-utilities.scss +1 -1
  43. data/assets/stylesheets/bootstrap/forms/_form-control.scss +1 -1
  44. data/assets/stylesheets/bootstrap/forms/_form-select.scss +2 -0
  45. data/assets/stylesheets/bootstrap/helpers/_stacks.scss +15 -0
  46. data/assets/stylesheets/bootstrap/helpers/_vr.scss +8 -0
  47. data/assets/stylesheets/bootstrap/mixins/_backdrop.scss +14 -0
  48. data/assets/stylesheets/bootstrap/mixins/_grid.scss +29 -10
  49. data/assets/stylesheets/bootstrap/mixins/_utilities.scss +27 -6
  50. data/assets/stylesheets/bootstrap/mixins/_visually-hidden.scss +1 -1
  51. data/bootstrap.gemspec +3 -3
  52. data/lib/bootstrap/version.rb +2 -2
  53. data/tasks/updater/js.rb +6 -2
  54. metadata +12 -8
@@ -0,0 +1,51 @@
1
+ .placeholder {
2
+ display: inline-block;
3
+ min-height: 1em;
4
+ vertical-align: middle;
5
+ cursor: wait;
6
+ background-color: currentColor;
7
+ opacity: $placeholder-opacity-max;
8
+
9
+ &.btn::before {
10
+ display: inline-block;
11
+ content: "";
12
+ }
13
+ }
14
+
15
+ // Sizing
16
+ .placeholder-xs {
17
+ min-height: .6em;
18
+ }
19
+
20
+ .placeholder-sm {
21
+ min-height: .8em;
22
+ }
23
+
24
+ .placeholder-lg {
25
+ min-height: 1.2em;
26
+ }
27
+
28
+ // Animation
29
+ .placeholder-glow {
30
+ .placeholder {
31
+ animation: placeholder-glow 2s ease-in-out infinite;
32
+ }
33
+ }
34
+
35
+ @keyframes placeholder-glow {
36
+ 50% {
37
+ opacity: $placeholder-opacity-min;
38
+ }
39
+ }
40
+
41
+ .placeholder-wave {
42
+ mask-image: linear-gradient(130deg, $black 55%, rgba(0, 0, 0, (1 - $placeholder-opacity-min)) 75%, $black 95%);
43
+ mask-size: 200% 100%;
44
+ animation: placeholder-wave 2s linear infinite;
45
+ }
46
+
47
+ @keyframes placeholder-wave {
48
+ 100% {
49
+ mask-position: -200% 0%;
50
+ }
51
+ }
@@ -26,7 +26,9 @@
26
26
  // null by default, thus nothing is generated.
27
27
 
28
28
  :root {
29
- font-size: $font-size-root;
29
+ @if $font-size-root != null {
30
+ font-size: var(--#{$variable-prefix}root-font-size);
31
+ }
30
32
 
31
33
  @if $enable-smooth-scroll {
32
34
  @media (prefers-reduced-motion: no-preference) {
@@ -43,18 +45,20 @@
43
45
  // 3. Prevent adjustments of font size after orientation changes in iOS.
44
46
  // 4. Change the default tap highlight to be completely transparent in iOS.
45
47
 
48
+ // scss-docs-start reboot-body-rules
46
49
  body {
47
50
  margin: 0; // 1
48
- font-family: $font-family-base;
49
- @include font-size($font-size-base);
50
- font-weight: $font-weight-base;
51
- line-height: $line-height-base;
52
- color: $body-color;
53
- text-align: $body-text-align;
54
- background-color: $body-bg; // 2
51
+ font-family: var(--#{$variable-prefix}body-font-family);
52
+ @include font-size(var(--#{$variable-prefix}body-font-size));
53
+ font-weight: var(--#{$variable-prefix}body-font-weight);
54
+ line-height: var(--#{$variable-prefix}body-line-height);
55
+ color: var(--#{$variable-prefix}body-color);
56
+ text-align: var(--#{$variable-prefix}body-text-align);
57
+ background-color: var(--#{$variable-prefix}body-bg); // 2
55
58
  -webkit-text-size-adjust: 100%; // 3
56
59
  -webkit-tap-highlight-color: rgba($black, 0); // 4
57
60
  }
61
+ // scss-docs-end reboot-body-rules
58
62
 
59
63
 
60
64
  // Content grouping
@@ -1,16 +1,54 @@
1
1
  :root {
2
- // Custom variable values only support SassScript inside `#{}`.
2
+ // Note: Custom variable values only support SassScript inside `#{}`.
3
+
4
+ // Colors
5
+ //
6
+ // Generate palettes for full colors, grays, and theme colors.
7
+
3
8
  @each $color, $value in $colors {
4
9
  --#{$variable-prefix}#{$color}: #{$value};
5
10
  }
6
11
 
12
+ @each $color, $value in $grays {
13
+ --#{$variable-prefix}gray-#{$color}: #{$value};
14
+ }
15
+
7
16
  @each $color, $value in $theme-colors {
8
17
  --#{$variable-prefix}#{$color}: #{$value};
9
18
  }
10
19
 
11
- // Use `inspect` for lists so that quoted items keep the quotes.
20
+ @each $color, $value in $theme-colors-rgb {
21
+ --#{$variable-prefix}#{$color}-rgb: #{$value};
22
+ }
23
+
24
+ --#{$variable-prefix}white-rgb: #{to-rgb($white)};
25
+ --#{$variable-prefix}black-rgb: #{to-rgb($black)};
26
+ --#{$variable-prefix}body-color-rgb: #{to-rgb($body-color)};
27
+ --#{$variable-prefix}body-bg-rgb: #{to-rgb($body-bg)};
28
+
29
+ // Fonts
30
+
31
+ // Note: Use `inspect` for lists so that quoted items keep the quotes.
12
32
  // See https://github.com/sass/sass/issues/2383#issuecomment-336349172
13
33
  --#{$variable-prefix}font-sans-serif: #{inspect($font-family-sans-serif)};
14
34
  --#{$variable-prefix}font-monospace: #{inspect($font-family-monospace)};
15
35
  --#{$variable-prefix}gradient: #{$gradient};
36
+
37
+ // Root and body
38
+ // stylelint-disable custom-property-empty-line-before
39
+ // scss-docs-start root-body-variables
40
+ @if $font-size-root != null {
41
+ --#{$variable-prefix}root-font-size: #{$font-size-root};
42
+ }
43
+ --#{$variable-prefix}body-font-family: #{$font-family-base};
44
+ --#{$variable-prefix}body-font-size: #{$font-size-base};
45
+ --#{$variable-prefix}body-font-weight: #{$font-weight-base};
46
+ --#{$variable-prefix}body-line-height: #{$line-height-base};
47
+ --#{$variable-prefix}body-color: #{$body-color};
48
+ @if $body-text-align != null {
49
+ --#{$variable-prefix}body-text-align: #{$body-text-align};
50
+ }
51
+ --#{$variable-prefix}body-bg: #{$body-bg};
52
+ // scss-docs-end root-body-variables
53
+ // stylelint-enable custom-property-empty-line-before
16
54
  }
@@ -39,8 +39,8 @@
39
39
  }
40
40
 
41
41
  // Highlight border color between thead, tbody and tfoot.
42
- > :not(:last-child) > :last-child > * {
43
- border-bottom-color: $table-group-separator-color;
42
+ > :not(:first-child) {
43
+ border-top: (2 * $table-border-width) solid $table-group-separator-color;
44
44
  }
45
45
  }
46
46
 
@@ -91,6 +91,10 @@
91
91
  > :not(caption) > * > * {
92
92
  border-bottom-width: 0;
93
93
  }
94
+
95
+ > :not(:first-child) {
96
+ border-top-width: 0;
97
+ }
94
98
  }
95
99
 
96
100
  // Zebra-striping
@@ -98,7 +102,7 @@
98
102
  // Default zebra-stripe styles (alternating gray and transparent backgrounds)
99
103
 
100
104
  .table-striped {
101
- > tbody > tr:nth-of-type(#{$table-striped-order}) {
105
+ > tbody > tr:nth-of-type(#{$table-striped-order}) > * {
102
106
  --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-striped-bg);
103
107
  color: var(--#{$variable-prefix}table-striped-color);
104
108
  }
@@ -118,7 +122,7 @@
118
122
  // Placed here since it has to come after the potential zebra striping
119
123
 
120
124
  .table-hover {
121
- > tbody > tr:hover {
125
+ > tbody > tr:hover > * {
122
126
  --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-hover-bg);
123
127
  color: var(--#{$variable-prefix}table-hover-color);
124
128
  }
@@ -10,11 +10,11 @@
10
10
  box-shadow: $toast-box-shadow;
11
11
  @include border-radius($toast-border-radius);
12
12
 
13
- &:not(.showing):not(.show) {
13
+ &.showing {
14
14
  opacity: 0;
15
15
  }
16
16
 
17
- &.hide {
17
+ &:not(.show) {
18
18
  display: none;
19
19
  }
20
20
  }
@@ -17,5 +17,11 @@
17
17
  height: 0;
18
18
  overflow: hidden;
19
19
  @include transition($transition-collapse);
20
+
21
+ &.collapse-horizontal {
22
+ width: 0;
23
+ height: auto;
24
+ @include transition($transition-collapse-width);
25
+ }
20
26
  }
21
27
  // scss-docs-end collapse-classes
@@ -24,6 +24,19 @@ $utilities: map-merge(
24
24
  )
25
25
  ),
26
26
  // scss-docs-end utils-float
27
+ // Opacity utilities
28
+ // scss-docs-start utils-opacity
29
+ "opacity": (
30
+ property: opacity,
31
+ values: (
32
+ 0: 0,
33
+ 25: .25,
34
+ 50: .5,
35
+ 75: .75,
36
+ 100: 1,
37
+ )
38
+ ),
39
+ // scss-docs-end utils-opacity
27
40
  // scss-docs-start utils-overflow
28
41
  "overflow": (
29
42
  property: overflow,
@@ -501,32 +514,55 @@ $utilities: map-merge(
501
514
  "color": (
502
515
  property: color,
503
516
  class: text,
517
+ local-vars: (
518
+ "text-opacity": 1
519
+ ),
504
520
  values: map-merge(
505
- $theme-colors,
521
+ $utilities-text-colors,
506
522
  (
507
- "white": $white,
508
- "body": $body-color,
509
523
  "muted": $text-muted,
510
- "black-50": rgba($black, .5),
511
- "white-50": rgba($white, .5),
524
+ "black-50": rgba($black, .5), // deprecated
525
+ "white-50": rgba($white, .5), // deprecated
512
526
  "reset": inherit,
513
527
  )
514
528
  )
515
529
  ),
530
+ "text-opacity": (
531
+ css-var: true,
532
+ class: text-opacity,
533
+ values: (
534
+ 25: .25,
535
+ 50: .5,
536
+ 75: .75,
537
+ 100: 1
538
+ )
539
+ ),
516
540
  // scss-docs-end utils-color
517
541
  // scss-docs-start utils-bg-color
518
542
  "background-color": (
519
543
  property: background-color,
520
544
  class: bg,
545
+ local-vars: (
546
+ "bg-opacity": 1
547
+ ),
521
548
  values: map-merge(
522
- $theme-colors,
549
+ $utilities-bg-colors,
523
550
  (
524
- "body": $body-bg,
525
- "white": $white,
526
551
  "transparent": transparent
527
552
  )
528
553
  )
529
554
  ),
555
+ "bg-opacity": (
556
+ css-var: true,
557
+ class: bg-opacity,
558
+ values: (
559
+ 10: .1,
560
+ 25: .25,
561
+ 50: .5,
562
+ 75: .75,
563
+ 100: 1
564
+ )
565
+ ),
530
566
  // scss-docs-end utils-bg-color
531
567
  "gradient": (
532
568
  property: background-image,
@@ -90,6 +90,10 @@ $theme-colors: (
90
90
  ) !default;
91
91
  // scss-docs-end theme-colors-map
92
92
 
93
+ // scss-docs-start theme-colors-rgb
94
+ $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
95
+ // scss-docs-end theme-colors-rgb
96
+
93
97
  // The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
94
98
  // See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
95
99
  $min-contrast-ratio: 4.5 !default;
@@ -198,6 +202,126 @@ $cyan-600: shade-color($cyan, 20%) !default;
198
202
  $cyan-700: shade-color($cyan, 40%) !default;
199
203
  $cyan-800: shade-color($cyan, 60%) !default;
200
204
  $cyan-900: shade-color($cyan, 80%) !default;
205
+
206
+ $blues: (
207
+ "blue-100": $blue-100,
208
+ "blue-200": $blue-200,
209
+ "blue-300": $blue-300,
210
+ "blue-400": $blue-400,
211
+ "blue-500": $blue-500,
212
+ "blue-600": $blue-600,
213
+ "blue-700": $blue-700,
214
+ "blue-800": $blue-800,
215
+ "blue-900": $blue-900
216
+ ) !default;
217
+
218
+ $indigos: (
219
+ "indigo-100": $indigo-100,
220
+ "indigo-200": $indigo-200,
221
+ "indigo-300": $indigo-300,
222
+ "indigo-400": $indigo-400,
223
+ "indigo-500": $indigo-500,
224
+ "indigo-600": $indigo-600,
225
+ "indigo-700": $indigo-700,
226
+ "indigo-800": $indigo-800,
227
+ "indigo-900": $indigo-900
228
+ ) !default;
229
+
230
+ $purples: (
231
+ "purple-100": $purple-200,
232
+ "purple-200": $purple-100,
233
+ "purple-300": $purple-300,
234
+ "purple-400": $purple-400,
235
+ "purple-500": $purple-500,
236
+ "purple-600": $purple-600,
237
+ "purple-700": $purple-700,
238
+ "purple-800": $purple-800,
239
+ "purple-900": $purple-900
240
+ ) !default;
241
+
242
+ $pinks: (
243
+ "pink-100": $pink-100,
244
+ "pink-200": $pink-200,
245
+ "pink-300": $pink-300,
246
+ "pink-400": $pink-400,
247
+ "pink-500": $pink-500,
248
+ "pink-600": $pink-600,
249
+ "pink-700": $pink-700,
250
+ "pink-800": $pink-800,
251
+ "pink-900": $pink-900
252
+ ) !default;
253
+
254
+ $reds: (
255
+ "red-100": $red-100,
256
+ "red-200": $red-200,
257
+ "red-300": $red-300,
258
+ "red-400": $red-400,
259
+ "red-500": $red-500,
260
+ "red-600": $red-600,
261
+ "red-700": $red-700,
262
+ "red-800": $red-800,
263
+ "red-900": $red-900
264
+ ) !default;
265
+
266
+ $oranges: (
267
+ "orange-100": $orange-100,
268
+ "orange-200": $orange-200,
269
+ "orange-300": $orange-300,
270
+ "orange-400": $orange-400,
271
+ "orange-500": $orange-500,
272
+ "orange-600": $orange-600,
273
+ "orange-700": $orange-700,
274
+ "orange-800": $orange-800,
275
+ "orange-900": $orange-900
276
+ ) !default;
277
+
278
+ $yellows: (
279
+ "yellow-100": $yellow-100,
280
+ "yellow-200": $yellow-200,
281
+ "yellow-300": $yellow-300,
282
+ "yellow-400": $yellow-400,
283
+ "yellow-500": $yellow-500,
284
+ "yellow-600": $yellow-600,
285
+ "yellow-700": $yellow-700,
286
+ "yellow-800": $yellow-800,
287
+ "yellow-900": $yellow-900
288
+ ) !default;
289
+
290
+ $greens: (
291
+ "green-100": $green-100,
292
+ "green-200": $green-200,
293
+ "green-300": $green-300,
294
+ "green-400": $green-400,
295
+ "green-500": $green-500,
296
+ "green-600": $green-600,
297
+ "green-700": $green-700,
298
+ "green-800": $green-800,
299
+ "green-900": $green-900
300
+ ) !default;
301
+
302
+ $teals: (
303
+ "teal-100": $teal-100,
304
+ "teal-200": $teal-200,
305
+ "teal-300": $teal-300,
306
+ "teal-400": $teal-400,
307
+ "teal-500": $teal-500,
308
+ "teal-600": $teal-600,
309
+ "teal-700": $teal-700,
310
+ "teal-800": $teal-800,
311
+ "teal-900": $teal-900
312
+ ) !default;
313
+
314
+ $cyans: (
315
+ "cyan-100": $cyan-100,
316
+ "cyan-200": $cyan-200,
317
+ "cyan-300": $cyan-300,
318
+ "cyan-400": $cyan-400,
319
+ "cyan-500": $cyan-500,
320
+ "cyan-600": $cyan-600,
321
+ "cyan-700": $cyan-700,
322
+ "cyan-800": $cyan-800,
323
+ "cyan-900": $cyan-900
324
+ ) !default;
201
325
  // fusv-enable
202
326
 
203
327
  // Characters which are escaped by the escape-svg function
@@ -221,6 +345,7 @@ $enable-transitions: true !default;
221
345
  $enable-reduced-motion: true !default;
222
346
  $enable-smooth-scroll: true !default;
223
347
  $enable-grid-classes: true !default;
348
+ $enable-cssgrid: false !default;
224
349
  $enable-button-pointers: true !default;
225
350
  $enable-rfs: true !default;
226
351
  $enable-validation-icons: true !default;
@@ -280,6 +405,38 @@ $body-bg: $white !default;
280
405
  $body-color: $gray-900 !default;
281
406
  $body-text-align: null !default;
282
407
 
408
+ // Utilities maps
409
+ //
410
+ // Extends the default `$theme-colors` maps to help create our utilities.
411
+
412
+ // Come v6, we'll de-dupe these variables. Until then, for backward compatibility, we keep them to reassign.
413
+ // scss-docs-start utilities-colors
414
+ $utilities-colors: $theme-colors-rgb !default;
415
+ // scss-docs-end utilities-colors
416
+
417
+ // scss-docs-start utilities-text-colors
418
+ $utilities-text: map-merge(
419
+ $utilities-colors,
420
+ (
421
+ "black": to-rgb($black),
422
+ "white": to-rgb($white),
423
+ "body": to-rgb($body-color)
424
+ )
425
+ ) !default;
426
+ $utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text") !default;
427
+ // scss-docs-end utilities-text-colors
428
+
429
+ // scss-docs-start utilities-bg-colors
430
+ $utilities-bg: map-merge(
431
+ $utilities-colors,
432
+ (
433
+ "black": to-rgb($black),
434
+ "white": to-rgb($white),
435
+ "body": to-rgb($body-bg)
436
+ )
437
+ ) !default;
438
+ $utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg") !default;
439
+ // scss-docs-end utilities-bg-colors
283
440
 
284
441
  // Links
285
442
  //
@@ -397,6 +554,7 @@ $transition-base: all .2s ease-in-out !default;
397
554
  $transition-fade: opacity .15s linear !default;
398
555
  // scss-docs-start collapse-transition
399
556
  $transition-collapse: height .35s ease !default;
557
+ $transition-collapse-width: width .35s ease !default;
400
558
  // scss-docs-end collapse-transition
401
559
 
402
560
  // stylelint-disable function-disallowed-list
@@ -692,7 +850,7 @@ $input-padding-y-lg: $input-btn-padding-y-lg !default;
692
850
  $input-padding-x-lg: $input-btn-padding-x-lg !default;
693
851
  $input-font-size-lg: $input-btn-font-size-lg !default;
694
852
 
695
- $input-bg: $white !default;
853
+ $input-bg: $body-bg !default;
696
854
  $input-disabled-bg: $gray-200 !default;
697
855
  $input-disabled-border-color: null !default;
698
856
 
@@ -725,6 +883,8 @@ $input-height-sm: add($input-line-height * 1em, add($input
725
883
  $input-height-lg: add($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default;
726
884
 
727
885
  $input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
886
+
887
+ $form-color-width: 3rem !default;
728
888
  // scss-docs-end form-input-variables
729
889
 
730
890
  // scss-docs-start form-check-variables
@@ -764,7 +924,7 @@ $form-check-inline-margin-end: 1rem !default;
764
924
  // scss-docs-end form-check-variables
765
925
 
766
926
  // scss-docs-start form-switch-variables
767
- $form-switch-color: rgba(0, 0, 0, .25) !default;
927
+ $form-switch-color: rgba($black, .25) !default;
768
928
  $form-switch-width: 2em !default;
769
929
  $form-switch-padding-start: $form-switch-width + .5em !default;
770
930
  $form-switch-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color}'/></svg>") !default;
@@ -812,7 +972,7 @@ $form-select-feedback-icon-size: $input-height-inner-half $input-height-i
812
972
 
813
973
  $form-select-border-width: $input-border-width !default;
814
974
  $form-select-border-color: $input-border-color !default;
815
- $form-select-border-radius: $border-radius !default;
975
+ $form-select-border-radius: $input-border-radius !default;
816
976
  $form-select-box-shadow: $box-shadow-inset !default;
817
977
 
818
978
  $form-select-focus-border-color: $input-focus-border-color !default;
@@ -822,10 +982,12 @@ $form-select-focus-box-shadow: 0 0 0 $form-select-focus-width $input-btn-focu
822
982
  $form-select-padding-y-sm: $input-padding-y-sm !default;
823
983
  $form-select-padding-x-sm: $input-padding-x-sm !default;
824
984
  $form-select-font-size-sm: $input-font-size-sm !default;
985
+ $form-select-border-radius-sm: $input-border-radius-sm !default;
825
986
 
826
987
  $form-select-padding-y-lg: $input-padding-y-lg !default;
827
988
  $form-select-padding-x-lg: $input-padding-x-lg !default;
828
989
  $form-select-font-size-lg: $input-font-size-lg !default;
990
+ $form-select-border-radius-lg: $input-border-radius-lg !default;
829
991
 
830
992
  $form-select-transition: $input-transition !default;
831
993
  // scss-docs-end form-select-variables
@@ -906,9 +1068,10 @@ $form-validation-states: (
906
1068
  $zindex-dropdown: 1000 !default;
907
1069
  $zindex-sticky: 1020 !default;
908
1070
  $zindex-fixed: 1030 !default;
909
- $zindex-modal-backdrop: 1040 !default;
910
- $zindex-offcanvas: 1050 !default;
911
- $zindex-modal: 1060 !default;
1071
+ $zindex-offcanvas-backdrop: 1040 !default;
1072
+ $zindex-offcanvas: 1045 !default;
1073
+ $zindex-modal-backdrop: 1050 !default;
1074
+ $zindex-modal: 1055 !default;
912
1075
  $zindex-popover: 1070 !default;
913
1076
  $zindex-tooltip: 1080 !default;
914
1077
  // scss-docs-end zindex-stack
@@ -1006,7 +1169,7 @@ $dropdown-divider-margin-y: $spacer * .5 !default;
1006
1169
  $dropdown-box-shadow: $box-shadow !default;
1007
1170
 
1008
1171
  $dropdown-link-color: $gray-900 !default;
1009
- $dropdown-link-hover-color: shade-color($gray-900, 10%) !default;
1172
+ $dropdown-link-hover-color: shade-color($dropdown-link-color, 10%) !default;
1010
1173
  $dropdown-link-hover-bg: $gray-200 !default;
1011
1174
 
1012
1175
  $dropdown-link-active-color: $component-active-color !default;
@@ -1078,6 +1241,13 @@ $pagination-border-radius-lg: $border-radius-lg !default;
1078
1241
  // scss-docs-end pagination-variables
1079
1242
 
1080
1243
 
1244
+ // Placeholders
1245
+
1246
+ // scss-docs-start placeholders
1247
+ $placeholder-opacity-max: .5 !default;
1248
+ $placeholder-opacity-min: .2 !default;
1249
+ // scss-docs-end placeholders
1250
+
1081
1251
  // Cards
1082
1252
 
1083
1253
  // scss-docs-start card-variables
@@ -1085,8 +1255,9 @@ $card-spacer-y: $spacer !default;
1085
1255
  $card-spacer-x: $spacer !default;
1086
1256
  $card-title-spacer-y: $spacer * .5 !default;
1087
1257
  $card-border-width: $border-width !default;
1088
- $card-border-radius: $border-radius !default;
1089
1258
  $card-border-color: rgba($black, .125) !default;
1259
+ $card-border-radius: $border-radius !default;
1260
+ $card-box-shadow: null !default;
1090
1261
  $card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default;
1091
1262
  $card-cap-padding-y: $card-spacer-y * .5 !default;
1092
1263
  $card-cap-padding-x: $card-spacer-x !default;
@@ -1126,7 +1297,7 @@ $accordion-button-focus-border-color: $input-focus-border-color !default;
1126
1297
  $accordion-button-focus-box-shadow: $btn-focus-box-shadow !default;
1127
1298
 
1128
1299
  $accordion-icon-width: 1.25rem !default;
1129
- $accordion-icon-color: $accordion-color !default;
1300
+ $accordion-icon-color: $accordion-button-color !default;
1130
1301
  $accordion-icon-active-color: $accordion-button-active-color !default;
1131
1302
  $accordion-icon-transition: transform .2s ease-in-out !default;
1132
1303
  $accordion-icon-transform: rotate(-180deg) !default;
@@ -1203,14 +1374,14 @@ $toast-font-size: .875rem !default;
1203
1374
  $toast-color: null !default;
1204
1375
  $toast-background-color: rgba($white, .85) !default;
1205
1376
  $toast-border-width: 1px !default;
1206
- $toast-border-color: rgba(0, 0, 0, .1) !default;
1377
+ $toast-border-color: rgba($black, .1) !default;
1207
1378
  $toast-border-radius: $border-radius !default;
1208
1379
  $toast-box-shadow: $box-shadow !default;
1209
1380
  $toast-spacing: $container-padding-x !default;
1210
1381
 
1211
1382
  $toast-header-color: $gray-600 !default;
1212
1383
  $toast-header-background-color: rgba($white, .85) !default;
1213
- $toast-header-border-color: rgba(0, 0, 0, .05) !default;
1384
+ $toast-header-border-color: rgba($black, .05) !default;
1214
1385
  // scss-docs-end toast-variables
1215
1386
 
1216
1387
 
@@ -1452,6 +1623,8 @@ $offcanvas-title-line-height: $modal-title-line-height !default;
1452
1623
  $offcanvas-bg-color: $modal-content-bg !default;
1453
1624
  $offcanvas-color: $modal-content-color !default;
1454
1625
  $offcanvas-box-shadow: $modal-content-box-shadow-xs !default;
1626
+ $offcanvas-backdrop-bg: $modal-backdrop-bg !default;
1627
+ $offcanvas-backdrop-opacity: $modal-backdrop-opacity !default;
1455
1628
  // scss-docs-end offcanvas-variables
1456
1629
 
1457
1630
  // Code
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * Bootstrap Utilities v5.0.2 (https://getbootstrap.com/)
2
+ * Bootstrap Utilities v5.1.3 (https://getbootstrap.com/)
3
3
  * Copyright 2011-2021 The Bootstrap Authors
4
4
  * Copyright 2011-2021 Twitter, Inc.
5
5
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
@@ -199,7 +199,7 @@ textarea {
199
199
  // stylelint-enable selector-no-qualifying-type
200
200
 
201
201
  .form-control-color {
202
- max-width: 3rem;
202
+ width: $form-color-width;
203
203
  height: auto; // Override fixed browser height
204
204
  padding: $input-padding-y;
205
205
 
@@ -60,6 +60,7 @@
60
60
  padding-bottom: $form-select-padding-y-sm;
61
61
  padding-left: $form-select-padding-x-sm;
62
62
  @include font-size($form-select-font-size-sm);
63
+ @include border-radius($form-select-border-radius-sm);
63
64
  }
64
65
 
65
66
  .form-select-lg {
@@ -67,4 +68,5 @@
67
68
  padding-bottom: $form-select-padding-y-lg;
68
69
  padding-left: $form-select-padding-x-lg;
69
70
  @include font-size($form-select-font-size-lg);
71
+ @include border-radius($form-select-border-radius-lg);
70
72
  }
@@ -0,0 +1,15 @@
1
+ // scss-docs-start stacks
2
+ .hstack {
3
+ display: flex;
4
+ flex-direction: row;
5
+ align-items: center;
6
+ align-self: stretch;
7
+ }
8
+
9
+ .vstack {
10
+ display: flex;
11
+ flex: 1 1 auto;
12
+ flex-direction: column;
13
+ align-self: stretch;
14
+ }
15
+ // scss-docs-end stacks
@@ -0,0 +1,8 @@
1
+ .vr {
2
+ display: inline-block;
3
+ align-self: stretch;
4
+ width: 1px;
5
+ min-height: 1em;
6
+ background-color: currentColor;
7
+ opacity: $hr-opacity;
8
+ }