Table hover, accent, active variables for both table and table-inverse

docs/content/tables.md

@@ -488,7 +488,7 @@ Use contextual classes to color table rows or individual cells.
 </table>
 
 <div class="bd-example">
- <table class="table">
+ <table class="table table-hover">
  <thead>
  <tr>
  <th>#</th>
@@ -577,7 +577,7 @@ Use contextual classes to color table rows or individual cells.
 Regular table background variants are not available with the inverse table, however, you may use [text or background utilities]({{ site.baseurl }}/utilities/colors/) to achieve similar styles.
 
 <div class="bd-example">
- <table class="table table-inverse">
+ <table class="table table-inverse table-hover">
  <thead>
  <tr>
  <th>#</th>

scss/_tables.scss

@@ -82,6 +82,11 @@
  tbody tr {
  @include hover {
  background-color: $table-bg-hover;
+
+ td,
+ th {
+ background-color: $table-bg-hover;
+ }
  }
  }
 }
@@ -93,11 +98,11 @@
 // inheritance to nested tables.
 
 // Generate the contextual variants
-@include table-row-variant(active, $table-bg-active);
-@include table-row-variant(success, $state-success-bg);
-@include table-row-variant(info, $state-info-bg);
-@include table-row-variant(warning, $state-warning-bg);
-@include table-row-variant(danger, $state-danger-bg);
+@include table-row-variant(active, $table-bg-active, $table-bg-active-hover);
+@include table-row-variant(success, $state-success-bg, $state-success-hover-bg);
+@include table-row-variant(info, $state-info-bg, $state-info-hover-bg);
+@include table-row-variant(warning, $state-warning-bg, $state-warning-hover-bg);
+@include table-row-variant(danger, $state-danger-bg, $state-danger-hover-bg);
 
 
 // Inverse styles
@@ -131,9 +136,32 @@
  &.table-bordered {
  border: 0;
  }
-}
 
+ &.table-striped {
+ tbody tr:nth-of-type(odd) {
+ background-color: $table-bg-inverse-accent;
+ }
+ }
+
+ &.table-hover {
+ tbody tr {
+ @include hover {
+ background-color: $table-bg-inverse-hover;
+
+ td,
+ th {
+ background-color: $table-bg-inverse-hover;
+ }
+ }
+ }
+ }
+}
 
+@include table-inverse-row-variant(active, $table-bg-inverse-active, $table-bg-inverse-active-hover);
+@include table-inverse-row-variant(success, $state-success-text, $state-success-inverse-hover-bg);
+@include table-inverse-row-variant(info, $state-info-text, $state-info-inverse-hover-bg);
+@include table-inverse-row-variant(warning, $state-warning-text, $state-warning-inverse-hover-bg);
+@include table-inverse-row-variant(danger, $state-danger-text, $state-danger-inverse-hover-bg);
 
 // Responsive tables
 //

scss/_variables.scss

@@ -341,6 +341,12 @@ $table-inverse-color: $body-bg !default;
 $table-bg-accent: rgba($black,.05) !default;
 $table-bg-hover: rgba($black,.075) !default;
 $table-bg-active: $table-bg-hover !default;
+$table-bg-active-hover: darken($table-bg-hover, 5%) !default;
+
+$table-bg-inverse-accent: rgba($white, .10) !default;
+$table-bg-inverse-hover: rgba($white, .15) !default;
+$table-bg-inverse-active: $table-bg-inverse-hover !default;
+$table-bg-inverse-active-hover: lighten($table-bg-inverse-hover, 5%) !default;
 
 $table-head-bg: $gray-lighter !default;
 $table-head-color: $gray !default;
@@ -671,19 +677,27 @@ $jumbotron-bg: $gray-lighter !default;
 $state-success-text: #3c763d !default;
 $state-success-bg: #dff0d8 !default;
 $state-success-border: darken($state-success-bg, 5%) !default;
+$state-success-hover-bg: darken($state-success-bg, 5%) !default;
+$state-success-inverse-hover-bg: lighten($state-success-text, 5%) !default;
 
 $state-info-text: #31708f !default;
 $state-info-bg: #d9edf7 !default;
 $state-info-border: darken($state-info-bg, 7%) !default;
+$state-info-hover-bg: darken($state-info-bg, 5%) !default;
+$state-info-inverse-hover-bg: lighten($state-info-text, 5%) !default;
 
 $state-warning-text: #8a6d3b !default;
 $state-warning-bg: #fcf8e3 !default;
 $mark-bg: $state-warning-bg !default;
 $state-warning-border: darken($state-warning-bg, 5%) !default;
+$state-warning-hover-bg: darken($state-warning-bg, 5%) !default;
+$state-warning-inverse-hover-bg: lighten($state-warning-text, 5%) !default;
 
 $state-danger-text: #a94442 !default;
 $state-danger-bg: #f2dede !default;
 $state-danger-border: darken($state-danger-bg, 5%) !default;
+$state-danger-hover-bg: darken($state-danger-bg, 5%) !default;
+$state-danger-inverse-hover-bg: lighten($state-danger-text, 5%) !default;
 
 
 // Cards

scss/mixins/_table-row.scss

@@ -1,27 +1,44 @@
 // Tables
 
-@mixin table-row-variant($state, $background) {
- // Exact selectors below required to override `.table-striped` and prevent
- // inheritance to nested tables.
+@mixin table-row-variant($state, $background, $hover-background) {
  .table-#{$state} {
  &,
- > th,
- > td {
+ th,
+ td {
  background-color: $background;
  }
  }
 
- // 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} {
+ @include hover {
+ background-color: $hover-background;
+
+ td,
+ th {
+ background-color: $hover-background;
+ }
+ }
+ }
+ }
+}
+
+@mixin table-inverse-row-variant($state, $background, $hover-background) {
+ .table-inverse .table-#{$state} {
+ &,
+ th,
+ td {
+ background-color: $background;
+ }
+ }
 
+ .table-inverse.table-hover {
  .table-#{$state} {
  @include hover {
  background-color: $hover-background;
 
- > td,
- > th {
+ td,
+ th {
  background-color: $hover-background;
  }
  }