bootstrap 4.6.2.1 → 5.3.5

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 (186) hide show
  1. checksums.yaml +4 -4
  2. data/.github/workflows/ci.yml +61 -0
  3. data/CHANGELOG.md +7 -2
  4. data/Gemfile +1 -0
  5. data/README.md +33 -15
  6. data/Rakefile +1 -2
  7. data/assets/javascripts/bootstrap/alert.js +50 -147
  8. data/assets/javascripts/bootstrap/base-component.js +83 -0
  9. data/assets/javascripts/bootstrap/button.js +40 -190
  10. data/assets/javascripts/bootstrap/carousel.js +282 -537
  11. data/assets/javascripts/bootstrap/collapse.js +166 -314
  12. data/assets/javascripts/bootstrap/dom/data.js +62 -0
  13. data/assets/javascripts/bootstrap/dom/event-handler.js +236 -0
  14. data/assets/javascripts/bootstrap/dom/manipulator.js +71 -0
  15. data/assets/javascripts/bootstrap/dom/selector-engine.js +103 -0
  16. data/assets/javascripts/bootstrap/dropdown.js +297 -455
  17. data/assets/javascripts/bootstrap/modal.js +223 -566
  18. data/assets/javascripts/bootstrap/offcanvas.js +245 -0
  19. data/assets/javascripts/bootstrap/popover.js +59 -208
  20. data/assets/javascripts/bootstrap/scrollspy.js +213 -276
  21. data/assets/javascripts/bootstrap/tab.js +222 -200
  22. data/assets/javascripts/bootstrap/toast.js +137 -206
  23. data/assets/javascripts/bootstrap/tooltip.js +403 -747
  24. data/assets/javascripts/bootstrap/util/backdrop.js +138 -0
  25. data/assets/javascripts/bootstrap/util/component-functions.js +41 -0
  26. data/assets/javascripts/bootstrap/util/config.js +67 -0
  27. data/assets/javascripts/bootstrap/util/focustrap.js +112 -0
  28. data/assets/javascripts/bootstrap/util/index.js +280 -0
  29. data/assets/javascripts/bootstrap/util/sanitizer.js +113 -0
  30. data/assets/javascripts/bootstrap/util/scrollbar.js +112 -0
  31. data/assets/javascripts/bootstrap/util/swipe.js +134 -0
  32. data/assets/javascripts/bootstrap/util/template-factory.js +150 -0
  33. data/assets/javascripts/bootstrap-global-this-define.js +6 -0
  34. data/assets/javascripts/bootstrap-global-this-undefine.js +2 -0
  35. data/assets/javascripts/bootstrap-sprockets.js +21 -5
  36. data/assets/javascripts/bootstrap.js +3625 -3488
  37. data/assets/javascripts/bootstrap.min.js +3 -3
  38. data/assets/stylesheets/_bootstrap-grid.scss +53 -21
  39. data/assets/stylesheets/_bootstrap-reboot.scss +5 -7
  40. data/assets/stylesheets/_bootstrap-utilities.scss +19 -0
  41. data/assets/stylesheets/_bootstrap.scss +21 -13
  42. data/assets/stylesheets/bootstrap/_accordion.scss +153 -0
  43. data/assets/stylesheets/bootstrap/_alert.scss +32 -16
  44. data/assets/stylesheets/bootstrap/_badge.scss +15 -31
  45. data/assets/stylesheets/bootstrap/_breadcrumb.scss +22 -24
  46. data/assets/stylesheets/bootstrap/_button-group.scss +32 -48
  47. data/assets/stylesheets/bootstrap/_buttons.scss +145 -71
  48. data/assets/stylesheets/bootstrap/_card.scss +67 -115
  49. data/assets/stylesheets/bootstrap/_carousel.scss +63 -37
  50. data/assets/stylesheets/bootstrap/_close.scss +53 -27
  51. data/assets/stylesheets/bootstrap/_containers.scss +41 -0
  52. data/assets/stylesheets/bootstrap/_dropdown.scss +129 -71
  53. data/assets/stylesheets/bootstrap/_forms.scss +9 -347
  54. data/assets/stylesheets/bootstrap/_functions.scss +135 -23
  55. data/assets/stylesheets/bootstrap/_grid.scss +18 -52
  56. data/assets/stylesheets/bootstrap/_helpers.scss +12 -0
  57. data/assets/stylesheets/bootstrap/_list-group.scss +93 -48
  58. data/assets/stylesheets/bootstrap/_maps.scss +174 -0
  59. data/assets/stylesheets/bootstrap/_mixins.scss +10 -15
  60. data/assets/stylesheets/bootstrap/_modal.scss +112 -112
  61. data/assets/stylesheets/bootstrap/_nav.scss +100 -28
  62. data/assets/stylesheets/bootstrap/_navbar.scss +130 -173
  63. data/assets/stylesheets/bootstrap/_offcanvas.scss +147 -0
  64. data/assets/stylesheets/bootstrap/_pagination.scss +72 -37
  65. data/assets/stylesheets/bootstrap/_placeholders.scss +51 -0
  66. data/assets/stylesheets/bootstrap/_popover.scss +99 -73
  67. data/assets/stylesheets/bootstrap/_progress.scss +35 -14
  68. data/assets/stylesheets/bootstrap/_reboot.scss +319 -192
  69. data/assets/stylesheets/bootstrap/_root.scss +177 -9
  70. data/assets/stylesheets/bootstrap/_spinners.scss +43 -23
  71. data/assets/stylesheets/bootstrap/_tables.scss +101 -115
  72. data/assets/stylesheets/bootstrap/_toasts.scss +54 -27
  73. data/assets/stylesheets/bootstrap/_tooltip.scss +67 -63
  74. data/assets/stylesheets/bootstrap/_transitions.scss +3 -2
  75. data/assets/stylesheets/bootstrap/_type.scss +40 -59
  76. data/assets/stylesheets/bootstrap/_utilities.scss +806 -18
  77. data/assets/stylesheets/bootstrap/_variables-dark.scss +102 -0
  78. data/assets/stylesheets/bootstrap/_variables.scss +1210 -606
  79. data/assets/stylesheets/bootstrap/forms/_floating-labels.scss +97 -0
  80. data/assets/stylesheets/bootstrap/forms/_form-check.scss +189 -0
  81. data/assets/stylesheets/bootstrap/forms/_form-control.scss +214 -0
  82. data/assets/stylesheets/bootstrap/forms/_form-range.scss +91 -0
  83. data/assets/stylesheets/bootstrap/forms/_form-select.scss +80 -0
  84. data/assets/stylesheets/bootstrap/forms/_form-text.scss +11 -0
  85. data/assets/stylesheets/bootstrap/forms/_input-group.scss +132 -0
  86. data/assets/stylesheets/bootstrap/forms/_labels.scss +36 -0
  87. data/assets/stylesheets/bootstrap/forms/_validation.scss +12 -0
  88. data/assets/stylesheets/bootstrap/helpers/_color-bg.scss +7 -0
  89. data/assets/stylesheets/bootstrap/helpers/_colored-links.scss +30 -0
  90. data/assets/stylesheets/bootstrap/helpers/_focus-ring.scss +5 -0
  91. data/assets/stylesheets/bootstrap/helpers/_icon-link.scss +25 -0
  92. data/assets/stylesheets/bootstrap/helpers/_position.scss +36 -0
  93. data/assets/stylesheets/bootstrap/helpers/_ratio.scss +26 -0
  94. data/assets/stylesheets/bootstrap/helpers/_stacks.scss +15 -0
  95. data/assets/stylesheets/bootstrap/helpers/_stretched-link.scss +15 -0
  96. data/assets/stylesheets/bootstrap/helpers/_text-truncation.scss +7 -0
  97. data/assets/stylesheets/bootstrap/helpers/_visually-hidden.scss +8 -0
  98. data/assets/stylesheets/bootstrap/helpers/_vr.scss +8 -0
  99. data/assets/stylesheets/bootstrap/mixins/_alert.scss +11 -6
  100. data/assets/stylesheets/bootstrap/mixins/_backdrop.scss +14 -0
  101. data/assets/stylesheets/bootstrap/mixins/_banner.scss +7 -0
  102. data/assets/stylesheets/bootstrap/mixins/_border-radius.scss +10 -8
  103. data/assets/stylesheets/bootstrap/mixins/_box-shadow.scss +7 -9
  104. data/assets/stylesheets/bootstrap/mixins/_breakpoints.scss +20 -16
  105. data/assets/stylesheets/bootstrap/mixins/_buttons.scss +60 -100
  106. data/assets/stylesheets/bootstrap/mixins/_caret.scss +34 -27
  107. data/assets/stylesheets/bootstrap/mixins/_clearfix.scss +2 -0
  108. data/assets/stylesheets/bootstrap/mixins/_color-mode.scss +21 -0
  109. data/assets/stylesheets/bootstrap/mixins/_color-scheme.scss +7 -0
  110. data/assets/stylesheets/bootstrap/mixins/_container.scss +11 -0
  111. data/assets/stylesheets/bootstrap/mixins/_forms.scss +64 -96
  112. data/assets/stylesheets/bootstrap/mixins/_gradients.scss +13 -11
  113. data/assets/stylesheets/bootstrap/mixins/_grid.scss +118 -36
  114. data/assets/stylesheets/bootstrap/mixins/_image.scss +1 -21
  115. data/assets/stylesheets/bootstrap/mixins/_list-group.scss +7 -2
  116. data/assets/stylesheets/bootstrap/mixins/_lists.scss +1 -1
  117. data/assets/stylesheets/bootstrap/mixins/_pagination.scss +7 -19
  118. data/assets/stylesheets/bootstrap/mixins/_reset-text.scss +2 -2
  119. data/assets/stylesheets/bootstrap/mixins/_table-variants.scss +24 -0
  120. data/assets/stylesheets/bootstrap/mixins/_transition.scss +1 -1
  121. data/assets/stylesheets/bootstrap/mixins/_utilities.scss +97 -0
  122. data/assets/stylesheets/bootstrap/mixins/_visually-hidden.scss +33 -0
  123. data/assets/stylesheets/bootstrap/utilities/_api.scss +47 -0
  124. data/assets/stylesheets/bootstrap/vendor/_rfs.scss +211 -91
  125. data/bootstrap.gemspec +6 -6
  126. data/lib/bootstrap/engine.rb +0 -1
  127. data/lib/bootstrap/version.rb +2 -2
  128. data/tasks/updater/js.rb +17 -5
  129. data/tasks/updater/network.rb +2 -2
  130. data/tasks/updater/scss.rb +2 -2
  131. data/tasks/updater.rb +2 -2
  132. data/test/dummy_rails/app/assets/javascripts/application.js +4 -3
  133. data/test/dummy_rails/app/views/layouts/application.html.erb +3 -1
  134. data/test/dummy_rails/app/views/pages/root.html +89 -0
  135. data/test/dummy_rails/config/application.rb +0 -5
  136. data/test/dummy_rails/public/favicon.ico +0 -0
  137. data/test/gemfiles/rails_4_2.gemfile +2 -1
  138. data/test/gemfiles/rails_5_0.gemfile +1 -2
  139. data/test/gemfiles/rails_5_1.gemfile +1 -2
  140. data/test/gemfiles/rails_5_2.gemfile +7 -0
  141. data/test/gemfiles/rails_6_0.gemfile +1 -1
  142. data/test/gemfiles/rails_6_1.gemfile +7 -0
  143. data/test/gemfiles/rails_7_0_dartsass.gemfile +0 -1
  144. data/test/gemfiles/rails_7_0_sassc.gemfile +0 -1
  145. data/test/rails_test.rb +0 -5
  146. data/test/test_helper.rb +3 -2
  147. metadata +92 -86
  148. data/.travis.yml +0 -31
  149. data/assets/javascripts/bootstrap/util.js +0 -189
  150. data/assets/stylesheets/bootstrap/_code.scss +0 -48
  151. data/assets/stylesheets/bootstrap/_custom-forms.scss +0 -526
  152. data/assets/stylesheets/bootstrap/_input-group.scss +0 -211
  153. data/assets/stylesheets/bootstrap/_jumbotron.scss +0 -17
  154. data/assets/stylesheets/bootstrap/_media.scss +0 -8
  155. data/assets/stylesheets/bootstrap/_print.scss +0 -132
  156. data/assets/stylesheets/bootstrap/mixins/_background-variant.scss +0 -23
  157. data/assets/stylesheets/bootstrap/mixins/_badge.scss +0 -17
  158. data/assets/stylesheets/bootstrap/mixins/_float.scss +0 -14
  159. data/assets/stylesheets/bootstrap/mixins/_grid-framework.scss +0 -80
  160. data/assets/stylesheets/bootstrap/mixins/_hover.scss +0 -37
  161. data/assets/stylesheets/bootstrap/mixins/_nav-divider.scss +0 -11
  162. data/assets/stylesheets/bootstrap/mixins/_screen-reader.scss +0 -34
  163. data/assets/stylesheets/bootstrap/mixins/_size.scss +0 -7
  164. data/assets/stylesheets/bootstrap/mixins/_table-row.scss +0 -39
  165. data/assets/stylesheets/bootstrap/mixins/_text-emphasis.scss +0 -17
  166. data/assets/stylesheets/bootstrap/mixins/_text-hide.scss +0 -11
  167. data/assets/stylesheets/bootstrap/mixins/_visibility.scss +0 -8
  168. data/assets/stylesheets/bootstrap/utilities/_align.scss +0 -8
  169. data/assets/stylesheets/bootstrap/utilities/_background.scss +0 -19
  170. data/assets/stylesheets/bootstrap/utilities/_borders.scss +0 -75
  171. data/assets/stylesheets/bootstrap/utilities/_display.scss +0 -26
  172. data/assets/stylesheets/bootstrap/utilities/_embed.scss +0 -39
  173. data/assets/stylesheets/bootstrap/utilities/_flex.scss +0 -51
  174. data/assets/stylesheets/bootstrap/utilities/_float.scss +0 -11
  175. data/assets/stylesheets/bootstrap/utilities/_interactions.scss +0 -5
  176. data/assets/stylesheets/bootstrap/utilities/_overflow.scss +0 -5
  177. data/assets/stylesheets/bootstrap/utilities/_position.scss +0 -32
  178. data/assets/stylesheets/bootstrap/utilities/_screenreaders.scss +0 -11
  179. data/assets/stylesheets/bootstrap/utilities/_shadows.scss +0 -6
  180. data/assets/stylesheets/bootstrap/utilities/_sizing.scss +0 -20
  181. data/assets/stylesheets/bootstrap/utilities/_spacing.scss +0 -73
  182. data/assets/stylesheets/bootstrap/utilities/_stretched-link.scss +0 -19
  183. data/assets/stylesheets/bootstrap/utilities/_text.scss +0 -72
  184. data/assets/stylesheets/bootstrap/utilities/_visibility.scss +0 -13
  185. data/test/dummy_rails/app/views/pages/root.html.slim +0 -58
  186. /data/assets/stylesheets/bootstrap/{utilities → helpers}/_clearfix.scss +0 -0
