Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit d7a5d92

Browse files
louismaximepitonlouismaximepiton
committedOct 31, 2023
Add color mode on Tables
1 parent fdc66bf commit d7a5d92

File tree

4 files changed

+397
-10
lines changed

4 files changed

+397
-10
lines changed
 

‎scss/_root.scss

+8
Original file line numberDiff line numberDiff line change
@@ -150,6 +150,10 @@
150150
--#{$prefix}icon-filter: none;
151151
--#{$prefix}select-indicator: #{$form-select-indicator};
152152
--#{$prefix}select-disabled-indicator: #{$form-select-disabled-indicator};
153+
--#{$prefix}table-striped-bg-factor: #{$table-striped-bg-factor};
154+
--#{$prefix}table-striped-hover-bg-factor: #{$table-striped-hover-bg-factor};
155+
--#{$prefix}table-hover-bg-factor: #{$table-hover-bg-factor};
156+
--#{$prefix}table-active-bg-factor: #{$table-active-bg-factor};
153157
// ******* End additions for dark-mode
154158
}
155159

@@ -238,6 +242,10 @@
238242
--#{$prefix}icon-filter: #{$invert-filter};
239243
--#{$prefix}select-indicator: #{$form-select-indicator-dark};
240244
--#{$prefix}select-disabled-indicator: #{$form-select-disabled-indicator-dark};
245+
--#{$prefix}table-striped-bg-factor: .135; // .2 if solid bg
246+
--#{$prefix}table-striped-hover-bg-factor: .855; // .865 if solid bg
247+
--#{$prefix}table-hover-bg-factor: .135; // .2 if solid bg
248+
--#{$prefix}table-active-bg-factor: .565; // .6 if solid bg
241249
// ******* End additions for dark-mode
242250
// scss-docs-end root-dark-mode-vars
243251
}

‎scss/_variables.scss

+7-7
Original file line numberDiff line numberDiff line change
@@ -881,28 +881,28 @@ $table-cell-vertical-align: top !default;
881881
$table-line-height: 1.25 !default; // Boosted mod
882882

883883
$table-color: var(--#{$prefix}emphasis-color) !default;
884-
$table-bg: var(--#{$prefix}body-bg) !default;
884+
$table-bg: transparent !default; // Should be `var(--#{$prefix}highlight-color)`
885885
$table-accent-bg: transparent !default;
886886

887887
$table-th-font-weight: null !default;
888888

889889
$table-striped-color: $table-color !default;
890890
$table-striped-bg-factor: .065 !default; // Boosted mod
891-
$table-striped-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-striped-bg-factor) !default;
892-
$table-striped-hover-color: $table-color !default; // Boosted mod
891+
$table-striped-bg: rgba(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}table-striped-bg-factor)) !default;
892+
$table-striped-hover-color: var(--#{$prefix}black) !default; // Boosted mod
893893
$table-striped-hover-bg-factor: .4 !default; // Boosted mod
894-
$table-striped-hover-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-striped-hover-bg-factor) !default; // Boosted mod
894+
$table-striped-hover-bg: rgba(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}table-striped-hover-bg-factor)) !default; // Boosted mod
895895
$table-variant-striped-bg-factor: .2 !default; // Boosted mod
896896
$table-variant-striped-hover-bg-factor: .865 !default; // Boosted mod
897897

898-
$table-active-color: $table-color !default;
898+
$table-active-color: var(--#{$prefix}black) !default; // Boosted mod: instead of `$table-color`
899899
$table-active-bg-factor: .135 !default; // Boosted mod
900-
$table-active-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-active-bg-factor) !default;
900+
$table-active-bg: rgba(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}table-active-bg-factor)) !default; // Boosted mod: instead of `$table-active-bg-factor`
901901
$table-variant-active-bg-factor: .6 !default; // Boosted mod
902902

903903
$table-hover-color: $table-color !default;
904904
$table-hover-bg-factor: .065 !default; // Boosted mod
905-
$table-hover-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-hover-bg-factor) !default;
905+
$table-hover-bg: rgba(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}table-hover-bg-factor)) !default; // Boosted mod: instead of `$table-hover-bg-factor`
906906
$table-variant-hover-bg-factor: .2 !default; // Boosted mod
907907

908908
$table-border-factor: .4 !default; // Boosted mod

