fix(tables): add in missing Bootstrap variant class bg-active for dark tables (#4098)

tmorehouse · web-flow · commit d9900ab12555 · 2019-09-18T11:20:04.000-03:00
diff --git a/src/_variables.scss b/src/_variables.scss
@@ -88,6 +88,10 @@ $bv-enable-table-stacked: true !default;
 $b-table-stacked-heading-width: 40% !default;
 $b-table-stacked-gap: 1rem !default;
 
+// Bootstrap v4.3 is missing the "active" variant for dark tables
+// Which translates to `bg-active`, but only for tables
+$table-dark-active-bg: $table-dark-hover-bg !default;
+
 // --- Toasts ---
 
 // Toaster defaults
diff --git a/src/components/table/_table.scss b/src/components/table/_table.scss
@@ -34,6 +34,17 @@
       caption-side: top !important;
     }
   }
+
+  // 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;
+    }
+  }
 }
 
 // --- Table sticky header styling ---

Original file line number	Diff line number	Diff line change
`@@ -34,6 +34,17 @@`
`34`	`34`	`caption-side: top !important;`
`35`	`35`	`}`
`36`	`36`	`}`
	`37`	`+`
	`38`	+ // Add in missing `bg-active` class for table tbody rows
	`39`	`+ // Bootstrap v4.3 is missing this for dark tables`
	`40`	+ // `bg-active` class cannot be applied to individual cells
	`41`	`+ > tbody > .bg-active {`
	`42`	`+ &,`
	`43`	`+ > th,`
	`44`	`+ > td {`
	`45`	`+ background-color: $table-dark-active-bg;`
	`46`	`+ }`
	`47`	`+ }`
`37`	`48`	`}`
`38`	`49`
`39`	`50`	`// --- Table sticky header styling ---`