Skip to content
GitLab

Prevent nested tables style leaks

Merged Administrator requested to merge master-mc-nested-tables into master

Created by: MartijnCuppens

Prevent nested table style leaks by using children combinators and CSS custom properties:

  • Change in reboot: inherit border color and set border style to solid to make it easier to change borders. Border width is still 0, so no borders are visible by default.
  • The only way to get the colors right is by only colorizing the td and th backgrounds, therefore we need to work with CSS custom properties.
  • Stole the background image hack from @mdo in https://github.com/twbs/bootstrap/pull/30342
  • All table variants are now stored in $table-variants. This way we have more control over colorizing tables. The dark table is also a variant now.
    • $table-border-factor will determine the contrast between the background and the borders
    • $table-accent-bg-factor will determine the contrast between the background and striped rows
    • $table-hover-bg-factor will determine the contrast between the background and hovered rows
    • The color of the text will be determined by contrast-color()
  • Simplified the docs a little
    • Stored the table content in a partial, which is easier to reuse
    • Only kept the whole html for the first example, stripped some html in the other examples (inspired by the modal docs change)

TODO:

Preview: https://deploy-preview-30466--twbs-bootstrap.netlify.com/docs/4.3/content/tables/