diff --git a/scss/_tables.scss b/scss/_tables.scss index d5b3cddf213cf03422eab625875aa670c3b3e4cd..f40f29a5e2f29925e5d59c1a4daa2f3d78a551af 100644 --- a/scss/_tables.scss +++ b/scss/_tables.scss @@ -86,14 +86,27 @@ // // Placed here since it has to come after the potential zebra striping +// stylelint-disable selector-max-type .table-hover { tbody tr { &:hover { color: $table-hover-color; - background-color: $table-hover-bg; + + > th, + > td { + background-color: $table-hover-bg; + + // Set background hover color for each table color variant + @each $color, $value in $theme-colors { + &.table-#{$color} { + background-color: darken(color-level($value, $table-bg-level), 5%); + } + } + } } } } +// stylelint-enable selector-max-type // Table backgrounds diff --git a/scss/mixins/_table-row.scss b/scss/mixins/_table-row.scss index 517229e1a7297e951e5070bc716ec5c875d3888a..a299459cc24a570d55a2582628fbcdc3502a3a3b 100644 --- a/scss/mixins/_table-row.scss +++ b/scss/mixins/_table-row.scss @@ -19,21 +19,4 @@ } } } - - // Hover states for `.table-hover` - // Note: this is not available for cells or rows within `thead` or `tfoot`. - .table-hover { - $hover-background: darken($background, 5%); - - .table-#{$state} { - &:hover { - background-color: $hover-background; - - > td, - > th { - background-color: $hover-background; - } - } - } - } }