bootstrap 5.2.3 → 5.3.0.alpha3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (83) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +1 -1
  3. data/assets/javascripts/bootstrap/alert.js +21 -32
  4. data/assets/javascripts/bootstrap/base-component.js +21 -38
  5. data/assets/javascripts/bootstrap/button.js +18 -22
  6. data/assets/javascripts/bootstrap/carousel.js +51 -135
  7. data/assets/javascripts/bootstrap/collapse.js +39 -102
  8. data/assets/javascripts/bootstrap/dom/data.js +8 -12
  9. data/assets/javascripts/bootstrap/dom/event-handler.js +18 -66
  10. data/assets/javascripts/bootstrap/dom/manipulator.js +4 -17
  11. data/assets/javascripts/bootstrap/dom/selector-engine.js +41 -24
  12. data/assets/javascripts/bootstrap/dropdown.js +73 -145
  13. data/assets/javascripts/bootstrap/modal.js +52 -133
  14. data/assets/javascripts/bootstrap/offcanvas.js +49 -102
  15. data/assets/javascripts/bootstrap/popover.js +22 -29
  16. data/assets/javascripts/bootstrap/scrollspy.js +51 -89
  17. data/assets/javascripts/bootstrap/tab.js +51 -109
  18. data/assets/javascripts/bootstrap/toast.js +30 -73
  19. data/assets/javascripts/bootstrap/tooltip.js +74 -177
  20. data/assets/javascripts/bootstrap/util/backdrop.js +27 -54
  21. data/assets/javascripts/bootstrap/util/component-functions.js +13 -19
  22. data/assets/javascripts/bootstrap/util/config.js +14 -27
  23. data/assets/javascripts/bootstrap/util/focustrap.js +19 -36
  24. data/assets/javascripts/bootstrap/util/index.js +42 -111
  25. data/assets/javascripts/bootstrap/util/sanitizer.js +13 -19
  26. data/assets/javascripts/bootstrap/util/scrollbar.js +23 -50
  27. data/assets/javascripts/bootstrap/util/swipe.js +26 -48
  28. data/assets/javascripts/bootstrap/util/template-factory.js +24 -52
  29. data/assets/javascripts/bootstrap-sprockets.js +1 -1
  30. data/assets/javascripts/bootstrap.js +626 -1406
  31. data/assets/javascripts/bootstrap.min.js +3 -3
  32. data/assets/stylesheets/_bootstrap-grid.scss +1 -3
  33. data/assets/stylesheets/_bootstrap-reboot.scss +1 -0
  34. data/assets/stylesheets/_bootstrap.scss +1 -0
  35. data/assets/stylesheets/bootstrap/_accordion.scss +9 -0
  36. data/assets/stylesheets/bootstrap/_alert.scss +8 -11
  37. data/assets/stylesheets/bootstrap/_button-group.scss +2 -2
  38. data/assets/stylesheets/bootstrap/_buttons.scss +3 -3
  39. data/assets/stylesheets/bootstrap/_card.scss +5 -0
  40. data/assets/stylesheets/bootstrap/_carousel.scss +20 -2
  41. data/assets/stylesheets/bootstrap/_close.scss +32 -9
  42. data/assets/stylesheets/bootstrap/_dropdown.scss +1 -0
  43. data/assets/stylesheets/bootstrap/_functions.scss +1 -1
  44. data/assets/stylesheets/bootstrap/_grid.scss +6 -0
  45. data/assets/stylesheets/bootstrap/_helpers.scss +2 -0
  46. data/assets/stylesheets/bootstrap/_list-group.scss +12 -7
  47. data/assets/stylesheets/bootstrap/_maps.scss +120 -0
  48. data/assets/stylesheets/bootstrap/_mixins.scss +1 -2
  49. data/assets/stylesheets/bootstrap/_nav.scss +40 -3
  50. data/assets/stylesheets/bootstrap/_navbar.scss +13 -3
  51. data/assets/stylesheets/bootstrap/_offcanvas.scss +4 -2
  52. data/assets/stylesheets/bootstrap/_pagination.scss +1 -1
  53. data/assets/stylesheets/bootstrap/_progress.scss +10 -1
  54. data/assets/stylesheets/bootstrap/_reboot.scss +3 -3
  55. data/assets/stylesheets/bootstrap/_root.scss +125 -10
  56. data/assets/stylesheets/bootstrap/_tables.scss +1 -1
  57. data/assets/stylesheets/bootstrap/_tooltip.scss +4 -5
  58. data/assets/stylesheets/bootstrap/_utilities.scss +172 -13
  59. data/assets/stylesheets/bootstrap/_variables-dark.scss +85 -0
  60. data/assets/stylesheets/bootstrap/_variables.scss +260 -151
  61. data/assets/stylesheets/bootstrap/bootstrap-utilities.scss +1 -0
  62. data/assets/stylesheets/bootstrap/forms/_floating-labels.scss +21 -3
  63. data/assets/stylesheets/bootstrap/forms/_form-check.scss +24 -11
  64. data/assets/stylesheets/bootstrap/forms/_form-control.scss +23 -3
  65. data/assets/stylesheets/bootstrap/forms/_form-select.scss +11 -2
  66. data/assets/stylesheets/bootstrap/forms/_input-group.scss +1 -1
  67. data/assets/stylesheets/bootstrap/helpers/_colored-links.scss +22 -2
  68. data/assets/stylesheets/bootstrap/helpers/_focus-ring.scss +5 -0
  69. data/assets/stylesheets/bootstrap/helpers/_icon-link.scss +25 -0
  70. data/assets/stylesheets/bootstrap/mixins/_alert.scss +4 -1
  71. data/assets/stylesheets/bootstrap/mixins/_banner.scss +2 -4
  72. data/assets/stylesheets/bootstrap/mixins/_caret.scss +30 -25
  73. data/assets/stylesheets/bootstrap/mixins/_color-mode.scss +21 -0
  74. data/assets/stylesheets/bootstrap/mixins/_forms.scss +8 -7
  75. data/assets/stylesheets/bootstrap/mixins/_list-group.scss +2 -0
  76. data/assets/stylesheets/bootstrap/mixins/_utilities.scss +1 -1
  77. data/assets/stylesheets/bootstrap/mixins/_visually-hidden.scss +5 -1
  78. data/assets/stylesheets/bootstrap/vendor/_rfs.scss +23 -29
  79. data/bootstrap.gemspec +1 -1
  80. data/lib/bootstrap/version.rb +2 -2
  81. data/tasks/updater/js.rb +1 -1
  82. data/tasks/updater/scss.rb +1 -1
  83. metadata +10 -6
