diff options
Diffstat (limited to '')
| -rw-r--r-- | site/content/docs/5.3/content/tables.md (renamed from site/content/docs/5.2/content/tables.md) | 18 |
1 files changed, 11 insertions, 7 deletions
diff --git a/site/content/docs/5.2/content/tables.md b/site/content/docs/5.3/content/tables.md index 577e3ef..b75b233 100644 --- a/site/content/docs/5.2/content/tables.md +++ b/site/content/docs/5.3/content/tables.md @@ -18,6 +18,10 @@ Using the most basic table markup, here's how `.table`-based tables look in Boot Use contextual classes to color tables, table rows or individual cells. +{{< callout info >}} +**Heads up!** Because of the more complicated CSS used to generate our table variants, they most likely won't see color mode adaptive styling until v6. +{{< /callout >}} + <div class="bd-example"> <table class="table"> <thead> @@ -69,7 +73,7 @@ Use contextual classes to color tables, table rows or individual cells. {{< /highlight >}} {{< callout info >}} -{{< partial "callout-warning-color-assistive-technologies.md" >}} +{{< partial "callouts/warning-color-assistive-technologies.md" >}} {{< /callout >}} ## Accented tables @@ -223,8 +227,8 @@ Highlight a table row or cell by adding a `.table-active` class. For the accented tables ([striped rows](#striped-rows), [striped columns](#striped-columns), [hoverable rows](#hoverable-rows), and [active tables](#active-tables)), we used some techniques to make these effects work for all our [table variants](#variants): - We start by setting the background of a table cell with the `--bs-table-bg` custom property. All table variants then set that custom property to colorize the table cells. This way, we don't get into trouble if semi-transparent colors are used as table backgrounds. -- Then we add an inset box shadow on the table cells with `box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);` to layer on top of any specified `background-color`. Because we use a huge spread and no blur, the color will be monotone. Since `--bs-table-accent-bg` is unset by default, we don't have a default box shadow. -- When either `.table-striped`, `.table-striped-columns`, `.table-hover` or `.table-active` classes are added, the `--bs-table-accent-bg` is set to a semitransparent color to colorize the background. +- Then we add an inset box shadow on the table cells with `box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));` to layer on top of any specified `background-color`. It uses custom cascade to override the `box-shadow`, regardless the CSS specificity. Because we use a huge spread and no blur, the color will be monotone. Since `--bs-table-accent-bg` is set to `transparent` by default, we don't have a default box shadow. +- When either `.table-striped`, `.table-striped-columns`, `.table-hover` or `.table-active` classes are added, either `--bs-table-bg-type` or `--bs-table-bg-state` (by default set to `initial`) are set to a semitransparent color (`--bs-table-striped-bg`, `--bs-table-active-bg` or `--bs-table-hover-bg`) to colorize the background and override default `--bs-table-accent-bg`. - For each table variant, we generate a `--bs-table-accent-bg` color with the highest contrast depending on that color. For example, the accent color for `.table-primary` is darker while `.table-dark` has a lighter accent color. - Text and border colors are generated the same way, and their colors are inherited by default. @@ -423,7 +427,7 @@ Border styles, active styles, and table variants are not inherited by nested tab </div> ```html -<table class="table table-striped"> +<table class="table table-striped table-bordered"> <thead> ... </thead> @@ -819,13 +823,13 @@ Use `.table-responsive{-sm|-md|-lg|-xl|-xxl}` as needed to create responsive tab {{< /tables.inline >}} {{< /highlight >}} -## Sass +## CSS -### Variables +### Sass variables {{< scss-docs name="table-variables" file="scss/_variables.scss" >}} -### Loop +### Sass loops {{< scss-docs name="table-loop" file="scss/_variables.scss" >}} |