‎site/content/docs/5.3/content/tables.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -914,7 +914,7 @@ Use SVG or PNG to display icons or thumbnails in your compact table data cell el
914914
</div>
915915
</td>
916916
<td>
917-
<img src="/docs/{{< param docs_version >}}/assets/img/thumbnail.png" alt="Thumbnail" width="30" height="30" class="me-2">
917+
<img style="filter: var(--bs-icon-filter)" src="/docs/{{< param docs_version >}}/assets/img/thumbnail.png" alt="Thumbnail" width="30" height="30" class="me-2">
918918
Cell text
919919
</td>
920920
<td>Cell text</td>
@@ -951,7 +951,7 @@ Use SVG or PNG to display icons or thumbnails in your compact table data cell el
951951
</div>
952952
</td>
953953
<td>
954-
<img src="/docs/{{< param docs_version >}}/assets/img/thumbnail.png" alt="Thumbnail" width="30" height="30" class="me-2">
954+
<img style="filter: var(--bs-icon-filter)" src="/docs/{{< param docs_version >}}/assets/img/thumbnail.png" alt="Thumbnail" width="30" height="30" class="me-2">
955955
Cell text
956956
</td>
957957
<td>Cell text</td>
@@ -1068,7 +1068,7 @@ Use SVG or PNG to display icons or thumbnails in your compact table data cell el
10681068
<table class="table table-sm table-hover align-middle has-checkbox">
10691069
...
10701070
<td>
1071-
<img src="/docs/{{< param docs_version >}}/assets/img/thumbnail.png" alt="Thumbnail" width="30" height="30" class="me-2">
1071+
<img style="filter: var(--bs-icon-filter)" src="/docs/{{< param docs_version >}}/assets/img/thumbnail.png" alt="Thumbnail" width="30" height="30" class="me-2">
10721072
Cell text
10731073
</td>
10741074
...

‎site/content/docs/5.3/dark-mode.md

