bootstrap 4.5.3 → 5.2.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (171) hide show
  1. checksums.yaml +4 -4
  2. data/.github/workflows/ci.yml +55 -0
  3. data/README.md +28 -5
  4. data/assets/javascripts/bootstrap/alert.js +54 -133
  5. data/assets/javascripts/bootstrap/base-component.js +99 -0
  6. data/assets/javascripts/bootstrap/button.js +44 -183
  7. data/assets/javascripts/bootstrap/carousel.js +308 -450
  8. data/assets/javascripts/bootstrap/collapse.js +180 -243
  9. data/assets/javascripts/bootstrap/dom/data.js +66 -0
  10. data/assets/javascripts/bootstrap/dom/event-handler.js +283 -0
  11. data/assets/javascripts/bootstrap/dom/manipulator.js +84 -0
  12. data/assets/javascripts/bootstrap/dom/selector-engine.js +85 -0
  13. data/assets/javascripts/bootstrap/dropdown.js +320 -387
  14. data/assets/javascripts/bootstrap/modal.js +238 -478
  15. data/assets/javascripts/bootstrap/offcanvas.js +297 -0
  16. data/assets/javascripts/bootstrap/popover.js +58 -163
  17. data/assets/javascripts/bootstrap/scrollspy.js +223 -228
  18. data/assets/javascripts/bootstrap/tab.js +251 -166
  19. data/assets/javascripts/bootstrap/toast.js +147 -149
  20. data/assets/javascripts/bootstrap/tooltip.js +434 -646
  21. data/assets/javascripts/bootstrap/util/backdrop.js +165 -0
  22. data/assets/javascripts/bootstrap/util/component-functions.js +46 -0
  23. data/assets/javascripts/bootstrap/util/config.js +79 -0
  24. data/assets/javascripts/bootstrap/util/focustrap.js +129 -0
  25. data/assets/javascripts/bootstrap/util/index.js +350 -0
  26. data/assets/javascripts/bootstrap/util/sanitizer.js +122 -0
  27. data/assets/javascripts/bootstrap/util/scrollbar.js +138 -0
  28. data/assets/javascripts/bootstrap/util/swipe.js +155 -0
  29. data/assets/javascripts/bootstrap/util/template-factory.js +177 -0
  30. data/assets/javascripts/bootstrap-global-this-define.js +6 -0
  31. data/assets/javascripts/bootstrap-global-this-undefine.js +2 -0
  32. data/assets/javascripts/bootstrap-sprockets.js +24 -8
  33. data/assets/javascripts/bootstrap.js +4037 -3206
  34. data/assets/javascripts/bootstrap.min.js +3 -3
  35. data/assets/stylesheets/_bootstrap-grid.scss +56 -21
  36. data/assets/stylesheets/_bootstrap-reboot.scss +4 -7
  37. data/assets/stylesheets/_bootstrap.scss +20 -13
  38. data/assets/stylesheets/bootstrap/_accordion.scss +149 -0
  39. data/assets/stylesheets/bootstrap/_alert.scss +33 -14
  40. data/assets/stylesheets/bootstrap/_badge.scss +15 -31
  41. data/assets/stylesheets/bootstrap/_breadcrumb.scss +23 -27
  42. data/assets/stylesheets/bootstrap/_button-group.scss +25 -46
  43. data/assets/stylesheets/bootstrap/_buttons.scss +136 -71
  44. data/assets/stylesheets/bootstrap/_card.scss +61 -113
  45. data/assets/stylesheets/bootstrap/_carousel.scss +64 -35
  46. data/assets/stylesheets/bootstrap/_close.scss +30 -30
  47. data/assets/stylesheets/bootstrap/_containers.scss +41 -0
  48. data/assets/stylesheets/bootstrap/_dropdown.scss +128 -71
  49. data/assets/stylesheets/bootstrap/_forms.scss +9 -347
  50. data/assets/stylesheets/bootstrap/_functions.scss +181 -23
  51. data/assets/stylesheets/bootstrap/_grid.scss +13 -53
  52. data/assets/stylesheets/bootstrap/_helpers.scss +10 -0
  53. data/assets/stylesheets/bootstrap/_images.scss +1 -1
  54. data/assets/stylesheets/bootstrap/_list-group.scss +72 -34
  55. data/assets/stylesheets/bootstrap/_maps.scss +54 -0
  56. data/assets/stylesheets/bootstrap/_mixins.scss +9 -13
  57. data/assets/stylesheets/bootstrap/_modal.scss +107 -110
  58. data/assets/stylesheets/bootstrap/_nav.scss +72 -23
  59. data/assets/stylesheets/bootstrap/_navbar.scss +127 -173
  60. data/assets/stylesheets/bootstrap/_offcanvas.scss +144 -0
  61. data/assets/stylesheets/bootstrap/_pagination.scss +72 -37
  62. data/assets/stylesheets/bootstrap/_placeholders.scss +51 -0
  63. data/assets/stylesheets/bootstrap/_popover.scss +99 -73
  64. data/assets/stylesheets/bootstrap/_progress.scss +26 -14
  65. data/assets/stylesheets/bootstrap/_reboot.scss +326 -200
  66. data/assets/stylesheets/bootstrap/_root.scss +62 -9
  67. data/assets/stylesheets/bootstrap/_spinners.scss +51 -22
  68. data/assets/stylesheets/bootstrap/_tables.scss +94 -115
  69. data/assets/stylesheets/bootstrap/_toasts.scss +54 -27
  70. data/assets/stylesheets/bootstrap/_tooltip.scss +68 -63
  71. data/assets/stylesheets/bootstrap/_transitions.scss +8 -1
  72. data/assets/stylesheets/bootstrap/_type.scss +40 -59
  73. data/assets/stylesheets/bootstrap/_utilities.scss +647 -18
  74. data/assets/stylesheets/bootstrap/_variables.scss +1018 -526
  75. data/assets/stylesheets/bootstrap/bootstrap-utilities.scss +18 -0
  76. data/assets/stylesheets/bootstrap/forms/_floating-labels.scss +75 -0
  77. data/assets/stylesheets/bootstrap/forms/_form-check.scss +175 -0
  78. data/assets/stylesheets/bootstrap/forms/_form-control.scss +194 -0
  79. data/assets/stylesheets/bootstrap/forms/_form-range.scss +91 -0
  80. data/assets/stylesheets/bootstrap/forms/_form-select.scss +71 -0
  81. data/assets/stylesheets/bootstrap/forms/_form-text.scss +11 -0
  82. data/assets/stylesheets/bootstrap/forms/_input-group.scss +132 -0
  83. data/assets/stylesheets/bootstrap/forms/_labels.scss +36 -0
  84. data/assets/stylesheets/bootstrap/forms/_validation.scss +12 -0
  85. data/assets/stylesheets/bootstrap/helpers/_color-bg.scss +10 -0
  86. data/assets/stylesheets/bootstrap/helpers/_colored-links.scss +12 -0
  87. data/assets/stylesheets/bootstrap/helpers/_position.scss +36 -0
  88. data/assets/stylesheets/bootstrap/helpers/_ratio.scss +26 -0
  89. data/assets/stylesheets/bootstrap/helpers/_stacks.scss +15 -0
  90. data/assets/stylesheets/bootstrap/helpers/_stretched-link.scss +15 -0
  91. data/assets/stylesheets/bootstrap/helpers/_text-truncation.scss +7 -0
  92. data/assets/stylesheets/bootstrap/helpers/_visually-hidden.scss +8 -0
  93. data/assets/stylesheets/bootstrap/helpers/_vr.scss +8 -0
  94. data/assets/stylesheets/bootstrap/mixins/_alert.scss +8 -6
  95. data/assets/stylesheets/bootstrap/mixins/_backdrop.scss +14 -0
  96. data/assets/stylesheets/bootstrap/mixins/_banner.scss +9 -0
  97. data/assets/stylesheets/bootstrap/mixins/_border-radius.scss +10 -8
  98. data/assets/stylesheets/bootstrap/mixins/_box-shadow.scss +7 -9
  99. data/assets/stylesheets/bootstrap/mixins/_breakpoints.scss +20 -16
  100. data/assets/stylesheets/bootstrap/mixins/_buttons.scss +60 -100
  101. data/assets/stylesheets/bootstrap/mixins/_caret.scss +10 -8
  102. data/assets/stylesheets/bootstrap/mixins/_clearfix.scss +2 -0
  103. data/assets/stylesheets/bootstrap/mixins/_color-scheme.scss +7 -0
  104. data/assets/stylesheets/bootstrap/mixins/_container.scss +11 -0
  105. data/assets/stylesheets/bootstrap/mixins/_forms.scss +48 -74
  106. data/assets/stylesheets/bootstrap/mixins/_gradients.scss +13 -11
  107. data/assets/stylesheets/bootstrap/mixins/_grid.scss +119 -37
  108. data/assets/stylesheets/bootstrap/mixins/_image.scss +1 -21
  109. data/assets/stylesheets/bootstrap/mixins/_list-group.scss +5 -2
  110. data/assets/stylesheets/bootstrap/mixins/_lists.scss +1 -1
  111. data/assets/stylesheets/bootstrap/mixins/_pagination.scss +7 -19
  112. data/assets/stylesheets/bootstrap/mixins/_reset-text.scss +3 -3
  113. data/assets/stylesheets/bootstrap/mixins/_table-variants.scss +24 -0
  114. data/assets/stylesheets/bootstrap/mixins/_transition.scss +1 -1
  115. data/assets/stylesheets/bootstrap/mixins/_utilities.scss +97 -0
  116. data/assets/stylesheets/bootstrap/mixins/_visually-hidden.scss +29 -0
  117. data/assets/stylesheets/bootstrap/utilities/_api.scss +47 -0
  118. data/assets/stylesheets/bootstrap/vendor/_rfs.scss +278 -128
  119. data/bootstrap.gemspec +3 -5
  120. data/lib/bootstrap/version.rb +2 -2
  121. data/tasks/updater/js.rb +31 -7
  122. data/tasks/updater/network.rb +9 -3
  123. data/tasks/updater.rb +2 -2
  124. data/test/dummy_rails/app/assets/javascripts/application.js +4 -3
  125. data/test/dummy_rails/app/views/layouts/application.html.erb +3 -1
  126. data/test/dummy_rails/app/views/pages/root.html +89 -0
  127. data/test/dummy_rails/config/application.rb +0 -3
  128. data/test/gemfiles/rails_5_2.gemfile +8 -0
  129. data/test/gemfiles/rails_6_1.gemfile +7 -0
  130. data/test/gemfiles/rails_7_0.gemfile +7 -0
  131. data/test/test_helper.rb +3 -2
  132. metadata +70 -78
  133. data/.travis.yml +0 -31
  134. data/assets/javascripts/bootstrap/util.js +0 -192
  135. data/assets/stylesheets/bootstrap/_code.scss +0 -48
  136. data/assets/stylesheets/bootstrap/_custom-forms.scss +0 -524
  137. data/assets/stylesheets/bootstrap/_input-group.scss +0 -192
  138. data/assets/stylesheets/bootstrap/_jumbotron.scss +0 -17
  139. data/assets/stylesheets/bootstrap/_media.scss +0 -8
  140. data/assets/stylesheets/bootstrap/_print.scss +0 -141
  141. data/assets/stylesheets/bootstrap/mixins/_background-variant.scss +0 -23
  142. data/assets/stylesheets/bootstrap/mixins/_badge.scss +0 -17
  143. data/assets/stylesheets/bootstrap/mixins/_float.scss +0 -14
  144. data/assets/stylesheets/bootstrap/mixins/_grid-framework.scss +0 -80
  145. data/assets/stylesheets/bootstrap/mixins/_hover.scss +0 -37
  146. data/assets/stylesheets/bootstrap/mixins/_nav-divider.scss +0 -11
  147. data/assets/stylesheets/bootstrap/mixins/_screen-reader.scss +0 -34
  148. data/assets/stylesheets/bootstrap/mixins/_size.scss +0 -7
  149. data/assets/stylesheets/bootstrap/mixins/_table-row.scss +0 -39
  150. data/assets/stylesheets/bootstrap/mixins/_text-emphasis.scss +0 -17
  151. data/assets/stylesheets/bootstrap/mixins/_text-hide.scss +0 -11
  152. data/assets/stylesheets/bootstrap/mixins/_visibility.scss +0 -8
  153. data/assets/stylesheets/bootstrap/utilities/_align.scss +0 -8
  154. data/assets/stylesheets/bootstrap/utilities/_background.scss +0 -19
  155. data/assets/stylesheets/bootstrap/utilities/_borders.scss +0 -75
  156. data/assets/stylesheets/bootstrap/utilities/_display.scss +0 -26
  157. data/assets/stylesheets/bootstrap/utilities/_embed.scss +0 -39
  158. data/assets/stylesheets/bootstrap/utilities/_flex.scss +0 -51
  159. data/assets/stylesheets/bootstrap/utilities/_float.scss +0 -11
  160. data/assets/stylesheets/bootstrap/utilities/_interactions.scss +0 -5
  161. data/assets/stylesheets/bootstrap/utilities/_overflow.scss +0 -5
  162. data/assets/stylesheets/bootstrap/utilities/_position.scss +0 -32
  163. data/assets/stylesheets/bootstrap/utilities/_screenreaders.scss +0 -11
  164. data/assets/stylesheets/bootstrap/utilities/_shadows.scss +0 -6
  165. data/assets/stylesheets/bootstrap/utilities/_sizing.scss +0 -20
  166. data/assets/stylesheets/bootstrap/utilities/_spacing.scss +0 -73
  167. data/assets/stylesheets/bootstrap/utilities/_stretched-link.scss +0 -19
  168. data/assets/stylesheets/bootstrap/utilities/_text.scss +0 -72
  169. data/assets/stylesheets/bootstrap/utilities/_visibility.scss +0 -13
  170. data/test/dummy_rails/app/views/pages/root.html.slim +0 -58
  171. /data/assets/stylesheets/bootstrap/{utilities → helpers}/_clearfix.scss +0 -0
