Skip to content

Commit

Permalink
fix(tables): ensure row variant active (class table-active) takes…
Browse files Browse the repository at this point in the history
… precedence over other row variants (addresses #3008) (#4127)
  • Loading branch information
tmorehouse committed Sep 19, 2019
1 parent f079fcf commit fdb8bb6
Show file tree
Hide file tree
Showing 2 changed files with 45 additions and 4 deletions.
8 changes: 5 additions & 3 deletions src/components/table/README.md
Expand Up @@ -1532,10 +1532,12 @@ example).

The `selected-variant` can be any of the
[standard (or custom) bootstrap base color variants](/docs/reference/color-variants), or the special
[table `active` variant](/docs/reference/color-variants#table-variants).
[table `active` variant](/docs/reference/color-variants#table-variants) which takes precedence over
any specific row or cell variants.

For accessibility reasons (specifically for color blind users), it is highly recommended to always
provide some other visual means of conveying that a row is selected, as shown in the example below.
For accessibility reasons (specifically for color blind users, or users with color contrast issues),
it is highly recommended to always provide some other visual means of conveying that a row is
selected, such as shown in the example below.

```html
<template>
Expand Down
41 changes: 40 additions & 1 deletion src/components/table/_table.scss
Expand Up @@ -35,14 +35,53 @@
}
}

// Re-declare `table-active` class here so that it can take
// precedence over row variants when used on selectable rows
// Class can only be applied to rows and not individual cells
> tbody > .table-active {
&,
> th,
> td {
background-color: $table-active-bg;
}
}

// Add special hover styling for `table-active` row variant
&.table-hover > tbody > tr.table-active:hover {
td,
th {
color: $table-hover-color;
// `$table-hover-bg` default is a very transparent black
// We overlay it over the background color to achieve the
// same color effect while keeping the background solid
background-image: linear-gradient($table-hover-bg, $table-hover-bg);
background-repeat: no-repeat;
}
}

// Add in missing `bg-active` class for table tbody rows
// Bootstrap v4.3 is missing this for dark tables
// `bg-active` class cannot be applied to individual cells
> tbody > .bg-active {
&,
> th,
> td {
background-color: $table-dark-active-bg;
// Important is needed to override the standard `bg-variants`
// as the also use `!important`
background-color: $table-dark-active-bg !important;
}
}

// Add special hover styling for `bg-active` row variant (dark tables)
&.table-hover.table-dark > tbody > tr.bg-active:hover {
td,
th {
color: $table-dark-hover-color;
// `$table-dark-hover-bg` default is a very transparent white
// We overlay it over the background color to achieve the
// same color effect while keeping the background solid
background-image: linear-gradient($table-dark-hover-bg, $table-dark-hover-bg);
background-repeat: no-repeat;
}
}
}
Expand Down

0 comments on commit fdb8bb6

Please sign in to comment.