@@ -4,6 +4,7 @@
4
4
  // Configuration
5
5
  @import "functions";
6
6
  @import "variables";
7
+ @import "variables-dark";
7
8
  @import "maps";
8
9
  @import "mixins";
9
10
  @import "utilities";
@@ -12,7 +12,7 @@
12
12
  position: absolute;
13
13
  top: 0;
14
14
  left: 0;
15
- width: 100%;
15
+ z-index: 2;
16
16
  height: 100%; // allow textareas
17
17
  padding: $form-floating-padding-y $form-floating-padding-x;
18
18
  overflow: hidden;
@@ -55,14 +55,24 @@
55
55
  > .form-control-plaintext,
56
56
  > .form-select {
57
57
  ~ label {
58
- opacity: $form-floating-label-opacity;
58
+ color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity});
59
59
  transform: $form-floating-label-transform;
60
+
61
+ &::after {
62
+ position: absolute;
63
+ inset: $form-floating-padding-y ($form-floating-padding-x * .5);
64
+ z-index: -1;
65
+ height: $form-floating-label-height;
66
+ content: "";
67
+ background-color: $input-bg;
68
+ @include border-radius($input-border-radius);
69
+ }
60
70
  }
61
71
  }
62
72
  // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
63
73
  > .form-control:-webkit-autofill {
64
74
  ~ label {
65
- opacity: $form-floating-label-opacity;
75
+ color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity});
66
76
  transform: $form-floating-label-transform;