@@ -1,20 +1,73 @@
1
- // Do not forget to update getting-started/theming.md!
2
1
  :root {
3
- // 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
+
4
8
  @each $color, $value in $colors {
5
- --#{$color}: #{$value};
9
+ --#{$prefix}#{$color}: #{$value};
10
+ }
11
+
12
+ @each $color, $value in $grays {
13
+ --#{$prefix}gray-#{$color}: #{$value};
6
14
  }
7
15
 
8
16
  @each $color, $value in $theme-colors {
9
- --#{$color}: #{$value};
17
+ --#{$prefix}#{$color}: #{$value};
10
18
  }
11
19
 
12
- @each $bp, $value in $grid-breakpoints {
13
- --breakpoint-#{$bp}: #{$value};
20
+ @each $color, $value in $theme-colors-rgb {
21
+ --#{$prefix}#{$color}-rgb: #{$value};
14
22
  }
15
23
 
16
- // Use `inspect` for lists so that quoted items keep the quotes.
24
+ --#{$prefix}white-rgb: #{to-rgb($white)};
25
+ --#{$prefix}black-rgb: #{to-rgb($black)};
26
+ --#{$prefix}body-color-rgb: #{to-rgb($body-color)};
27
+ --#{$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.
17
32
  // See https://github.com/sass/sass/issues/2383#issuecomment-336349172
18
- --font-family-sans-serif: #{inspect($font-family-sans-serif)};
19
- --font-family-monospace: #{inspect($font-family-monospace)};
33
+ --#{$prefix}font-sans-serif: #{inspect($font-family-sans-serif)};
34
+ --#{$prefix}font-monospace: #{inspect($font-family-monospace)};
35
+ --#{$prefix}gradient: #{$gradient};
36
+
37
+ // Root and body
38
+ // scss-docs-start root-body-variables
39
+ @if $font-size-root != null {
40
+ --#{$prefix}root-font-size: #{$font-size-root};
41
+ }
42
+ --#{$prefix}body-font-family: #{$font-family-base};
43
+ @include rfs($font-size-base, --#{$prefix}body-font-size);
44
+ --#{$prefix}body-font-weight: #{$font-weight-base};
45
+ --#{$prefix}body-line-height: #{$line-height-base};
46
+ --#{$prefix}body-color: #{$body-color};
47
+ @if $body-text-align != null {
48
+ --#{$prefix}body-text-align: #{$body-text-align};
49
+ }
50
+ --#{$prefix}body-bg: #{$body-bg};
51
+ // scss-docs-end root-body-variables
52
+
53
+ // scss-docs-start root-border-var
54
+ --#{$prefix}border-width: #{$border-width};
55
+ --#{$prefix}border-style: #{$border-style};
56
+ --#{$prefix}border-color: #{$border-color};
57
+ --#{$prefix}border-color-translucent: #{$border-color-translucent};
58
+
59
+ --#{$prefix}border-radius: #{$border-radius};
60
+ --#{$prefix}border-radius-sm: #{$border-radius-sm};
61
+ --#{$prefix}border-radius-lg: #{$border-radius-lg};
62
+ --#{$prefix}border-radius-xl: #{$border-radius-xl};
63
+ --#{$prefix}border-radius-2xl: #{$border-radius-2xl};
64
+ --#{$prefix}border-radius-pill: #{$border-radius-pill};
65
+ // scss-docs-end root-border-var
66
+
67
+ --#{$prefix}link-color: #{$link-color};
68
+ --#{$prefix}link-hover-color: #{$link-hover-color};
69
+
70
+ --#{$prefix}code-color: #{$code-color};
71
+
72
+ --#{$prefix}highlight-bg: #{$mark-bg};
20
73
  }
@@ -2,32 +2,50 @@
2
2
  // Rotating border
3
3
  //
4
4
 
5
+ .spinner-grow,
6
+ .spinner-border {
7
+ display: inline-block;
8
+ width: var(--#{$prefix}spinner-width);
9
+ height: var(--#{$prefix}spinner-height);
10
+ vertical-align: var(--#{$prefix}spinner-vertical-align);
11
+ // stylelint-disable-next-line property-disallowed-list
12
+ border-radius: 50%;
13
+ animation: var(--#{$prefix}spinner-animation-speed) linear infinite var(--#{$prefix}spinner-animation-name);
14
+ }
15
+
16
+ // scss-docs-start spinner-border-keyframes
5
17
  @keyframes spinner-border {
6
- to { transform: rotate(360deg); }
18
+ to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
7
19
  }
20
+ // scss-docs-end spinner-border-keyframes
8
21
 
9
22
  .spinner-border {
10
- display: inline-block;
11
- width: $spinner-width;
12
- height: $spinner-height;
13
- vertical-align: text-bottom;
14
- border: $spinner-border-width solid currentColor;
23
+ // scss-docs-start spinner-border-css-vars
24
+ --#{$prefix}spinner-width: #{$spinner-width};
25
+ --#{$prefix}spinner-height: #{$spinner-height};
26
+ --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
27
+ --#{$prefix}spinner-border-width: #{$spinner-border-width};
28
+ --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
29
+ --#{$prefix}spinner-animation-name: spinner-border;
30
+ // scss-docs-end spinner-border-css-vars
31
+
32
+ border: var(--#{$prefix}spinner-border-width) solid currentcolor;
15
33
  border-right-color: transparent;
16
- // stylelint-disable-next-line property-disallowed-list
17
- border-radius: 50%;
18
- animation: spinner-border .75s linear infinite;
19
34
  }
20
35
 
21
36
  .spinner-border-sm {
22
- width: $spinner-width-sm;
23
- height: $spinner-height-sm;
24
- border-width: $spinner-border-width-sm;
37
+ // scss-docs-start spinner-border-sm-css-vars
38
+ --#{$prefix}spinner-width: #{$spinner-width-sm};
39
+ --#{$prefix}spinner-height: #{$spinner-height-sm};
40
+ --#{$prefix}spinner-border-width: #{$spinner-border-width-sm};
41
+ // scss-docs-end spinner-border-sm-css-vars
25
42
  }
26
43
 
27
44
  //
28
45
  // Growing circle
29
46
  //
30
47
 
48
+ // scss-docs-start spinner-grow-keyframes
31
49
  @keyframes spinner-grow {
32
50
  0% {
33
51
  transform: scale(0);
@@ -37,20 +55,31 @@
37
55
  transform: none;
38
56
  }
39
57
  }
58
+ // scss-docs-end spinner-grow-keyframes
40
59
 
41
60
  .spinner-grow {
42
- display: inline-block;
43
- width: $spinner-width;
44
- height: $spinner-height;
45
- vertical-align: text-bottom;
46
- background-color: currentColor;
47
- // stylelint-disable-next-line property-disallowed-list
48
- border-radius: 50%;
61
+ // scss-docs-start spinner-grow-css-vars
62
+ --#{$prefix}spinner-width: #{$spinner-width};
63
+ --#{$prefix}spinner-height: #{$spinner-height};
64
+ --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
65
+ --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
66
+ --#{$prefix}spinner-animation-name: spinner-grow;
67
+ // scss-docs-end spinner-grow-css-vars
68
+
69
+ background-color: currentcolor;
49
70
  opacity: 0;
50
- animation: spinner-grow .75s linear infinite;
51
71
  }
52
72
 
53
73
  .spinner-grow-sm {
54
- width: $spinner-width-sm;
55
- height: $spinner-height-sm;
74
+ --#{$prefix}spinner-width: #{$spinner-width-sm};
75
+ --#{$prefix}spinner-height: #{$spinner-height-sm};
76
+ }
77
+
78
+ @if $enable-reduced-motion {
79
+ @media (prefers-reduced-motion: reduce) {
80
+ .spinner-border,
81
+ .spinner-grow {
82
+ --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed * 2};
83
+ }
84
+ }
56
85
  }
@@ -3,37 +3,65 @@
3
3
  //
4
4
 
5
5
  .table {
6
+ --#{$prefix}table-color: #{$table-color};
7
+ --#{$prefix}table-bg: #{$table-bg};
8
+ --#{$prefix}table-border-color: #{$table-border-color};
9
+ --#{$prefix}table-accent-bg: #{$table-accent-bg};
10
+ --#{$prefix}table-striped-color: #{$table-striped-color};
11
+ --#{$prefix}table-striped-bg: #{$table-striped-bg};
12
+ --#{$prefix}table-active-color: #{$table-active-color};
13
+ --#{$prefix}table-active-bg: #{$table-active-bg};
14
+ --#{$prefix}table-hover-color: #{$table-hover-color};
15
+ --#{$prefix}table-hover-bg: #{$table-hover-bg};
16
+
6
17
  width: 100%;
7
18
  margin-bottom: $spacer;
8
- color: $table-color;
9
- background-color: $table-bg; // Reset for nesting within parents with `background-color`.
10
-
11
- th,
12
- td {
13
- padding: $table-cell-padding;
14
- vertical-align: top;
15
- border-top: $table-border-width solid $table-border-color;
19
+ color: var(--#{$prefix}table-color);
20
+ vertical-align: $table-cell-vertical-align;
21
+ border-color: var(--#{$prefix}table-border-color);
22
+
23
+ // Target th & td
24
+ // We need the child combinator to prevent styles leaking to nested tables which doesn't have a `.table` class.
25
+ // We use the universal selectors here to simplify the selector (else we would need 6 different selectors).
26
+ // Another advantage is that this generates less code and makes the selector less specific making it easier to override.
27
+ // stylelint-disable-next-line selector-max-universal
28
+ > :not(caption) > * > * {
29
+ padding: $table-cell-padding-y $table-cell-padding-x;
30
+ background-color: var(--#{$prefix}table-bg);
31
+ border-bottom-width: $table-border-width;
32
+ box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-accent-bg);
16
33
  }
17
34
 
18
- thead th {
19
- vertical-align: bottom;
20
- border-bottom: (2 * $table-border-width) solid $table-border-color;
35
+ > tbody {
36
+ vertical-align: inherit;
21
37
  }
22
38
 
23
- tbody + tbody {
24
- border-top: (2 * $table-border-width) solid $table-border-color;
39
+ > thead {
40
+ vertical-align: bottom;
25
41
  }
26
42
  }
27
43
 
44
+ .table-group-divider {
45
+ border-top: ($table-border-width * 2) solid $table-group-separator-color;
46
+ }
47
+
48
+ //
49
+ // Change placement of captions with a class
50
+ //
51
+
52
+ .caption-top {
53
+ caption-side: top;
54
+ }
55
+
28
56
 
29
57
  //
30
58
  // Condensed table w/ half padding
31
59
  //
32
60
 
33
61
  .table-sm {
34
- th,
35
- td {
36
- padding: $table-cell-padding-sm;
62
+ // stylelint-disable-next-line selector-max-universal
63
+ > :not(caption) > * > * {
64
+ padding: $table-cell-padding-y-sm $table-cell-padding-x-sm;
37
65
  }
38
66
  }
39
67
 
@@ -41,29 +69,31 @@
41
69
  // Border versions
42
70
  //
43
71
  // Add or remove borders all around the table and between all the columns.
72
+ //
73
+ // When borders are added on all sides of the cells, the corners can render odd when
74
+ // these borders do not have the same color or if they are semi-transparent.
75
+ // Therefor we add top and border bottoms to the `tr`s and left and right borders
76
+ // to the `td`s or `th`s
44
77
 
45
78
  .table-bordered {
46
- border: $table-border-width solid $table-border-color;
79
+ > :not(caption) > * {
80
+ border-width: $table-border-width 0;
47
81
 
48
- th,
49
- td {
50
- border: $table-border-width solid $table-border-color;
51
- }
52
-
53
- thead {
54
- th,
55
- td {
56
- border-bottom-width: 2 * $table-border-width;
82
+ // stylelint-disable-next-line selector-max-universal
83
+ > * {
84
+ border-width: 0 $table-border-width;
57
85
  }
58
86
  }
59
87
  }
60
88
 
61
89
  .table-borderless {
62
- th,
63
- td,
64
- thead th,
65
- tbody + tbody {
66
- border: 0;
90
+ // stylelint-disable-next-line selector-max-universal
91
+ > :not(caption) > * > * {
92
+ border-bottom-width: 0;
93
+ }
94
+
95
+ > :not(:first-child) {
96
+ border-top-width: 0;
67
97
  }
68
98
  }
69
99
 
@@ -71,115 +101,64 @@
71
101
  //
72
102
  // Default zebra-stripe styles (alternating gray and transparent backgrounds)
73
103
 
104
+ // For rows
74
105
  .table-striped {
75
- tbody tr:nth-of-type(#{$table-striped-order}) {
76
- background-color: $table-accent-bg;
106
+ > tbody > tr:nth-of-type(#{$table-striped-order}) > * {
107
+ --#{$prefix}table-accent-bg: var(--#{$prefix}table-striped-bg);
108
+ color: var(--#{$prefix}table-striped-color);
77
109
  }
78
110
  }
79
111
 
80
-
81
- // Hover effect
82
- //
83
- // Placed here since it has to come after the potential zebra striping
84
-
85
- .table-hover {
86
- tbody tr {
87
- @include hover() {
88
- color: $table-hover-color;
89
- background-color: $table-hover-bg;
90
- }
112
+ // For columns
113
+ .table-striped-columns {
114
+ > :not(caption) > tr > :nth-child(#{$table-striped-columns-order}) {
115
+ --#{$prefix}table-accent-bg: var(--#{$prefix}table-striped-bg);
116
+ color: var(--#{$prefix}table-striped-color);
91
117
  }
92
118
  }
93
119
 
94
-
95
- // Table backgrounds
120
+ // Active table
96
121
  //
97
- // Exact selectors below required to override `.table-striped` and prevent
98
- // inheritance to nested tables.
122
+ // The `.table-active` class can be added to highlight rows or cells
99
123
 
100
- @each $color, $value in $theme-colors {
101
- @include table-row-variant($color, theme-color-level($color, $table-bg-level), theme-color-level($color, $table-border-level));
124
+ .table-active {
125
+ --#{$prefix}table-accent-bg: var(--#{$prefix}table-active-bg);
126
+ color: var(--#{$prefix}table-active-color);
102
127
  }
103
128
 
104
- @include table-row-variant(active, $table-active-bg);
105
-
106
-
107
- // Dark styles
129
+ // Hover effect
108
130
  //
109
- // Same table markup, but inverted color scheme: dark background and light text.
110
-
111
- // stylelint-disable-next-line no-duplicate-selectors
112
- .table {
113
- .thead-dark {
114
- th {
115
- color: $table-dark-color;
116
- background-color: $table-dark-bg;
117
- border-color: $table-dark-border-color;
118
- }
119
- }
131
+ // Placed here since it has to come after the potential zebra striping
120
132
 
121
- .thead-light {
122
- th {
123
- color: $table-head-color;
124
- background-color: $table-head-bg;
125
- border-color: $table-border-color;
126
- }
133
+ .table-hover {
134
+ > tbody > tr:hover > * {
135
+ --#{$prefix}table-accent-bg: var(--#{$prefix}table-hover-bg);
136
+ color: var(--#{$prefix}table-hover-color);
127
137
  }
128
138
  }
129
139
 
130
- .table-dark {
131
- color: $table-dark-color;
132
- background-color: $table-dark-bg;
133
140
 
134
- th,
135
- td,
136
- thead th {
137
- border-color: $table-dark-border-color;
138
- }
139
-
140
- &.table-bordered {
141
- border: 0;
142
- }
143
-
144
- &.table-striped {
145
- tbody tr:nth-of-type(#{$table-striped-order}) {
146
- background-color: $table-dark-accent-bg;
147
- }
148
- }
141
+ // Table variants
142
+ //
143
+ // Table variants set the table cell backgrounds, border colors
144
+ // and the colors of the striped, hovered & active tables
149
145
 
150
- &.table-hover {
151
- tbody tr {
152
- @include hover() {
153
- color: $table-dark-hover-color;
154
- background-color: $table-dark-hover-bg;
155
- }
156
- }
157
- }
146
+ @each $color, $value in $table-variants {
147
+ @include table-variant($color, $value);
158
148
  }
159
149
 
160
-
161
150
  // Responsive tables
162
151
  //
163
152
  // Generate series of `.table-responsive-*` classes for configuring the screen
164
153
  // size of where your table will overflow.
165
154
 
166
- .table-responsive {
167
- @each $breakpoint in map-keys($grid-breakpoints) {
168
- $next: breakpoint-next($breakpoint, $grid-breakpoints);
169
- $infix: breakpoint-infix($next, $grid-breakpoints);
170
-
171
- &#{$infix} {
172
- @include media-breakpoint-down($breakpoint) {
173
- display: block;
174
- width: 100%;
175
- overflow-x: auto;
176
- -webkit-overflow-scrolling: touch;
177
-
178
- // Prevent double border on horizontal scroll due to use of `display: block;`
179
- > .table-bordered {
180
- border: 0;
181
- }
182
- }
155
+ @each $breakpoint in map-keys($grid-breakpoints) {
156
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
157
+
158
+ @include media-breakpoint-down($breakpoint) {
159
+ .table-responsive#{$infix} {
160
+ overflow-x: auto;
161
+ -webkit-overflow-scrolling: touch;
183
162
  }
184
163
  }
185
164
  }
@@ -1,46 +1,73 @@
1
1
  .toast {
2
- // Prevents from shrinking in IE11, when in a flex container
3
- // See https://github.com/twbs/bootstrap/issues/28341
4
- flex-basis: $toast-max-width;
5
- max-width: $toast-max-width;
6
- @include font-size($toast-font-size);
7
- color: $toast-color;
8
- background-color: $toast-background-color;
9
- background-clip: padding-box;
10
- border: $toast-border-width solid $toast-border-color;
11
- box-shadow: $toast-box-shadow;
12
- opacity: 0;
13
- @include border-radius($toast-border-radius);
2
+ // scss-docs-start toast-css-vars
3
+ --#{$prefix}toast-zindex: #{$zindex-toast};
4
+ --#{$prefix}toast-padding-x: #{$toast-padding-x};
5
+ --#{$prefix}toast-padding-y: #{$toast-padding-y};
6
+ --#{$prefix}toast-spacing: #{$toast-spacing};
7
+ --#{$prefix}toast-max-width: #{$toast-max-width};
8
+ @include rfs($toast-font-size, --#{$prefix}toast-font-size);
9
+ --#{$prefix}toast-color: #{$toast-color};
10
+ --#{$prefix}toast-bg: #{$toast-background-color};
11
+ --#{$prefix}toast-border-width: #{$toast-border-width};
12
+ --#{$prefix}toast-border-color: #{$toast-border-color};
13
+ --#{$prefix}toast-border-radius: #{$toast-border-radius};
14
+ --#{$prefix}toast-box-shadow: #{$toast-box-shadow};
15
+ --#{$prefix}toast-header-color: #{$toast-header-color};
16
+ --#{$prefix}toast-header-bg: #{$toast-header-background-color};
17
+ --#{$prefix}toast-header-border-color: #{$toast-header-border-color};
18
+ // scss-docs-end toast-css-vars
14
19
 
15
- &:not(:last-child) {
16
- margin-bottom: $toast-padding-x;
17
- }
20
+ width: var(--#{$prefix}toast-max-width);
21
+ max-width: 100%;
22
+ @include font-size(var(--#{$prefix}toast-font-size));
23
+ color: var(--#{$prefix}toast-color);
24
+ pointer-events: auto;
25
+ background-color: var(--#{$prefix}toast-bg);
26
+ background-clip: padding-box;
27
+ border: var(--#{$prefix}toast-border-width) solid var(--#{$prefix}toast-border-color);
28
+ box-shadow: var(--#{$prefix}toast-box-shadow);
29
+ @include border-radius(var(--#{$prefix}toast-border-radius));
18
30
 
19
31
  &.showing {
20
- opacity: 1;
32
+ opacity: 0;
21
33
  }
22
34
 
23
- &.show {
24
- display: block;
25
- opacity: 1;
35
+ &:not(.show) {
36
+ display: none;
26
37
  }
38
+ }
27
39
 
28
- &.hide {
29
- display: none;
40
+ .toast-container {
41
+ --#{$prefix}toast-zindex: #{$zindex-toast};
42
+
43
+ position: absolute;
44
+ z-index: var(--#{$prefix}toast-zindex);
45
+ width: max-content;
46
+ max-width: 100%;
47
+ pointer-events: none;
48
+
49
+ > :not(:last-child) {
50
+ margin-bottom: var(--#{$prefix}toast-spacing);
30
51
  }
31
52
  }
32
53
 
33
54
  .toast-header {
34
55
  display: flex;
35
56
  align-items: center;
36
- padding: $toast-padding-y $toast-padding-x;
37
- color: $toast-header-color;
38
- background-color: $toast-header-background-color;
57
+ padding: var(--#{$prefix}toast-padding-y) var(--#{$prefix}toast-padding-x);
58
+ color: var(--#{$prefix}toast-header-color);
59
+ background-color: var(--#{$prefix}toast-header-bg);
39
60
  background-clip: padding-box;
40
- border-bottom: $toast-border-width solid $toast-header-border-color;
41
- @include border-top-radius(subtract($toast-border-radius, $toast-border-width));
61
+ border-bottom: var(--#{$prefix}toast-border-width) solid var(--#{$prefix}toast-header-border-color);
62
+ @include border-top-radius(calc(var(--#{$prefix}toast-border-radius) - var(--#{$prefix}toast-border-width)));
63
+
64
+ .btn-close {
65
+ margin-right: calc(-.5 * var(--#{$prefix}toast-padding-x)); // stylelint-disable-line function-disallowed-list
66
+ margin-left: var(--#{$prefix}toast-padding-x);
67
+ }
42
68
  }
43
69
 
44
70
  .toast-body {
45
- padding: $toast-padding-x; // apply to both vertical and horizontal
71
+ padding: var(--#{$prefix}toast-padding-x);
72
+ word-wrap: break-word;
46
73
  }