@@ -0,0 +1,132 @@
1
+ //
2
+ // Base styles
3
+ //
4
+
5
+ .input-group {
6
+ position: relative;
7
+ display: flex;
8
+ flex-wrap: wrap; // For form validation feedback
9
+ align-items: stretch;
10
+ width: 100%;
11
+
12
+ > .form-control,
13
+ > .form-select,
14
+ > .form-floating {
15
+ position: relative; // For focus state's z-index
16
+ flex: 1 1 auto;
17
+ width: 1%;
18
+ min-width: 0; // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size
19
+ }
20
+
21
+ // Bring the "active" form control to the top of surrounding elements
22
+ > .form-control:focus,
23
+ > .form-select:focus,
24
+ > .form-floating:focus-within {
25
+ z-index: 5;
26
+ }
27
+
28
+ // Ensure buttons are always above inputs for more visually pleasing borders.
29
+ // This isn't needed for `.input-group-text` since it shares the same border-color
30
+ // as our inputs.
31
+ .btn {
32
+ position: relative;
33
+ z-index: 2;
34
+
35
+ &:focus {
36
+ z-index: 5;
37
+ }
38
+ }
39
+ }
40
+
41
+
42
+ // Textual addons
43
+ //
44
+ // Serves as a catch-all element for any text or radio/checkbox input you wish
45
+ // to prepend or append to an input.
46
+
47
+ .input-group-text {
48
+ display: flex;
49
+ align-items: center;
50
+ padding: $input-group-addon-padding-y $input-group-addon-padding-x;
51
+ @include font-size($input-font-size); // Match inputs
52
+ font-weight: $input-group-addon-font-weight;
53
+ line-height: $input-line-height;
54
+ color: $input-group-addon-color;
55
+ text-align: center;
56
+ white-space: nowrap;
57
+ background-color: $input-group-addon-bg;
58
+ border: $input-border-width solid $input-group-addon-border-color;
59
+ @include border-radius($input-border-radius);
60
+ }
61
+
62
+
63
+ // Sizing
64
+ //
65
+ // Remix the default form control sizing classes into new ones for easier
66
+ // manipulation.
67
+
68
+ .input-group-lg > .form-control,
69
+ .input-group-lg > .form-select,
70
+ .input-group-lg > .input-group-text,
71
+ .input-group-lg > .btn {
72
+ padding: $input-padding-y-lg $input-padding-x-lg;
73
+ @include font-size($input-font-size-lg);
74
+ @include border-radius($input-border-radius-lg);
75
+ }
76
+
77
+ .input-group-sm > .form-control,
78
+ .input-group-sm > .form-select,
79
+ .input-group-sm > .input-group-text,
80
+ .input-group-sm > .btn {
81
+ padding: $input-padding-y-sm $input-padding-x-sm;
82
+ @include font-size($input-font-size-sm);
83
+ @include border-radius($input-border-radius-sm);
84
+ }
85
+
86
+ .input-group-lg > .form-select,
87
+ .input-group-sm > .form-select {
88
+ padding-right: $form-select-padding-x + $form-select-indicator-padding;
89
+ }
90
+
91
+
92
+ // Rounded corners
93
+ //
94
+ // These rulesets must come after the sizing ones to properly override sm and lg
95
+ // border-radius values when extending. They're more specific than we'd like
96
+ // with the `.input-group >` part, but without it, we cannot override the sizing.
97
+
98
+ // stylelint-disable-next-line no-duplicate-selectors
99
+ .input-group {
100
+ &:not(.has-validation) {
101
+ > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
102
+ > .dropdown-toggle:nth-last-child(n + 3),
103
+ > .form-floating:not(:last-child) > .form-control,
104
+ > .form-floating:not(:last-child) > .form-select {
105
+ @include border-end-radius(0);
106
+ }
107
+ }
108
+
109
+ &.has-validation {
110
+ > :nth-last-child(n + 3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
111
+ > .dropdown-toggle:nth-last-child(n + 4),
112
+ > .form-floating:nth-last-child(n + 3) > .form-control,
113
+ > .form-floating:nth-last-child(n + 3) > .form-select {
114
+ @include border-end-radius(0);
115
+ }
116
+ }
117
+
118
+ $validation-messages: "";
119
+ @each $state in map-keys($form-validation-states) {
120
+ $validation-messages: $validation-messages + ":not(." + unquote($state) + "-tooltip)" + ":not(." + unquote($state) + "-feedback)";
121
+ }
122
+
123
+ > :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
124
+ margin-left: calc(-1 * #{$input-border-width}); // stylelint-disable-line function-disallowed-list
125
+ @include border-start-radius(0);
126
+ }
127
+
128
+ > .form-floating:not(:first-child) > .form-control,
129
+ > .form-floating:not(:first-child) > .form-select {
130
+ @include border-start-radius(0);
131
+ }
132
+ }
@@ -0,0 +1,36 @@
1
+ //
2
+ // Labels
3
+ //
4
+
5
+ .form-label {
6
+ margin-bottom: $form-label-margin-bottom;
7
+ @include font-size($form-label-font-size);
8
+ font-style: $form-label-font-style;
9
+ font-weight: $form-label-font-weight;
10
+ color: $form-label-color;
11
+ }
12
+
13
+ // For use with horizontal and inline forms, when you need the label (or legend)
14
+ // text to align with the form controls.
15
+ .col-form-label {
16
+ padding-top: add($input-padding-y, $input-border-width);
17
+ padding-bottom: add($input-padding-y, $input-border-width);
18
+ margin-bottom: 0; // Override the `<legend>` default
19
+ @include font-size(inherit); // Override the `<legend>` default
20
+ font-style: $form-label-font-style;
21
+ font-weight: $form-label-font-weight;
22
+ line-height: $input-line-height;
23
+ color: $form-label-color;
24
+ }
25
+
26
+ .col-form-label-lg {
27
+ padding-top: add($input-padding-y-lg, $input-border-width);
28
+ padding-bottom: add($input-padding-y-lg, $input-border-width);
29
+ @include font-size($input-font-size-lg);
30
+ }
31
+
32
+ .col-form-label-sm {
33
+ padding-top: add($input-padding-y-sm, $input-border-width);
34
+ padding-bottom: add($input-padding-y-sm, $input-border-width);
35
+ @include font-size($input-font-size-sm);
36
+ }
@@ -0,0 +1,12 @@
1
+ // Form validation
2
+ //
3
+ // Provide feedback to users when form field values are valid or invalid. Works
4
+ // primarily for client-side validation via scoped `:invalid` and `:valid`
5
+ // pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
6
+ // server-side validation.
7
+
8
+ // scss-docs-start form-validation-states-loop
9
+ @each $state, $data in $form-validation-states {
10
+ @include form-validation-state($state, $data...);
11
+ }
12
+ // scss-docs-end form-validation-states-loop
@@ -0,0 +1,7 @@
1
+ // All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
2
+ @each $color, $value in $theme-colors {
3
+ .text-bg-#{$color} {
4
+ color: color-contrast($value) if($enable-important-utilities, !important, null);
5
+ background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
6
+ }
7
+ }
@@ -0,0 +1,30 @@
1
+ // All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
2
+ @each $color, $value in $theme-colors {
3
+ .link-#{$color} {
4
+ color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
5
+ text-decoration-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
6
+
7
+ @if $link-shade-percentage != 0 {
8
+ &:hover,
9
+ &:focus {
10
+ $hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
11
+ color: RGBA(#{to-rgb($hover-color)}, var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
12
+ text-decoration-color: RGBA(to-rgb($hover-color), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
13
+ }
14
+ }
15
+ }
16
+ }
17
+
18
+ // One-off special link helper as a bridge until v6
19
+ .link-body-emphasis {
20
+ color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
21
+ text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
22
+
23
+ @if $link-shade-percentage != 0 {
24
+ &:hover,
25
+ &:focus {
26
+ color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, .75)) if($enable-important-utilities, !important, null);
27
+ text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, .75)) if($enable-important-utilities, !important, null);
28
+ }
29
+ }
30
+ }
@@ -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
+ }
@@ -0,0 +1,36 @@
1
+ // Shorthand
2
+
3
+ .fixed-top {
4
+ position: fixed;
5
+ top: 0;
6
+ right: 0;
7
+ left: 0;
8
+ z-index: $zindex-fixed;
9
+ }
10
+
11
+ .fixed-bottom {
12
+ position: fixed;
13
+ right: 0;
14
+ bottom: 0;
15
+ left: 0;
16
+ z-index: $zindex-fixed;
17
+ }
18
+
19
+ // Responsive sticky top and bottom
20
+ @each $breakpoint in map-keys($grid-breakpoints) {
21
+ @include media-breakpoint-up($breakpoint) {
22
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
23
+
24
+ .sticky#{$infix}-top {
25
+ position: sticky;
26
+ top: 0;
27
+ z-index: $zindex-sticky;
28
+ }
29
+
30
+ .sticky#{$infix}-bottom {
31
+ position: sticky;
32
+ bottom: 0;
33
+ z-index: $zindex-sticky;
34
+ }
35
+ }
36
+ }
@@ -0,0 +1,26 @@
1
+ // Credit: Nicolas Gallagher and SUIT CSS.
2
+
3
+ .ratio {
4
+ position: relative;
5
+ width: 100%;
6
+
7
+ &::before {
8
+ display: block;
9
+ padding-top: var(--#{$prefix}aspect-ratio);
10
+ content: "";
11
+ }
12
+
13
+ > * {
14
+ position: absolute;
15
+ top: 0;
16
+ left: 0;
17
+ width: 100%;
18
+ height: 100%;
19
+ }
20
+ }
21
+
22
+ @each $key, $ratio in $aspect-ratios {
23
+ .ratio-#{$key} {
24
+ --#{$prefix}aspect-ratio: #{$ratio};
25
+ }
26
+ }
@@ -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,15 @@
1
+ //
2
+ // Stretched link
3
+ //
4
+
5
+ .stretched-link {
6
+ &::#{$stretched-link-pseudo-element} {
7
+ position: absolute;
8
+ top: 0;
9
+ right: 0;
10
+ bottom: 0;
11
+ left: 0;
12
+ z-index: $stretched-link-z-index;
13
+ content: "";
14
+ }
15
+ }
@@ -0,0 +1,7 @@
1
+ //
2
+ // Text truncation
3
+ //
4
+
5
+ .text-truncate {
6
+ @include text-truncate();
7
+ }
@@ -0,0 +1,8 @@
1
+ //
2
+ // Visually hidden
3
+ //
4
+
5
+ .visually-hidden,
6
+ .visually-hidden-focusable:not(:focus):not(:focus-within) {
7
+ @include visually-hidden();
8
+ }
@@ -0,0 +1,8 @@
1
+ .vr {
2
+ display: inline-block;
3
+ align-self: stretch;
4
+ width: $vr-border-width;
5
+ min-height: 1em;
6
+ background-color: currentcolor;
7
+ opacity: $hr-opacity;
8
+ }
@@ -1,13 +1,18 @@
1
+ @include deprecate("`alert-variant()`", "v5.3.0", "v6.0.0");
2
+
3
+ // scss-docs-start alert-variant-mixin
1
4
  @mixin alert-variant($background, $border, $color) {
2
- color: $color;
3
- @include gradient-bg($background);
4
- border-color: $border;
5
+ --#{$prefix}alert-color: #{$color};
6
+ --#{$prefix}alert-bg: #{$background};
7
+ --#{$prefix}alert-border-color: #{$border};
8
+ --#{$prefix}alert-link-color: #{shade-color($color, 20%)};
5
9
 
6
- hr {
7
- border-top-color: darken($border, 5%);
10
+ @if $enable-gradients {
11
+ background-image: var(--#{$prefix}gradient);
8
12
  }
9
13
 
10
14
  .alert-link {
11
- color: darken($color, 10%);
15
+ color: var(--#{$prefix}alert-link-color);
12
16
  }
13
17
  }
18
+ // scss-docs-end alert-variant-mixin
@@ -0,0 +1,14 @@
1
+ // Shared between modals and offcanvases
2
+ @mixin overlay-backdrop($zindex, $backdrop-bg, $backdrop-opacity) {
3
+ position: fixed;
4
+ top: 0;
5
+ left: 0;
6
+ z-index: $zindex;
7
+ width: 100vw;
8
+ height: 100vh;
9
+ background-color: $backdrop-bg;
10
+
11
+ // Fade for backdrop
12
+ &.fade { opacity: 0; }
13
+ &.show { opacity: $backdrop-opacity; }
14
+ }
@@ -0,0 +1,7 @@
1
+ @mixin bsBanner($file) {
2
+ /*!
3
+ * Bootstrap #{$file} v5.3.5 (https://getbootstrap.com/)
4
+ * Copyright 2011-2025 The Bootstrap Authors
5
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
6
+ */
7
+ }
@@ -14,6 +14,7 @@
14
14
  @return $return;
15
15
  }
16
16
 
17
+ // scss-docs-start border-radius-mixins
17
18
  @mixin border-radius($radius: $border-radius, $fallback-border-radius: false) {
18
19
  @if $enable-rounded {
19
20
  border-radius: valid-radius($radius);
@@ -23,54 +24,55 @@
23
24
  }
24
25
  }
25
26
 
26
- @mixin border-top-radius($radius) {
27
+ @mixin border-top-radius($radius: $border-radius) {
27
28
  @if $enable-rounded {
28
29
  border-top-left-radius: valid-radius($radius);
29
30
  border-top-right-radius: valid-radius($radius);
30
31
  }
31
32
  }
32
33
 
33
- @mixin border-right-radius($radius) {
34
+ @mixin border-end-radius($radius: $border-radius) {
34
35
  @if $enable-rounded {
35
36
  border-top-right-radius: valid-radius($radius);
36
37
  border-bottom-right-radius: valid-radius($radius);
37
38
  }
38
39
  }
39
40
 
40
- @mixin border-bottom-radius($radius) {
41
+ @mixin border-bottom-radius($radius: $border-radius) {
41
42
  @if $enable-rounded {
42
43
  border-bottom-right-radius: valid-radius($radius);
43
44
  border-bottom-left-radius: valid-radius($radius);
44
45
  }
45
46
  }
46
47
 
47
- @mixin border-left-radius($radius) {
48
+ @mixin border-start-radius($radius: $border-radius) {
48
49
  @if $enable-rounded {
49
50
  border-top-left-radius: valid-radius($radius);
50
51
  border-bottom-left-radius: valid-radius($radius);
51
52
  }
52
53
  }
53
54
 
54
- @mixin border-top-left-radius($radius) {
55
+ @mixin border-top-start-radius($radius: $border-radius) {
55
56
  @if $enable-rounded {
56
57
  border-top-left-radius: valid-radius($radius);
57
58
  }
58
59
  }
59
60
 
60
- @mixin border-top-right-radius($radius) {
61
+ @mixin border-top-end-radius($radius: $border-radius) {
61
62
  @if $enable-rounded {
62
63
  border-top-right-radius: valid-radius($radius);
63
64
  }
64
65
  }
65
66
 
66
- @mixin border-bottom-right-radius($radius) {
67
+ @mixin border-bottom-end-radius($radius: $border-radius) {
67
68
  @if $enable-rounded {
68
69
  border-bottom-right-radius: valid-radius($radius);
69
70
  }
70
71
  }
71
72
 
72
- @mixin border-bottom-left-radius($radius) {
73
+ @mixin border-bottom-start-radius($radius: $border-radius) {
73
74
  @if $enable-rounded {
74
75
  border-bottom-left-radius: valid-radius($radius);
75
76
  }
76
77
  }
78
+ // scss-docs-end border-radius-mixins
@@ -2,17 +2,15 @@
2
2
  @if $enable-shadows {
3
3
  $result: ();
4
4
 
5
- @if (length($shadow) == 1) {
6
- // We can pass `@include box-shadow(none);`
7
- $result: $shadow;
8
- } @else {
9
- // Filter to avoid invalid properties for example `box-shadow: none, 1px 1px black;`
10
- @for $i from 1 through length($shadow) {
11
- @if nth($shadow, $i) != "none" {
12
- $result: append($result, nth($shadow, $i), "comma");
13
- }
5
+ @each $value in $shadow {
6
+ @if $value != null {
7
+ $result: append($result, $value, "comma");
8
+ }
9
+ @if $value == none and length($shadow) > 1 {
10
+ @warn "The keyword 'none' must be used as a single argument.";
14
11
  }
15
12
  }
13
+
16
14
  @if (length($result) > 0) {
17
15
  box-shadow: $result;
18
16
  }
@@ -2,7 +2,7 @@
2
2
  //
3
3
  // Breakpoints are defined as a map of (name: minimum width), order from small to large:
4
4
  //
5
- // (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)
5
+ // (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px)
6
6
  //
7
7
  // The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
8
8
 
@@ -10,44 +10,47 @@
10
10
  //
11
11
  // >> breakpoint-next(sm)
12
12
  // md
13
- // >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
13
+ // >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
14
14
  // md
15
- // >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
15
+ // >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl xxl))
16
16
  // md
17
17
  @function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
18
18
  $n: index($breakpoint-names, $name);
19
- @return if($n != null and $n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
19
+ @if not $n {
20
+ @error "breakpoint `#{$name}` not found in `#{$breakpoints}`";
21
+ }
22
+ @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
20
23
  }
21
24
 
22
25
  // Minimum breakpoint width. Null for the smallest (first) breakpoint.
23
26
  //
24
- // >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
27
+ // >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
25
28
  // 576px
26
29
  @function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
27
30
  $min: map-get($breakpoints, $name);
28
31
  @return if($min != 0, $min, null);
29
32
  }
30
33
 
31
- // Maximum breakpoint width. Null for the largest (last) breakpoint.
32
- // The maximum value is calculated as the minimum of the next one less 0.02px
33
- // to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.
34
+ // Maximum breakpoint width.
35
+ // The maximum value is reduced by 0.02px to work around the limitations of
36
+ // `min-` and `max-` prefixes and viewports with fractional widths.
34
37
  // See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
35
38
  // Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
36
39
  // See https://bugs.webkit.org/show_bug.cgi?id=178261
37
40
  //
38
- // >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
41
+ // >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
39
42
  // 767.98px
40
43
  @function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
41
- $next: breakpoint-next($name, $breakpoints);
42
- @return if($next, breakpoint-min($next, $breakpoints) - .02, null);
44
+ $max: map-get($breakpoints, $name);
45
+ @return if($max and $max > 0, $max - .02, null);
43
46
  }
44
47
 
45
48
  // Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
46
49
  // Useful for making responsive utilities.
47
50
  //
48
- // >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
51
+ // >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
49
52
  // "" (Returns a blank string)
50
- // >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
53
+ // >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
51
54
  // "-sm"
52
55
  @function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
53
56
  @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
@@ -104,8 +107,9 @@
104
107
  // No minimum for the smallest breakpoint, and no maximum for the largest one.
105
108
  // Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
106
109
  @mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
107
- $min: breakpoint-min($name, $breakpoints);
108
- $max: breakpoint-max($name, $breakpoints);
110
+ $min: breakpoint-min($name, $breakpoints);
111
+ $next: breakpoint-next($name, $breakpoints);
112
+ $max: breakpoint-max($next, $breakpoints);
109
113
 
110
114
  @if $min != null and $max != null {
111
115
  @media (min-width: $min) and (max-width: $max) {
@@ -116,7 +120,7 @@
116
120
  @content;
117
121
  }
118
122
  } @else if $min == null {
119
- @include media-breakpoint-down($name, $breakpoints) {
123
+ @include media-breakpoint-down($next, $breakpoints) {
120
124
  @content;
121
125
  }
122
126
  }