67
77
  }
68
78
  }
@@ -72,4 +82,12 @@
72
82
  border-width: $input-border-width 0; // Required to properly position label text - as explained above
73
83
  }
74
84
  }
85
+
86
+ > :disabled ~ label {
87
+ color: $form-floating-label-disabled-color;
88
+
89
+ &::after {
90
+ background-color: $input-disabled-bg;
91
+ }
92
+ }
75
93
  }
@@ -27,11 +27,14 @@
27
27
  }
28
28
 
29
29
  .form-check-input {
30
+ --#{$prefix}form-check-bg: #{$form-check-input-bg};
31
+
30
32
  width: $form-check-input-width;
31
33
  height: $form-check-input-width;
32
34
  margin-top: ($line-height-base - $form-check-input-width) * .5; // line-height minus check height
33
35
  vertical-align: top;
34
- background-color: $form-check-input-bg;
36
+ background-color: var(--#{$prefix}form-check-bg);
37
+ background-image: var(--#{$prefix}form-check-bg-image);
35
38
  background-repeat: no-repeat;
36
39
  background-position: center;
37
40
  background-size: contain;
@@ -65,17 +68,17 @@
65
68
 
66
69
  &[type="checkbox"] {
67
70
  @if $enable-gradients {
68
- background-image: escape-svg($form-check-input-checked-bg-image), var(--#{$prefix}gradient);
71
+ --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)}, var(--#{$prefix}gradient);
69
72
  } @else {
70
- background-image: escape-svg($form-check-input-checked-bg-image);
73
+ --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)};
71
74
  }
72
75
  }
73
76
 
74
77
  &[type="radio"] {
75
78
  @if $enable-gradients {
76
- background-image: escape-svg($form-check-radio-checked-bg-image), var(--#{$prefix}gradient);
79
+ --#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)}, var(--#{$prefix}gradient);
77
80
  } @else {
78
- background-image: escape-svg($form-check-radio-checked-bg-image);
81
+ --#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)};
79
82
  }
80
83
  }
81
84
  }
@@ -85,9 +88,9 @@
85
88
  border-color: $form-check-input-indeterminate-border-color;
86
89
 
87
90
  @if $enable-gradients {
88
- background-image: escape-svg($form-check-input-indeterminate-bg-image), var(--#{$prefix}gradient);
91
+ --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image)}, var(--#{$prefix}gradient);
89
92
  } @else {
90
- background-image: escape-svg($form-check-input-indeterminate-bg-image);
93
+ --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image)};
91
94
  }
92
95
  }
93
96
 
@@ -121,24 +124,26 @@
121
124
  padding-left: $form-switch-padding-start;
122
125
 
123
126
  .form-check-input {
127
+ --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image)};
128
+
124
129
  width: $form-switch-width;
125
130
  margin-left: $form-switch-padding-start * -1;
126
- background-image: escape-svg($form-switch-bg-image);
131
+ background-image: var(--#{$prefix}form-switch-bg);
127
132
  background-position: left center;
128
133
  @include border-radius($form-switch-border-radius);
129
134
  @include transition($form-switch-transition);
130
135
 
131
136
  &:focus {
132
- background-image: escape-svg($form-switch-focus-bg-image);
137
+ --#{$prefix}form-switch-bg: #{escape-svg($form-switch-focus-bg-image)};
133
138
  }
134
139
 
135
140
  &:checked {
136
141
  background-position: $form-switch-checked-bg-position;
137
142
 
138
143
  @if $enable-gradients {
139
- background-image: escape-svg($form-switch-checked-bg-image), var(--#{$prefix}gradient);
144
+ --#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)}, var(--#{$prefix}gradient);
140
145
  } @else {
141
- background-image: escape-svg($form-switch-checked-bg-image);
146
+ --#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)};
142
147
  }
143
148
  }
144
149
  }
@@ -173,3 +178,11 @@
173
178
  }
