Adding features to tables

.bundlewatch.config.json

@@ -30,7 +30,7 @@
     },
     {
       "path": "./dist/css/boosted.min.css",
-      "maxSize": "35.75 kB"
+      "maxSize": "36.0 kB"
     },
     {
       "path": "./dist/js/boosted.bundle.js",

scss/_tables.scss

@@ -6,7 +6,11 @@
   --#{$prefix}table-color: #{$table-color};
   --#{$prefix}table-bg: #{$table-bg};
   --#{$prefix}table-border-color: #{$table-border-color};
-  // Boosted mod: no table-accent-bg
+  --#{$prefix}table-accent-bg: #{$table-accent-bg};
+  --#{$prefix}table-striped-color: #{$table-striped-color};
+  --#{$prefix}table-striped-bg: #{$table-striped-bg};
+  --#{$prefix}table-striped-hover-color: #{$table-striped-hover-color}; // Boosted mod
+  --#{$prefix}table-striped-hover-bg: #{$table-striped-hover-bg}; // Boosted mod
   --#{$prefix}table-active-color: #{$table-active-color};
   --#{$prefix}table-active-bg: #{$table-active-bg};
   --#{$prefix}table-hover-color: #{$table-hover-color};
@@ -30,14 +34,14 @@
   // Another advantage is that this generates less code and makes the selector less specific making it easier to override.
   // stylelint-disable-next-line selector-max-universal
   > :not(caption) > * > * {
-    padding: $table-cell-padding-y $table-cell-padding-x add($table-cell-padding-y, 1px); // Boosted mod
-    line-height: $table-line-height; // Boosted mod
+    padding: $table-cell-padding-y $table-cell-padding-x add($table-cell-padding-y, 1px);
+    line-height: $table-line-height;
     background-color: var(--#{$prefix}table-bg);
     box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-accent-bg);
   }
 
   > thead > tr {
-    border-bottom-width: $table-border-width * 2;
+    border-bottom-width: calc($table-border-width * 2); // stylelint-disable-line function-disallowed-list
   }
 
   > tbody > th {
@@ -49,6 +53,10 @@
     vertical-align: inherit;
   }
 
+  > thead {
+    vertical-align: bottom;
+  }
+
   // Boosted mod
   // When using checkboxes in the first column, force width to ensure correct spacing on this column
   &.has-checkbox tr > :first-child {
@@ -59,7 +67,7 @@
 }
 
 .table-group-divider {
-  border-top: ($table-border-width * 2) solid $table-group-separator-color;
+  border-top: calc($table-border-width * 2) solid $table-group-separator-color; // stylelint-disable-line function-disallowed-list
 }
 
 //
@@ -86,7 +94,25 @@
 
 // Boosted mod: no .table-borderless
 
-// Boosted mod: no .table-striped
+// Zebra-striping
+//
+// Default zebra-stripe styles (alternating gray and transparent backgrounds)
+
+// For rows
+.table-striped {
+  > tbody > tr:nth-of-type(#{$table-striped-order}) > * {
+    --#{$prefix}table-accent-bg: var(--#{$prefix}table-striped-bg);
+    color: var(--#{$prefix}table-striped-color);
+  }
+}
+
+// For columns
+.table-striped-columns {
+  > :not(caption) > tr > :nth-child(#{$table-striped-columns-order}) {
+    --#{$prefix}table-accent-bg: var(--#{$prefix}table-striped-bg);
+    color: var(--#{$prefix}table-striped-color);
+  }
+}
 
 // Active table
 //
@@ -106,10 +132,14 @@
     --#{$prefix}table-accent-bg: var(--#{$prefix}table-hover-bg);
     color: var(--#{$prefix}table-hover-color);
   }
-}
 
-
-// Boosted mod: no table-row-variants
+  // Boosted mod
+  &.table-striped > tbody > tr:hover > * {
+    --#{$prefix}table-accent-bg: var(--#{$prefix}table-striped-hover-bg);
+    color: var(--#{$prefix}table-striped-hover-color);
+  }
+  // End mod
+}
 
 // Table variants set the table cell backgrounds, border colors
 // and the colors of the striped, hovered & active tables

scss/_variables.scss

@@ -787,39 +787,54 @@ $mark-bg-dark:                $white !default; // Boosted mod
 // Customizes the `.table` component with basic values, each used across all table variations.
 
 // scss-docs-start table-variables
-$table-cell-padding-y:      .875rem !default;
-$table-cell-padding-x:      $spacer * .5 !default;
-$table-cell-padding-y-sm:   .5625rem !default;
-$table-cell-padding-x-sm:   $table-cell-padding-x !default;
-
-$table-cell-vertical-align:   top !default;
-$table-line-height:           1.25 !default; // Boosted mod
-
-$table-color:                 var(--#{$prefix}body-color) !default;
-$table-bg:                    $body-bg !default;
-// Boosted mod: no $table-accent-bg
-
-$table-th-font-weight:        null !default;
-
-$table-active-color:          $table-color !default;
-$table-active-bg-factor:      .1 !default;
-$table-active-bg:             rgba($black, $table-active-bg-factor) !default;
-
-$table-hover-color:           $table-color !default;
-$table-hover-bg-factor:       .065 !default;
-$table-hover-bg:              rgba($black, $table-hover-bg-factor) !default;
-
-$table-border-factor:         .4 !default;
-$table-border-width:          $border-width * .5 !default; // Boosted mod
-$table-border-color:          $gray-500 !default; // Boosted mod
-
-// Boosted mod: no $table-striped-*
-
-$table-group-separator-color: currentcolor !default;
-
-$table-caption-color:         var(--#{$boosted-prefix}caption-color, $black) !default; // Boosted mod
-$table-caption-color-dark:    $white !default; // Boosted mod
-$table-caption-padding-y:     .75rem !default; // Boosted mod
+$table-cell-padding-y:                  .875rem !default; // Boosted mod
+$table-cell-padding-x:                  $spacer * .5 !default; // Boosted mod
+$table-cell-padding-y-sm:               .5625rem !default; // Boosted mod
+$table-cell-padding-x-sm:               $table-cell-padding-x !default; // Boosted mod
+
+$table-cell-vertical-align:             top !default;
+$table-line-height:                     1.25 !default; // Boosted mod
+
+$table-color:                           var(--#{$prefix}body-color) !default;
+$table-bg:                              $body-bg !default; // Boosted mod
+$table-accent-bg:                       transparent !default;
+
+$table-th-font-weight:                  null !default;
+
+$table-striped-color:                   $table-color !default;
+$table-striped-bg-factor:               .065 !default; // Boosted mod
+$table-striped-bg:                      rgba($black, $table-striped-bg-factor) !default;
+$table-striped-hover-color:             $table-color !default; // Boosted mod
+$table-striped-hover-bg-factor:         .4 !default; // Boosted mod
+$table-striped-hover-bg:                rgba($black, $table-striped-hover-bg-factor) !default; // Boosted mod
+$table-variant-striped-bg-factor:       .2 !default; // Boosted mod
+$table-variant-striped-hover-bg-factor: .865 !default; // Boosted mod
+
+$table-active-color:                    $table-color !default;
+$table-active-bg-factor:                .135 !default; // Boosted mod
+$table-active-bg:                       rgba($black, $table-active-bg-factor) !default;
+$table-variant-active-bg-factor:        .6 !default; // Boosted mod
+
+$table-hover-color:                     $table-color !default;
+$table-hover-bg-factor:                 .065 !default; // Boosted mod
+$table-hover-bg:                        rgba($black, $table-hover-bg-factor) !default;
+$table-variant-hover-bg-factor:         .2 !default; // Boosted mod
+
+$table-border-factor:                   .4 !default; // Boosted mod
+/* stylelint-disable-next-line function-disallowed-list */
+$table-border-width:                    calc(var(--#{$prefix}border-width) * .5) !default; // Boosted mod
+$table-border-color:                    var(--#{$prefix}border-color-translucent) !default; // Boosted mod
+
+$table-striped-order:                   odd !default;
+$table-striped-columns-order:           even !default;
+
+$table-group-separator-color:           currentcolor !default;
+
+$table-caption-color:                   var(--#{$boosted-prefix}caption-color, $black) !default; // Boosted mod
+$table-caption-color-dark:              $white !default; // Boosted mod
+$table-caption-padding-y:               .75rem !default; // Boosted mod
+
+// Boosted mod: no $table-bg-scale
 // scss-docs-end table-variables
 
 // scss-docs-start table-loop

scss/mixins/_table-variants.scss

@@ -1,15 +1,21 @@
-// Boosted mod: striped is not handled by table-variant()
+// Boosted mod: Variants have a different hover and striped management
 // scss-docs-start table-variant
 @mixin table-variant($state, $background) {
   .table-#{$state} {
     $color: color-contrast(opaque($body-bg, $background));
-    $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
-    $active-bg: mix($color, $background, percentage($table-active-bg-factor));
+    $hover-bg: mix($color, $background, percentage($table-variant-hover-bg-factor));// Boosted mod
+    $striped-bg: mix($color, $background, percentage($table-variant-striped-bg-factor)); // Boosted mod
+    $striped-hover-bg: mix($color, $background, percentage($table-variant-striped-hover-bg-factor)); // Boosted mod
+    $active-bg: mix($color, $background, percentage($table-variant-active-bg-factor)); // Boosted mod
     $table-border-color: mix($color, $background, percentage($table-border-factor));
 
     --#{$prefix}table-color: #{$color};
     --#{$prefix}table-bg: #{$background};
     --#{$prefix}table-border-color: #{$table-border-color};
+    --#{$prefix}table-striped-bg: #{$striped-bg};
+    --#{$prefix}table-striped-color: #{color-contrast($striped-bg)};
+    --#{$prefix}table-striped-hover-bg: #{$striped-hover-bg}; // Boosted mod
+    --#{$prefix}table-striped-hover-color: #{color-contrast($striped-hover-bg)}; // Boosted mod
     --#{$prefix}table-active-bg: #{$active-bg};
     --#{$prefix}table-active-color: #{color-contrast($active-bg)};
     --#{$prefix}table-hover-bg: #{$hover-bg};