Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(table): table border color uses hex values to fix chrome colSpan rendering issue #982

Merged
merged 1 commit into from Oct 17, 2020

Conversation

mlaursen
Copy link
Owner

@mlaursen mlaursen commented Oct 17, 2020

The table borders no longer use the rmd-divider mixin and colors due to a weird rendering issue with colSpan on tables. The workaround for this issue is to use a non-rgba value so the table now has new hex values for this:

  • $rmd-table-light-border-color: #e0e0e0
  • $rmd-table-dark-border-color: #2f2f2f
  • $rmd-table-border-color: if($rmd-light-theme, $rmd-table-light-border-color, $rmd-table-dark-border-color)

This also added a new --rmd-table-border-color CSS variable to configure this and should automatically update if you use the rmd-theme-light/rmd-theme-dark mixins.

Screenshot Comparisons

Light Theme

Light Theme (before) Light Theme (after)

Dark Theme

Dark Theme (before) Dark Theme (after)

Reproducable Example

https://codesandbox.io/s/recursing-buck-otwdt

Might need to update react-md versions to be 2.3.1 or before

…rendering issue

The table borders no longer use the `rmd-divider` mixin and colors due
to a weird rendering issue with `colSpan` on tables. The workaround for
this issue is to use a non-rgba value so the table now has new hex
values for this:

- `rmd-table-light-border-color: #e0e0e0`
- `rmd-table-dark-border-color: #2f2f2f`
- `rmd-table-border-color: if($rmd-light-theme, $rmd-table-light-border-color, $rmd-table-dark-border-color)`

This also added a new `--rmd-table-border-color` CSS variable to
configure this and should automatically update if you use the
`rmd-theme-light/rmd-theme-dark` mixins.
@mlaursen mlaursen added the bug label Oct 17, 2020
@mlaursen mlaursen merged commit 2138284 into main Oct 17, 2020
2 checks passed
@mlaursen mlaursen deleted the bugfix/chrome-table-borders branch Oct 17, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

1 participant