+379
Original file line numberDiff line numberDiff line change
@@ -4693,3 +4693,382 @@ sitemap_exclude: true
46934693
<div class="form-check"><input class="form-check-input is-invalid" type="radio" value="" checked data-bs-theme="light"><p class="mb-0 invalid-feedback" data-bs-theme="light">Invalid feedback</p></div>
46944694
<div class="input-group quantity-selector w-100" data-bs-theme="light"><input type="number" class="form-control is-invalid" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector"><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="down"><span class="visually-hidden">Step down</span></button><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="up"><span class="visually-hidden">Step up</span></button><p class="mb-0 invalid-feedback" data-bs-theme="light">Invalid feedback</p></div>
46954695
</div>
4696+
4697+
## Content
4698+
4699+
### Tables
4700+
4701+
<h4 class="mt-3">No theme</h4>
4702+
4703+
<div class="border border-tertiary p-3">
4704+
<table class="table table-hover mb-5">
4705+
<caption>Boosted tables basic and hover look</caption>
4706+
<thead>
4707+
<tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
4708+
</thead>
4709+
<tbody>
4710+
<tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
4711+
<tr><th scope="row">2</th><td>Active</td><td class="table-active">Cell</td><td>@activeCell</td></tr>
4712+
<tr><th scope="row">3</th><td colspan="2">Random</td><td>@random</td></tr>
4713+
<tr><th scope="row">4</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
4714+
<tr><th scope="row">5</th><td>Ring of</td><td>Kerry</td><td>@ireland</td></tr>
4715+
</tbody>
4716+
</table>
4717+
<table class="table table-striped table-hover caption-bottom mb-5">
4718+
<caption>Boosted tables striped and hover look</caption>
4719+
<thead>
4720+
<tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
4721+
</thead>
4722+
<tbody>
4723+
<tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
4724+
<tr><th scope="row">2</th><td>Active</td><td class="table-active">Cell</td><td>@activeCell</td></tr>
4725+
<tr><th scope="row">3</th><td colspan="2">Random</td><td>@random</td></tr>
4726+
<tr><th scope="row">4</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
4727+
<tr><th scope="row">5</th><td>Ring of</td><td>Kerry</td><td>@ireland</td></tr>
4728+
</tbody>
4729+
</table>
4730+
<table class="table table-striped table-hover">
4731+
<caption>Boosted tables when nested</caption>
4732+
<thead>
4733+
<tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
4734+
</thead>
4735+
<tbody>
4736+
<tr class="table-active"><td colspan="4">
4737+
<table class="table table-hover mb-0">
4738+
<caption>Boosted nested table in active row</caption>
4739+
<thead>
4740+
<tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
4741+
</thead>
4742+
<tbody>
4743+
<tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
4744+
<tr><th scope="row">2</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
4745+
</tbody>
4746+
</table>
4747+
</td></tr>
4748+
<tr><td colspan="4">
4749+
<table class="table table-hover mb-0">
4750+
<caption>Boosted nested table in striped row</caption>
4751+
<thead>
4752+
<tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
4753+
</thead>
4754+
<tbody>
4755+
<tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
4756+
<tr><th scope="row">2</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
4757+
</tbody>
4758+
</table>
4759+
</td></tr>
4760+
<tr><td colspan="4">
4761+
<table class="table table-hover mb-0">
4762+
<caption>Boosted nested table in striped row</caption>
4763+
<thead>
4764+
<tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
4765+
</thead>
4766+
<tbody>
4767+
<tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
4768+
<tr><th scope="row">2</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
4769+
</tbody>
4770+
</table>
4771+
</td></tr>
4772+
</tbody>
4773+
</table>
4774+
</div>
4775+
4776+
<h4 class="mt-3">Dark theme on container</h4>
4777+
4778+
<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
4779+
<table class="table table-hover mb-5">
4780+
<caption>Boosted tables basic and hover look</caption>
4781+
<thead>
4782+
<tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
4783+
</thead>
4784+
<tbody>
4785+
<tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
4786+
<tr><th scope="row">2</th><td>Active</td><td class="table-active">Cell</td><td>@activeCell</td></tr>
4787+
<tr><th scope="row">3</th><td colspan="2">Random</td><td>@random</td></tr>
4788+
<tr><th scope="row">4</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
4789+
<tr><th scope="row">5</th><td>Ring of</td><td>Kerry</td><td>@ireland</td></tr>
4790+
</tbody>
4791+
</table>
4792+
<table class="table table-striped table-hover caption-bottom mb-5">
4793+
<caption>Boosted tables striped and hover look</caption>
4794+
<thead>
4795+
<tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
4796+
</thead>
4797+
<tbody>
4798+
<tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
4799+
<tr><th scope="row">2</th><td>Active</td><td class="table-active">Cell</td><td>@activeCell</td></tr>
4800+
<tr><th scope="row">3</th><td colspan="2">Random</td><td>@random</td></tr>
4801+
<tr><th scope="row">4</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
4802+
<tr><th scope="row">5</th><td>Ring of</td><td>Kerry</td><td>@ireland</td></tr>
4803+
</tbody>
4804+
</table>
4805+
<table class="table table-striped table-hover">
4806+
<caption>Boosted tables when nested</caption>
4807+
<thead>
4808+
<tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
4809+
</thead>
4810+
<tbody>
4811+
<tr class="table-active"><td colspan="4">
4812+
<table class="table table-hover mb-0">
4813+
<caption>Boosted nested table in active row</caption>
4814+
<thead>
4815+
<tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
4816+
</thead>
4817+
<tbody>
4818+
<tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
4819+
<tr><th scope="row">2</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
4820+
</tbody>
4821+
</table>
4822+
</td></tr>
4823+
<tr><td colspan="4">
4824+
<table class="table table-hover mb-0">
4825+
<caption>Boosted nested table in striped row</caption>
4826+
<thead>
4827+
<tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
4828+
</thead>
4829+
<tbody>
4830+
<tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
4831+
<tr><th scope="row">2</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
4832+
</tbody>
4833+
</table>
4834+
</td></tr>
4835+
<tr><td colspan="4">
4836+
<table class="table table-hover mb-0">
4837+
<caption>Boosted nested table in striped row</caption>
4838+
<thead>
4839+
<tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
4840+
</thead>
4841+
<tbody>
4842+
<tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
4843+
<tr><th scope="row">2</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
4844+
</tbody>
4845+
</table>
4846+
</td></tr>
4847+
</tbody>
4848+
</table>
4849+
</div>
4850+
4851+
<h4 class="mt-3">Light theme on container</h4>
4852+
4853+
<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
4854+
<table class="table table-hover mb-5">
4855+
<caption>Boosted tables basic and hover look</caption>
4856+
<thead>
4857+
<tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
4858+
</thead>
4859+
<tbody>
4860+
<tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
4861+
<tr><th scope="row">2</th><td>Active</td><td class="table-active">Cell</td><td>@activeCell</td></tr>
4862+
<tr><th scope="row">3</th><td colspan="2">Random</td><td>@random</td></tr>
4863+
<tr><th scope="row">4</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
4864+
<tr><th scope="row">5</th><td>Ring of</td><td>Kerry</td><td>@ireland</td></tr>
4865+
</tbody>
4866+
</table>
4867+
<table class="table table-striped table-hover caption-bottom mb-5">
4868+
<caption>Boosted tables striped and hover look</caption>
4869+
<thead>
4870+
<tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
4871+
</thead>
4872+
<tbody>
4873+
<tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
4874+
<tr><th scope="row">2</th><td>Active</td><td class="table-active">Cell</td><td>@activeCell</td></tr>
4875+
<tr><th scope="row">3</th><td colspan="2">Random</td><td>@random</td></tr>
4876+
<tr><th scope="row">4</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
4877+
<tr><th scope="row">5</th><td>Ring of</td><td>Kerry</td><td>@ireland</td></tr>
4878+
</tbody>
4879+
</table>
4880+
<table class="table table-striped table-hover">
4881+
<caption>Boosted tables when nested</caption>
4882+
<thead>
4883+
<tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
4884+
</thead>
4885+
<tbody>
4886+
<tr class="table-active"><td colspan="4">
4887+
<table class="table table-hover mb-0">
4888+
<caption>Boosted nested table in active row</caption>
4889+
<thead>
4890+
<tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
4891+
</thead>
4892+
<tbody>
4893+
<tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
4894+
<tr><th scope="row">2</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
4895+
</tbody>
4896+
</table>
4897+
</td></tr>
4898+
<tr><td colspan="4">
4899+
<table class="table table-hover mb-0">
4900+
<caption>Boosted nested table in striped row</caption>
4901+
<thead>
4902+
<tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
4903+
</thead>
4904+
<tbody>
4905+
<tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
4906+
<tr><th scope="row">2</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
4907+
</tbody>
4908+
</table>
4909+
</td></tr>
4910+
<tr><td colspan="4">
4911+
<table class="table table-hover mb-0">
4912+
<caption>Boosted nested table in striped row</caption>
4913+
<thead>
4914+
<tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
4915+
</thead>
4916+
<tbody>
4917+
<tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
4918+
<tr><th scope="row">2</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
4919+
</tbody>
4920+
</table>
4921+
</td></tr>
4922+
</tbody>
4923+
</table>
4924+
</div>
4925+
4926+
<h4 class="mt-3">Dark theme on component</h4>
4927+
4928+
<div class="border border-tertiary p-3" style="background-color: #282d55;">
4929+
<table class="table table-hover mb-5" data-bs-theme="dark">
4930+
<caption>Boosted tables basic and hover look</caption>
4931+
<thead>
4932+
<tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
4933+
</thead>
4934+
<tbody>
4935+
<tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
4936+
<tr><th scope="row">2</th><td>Active</td><td class="table-active">Cell</td><td>@activeCell</td></tr>
4937+
<tr><th scope="row">3</th><td colspan="2">Random</td><td>@random</td></tr>
4938+
<tr><th scope="row">4</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
4939+
<tr><th scope="row">5</th><td>Ring of</td><td>Kerry</td><td>@ireland</td></tr>
4940+
</tbody>
4941+
</table>
4942+
<table class="table table-striped table-hover caption-bottom mb-5" data-bs-theme="dark">
4943+
<caption>Boosted tables striped and hover look</caption>
4944+
<thead>
4945+
<tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
4946+
</thead>
4947+
<tbody>
4948+
<tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
4949+
<tr><th scope="row">2</th><td>Active</td><td class="table-active">Cell</td><td>@activeCell</td></tr>
4950+
<tr><th scope="row">3</th><td colspan="2">Random</td><td>@random</td></tr>
4951+
<tr><th scope="row">4</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
4952+
<tr><th scope="row">5</th><td>Ring of</td><td>Kerry</td><td>@ireland</td></tr>
4953+
</tbody>
4954+
</table>
4955+
<table class="table table-striped table-hover" data-bs-theme="dark">
4956+
<caption>Boosted tables when nested</caption>
4957+
<thead>
4958+
<tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
4959+
</thead>
4960+
<tbody>
4961+
<tr class="table-active"><td colspan="4">
4962+
<table class="table table-hover mb-0">
4963+
<caption>Boosted nested table in active row</caption>
4964+
<thead>
4965+
<tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
4966+
</thead>
4967+
<tbody>
4968+
<tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
4969+
<tr><th scope="row">2</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
4970+
</tbody>
4971+
</table>
4972+
</td></tr>
4973+
<tr><td colspan="4">
4974+
<table class="table table-hover mb-0">
4975+
<caption>Boosted nested table in striped row</caption>
4976+
<thead>
4977+
<tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
4978+
</thead>
4979+
<tbody>
4980+
<tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
4981+
<tr><th scope="row">2</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
4982+
</tbody>
4983+
</table>
4984+
</td></tr>
4985+
<tr><td colspan="4">
4986+
<table class="table table-hover mb-0">
4987+
<caption>Boosted nested table in striped row</caption>
4988+
<thead>
4989+
<tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
4990+
</thead>
4991+
<tbody>
4992+
<tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
4993+
<tr><th scope="row">2</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
4994+
</tbody>
4995+
</table>
4996+
</td></tr>
4997+
</tbody>
4998+
</table>
4999+
</div>
5000+
5001+
<h4 class="mt-3">Light theme on component</h4>
5002+
5003+
<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
5004+
<table class="table table-hover mb-5" data-bs-theme="light">
5005+
<caption>Boosted tables basic and hover look</caption>
5006+
<thead>
5007+
<tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
5008+
</thead>
5009+
<tbody>
5010+
<tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
5011+
<tr><th scope="row">2</th><td>Active</td><td class="table-active">Cell</td><td>@activeCell</td></tr>
5012+
<tr><th scope="row">3</th><td colspan="2">Random</td><td>@random</td></tr>
5013+
<tr><th scope="row">4</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
5014+
<tr><th scope="row">5</th><td>Ring of</td><td>Kerry</td><td>@ireland</td></tr>
5015+
</tbody>
5016+
</table>
5017+
<table class="table table-striped table-hover caption-bottom mb-5" data-bs-theme="light">
5018+
<caption>Boosted tables striped and hover look</caption>
5019+
<thead>
5020+
<tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
5021+
</thead>
5022+
<tbody>
5023+
<tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
5024+
<tr><th scope="row">2</th><td>Active</td><td class="table-active">Cell</td><td>@activeCell</td></tr>
5025+
<tr><th scope="row">3</th><td colspan="2">Random</td><td>@random</td></tr>
5026+
<tr><th scope="row">4</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
5027+
<tr><th scope="row">5</th><td>Ring of</td><td>Kerry</td><td>@ireland</td></tr>
5028+
</tbody>
5029+
</table>
5030+
<table class="table table-striped table-hover" data-bs-theme="light">
5031+
<caption>Boosted tables when nested</caption>
5032+
<thead>
5033+
<tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
5034+
</thead>
5035+
<tbody>
5036+
<tr class="table-active"><td colspan="4">
5037+
<table class="table table-hover mb-0">
5038+
<caption>Boosted nested table in active row</caption>
5039+
<thead>
5040+
<tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
5041+
</thead>
5042+
<tbody>
5043+
<tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
5044+
<tr><th scope="row">2</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
5045+
</tbody>
5046+
</table>
5047+
</td></tr>
5048+
<tr><td colspan="4">
5049+
<table class="table table-hover mb-0">
5050+
<caption>Boosted nested table in striped row</caption>
5051+
<thead>
5052+
<tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
5053+
</thead>
5054+
<tbody>
5055+
<tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
5056+
<tr><th scope="row">2</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
5057+
</tbody>
5058+
</table>
5059+
</td></tr>
5060+
<tr><td colspan="4">
5061+
<table class="table table-hover mb-0">
5062+
<caption>Boosted nested table in striped row</caption>
5063+
<thead>
5064+
<tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
5065+
</thead>
5066+
<tbody>
5067+
<tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
5068+
<tr><th scope="row">2</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
5069+
</tbody>
5070+
</table>
5071+
</td></tr>
5072+
</tbody>
5073+
</table>
5074+
</div>

0 commit comments

Comments
 (0)
Please sign in to comment.