174
179
  }
175
180
  }
181
+
182
+ @if $enable-dark-mode {
183
+ @include color-mode(dark) {
184
+ .form-switch .form-check-input:not(:checked):not(:focus) {
185
+ --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image-dark)};
186
+ }
187
+ }
188
+ }
@@ -44,12 +44,31 @@
44
44
  }
45
45
  }
46
46
 
47
- // Add some height to date inputs on iOS
48
- // https://github.com/twbs/bootstrap/issues/23307
49
- // TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved
50
47
  &::-webkit-date-and-time-value {
48
+ // On Android Chrome, form-control's "width: 100%" makes the input width too small
49
+ // Tested under Android 11 / Chrome 89, Android 12 / Chrome 100, Android 13 / Chrome 109
50
+ //
51
+ // On iOS Safari, form-control's "appearance: none" + "width: 100%" makes the input width too small
52
+ // Tested under iOS 16.2 / Safari 16.2
53
+ min-width: 85px; // Seems to be a good minimum safe width
54
+
55
+ // Add some height to date inputs on iOS
56
+ // https://github.com/twbs/bootstrap/issues/23307
57
+ // TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved
51
58
  // Multiply line-height by 1em if it has no unit
52
59
  height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
60
+
61
+ // Android Chrome type="date" is taller than the other inputs
62
+ // because of "margin: 1px 24px 1px 4px" inside the shadow DOM
63
+ // Tested under Android 11 / Chrome 89, Android 12 / Chrome 100, Android 13 / Chrome 109
64
+ margin: 0;
65
+ }
66
+
67
+ // Prevent excessive date input height in Webkit
68
+ // https://github.com/twbs/bootstrap/issues/34433
69
+ &::-webkit-datetime-edit {
70
+ display: block;
71
+ padding: 0;
53
72
  }
54
73
 
55
74
  // Placeholder
@@ -186,6 +205,7 @@ textarea {
186
205
  }
187
206
 
188
207
  &::-webkit-color-swatch {
208
+ border: 0 !important; // stylelint-disable-line declaration-no-important
189
209
  @include border-radius($input-border-radius);
190
210
  }
191
211
 
@@ -4,17 +4,18 @@
4
4
  // https://primer.github.io/.
5
5
 
6
6
  .form-select {
7
+ --#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator)};
8
+
7
9
  display: block;
8
10
  width: 100%;
9
11
  padding: $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x;
10
- -moz-padding-start: subtract($form-select-padding-x, 3px); // See https://github.com/twbs/bootstrap/issues/32636
11
12
  font-family: $form-select-font-family;
12
13
  @include font-size($form-select-font-size);
13
14
  font-weight: $form-select-font-weight;
14
15
  line-height: $form-select-line-height;
15
16
  color: $form-select-color;
16
17
  background-color: $form-select-bg;
17
- background-image: escape-svg($form-select-indicator);
18
+ background-image: var(--#{$prefix}form-select-bg-img), var(--#{$prefix}form-select-bg-icon, none);
18
19
  background-repeat: no-repeat;
19
20
  background-position: $form-select-bg-position;
20
21
  background-size: $form-select-bg-size;
@@ -69,3 +70,11 @@
69
70
  @include font-size($form-select-font-size-lg);
70
71
  @include border-radius($form-select-border-radius-lg);
71
72
  }
73
+
74
+ @if $enable-dark-mode {
75
+ @include color-mode(dark) {
76
+ .form-select {
77
+ --#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator-dark)};
78
+ }
79
+ }
80
+ }
@@ -121,7 +121,7 @@
121
121
  }
122
122
 
123
123
  > :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
