Overhaul tables docs and use rgba() colors for inverse tables

- Add inverse examples for all variants
- Use rgba() colors for hover and accent states for easy usage in inverse styles

2 files changed, 29 insertions, 23 deletions

diff --git a/scss/_tables.scss b/scss/_tables.scss
index c04e7c9b8a..d865884ec0 100644
--- a/scss/_tables.scss
+++ b/scss/_tables.scss
@@ -99,24 +99,9 @@
 @include table-row-variant(danger, $state-danger-bg);
 
 
-// Responsive tables
+// Inverse styles
 //
-// Wrap your tables in `.table-responsive` and we'll make them mobile friendly
-// by enabling horizontal scrolling. Only applies <768px. Everything above that
-// will display normally.
-
-.table-responsive {
-  display: block;
-  width: 100%;
-  min-height: .01%; // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837)
-  overflow-x: auto;
-
-  // TODO: find out if we need this still.
-  //
-  // border: $table-border-width solid $table-border-color;
-  // -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057
-}
-
+// Same table markup, but inverted color scheme—dark background and light text.
 
 .thead-inverse {
   th {
@@ -124,6 +109,7 @@
     background-color: $gray-dark;
   }
 }
+
 .thead-default {
   th {
     color: $gray;
@@ -135,15 +121,35 @@
   color: $gray-lighter;
   background-color: $gray-dark;
 
-  &.table-bordered {
-    border: 0;
-  }
-
   th,
   td,
   thead th {
     border-color: $gray;
   }
+
+  &.table-bordered {
+    border: 0;
+  }
+}
+
+
+
+// Responsive tables
+//
+// Wrap your tables in `.table-responsive` and we'll make them mobile friendly
+// by enabling horizontal scrolling. Only applies <768px. Everything above that
+// will display normally.
+
+.table-responsive {
+  display: block;
+  width: 100%;
+  min-height: .01%; // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837)
+  overflow-x: auto;
+
+  // TODO: find out if we need this still.
+  //
+  // border: $table-border-width solid $table-border-color;
+  // -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057
 }
 
 
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 5be9795454..a98f4edbe2 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -244,8 +244,8 @@ $table-cell-padding:            .75rem !default;
 $table-sm-cell-padding:         .3rem !default;
 
 $table-bg:                      transparent !default;
-$table-bg-accent:               #f9f9f9 !default;
-$table-bg-hover:                #f5f5f5 !default;
+$table-bg-accent:               rgba(0,0,0,.05) !default;
+$table-bg-hover:                rgba(0,0,0,.075) !default;
 $table-bg-active:               $table-bg-hover !default;
 
 $table-border-width:            $border-width !default;