diff options
| author | Martijn Cuppens <[email protected]> | 2020-12-11 14:49:22 +0100 |
|---|---|---|
| committer | GitHub <[email protected]> | 2020-12-11 15:49:22 +0200 |
| commit | 62eb5a323226bf61dffaa40a6350b76b46225cc1 (patch) | |
| tree | 6fc78b1476414433ea1cc1e4089c692ea60782a9 | |
| parent | 81042ff467827361359e4942e2b5637f4e49c9b9 (diff) | |
| download | bootstrap-62eb5a323226bf61dffaa40a6350b76b46225cc1.tar.xz bootstrap-62eb5a323226bf61dffaa40a6350b76b46225cc1.zip | |
Use box shadows instead of linear gradients to colorize tables (#32348)
Co-authored-by: XhmikosR <[email protected]>
| -rw-r--r-- | scss/_tables.scss | 2 | ||||
| -rw-r--r-- | site/content/docs/5.0/content/tables.md | 2 |
2 files changed, 2 insertions, 2 deletions
diff --git a/scss/_tables.scss b/scss/_tables.scss index 506c60be0..50368293a 100644 --- a/scss/_tables.scss +++ b/scss/_tables.scss @@ -25,8 +25,8 @@ > :not(caption) > * > * { padding: $table-cell-padding-y $table-cell-padding-x; background-color: var(--#{$variable-prefix}table-bg); - background-image: linear-gradient(var(--#{$variable-prefix}table-accent-bg), var(--#{$variable-prefix}table-accent-bg)); border-bottom-width: $table-border-width; + box-shadow: inset 0 0 0 9999px var(--#{$variable-prefix}table-accent-bg); } > tbody { diff --git a/site/content/docs/5.0/content/tables.md b/site/content/docs/5.0/content/tables.md index 26f213172..46679a9b0 100644 --- a/site/content/docs/5.0/content/tables.md +++ b/site/content/docs/5.0/content/tables.md @@ -213,7 +213,7 @@ Highlight a table row or cell by adding a `.table-active` class. For the accented tables ([striped rows](#striped-rows), [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 a gradient on the table cells with `background-image: linear-gradient(var(--bs-table-accent-bg), var(--bs-table-accent-bg));` to layer on top of any specified `background-color`. Since `--bs-table-accent-bg` is transparent by default, we have an invisible transparent linear gradient by default. +- 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-hover` or `.table-active` classes are added, the `--bs-table-accent-bg` is set to a semitransparent color to colorize the background. - 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. |