bootstrap 5.0.2 → 5.1.0

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 (51) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +1 -1
  3. data/assets/javascripts/bootstrap-sprockets.js +7 -7
  4. data/assets/javascripts/bootstrap.js +590 -580
  5. data/assets/javascripts/bootstrap.min.js +2 -2
  6. data/assets/javascripts/bootstrap/alert.js +73 -43
  7. data/assets/javascripts/bootstrap/base-component.js +15 -10
  8. data/assets/javascripts/bootstrap/button.js +13 -6
  9. data/assets/javascripts/bootstrap/carousel.js +26 -8
  10. data/assets/javascripts/bootstrap/collapse.js +96 -114
  11. data/assets/javascripts/bootstrap/dom/data.js +2 -2
  12. data/assets/javascripts/bootstrap/dom/event-handler.js +9 -2
  13. data/assets/javascripts/bootstrap/dom/manipulator.js +4 -4
  14. data/assets/javascripts/bootstrap/dom/selector-engine.js +47 -5
  15. data/assets/javascripts/bootstrap/dropdown.js +66 -74
  16. data/assets/javascripts/bootstrap/modal.js +198 -52
  17. data/assets/javascripts/bootstrap/offcanvas.js +177 -31
  18. data/assets/javascripts/bootstrap/popover.js +19 -52
  19. data/assets/javascripts/bootstrap/scrollspy.js +28 -47
  20. data/assets/javascripts/bootstrap/tab.js +27 -8
  21. data/assets/javascripts/bootstrap/toast.js +108 -13
  22. data/assets/javascripts/bootstrap/tooltip.js +57 -47
  23. data/assets/stylesheets/_bootstrap-grid.scss +1 -1
  24. data/assets/stylesheets/_bootstrap-reboot.scss +1 -1
  25. data/assets/stylesheets/_bootstrap.scss +2 -1
  26. data/assets/stylesheets/bootstrap/_card.scss +2 -1
  27. data/assets/stylesheets/bootstrap/_functions.scss +45 -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 +39 -2
  37. data/assets/stylesheets/bootstrap/_toasts.scss +2 -2
  38. data/assets/stylesheets/bootstrap/_transitions.scss +6 -0
  39. data/assets/stylesheets/bootstrap/_utilities.scss +44 -8
  40. data/assets/stylesheets/bootstrap/_variables.scss +167 -6
  41. data/assets/stylesheets/bootstrap/bootstrap-utilities.scss +1 -1
  42. data/assets/stylesheets/bootstrap/forms/_form-control.scss +1 -1
  43. data/assets/stylesheets/bootstrap/helpers/_stacks.scss +15 -0
  44. data/assets/stylesheets/bootstrap/helpers/_vr.scss +8 -0
  45. data/assets/stylesheets/bootstrap/mixins/_backdrop.scss +14 -0
  46. data/assets/stylesheets/bootstrap/mixins/_grid.scss +25 -7
  47. data/assets/stylesheets/bootstrap/mixins/_utilities.scss +27 -6
  48. data/bootstrap.gemspec +3 -3
  49. data/lib/bootstrap/version.rb +2 -2
  50. data/tasks/updater/js.rb +6 -2
  51. metadata +11 -7
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * Bootstrap Grid v5.0.2 (https://getbootstrap.com/)
2
+ * Bootstrap Grid v5.1.0 (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)
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * Bootstrap Reboot v5.0.2 (https://getbootstrap.com/)
2
+ * Bootstrap Reboot v5.1.0 (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)
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * Bootstrap v5.0.2 (https://getbootstrap.com/)
2
+ * Bootstrap v5.1.0 (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)
@@ -43,6 +43,7 @@
43
43
  @import "bootstrap/carousel";
44
44
  @import "bootstrap/spinners";
45
45
  @import "bootstrap/offcanvas";
46
+ @import "bootstrap/placeholders";
46
47
 
47
48
  // Helpers
48
49
  @import "bootstrap/helpers";
@@ -13,6 +13,7 @@
13
13
  background-clip: border-box;
14
14
  border: $card-border-width solid $card-border-color;
15
15
  @include border-radius($card-border-radius);
16
+ @include box-shadow($card-box-shadow);
16
17
 
17
18
  > hr {
18
19
  margin-right: 0;
@@ -65,7 +66,7 @@
65
66
 
66
67
  .card-link {
67
68
  &:hover {
68
- text-decoration: none;
69
+ text-decoration: if($link-hover-decoration == underline, none, null);
69
70
  }
70
71
 
71
72
  + .card-link {
@@ -32,6 +32,41 @@
32
32
  }
33
33
  }
34
34
 
35
+ // Colors
36
+ @function to-rgb($value) {
37
+ @return red($value), green($value), blue($value);
38
+ }
39
+
40
+ @function rgba-css-var($identifier, $target) {
41
+ @return rgba(var(--#{$variable-prefix}#{$identifier}-rgb), var(--#{$variable-prefix}#{$target}-opacity));
42
+ }
43
+
44
+ // stylelint-disable scss/dollar-variable-pattern
45
+ @function map-loop($map, $func, $args...) {
46
+ $_map: ();
47
+
48
+ @each $key, $value in $map {
49
+ // allow to pass the $key and $value of the map as an function argument
50
+ $_args: ();
51
+ @each $arg in $args {
52
+ $_args: append($_args, if($arg == "$key", $key, if($arg == "$value", $value, $arg)));
53
+ }
54
+
55
+ $_map: map-merge($_map, ($key: call(get-function($func), $_args...)));
56
+ }
57
+
58
+ @return $_map;
59
+ }
60
+ // stylelint-enable scss/dollar-variable-pattern
61
+
62
+ @function varify($list) {
63
+ $result: null;
64
+ @each $entry in $list {
65
+ $result: append($result, var(--#{$variable-prefix}#{$entry}), space);
66
+ }
67
+ @return $result;
68
+ }
69
+
35
70
  // Internal Bootstrap function to turn maps into its negative variant.
36
71
  // It prefixes the keys with `n` and makes the value negative.
37
72
  @function negativify-map($map) {
@@ -55,6 +90,16 @@
55
90
  @return $result;
56
91
  }
57
92
 
93
+ // Merge multiple maps
94
+ @function map-merge-multiple($maps...) {
95
+ $merged-maps: ();
96
+
97
+ @each $map in $maps {
98
+ $merged-maps: map-merge($merged-maps, $map);
99
+ }
100
+ @return $merged-maps;
101
+ }
102
+
58
103
  // Replace `$search` with `$replace` in `$string`
59
104
  // Used on our SVG icon backgrounds for custom forms.
60
105
  //
@@ -181,14 +226,6 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
181
226
  @return $value1 + $value2;
182
227
  }
183
228
 
184
- @if type-of($value1) != number {
185
- $value1: unquote("(") + $value1 + unquote(")");
186
- }
187
-
188
- @if type-of($value2) != number {
189
- $value2: unquote("(") + $value2 + unquote(")");
190
- }
191
-
192
229
  @return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + unquote(" + ") + $value2);
193
230
  }
194
231
 
@@ -209,10 +246,6 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
209
246
  @return $value1 - $value2;
210
247
  }
211
248
 
212
- @if type-of($value1) != number {
213
- $value1: unquote("(") + $value1 + unquote(")");
214
- }
215
-
216
249
  @if type-of($value2) != number {
217
250
  $value2: unquote("(") + $value2 + unquote(")");
218
251
  }
@@ -12,6 +12,17 @@
12
12
  }
13
13
  }
14
14
 
15
+ @if $enable-cssgrid {
16
+ .grid {
17
+ display: grid;
18
+ grid-template-rows: repeat(var(--#{$variable-prefix}rows, 1), 1fr);
19
+ grid-template-columns: repeat(var(--#{$variable-prefix}columns, #{$grid-columns}), 1fr);
20
+ gap: var(--#{$variable-prefix}gap, #{$grid-gutter-width});
21
+
22
+ @include make-cssgrid();
23
+ }
24
+ }
25
+
15
26
 
16
27
  // Columns
17
28
  //
@@ -2,6 +2,8 @@
2
2
  @import "helpers/colored-links";
3
3
  @import "helpers/ratio";
4
4
  @import "helpers/position";
5
+ @import "helpers/stacks";
5
6
  @import "helpers/visually-hidden";
6
7
  @import "helpers/stretched-link";
7
8
  @import "helpers/text-truncation";
9
+ @import "helpers/vr";
@@ -22,6 +22,7 @@
22
22
 
23
23
  // Components
24
24
  @import "mixins/alert";
25
+ @import "mixins/backdrop";
25
26
  @import "mixins/buttons";
26
27
  @import "mixins/caret";
27
28
  @import "mixins/pagination";
@@ -85,17 +85,7 @@
85
85
 
86
86
  // Modal background
87
87
  .modal-backdrop {
88
- position: fixed;
89
- top: 0;
90
- left: 0;
91
- z-index: $zindex-modal-backdrop;
92
- width: 100vw;
93
- height: 100vh;
94
- background-color: $modal-backdrop-bg;
95
-
96
- // Fade for backdrop
97
- &.fade { opacity: 0; }
98
- &.show { opacity: $modal-backdrop-opacity; }
88
+ @include overlay-backdrop($zindex-modal-backdrop, $modal-backdrop-bg, $modal-backdrop-opacity);
99
89
  }
100
90
 
101
91
  // Modal header
@@ -193,13 +193,42 @@
193
193
  .navbar-toggler {
194
194
  display: none;
195
195
  }
196
+
197
+ .offcanvas-header {
198
+ display: none;
199
+ }
200
+
201
+ .offcanvas {
202
+ position: inherit;
203
+ bottom: 0;
204
+ z-index: 1000;
205
+ flex-grow: 1;
206
+ visibility: visible !important; // stylelint-disable-line declaration-no-important
207
+ background-color: transparent;
208
+ border-right: 0;
209
+ border-left: 0;
210
+ @include transition(none);
211
+ transform: none;
212
+ }
213
+ .offcanvas-top,
214
+ .offcanvas-bottom {
215
+ height: auto;
216
+ border-top: 0;
217
+ border-bottom: 0;
218
+ }
219
+
220
+ .offcanvas-body {
221
+ display: flex;
222
+ flex-grow: 0;
223
+ padding: 0;
224
+ overflow-y: visible;
225
+ }
196
226
  }
197
227
  }
198
228
  }
199
229
  }
200
230
  // scss-docs-end navbar-expand-loop
201
231
 
202
-
203
232
  // Navbar themes
204
233
  //
205
234
  // Styles for switching between navbars with light or dark background.
@@ -14,6 +14,10 @@
14
14
  @include transition(transform $offcanvas-transition-duration ease-in-out);
15
15
  }
16
16
 
17
+ .offcanvas-backdrop {
18
+ @include overlay-backdrop($zindex-offcanvas-backdrop, $offcanvas-backdrop-bg, $offcanvas-backdrop-opacity);
19
+ }
20
+
17
21
  .offcanvas-header {
18
22
  display: flex;
19
23
  align-items: center;
@@ -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,53 @@
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-rgb: #{to-rgb($body-color)};
27
+
28
+ // Fonts
29
+
30
+ // Note: Use `inspect` for lists so that quoted items keep the quotes.
12
31
  // See https://github.com/sass/sass/issues/2383#issuecomment-336349172
13
32
  --#{$variable-prefix}font-sans-serif: #{inspect($font-family-sans-serif)};
14
33
  --#{$variable-prefix}font-monospace: #{inspect($font-family-monospace)};
15
34
  --#{$variable-prefix}gradient: #{$gradient};
35
+
36
+ // Root and body
37
+ // stylelint-disable custom-property-empty-line-before
38
+ // scss-docs-start root-body-variables
39
+ @if $font-size-root != null {
40
+ --#{$variable-prefix}root-font-size: #{$font-size-root};
41
+ }
42
+ --#{$variable-prefix}body-font-family: #{$font-family-base};
43
+ --#{$variable-prefix}body-font-size: #{$font-size-base};
44
+ --#{$variable-prefix}body-font-weight: #{$font-weight-base};
45
+ --#{$variable-prefix}body-line-height: #{$line-height-base};
46
+ --#{$variable-prefix}body-color: #{$body-color};
47
+ @if $body-text-align != null {
48
+ --#{$variable-prefix}body-text-align: #{$body-text-align};
49
+ }
50
+ --#{$variable-prefix}body-bg: #{$body-bg};
51
+ // scss-docs-end root-body-variables
52
+ // stylelint-enable custom-property-empty-line-before
16
53
  }
@@ -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,