bootstrap-scss 5.1.3 → 5.2.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 (87) hide show
  1. package/LICENSE +2 -2
  2. package/README.md +5 -5
  3. package/_accordion.scss +146 -118
  4. package/_alert.scss +71 -57
  5. package/_badge.scss +38 -29
  6. package/_breadcrumb.scss +40 -28
  7. package/_button-group.scss +142 -139
  8. package/_buttons.scss +186 -111
  9. package/_card.scss +234 -216
  10. package/_carousel.scss +229 -229
  11. package/_close.scss +40 -40
  12. package/_containers.scss +41 -41
  13. package/_dropdown.scss +248 -240
  14. package/_forms.scss +9 -9
  15. package/_functions.scss +302 -302
  16. package/_grid.scss +33 -33
  17. package/_helpers.scss +10 -9
  18. package/_list-group.scss +191 -174
  19. package/_maps.scss +54 -0
  20. package/_mixins.scss +43 -43
  21. package/_modal.scss +237 -209
  22. package/_nav.scss +172 -139
  23. package/_navbar.scss +276 -335
  24. package/_offcanvas.scss +143 -83
  25. package/_pagination.scss +109 -64
  26. package/_placeholders.scss +51 -51
  27. package/_popover.scss +196 -158
  28. package/_progress.scss +59 -48
  29. package/_reboot.scss +610 -625
  30. package/_root.scss +73 -54
  31. package/_spinners.scss +85 -69
  32. package/_tables.scss +164 -155
  33. package/_toasts.scss +70 -51
  34. package/_tooltip.scss +120 -115
  35. package/_transitions.scss +27 -27
  36. package/_type.scss +106 -104
  37. package/_utilities.scss +647 -630
  38. package/_variables.scss +1633 -1641
  39. package/bootstrap-grid.scss +64 -67
  40. package/bootstrap-reboot.scss +9 -13
  41. package/bootstrap-utilities.scss +15 -18
  42. package/bootstrap.scss +51 -53
  43. package/forms/_floating-labels.scss +74 -63
  44. package/forms/_form-check.scss +175 -152
  45. package/forms/_form-control.scss +194 -219
  46. package/forms/_form-range.scss +91 -91
  47. package/forms/_form-select.scss +71 -72
  48. package/forms/_form-text.scss +11 -11
  49. package/forms/_input-group.scss +129 -121
  50. package/forms/_labels.scss +36 -36
  51. package/forms/_validation.scss +12 -12
  52. package/helpers/_clearfix.scss +3 -3
  53. package/helpers/_color-bg.scss +10 -0
  54. package/helpers/_colored-links.scss +12 -12
  55. package/helpers/_position.scss +36 -30
  56. package/helpers/_ratio.scss +26 -26
  57. package/helpers/_stacks.scss +15 -15
  58. package/helpers/_stretched-link.scss +15 -15
  59. package/helpers/_text-truncation.scss +7 -7
  60. package/helpers/_visually-hidden.scss +8 -8
  61. package/helpers/_vr.scss +8 -8
  62. package/mixins/_alert.scss +15 -11
  63. package/mixins/_backdrop.scss +14 -14
  64. package/mixins/_banner.scss +9 -0
  65. package/mixins/_border-radius.scss +78 -78
  66. package/mixins/_box-shadow.scss +18 -18
  67. package/mixins/_breakpoints.scss +127 -127
  68. package/mixins/_buttons.scss +70 -133
  69. package/mixins/_caret.scss +64 -64
  70. package/mixins/_clearfix.scss +9 -9
  71. package/mixins/_color-scheme.scss +7 -7
  72. package/mixins/_container.scss +11 -9
  73. package/mixins/_forms.scss +152 -144
  74. package/mixins/_gradients.scss +47 -47
  75. package/mixins/_grid.scss +151 -151
  76. package/mixins/_image.scss +16 -16
  77. package/mixins/_list-group.scss +24 -24
  78. package/mixins/_lists.scss +7 -7
  79. package/mixins/_pagination.scss +10 -31
  80. package/mixins/_reset-text.scss +17 -17
  81. package/mixins/_table-variants.scss +24 -21
  82. package/mixins/_transition.scss +26 -26
  83. package/mixins/_utilities.scss +97 -89
  84. package/mixins/_visually-hidden.scss +29 -29
  85. package/package.json +1 -1
  86. package/utilities/_api.scss +47 -47
  87. package/vendor/_rfs.scss +354 -354
