bootstrap 5.0.2 → 5.1.3

Sign up to get free protection for your applications and to get access to all the features.
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
+ }