124
- margin-left: -$input-border-width;
124
+ margin-left: calc(#{$input-border-width} * -1); // stylelint-disable-line function-disallowed-list
125
125
  @include border-start-radius(0);
126
126
  }
127
127
 
@@ -1,12 +1,32 @@
1
+ // stylelint-disable function-name-case
2
+
3
+ // All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
1
4
  @each $color, $value in $theme-colors {
2
5
  .link-#{$color} {
3
- color: $value !important; // stylelint-disable-line declaration-no-important
6
+ color: RGBA(var(--#{$prefix}#{$color}-rgb, var(--#{$prefix}link-opacity, 1)));
7
+ text-decoration-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-underline-opacity, 1));
4
8
 
5
9
  @if $link-shade-percentage != 0 {
6
10
  &:hover,
7
11
  &:focus {
8
- color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage)) !important; // stylelint-disable-line declaration-no-important
12
+ $hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
13
+ color: RGBA(#{to-rgb($hover-color)}, var(--#{$prefix}link-opacity, 1));
14
+ text-decoration-color: RGBA(to-rgb($hover-color), var(--#{$prefix}link-underline-opacity, 1));
9
15
  }
10
16
  }
11
17
  }
12
18
  }
19
+
20
+ // One-off special link helper as a bridge until v6
21
+ .link-body-emphasis {
22
+ color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, 1));
23
+ text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, 1));
24
+
25
+ @if $link-shade-percentage != 0 {
26
+ &:hover,
27
+ &:focus {
28
+ color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, .75));
29
+ text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, .75));
30
+ }
31
+ }
32
+ }
@@ -0,0 +1,5 @@
1
+ .focus-ring:focus {
2
+ outline: 0;
3
+ // By default, there is no `--bs-focus-ring-x`, `--bs-focus-ring-y`, or `--bs-focus-ring-blur`, but we provide CSS variables with fallbacks to initial `0` values
4
+ box-shadow: var(--#{$prefix}focus-ring-x, 0) var(--#{$prefix}focus-ring-y, 0) var(--#{$prefix}focus-ring-blur, 0) var(--#{$prefix}focus-ring-width) var(--#{$prefix}focus-ring-color);
5
+ }
@@ -0,0 +1,25 @@
1
+ .icon-link {
2
+ display: inline-flex;
3
+ gap: $icon-link-gap;
4
+ align-items: center;
5
+ text-decoration-color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, .5));
6
+ text-underline-offset: $icon-link-underline-offset;
7
+ backface-visibility: hidden;
8
+
9
+ > .bi {
10
+ flex-shrink: 0;
11
+ width: $icon-link-icon-size;
12
+ height: $icon-link-icon-size;
13
+ fill: currentcolor;
14
+ @include transition($icon-link-icon-transition);
15
+ }
16
+ }
17
+
18
+ .icon-link-hover {
19
+ &:hover,
20
+ &:focus-visible {
21
+ > .bi {
22
+ transform: var(--#{$prefix}icon-link-transform, $icon-link-icon-transform);
23
+ }
24
+ }
25
+ }
@@ -1,15 +1,18 @@
1
+ @include deprecate("`alert-variant()`", "v5.3.0", "v6.0.0");
2
+
1
3
  // scss-docs-start alert-variant-mixin
2
4
  @mixin alert-variant($background, $border, $color) {
3
5
  --#{$prefix}alert-color: #{$color};
4
6
  --#{$prefix}alert-bg: #{$background};
5
7
  --#{$prefix}alert-border-color: #{$border};
8
+ --#{$prefix}alert-link-color: #{shade-color($color, 20%)};
6
9
 
7
10
  @if $enable-gradients {
8
11
  background-image: var(--#{$prefix}gradient);
9
12
  }
10
13
 
11
14
  .alert-link {
12
- color: shade-color($color, 20%);
15
+ color: var(--#{$prefix}alert-link-color);
13
16
  }
14
17
  }
15
18
  // scss-docs-end alert-variant-mixin
@@ -1,9 +1,7 @@
1
1
  @mixin bsBanner($file) {
2
2
  /*!
3
- * Bootstrap #{$file} v5.2.3 (https://getbootstrap.com/)
4
- * Copyright 2011-2022 The Bootstrap Authors
5
- * Copyright 2011-2022 Twitter, Inc.
3
+ * Bootstrap #{$file} v5.3.0-alpha3 (https://getbootstrap.com/)
4
+ * Copyright 2011-2023 The Bootstrap Authors
6
5
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
7
6
  */
8
7
  }
9
-
@@ -1,44 +1,49 @@
1
1
  // scss-docs-start caret-mixins
2
- @mixin caret-down {
3
- border-top: $caret-width solid;
4
- border-right: $caret-width solid transparent;
2
+ @mixin caret-down($width: $caret-width) {
3
+ border-top: $width solid;
4
+ border-right: $width solid transparent;
5
5
  border-bottom: 0;
6
- border-left: $caret-width solid transparent;
6
+ border-left: $width solid transparent;
7
7
  }
8
8
 
9
- @mixin caret-up {
9
+ @mixin caret-up($width: $caret-width) {
10
10
  border-top: 0;
11
- border-right: $caret-width solid transparent;
12
- border-bottom: $caret-width solid;
13
- border-left: $caret-width solid transparent;
11
+ border-right: $width solid transparent;
12
+ border-bottom: $width solid;
13
+ border-left: $width solid transparent;
14
14
  }
15
15
 
16
- @mixin caret-end {
17
- border-top: $caret-width solid transparent;
16
+ @mixin caret-end($width: $caret-width) {
17
+ border-top: $width solid transparent;
18
18
  border-right: 0;
19
- border-bottom: $caret-width solid transparent;
20
- border-left: $caret-width solid;
19
+ border-bottom: $width solid transparent;
20
+ border-left: $width solid;
21
21
  }
22
22
 
23
- @mixin caret-start {
24
- border-top: $caret-width solid transparent;
25
- border-right: $caret-width solid;
26
- border-bottom: $caret-width solid transparent;
23
+ @mixin caret-start($width: $caret-width) {
24
+ border-top: $width solid transparent;
25
+ border-right: $width solid;
26
+ border-bottom: $width solid transparent;
27
27
  }
28
28
 
29
- @mixin caret($direction: down) {
29
+ @mixin caret(
30
+ $direction: down,
31
+ $width: $caret-width,
32
+ $spacing: $caret-spacing,
33
+ $vertical-align: $caret-vertical-align
34
+ ) {
30
35
  @if $enable-caret {
31
36
  &::after {
32
37
  display: inline-block;
33
- margin-left: $caret-spacing;
34
- vertical-align: $caret-vertical-align;
38
+ margin-left: $spacing;
39
+ vertical-align: $vertical-align;
35
40
  content: "";
36
41
  @if $direction == down {
37
- @include caret-down();
42
+ @include caret-down($width);
38
43
  } @else if $direction == up {
39
- @include caret-up();
44
+ @include caret-up($width);
40
45
  } @else if $direction == end {
41
- @include caret-end();
46
+ @include caret-end($width);
42
47
  }
43
48
  }
44
49
 
@@ -49,10 +54,10 @@
49
54
 
50
55
  &::before {
51
56
  display: inline-block;
52
- margin-right: $caret-spacing;
53
- vertical-align: $caret-vertical-align;
57
+ margin-right: $spacing;
58
+ vertical-align: $vertical-align;
54
59
  content: "";
55
- @include caret-start();
60
+ @include caret-start($width);
56
61
  }
57
62
  }
58
63
 
@@ -0,0 +1,21 @@
1
+ // scss-docs-start color-mode-mixin
2
+ @mixin color-mode($mode: light, $root: false) {
3
+ @if $color-mode-type == "media-query" {
4
+ @if $root == true {
5
+ @media (prefers-color-scheme: $mode) {
6
+ :root {
7
+ @content;
8
+ }
9
+ }
10
+ } @else {
11
+ @media (prefers-color-scheme: $mode) {
12
+ @content;
13
+ }
14
+ }
15
+ } @else {
16
+ [data-bs-theme="#{$mode}"] {
17
+ @content;
18
+ }
19
+ }
20
+ }
21
+ // scss-docs-end color-mode-mixin
@@ -21,7 +21,8 @@
21
21
  $icon,
22
22
  $tooltip-color: color-contrast($color),
23
23
  $tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),
24
- $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity)
24
+ $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity),
25
+ $border-color: $color
25
26
  ) {
26
27
  .#{$state}-feedback {
27
28
  display: none;
@@ -56,7 +57,7 @@
56
57
 
57
58
  .form-control {
58
59
  @include form-validation-state-selector($state) {
59
- border-color: $color;
60
+ border-color: $border-color;
60
61
 
61
62
  @if $enable-validation-icons {
62
63
  padding-right: $input-height-inner;
@@ -67,7 +68,7 @@
67
68
  }
68
69
 
69
70
  &:focus {
70
- border-color: $color;
71
+ border-color: $border-color;
71
72
  box-shadow: $focus-box-shadow;
72
73
  }
73
74
  }
@@ -85,20 +86,20 @@
85
86
 
86
87
  .form-select {
87
88
  @include form-validation-state-selector($state) {
88
- border-color: $color;
89
+ border-color: $border-color;
89
90
 
90
91
  @if $enable-validation-icons {
91
92
  &:not([multiple]):not([size]),
92
93
  &:not([multiple])[size="1"] {
94
+ --#{$prefix}form-select-bg-icon: #{escape-svg($icon)};
93
95
  padding-right: $form-select-feedback-icon-padding-end;
94
- background-image: escape-svg($form-select-indicator), escape-svg($icon);
95
96
  background-position: $form-select-bg-position, $form-select-feedback-icon-position;
96
97
  background-size: $form-select-bg-size, $form-select-feedback-icon-size;
97
98
  }
98
99
  }
99
100
 
100
101
  &:focus {
101
- border-color: $color;
102
+ border-color: $border-color;
102
103
  box-shadow: $focus-box-shadow;
103
104
  }
104
105
  }
@@ -114,7 +115,7 @@
114
115
 
115
116
  .form-check-input {
116
117
  @include form-validation-state-selector($state) {
117
- border-color: $color;
118
+ border-color: $border-color;
118
119
 
119
120
  &:checked {
120
121
  background-color: $color;
@@ -1,3 +1,5 @@
1
+ @include deprecate("`list-group-item-variant()`", "v5.3.0", "v6.0.0");
2
+
1
3
  // List Groups
2
4
 
3
5
  // scss-docs-start list-group-mixin
@@ -1,6 +1,6 @@
1
1
  // Utility generator
2
2
  // Used to generate utilities & print utilities
3
- @mixin generate-utility($utility, $infix, $is-rfs-media-query: false) {
3
+ @mixin generate-utility($utility, $infix: "", $is-rfs-media-query: false) {
4
4
  $values: map-get($utility, values);
5
5
 
6
6
  // If the values are a list or string, convert it into a map
@@ -6,7 +6,6 @@
6
6
  // See: https://kittygiraudel.com/2016/10/13/css-hide-and-seek/
7
7
 
8
8
  @mixin visually-hidden() {
9
- position: absolute !important;
10
9
  width: 1px !important;
11
10
  height: 1px !important;
12
11
  padding: 0 !important;
@@ -15,6 +14,11 @@
15
14
  clip: rect(0, 0, 0, 0) !important;
16
15
  white-space: nowrap !important;
17
16
  border: 0 !important;
17
+
18
+ // Fix for positioned table caption that could become anonymous cells
19
+ &:not(caption) {
20
+ position: absolute !important;
21
+ }
18
22
  }
19
23
 
20
24
  // Use to only display content when it's focused, or one of its child elements is focused