package/_root.scss CHANGED
@@ -1,54 +1,73 @@
1
- :root {
2
- // Note: Custom variable values only support SassScript inside `#{}`.
3
-
4
- // Colors
5
- //
6
- // Generate palettes for full colors, grays, and theme colors.
7
-
8
- @each $color, $value in $colors {
9
- --#{$variable-prefix}#{$color}: #{$value};
10
- }
11
-
12
- @each $color, $value in $grays {
13
- --#{$variable-prefix}gray-#{$color}: #{$value};
14
- }
15
-
16
- @each $color, $value in $theme-colors {
17
- --#{$variable-prefix}#{$color}: #{$value};
18
- }
19
-
20
- @each $color, $value in $theme-colors-rgb {
21
- --#{$variable-prefix}#{$color}-rgb: #{$value};
22
- }
23
-
24
- --#{$variable-prefix}white-rgb: #{to-rgb($white)};
25
- --#{$variable-prefix}black-rgb: #{to-rgb($black)};
26
- --#{$variable-prefix}body-color-rgb: #{to-rgb($body-color)};
27
- --#{$variable-prefix}body-bg-rgb: #{to-rgb($body-bg)};
28
-
29
- // Fonts
30
-
31
- // Note: Use `inspect` for lists so that quoted items keep the quotes.
32
- // See https://github.com/sass/sass/issues/2383#issuecomment-336349172
33
- --#{$variable-prefix}font-sans-serif: #{inspect($font-family-sans-serif)};
34
- --#{$variable-prefix}font-monospace: #{inspect($font-family-monospace)};
35
- --#{$variable-prefix}gradient: #{$gradient};
36
-
37
- // Root and body
38
- // stylelint-disable custom-property-empty-line-before
39
- // scss-docs-start root-body-variables
40
- @if $font-size-root != null {
41
- --#{$variable-prefix}root-font-size: #{$font-size-root};
42
- }
43
- --#{$variable-prefix}body-font-family: #{$font-family-base};
44
- --#{$variable-prefix}body-font-size: #{$font-size-base};
45
- --#{$variable-prefix}body-font-weight: #{$font-weight-base};
46
- --#{$variable-prefix}body-line-height: #{$line-height-base};
47
- --#{$variable-prefix}body-color: #{$body-color};
48
- @if $body-text-align != null {
49
- --#{$variable-prefix}body-text-align: #{$body-text-align};
50
- }
51
- --#{$variable-prefix}body-bg: #{$body-bg};
52
- // scss-docs-end root-body-variables
53
- // stylelint-enable custom-property-empty-line-before
54
- }
1
+ :root {
2
+ // Note: Custom variable values only support SassScript inside `#{}`.
3
+
4
+ // Colors
5
+ //
6
+ // Generate palettes for full colors, grays, and theme colors.
7
+
8
+ @each $color, $value in $colors {
9
+ --#{$prefix}#{$color}: #{$value};
10
+ }
11
+
12
+ @each $color, $value in $grays {
13
+ --#{$prefix}gray-#{$color}: #{$value};
14
+ }
15
+
16
+ @each $color, $value in $theme-colors {
17
+ --#{$prefix}#{$color}: #{$value};
18
+ }
19
+
20
+ @each $color, $value in $theme-colors-rgb {
21
+ --#{$prefix}#{$color}-rgb: #{$value};
22
+ }
23
+
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.
32
+ // See https://github.com/sass/sass/issues/2383#issuecomment-336349172
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};
73
+ }
package/_spinners.scss CHANGED
@@ -1,69 +1,85 @@
1
- //
2
- // Rotating border
3
- //
4
-
5
- // scss-docs-start spinner-border-keyframes
6
- @keyframes spinner-border {
7
- to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
8
- }
9
- // scss-docs-end spinner-border-keyframes
10
-
11
- .spinner-border {
12
- display: inline-block;
13
- width: $spinner-width;
14
- height: $spinner-height;
15
- vertical-align: $spinner-vertical-align;
16
- border: $spinner-border-width solid currentColor;
17
- border-right-color: transparent;
18
- // stylelint-disable-next-line property-disallowed-list
19
- border-radius: 50%;
20
- animation: $spinner-animation-speed linear infinite spinner-border;
21
- }
22
-
23
- .spinner-border-sm {
24
- width: $spinner-width-sm;
25
- height: $spinner-height-sm;
26
- border-width: $spinner-border-width-sm;
27
- }
28
-
29
- //
30
- // Growing circle
31
- //
32
-
33
- // scss-docs-start spinner-grow-keyframes
34
- @keyframes spinner-grow {
35
- 0% {
36
- transform: scale(0);
37
- }
38
- 50% {
39
- opacity: 1;
40
- transform: none;
41
- }
42
- }
43
- // scss-docs-end spinner-grow-keyframes
44
-
45
- .spinner-grow {
46
- display: inline-block;
47
- width: $spinner-width;
48
- height: $spinner-height;
49
- vertical-align: $spinner-vertical-align;
50
- background-color: currentColor;
51
- // stylelint-disable-next-line property-disallowed-list
52
- border-radius: 50%;
53
- opacity: 0;
54
- animation: $spinner-animation-speed linear infinite spinner-grow;
55
- }
56
-
57
- .spinner-grow-sm {
58
- width: $spinner-width-sm;
59
- height: $spinner-height-sm;
60
- }
61
-
62
- @if $enable-reduced-motion {
63
- @media (prefers-reduced-motion: reduce) {
64
- .spinner-border,
65
- .spinner-grow {
66
- animation-duration: $spinner-animation-speed * 2;
67
- }
68
- }
69
- }
1
+ //
2
+ // Rotating border
3
+ //
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
17
+ @keyframes spinner-border {
18
+ to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
19
+ }
20
+ // scss-docs-end spinner-border-keyframes
21
+
22
+ .spinner-border {
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;
33
+ border-right-color: transparent;
34
+ }
35
+
36
+ .spinner-border-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
42
+ }
43
+
44
+ //
45
+ // Growing circle
46
+ //
47
+
48
+ // scss-docs-start spinner-grow-keyframes
49
+ @keyframes spinner-grow {
50
+ 0% {
51
+ transform: scale(0);
52
+ }
53
+ 50% {
54
+ opacity: 1;
55
+ transform: none;
56
+ }
57
+ }
58
+ // scss-docs-end spinner-grow-keyframes
59
+
60
+ .spinner-grow {
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;
70
+ opacity: 0;
71
+ }
72
+
73
+ .spinner-grow-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
+ }
85
+ }
package/_tables.scss CHANGED
@@ -1,155 +1,164 @@
1
- //
2
- // Basic Bootstrap table
3
- //
4
-
5
- .table {
6
- --#{$variable-prefix}table-bg: #{$table-bg};
7
- --#{$variable-prefix}table-accent-bg: #{$table-accent-bg};
8
- --#{$variable-prefix}table-striped-color: #{$table-striped-color};
9
- --#{$variable-prefix}table-striped-bg: #{$table-striped-bg};
10
- --#{$variable-prefix}table-active-color: #{$table-active-color};
11
- --#{$variable-prefix}table-active-bg: #{$table-active-bg};
12
- --#{$variable-prefix}table-hover-color: #{$table-hover-color};
13
- --#{$variable-prefix}table-hover-bg: #{$table-hover-bg};
14
-
15
- width: 100%;
16
- margin-bottom: $spacer;
17
- color: $table-color;
18
- vertical-align: $table-cell-vertical-align;
19
- border-color: $table-border-color;
20
-
21
- // Target th & td
22
- // We need the child combinator to prevent styles leaking to nested tables which doesn't have a `.table` class.
23
- // We use the universal selectors here to simplify the selector (else we would need 6 different selectors).
24
- // Another advantage is that this generates less code and makes the selector less specific making it easier to override.
25
- // stylelint-disable-next-line selector-max-universal
26
- > :not(caption) > * > * {
27
- padding: $table-cell-padding-y $table-cell-padding-x;
28
- background-color: var(--#{$variable-prefix}table-bg);
29
- border-bottom-width: $table-border-width;
30
- box-shadow: inset 0 0 0 9999px var(--#{$variable-prefix}table-accent-bg);
31
- }
32
-
33
- > tbody {
34
- vertical-align: inherit;
35
- }
36
-
37
- > thead {
38
- vertical-align: bottom;
39
- }
40
-
41
- // Highlight border color between thead, tbody and tfoot.
42
- > :not(:first-child) {
43
- border-top: (2 * $table-border-width) solid $table-group-separator-color;
44
- }
45
- }
46
-
47
-
48
- //
49
- // Change placement of captions with a class
50
- //
51
-
52
- .caption-top {
53
- caption-side: top;
54
- }
55
-
56
-
57
- //
58
- // Condensed table w/ half padding
59
- //
60
-
61
- .table-sm {
62
- // stylelint-disable-next-line selector-max-universal
63
- > :not(caption) > * > * {
64
- padding: $table-cell-padding-y-sm $table-cell-padding-x-sm;
65
- }
66
- }
67
-
68
-
69
- // Border versions
70
- //
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
77
-
78
- .table-bordered {
79
- > :not(caption) > * {
80
- border-width: $table-border-width 0;
81
-
82
- // stylelint-disable-next-line selector-max-universal
83
- > * {
84
- border-width: 0 $table-border-width;
85
- }
86
- }
87
- }
88
-
89
- .table-borderless {
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;
97
- }
98
- }
99
-
100
- // Zebra-striping
101
- //
102
- // Default zebra-stripe styles (alternating gray and transparent backgrounds)
103
-
104
- .table-striped {
105
- > tbody > tr:nth-of-type(#{$table-striped-order}) > * {
106
- --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-striped-bg);
107
- color: var(--#{$variable-prefix}table-striped-color);
108
- }
109
- }
110
-
111
- // Active table
112
- //
113
- // The `.table-active` class can be added to highlight rows or cells
114
-
115
- .table-active {
116
- --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-active-bg);
117
- color: var(--#{$variable-prefix}table-active-color);
118
- }
119
-
120
- // Hover effect
121
- //
122
- // Placed here since it has to come after the potential zebra striping
123
-
124
- .table-hover {
125
- > tbody > tr:hover > * {
126
- --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-hover-bg);
127
- color: var(--#{$variable-prefix}table-hover-color);
128
- }
129
- }
130
-
131
-
132
- // Table variants
133
- //
134
- // Table variants set the table cell backgrounds, border colors
135
- // and the colors of the striped, hovered & active tables
136
-
137
- @each $color, $value in $table-variants {
138
- @include table-variant($color, $value);
139
- }
140
-
141
- // Responsive tables
142
- //
143
- // Generate series of `.table-responsive-*` classes for configuring the screen
144
- // size of where your table will overflow.
145
-
146
- @each $breakpoint in map-keys($grid-breakpoints) {
147
- $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
148
-
149
- @include media-breakpoint-down($breakpoint) {
150
- .table-responsive#{$infix} {
151
- overflow-x: auto;
152
- -webkit-overflow-scrolling: touch;
153
- }
154
- }
155
- }
1
+ //
2
+ // Basic Bootstrap table
3
+ //
4
+
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
+
17
+ width: 100%;
18
+ margin-bottom: $spacer;
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);
33
+ }
34
+
35
+ > tbody {
36
+ vertical-align: inherit;
37
+ }
38
+
39
+ > thead {
40
+ vertical-align: bottom;
41
+ }
42
+ }
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
+
56
+
57
+ //
58
+ // Condensed table w/ half padding
59
+ //
60
+
61
+ .table-sm {
62
+ // stylelint-disable-next-line selector-max-universal
63
+ > :not(caption) > * > * {
64
+ padding: $table-cell-padding-y-sm $table-cell-padding-x-sm;
65
+ }
66
+ }
67
+
68
+
69
+ // Border versions
70
+ //
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
77
+
78
+ .table-bordered {
79
+ > :not(caption) > * {
80
+ border-width: $table-border-width 0;
81
+
82
+ // stylelint-disable-next-line selector-max-universal
83
+ > * {
84
+ border-width: 0 $table-border-width;
85
+ }
86
+ }
87
+ }
88
+
89
+ .table-borderless {
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;
97
+ }
98
+ }
99
+
100
+ // Zebra-striping
101
+ //
102
+ // Default zebra-stripe styles (alternating gray and transparent backgrounds)
103
+
104
+ // For rows
105
+ .table-striped {
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);
109
+ }
110
+ }
111
+
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);
117
+ }
118
+ }
119
+
120
+ // Active table
121
+ //
122
+ // The `.table-active` class can be added to highlight rows or cells
123
+
124
+ .table-active {
125
+ --#{$prefix}table-accent-bg: var(--#{$prefix}table-active-bg);
126
+ color: var(--#{$prefix}table-active-color);
127
+ }
128
+
129
+ // Hover effect
130
+ //
131
+ // Placed here since it has to come after the potential zebra striping
132
+
133
+ .table-hover {
134
+ > tbody > tr:hover > * {
135
+ --#{$prefix}table-accent-bg: var(--#{$prefix}table-hover-bg);
136
+ color: var(--#{$prefix}table-hover-color);
137
+ }
138
+ }
139
+
140
+
141
+ // Table variants
142
+ //
143
+ // Table variants set the table cell backgrounds, border colors
144
+ // and the colors of the striped, hovered & active tables
145
+
146
+ @each $color, $value in $table-variants {
147
+ @include table-variant($color, $value);
148
+ }
149
+
150
+ // Responsive tables
151
+ //
152
+ // Generate series of `.table-responsive-*` classes for configuring the screen
153
+ // size of where your table will overflow.
154
+
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;
162
+ }
163
+ }
164
+ }