Finished up table module

Variables and variants, ready to add documentation.

dist/mini-default.css

@@ -1271,6 +1271,253 @@ footer.sticky {
   }
 }
 
+/*
+  Definitions for the responsive table component.
+*/
+/* Table module CSS variable definitions. */
+:root {
+  --table-border-color: #aaa;
+  --table-border-separator-color: #666;
+  --table-head-back-color: #e6e6e6;
+  --table-head-fore-color: #111;
+  --table-body-back-color: #f8f8f8;
+  --table-body-fore-color: #111;
+  --table-body-alt-back-color: #eee;
+}
+
+table {
+  border-collapse: separate;
+  border-spacing: 0;
+  margin: 0;
+  display: flex;
+  flex: 0 1 auto;
+  flex-flow: row wrap;
+  padding: var(--universal-padding);
+  padding-top: 0;
+}
+
+table caption {
+  font-size: 1.5rem;
+  margin: calc(2 * var(--universal-margin)) 0;
+  max-width: 100%;
+  flex: 0 0 100%;
+}
+
+table thead, table tbody {
+  display: flex;
+  flex-flow: row wrap;
+  border: 0.0625rem solid var(--table-border-color);
+}
+
+table thead {
+  z-index: 999;
+  border-radius: var(--universal-border-radius) var(--universal-border-radius) 0 0;
+  border-bottom: 0.0625rem solid var(--table-border-separator-color);
+}
+
+table tbody {
+  border-top: 0;
+  margin-top: calc(0 - var(--universal-margin));
+  border-radius: 0 0 var(--universal-border-radius) var(--universal-border-radius);
+}
+
+table tr {
+  display: flex;
+  padding: 0;
+}
+
+table th, table td {
+  padding: calc(2 * var(--universal-padding));
+}
+
+table th {
+  text-align: left;
+  background: var(--table-head-back-color);
+  color: var(--table-head-fore-color);
+}
+
+table td {
+  background: var(--table-body-back-color);
+  color: var(--table-body-fore-color);
+  border-top: 0.0625rem solid var(--table-border-color);
+}
+
+table:not(.horizontal) {
+  overflow: auto;
+  max-height: 400px;
+}
+
+table:not(.horizontal) thead, table:not(.horizontal) tbody {
+  max-width: 100%;
+  flex: 0 0 100%;
+}
+
+table:not(.horizontal) tr {
+  flex-flow: row wrap;
+  flex: 0 0 100%;
+}
+
+table:not(.horizontal) th, table:not(.horizontal) td {
+  flex: 1 0 0%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+table:not(.horizontal) thead {
+  position: sticky;
+  top: 0;
+}
+
+table:not(.horizontal) tbody tr:first-child td {
+  border-top: 0;
+}
+
+table.horizontal {
+  border: 0;
+}
+
+table.horizontal thead, table.horizontal tbody {
+  border: 0;
+  flex-flow: row nowrap;
+}
+
+table.horizontal tbody {
+  overflow: auto;
+  justify-content: space-between;
+  flex: 1 0 0;
+  margin-left: calc( 4 * var(--universal-margin));
+  padding-bottom: calc(var(--universal-padding) / 4);
+}
+
+table.horizontal tr {
+  flex-direction: column;
+  flex: 1 0 auto;
+}
+
+table.horizontal th, table.horizontal td {
+  width: 100%;
+  border: 0;
+  border-bottom: 0.0625rem solid var(--table-border-color);
+}
+
+table.horizontal th:not(:first-child), table.horizontal td:not(:first-child) {
+  border-top: 0;
+}
+
+table.horizontal th {
+  text-align: right;
+  border-left: 0.0625rem solid var(--table-border-color);
+  border-right: 0.0625rem solid var(--table-border-separator-color);
+}
+
+table.horizontal thead tr:first-child {
+  padding-left: 0;
+}
+
+table.horizontal th:first-child, table.horizontal td:first-child {
+  border-top: 0.0625rem solid var(--table-border-color);
+}
+
+table.horizontal tbody tr:last-child td {
+  border-right: 0.0625rem solid var(--table-border-color);
+}
+
+table.horizontal tbody tr:last-child td:first-child {
+  border-top-right-radius: 0.25rem;
+}
+
+table.horizontal tbody tr:last-child td:last-child {
+  border-bottom-right-radius: 0.25rem;
+}
+
+table.horizontal thead tr:first-child th:first-child {
+  border-top-left-radius: 0.25rem;
+}
+
+table.horizontal thead tr:first-child th:last-child {
+  border-bottom-left-radius: 0.25rem;
+}
+
+@media screen and (max-width: 767px) {
+  table, table.horizontal {
+    border-collapse: collapse;
+    border: 0;
+    width: 100%;
+    display: table;
+  }
+  table thead, table th, table.horizontal thead, table.horizontal th {
+    border: 0;
+    height: 1px;
+    width: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    clip: rect(0 0 0 0);
+    -webkit-clip-path: inset(100%);
+    clip-path: inset(100%);
+  }
+  table tbody, table.horizontal tbody {
+    display: table-row-group;
+  }
+  table tr, table.horizontal tr {
+    display: block;
+    border: 0.0625rem solid var(--table-border-color);
+    border-radius: var(--universal-border-radius);
+    background: #fafafa;
+    padding: var(--universal-padding);
+    margin: var(--universal-margin);
+    margin-bottom: calc(2 * var(--universal-margin));
+  }
+  table th, table td, table.horizontal th, table.horizontal td {
+    width: auto;
+  }
+  table td, table.horizontal td {
+    display: block;
+    border: 0;
+    text-align: right;
+  }
+  table td:before, table.horizontal td:before {
+    content: attr(data-label);
+    float: left;
+    font-weight: 600;
+  }
+  table th:first-child, table td:first-child, table.horizontal th:first-child, table.horizontal td:first-child {
+    border-top: 0;
+  }
+  table tbody tr:last-child td, table.horizontal tbody tr:last-child td {
+    border-right: 0;
+  }
+}
+
+:root {
+  --table-body-alt-back-color: #eee;
+}
+
+table.striped tr:nth-of-type(2n) > td {
+  background: var(--table-body-alt-back-color);
+}
+
+@media screen and (max-width: 768px) {
+  table.striped tr:nth-of-type(2n) {
+    background: var(--table-body-alt-back-color);
+  }
+}
+
+:root {
+  --table-body-hover-back-color: #90caf9;
+}
+
+table.hoverable tr:hover, table.hoverable tr:hover > td, table.hoverable tr:focus, table.hoverable tr:focus > td {
+  background: var(--table-body-hover-back-color);
+}
+
+@media screen and (max-width: 768px) {
+  table.hoverable tr:hover, table.hoverable tr:hover > td, table.hoverable tr:focus, table.hoverable tr:focus > td {
+    background: var(--table-body-hover-back-color);
+  }
+}
+
 /*
   Definitions for contextual background elements, toasts and tooltips.
 */
@@ -1680,231 +1927,3 @@ progress.tertiary {
 .spinner.tertiary {
   --spinner-fore-color: #308732;
 }
-
-/*
-  Definitions for the responsive table component.
-*/
-/*
-$table-mobile-breakpoint:     767px !default;       // Breakpoint for table mobile view.
-$table-mobile-card-spacing:   10px !default;        // Space between <tr> cards - mobile view.
-$table-mobile-card-label:     'data-label' !default;// Attribute used to replace column headers in mobile view.
-$table-not-responsive-name:   'preset' !default;    // Class name for table non-responsive view.
-$include-horizontal-table:    true !default;        // Should horizontal tables be included? (`true`/`false`)
-$table-horizontal-name:       'horizontal' !default;// Class name for table horizontal view.
-$include-scrollable-table:    true !default;        // Should scrollable tables be included? (`true`/`false`)
-$table-scrollable-name:       'scrollable' !default;// Class name for table scrollable view.
-$table-scrollable-height:     400px !default;       // Height for table scrollable view.
-$include-striped-table:       true !default;        // [Hidden flag] Should striped tables be included? (`true`/`false`)
-$table-striped-name:         'striped' !default;    // Class name for striped table.
-// External variables' defaults are used only if you import this module on its own, without the rest of the framework.
-$back-color:              white !default;           // [External variable - core] Background color for everything.
-$fore-color:              black !default;           // [External variable - core] Foreground color for everything.
-*/
-/* Table module CSS variable definitions. */
-:root {
-  --table-border-color: #aaa;
-}
-
-table {
-  border-collapse: separate;
-  border-spacing: 0;
-  margin: 0;
-  display: flex;
-  flex: 0 1 auto;
-  flex-flow: row wrap;
-  padding: var(--universal-padding);
-  padding-top: 0;
-}
-
-table caption {
-  font-size: 1.5rem;
-  margin: calc(2 * var(--universal-margin)) 0;
-  max-width: 100%;
-  flex: 0 0 100%;
-}
-
-table thead, table tbody {
-  display: flex;
-  flex-flow: row wrap;
-  border: 0.0625rem solid var(--table-border-color);
-}
-
-table thead {
-  z-index: 999;
-  border-radius: var(--universal-border-radius) var(--universal-border-radius) 0 0;
-  border-bottom: 0.0625rem solid #666;
-}
-
-table tbody {
-  border-top: 0;
-  margin-top: calc(0 - var(--universal-margin));
-  border-radius: 0 0 var(--universal-border-radius) var(--universal-border-radius);
-}
-
-table tr {
-  display: flex;
-  padding: 0;
-}
-
-table th, table td {
-  padding: calc(2 * var(--universal-padding));
-}
-
-table th {
-  text-align: left;
-  background: #e6e6e6;
-  color: #111;
-}
-
-table td {
-  background: #fafafa;
-  border-top: 0.0625rem solid var(--table-border-color);
-}
-
-table:not(.horizontal) {
-  overflow: auto;
-  max-height: 400px;
-}
-
-table:not(.horizontal) thead, table:not(.horizontal) tbody {
-  max-width: 100%;
-  flex: 0 0 100%;
-}
-
-table:not(.horizontal) tr {
-  flex-flow: row wrap;
-  flex: 0 0 100%;
-}
-
-table:not(.horizontal) th, table:not(.horizontal) td {
-  flex: 1 0 0%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-table:not(.horizontal) thead {
-  position: sticky;
-  top: 0;
-}
-
-table:not(.horizontal) tbody tr:first-child td {
-  border-top: 0;
-}
-
-table.horizontal {
-  border: 0;
-}
-
-table.horizontal thead, table.horizontal tbody {
-  border: 0;
-  flex-flow: row nowrap;
-}
-
-table.horizontal tbody {
-  overflow: auto;
-  justify-content: space-between;
-  flex: 1 0 0;
-  margin-left: calc( 4 * var(--universal-margin));
-  padding-bottom: calc(var(--universal-padding) / 4);
-}
-
-table.horizontal tr {
-  flex-direction: column;
-  flex: 1 0 auto;
-}
-
-table.horizontal th, table.horizontal td {
-  width: 100%;
-  border: 0;
-  border-bottom: 0.0625rem solid var(--table-border-color);
-}
-
-table.horizontal th:not(:first-child), table.horizontal td:not(:first-child) {
-  border-top: 0;
-}
-
-table.horizontal th {
-  text-align: right;
-  border-left: 0.0625rem solid var(--table-border-color);
-  border-right: 0.0625rem solid #666;
-}
-
-table.horizontal thead tr:first-child {
-  padding-left: 0;
-}
-
-table.horizontal th:first-child, table.horizontal td:first-child {
-  border-top: 0.0625rem solid var(--table-border-color);
-}
-
-table.horizontal tbody tr:last-child td {
-  border-right: 1px solid #aaa;
-}
-
-table.horizontal tbody tr:last-child td:first-child {
-  border-top-right-radius: 0.25rem;
-}
-
-table.horizontal tbody tr:last-child td:last-child {
-  border-bottom-right-radius: 0.25rem;
-}
-
-table.horizontal thead tr:first-child th:first-child {
-  border-top-left-radius: 0.25rem;
-}
-
-table.horizontal thead tr:first-child th:last-child {
-  border-bottom-left-radius: 0.25rem;
-}
-
-@media screen and (max-width: 767px) {
-  table, table.horizontal {
-    border-collapse: collapse;
-    border: 0;
-    width: 100%;
-    display: table;
-  }
-  table thead, table th, table.horizontal thead, table.horizontal th {
-    border: 0;
-    height: 1px;
-    width: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    clip: rect(0 0 0 0);
-    -webkit-clip-path: inset(100%);
-    clip-path: inset(100%);
-  }
-  table tbody, table.horizontal tbody {
-    display: table-row-group;
-  }
-  table tr, table.horizontal tr {
-    display: block;
-    border: 0.0625rem solid var(--table-border-color);
-    border-radius: var(--universal-border-radius);
-    background: #fafafa;
-    padding: var(--universal-padding);
-    margin: var(--universal-margin);
-    margin-bottom: calc(2 * var(--universal-margin));
-  }
-  table th, table td, table.horizontal th, table.horizontal td {
-    width: auto;
-  }
-  table td, table.horizontal td {
-    display: block;
-    border: 0;
-    text-align: right;
-  }
-  table td:before, table.horizontal td:before {
-    content: attr(data-label);
-    float: left;
-    font-weight: 600;
-  }
-  table th:first-child, table td:first-child, table.horizontal th:first-child, table.horizontal td:first-child {
-    border-top: 0;
-  }
-  table tbody tr:last-child td, table.horizontal tbody tr:last-child td {
-    border-right: 0;
-  }
-}

docs/v3/DEVLOG.md

@@ -263,3 +263,8 @@
 ## 20180103
 
 - Added `.horizontal` `table` elements, optimized for minimal size. Some variables are missing and unset but overall both normal and `.horizontal` tables should work properly now on desktop as well as on mobile.
+
+## 20180108
+
+- Updated tables, variables cleanup.
+- Added `.striped` and `.hoverable` `table` styles.

src/flavors/mini-default.scss

@@ -86,7 +86,7 @@ $button-large-margin:  var(#{$universal-margin-var});
 @include make-button-alt-size ($button-large-name, $button-large-padding, $button-large-margin);
 
 @import '../mini/navigation';
-// @import '../mini/table';
+@import '../mini/table';
 @import '../mini/contextual';
 
 /*
@@ -133,5 +133,3 @@ $spinner-donut-secondary-fore-color: #d32f2f;     // Foreground color for second
 $spinner-donut-tertiary-name:       'tertiary';   // Class name for tertiary spinner donut color variant.
 $spinner-donut-tertiary-fore-color:   #308732;    // Foreground color for tertiary spinner donut color variant.
 @include make-spinner-donut-alt-color ($spinner-donut-tertiary-name, $spinner-donut-tertiary-fore-color);
-
-@import '../mini/table';

src/flavors/mini-doc.scss

@@ -79,6 +79,7 @@ $button-large-margin:  var(#{$universal-margin-var});
 @include make-button-alt-size ($button-large-name, $button-large-padding, $button-large-margin);
 
 @import '../mini/navigation';
+@import '../mini/table';
 @import '../mini/contextual';
 
 /*

src/mini/_table.scss

@@ -1,38 +1,35 @@
 /*
   Definitions for the responsive table component.
 */
-// The tables use the common table elements and syntax.
-/*
-$table-mobile-breakpoint:     767px !default;       // Breakpoint for table mobile view.
-$table-mobile-card-spacing:   10px !default;        // Space between <tr> cards - mobile view.
-$table-mobile-card-label:     'data-label' !default;// Attribute used to replace column headers in mobile view.
-$table-not-responsive-name:   'preset' !default;    // Class name for table non-responsive view.
-$include-horizontal-table:    true !default;        // Should horizontal tables be included? (`true`/`false`)
-$table-horizontal-name:       'horizontal' !default;// Class name for table horizontal view.
-$include-scrollable-table:    true !default;        // Should scrollable tables be included? (`true`/`false`)
-$table-scrollable-name:       'scrollable' !default;// Class name for table scrollable view.
-$table-scrollable-height:     400px !default;       // Height for table scrollable view.
-$include-striped-table:       true !default;        // [Hidden flag] Should striped tables be included? (`true`/`false`)
-$table-striped-name:         'striped' !default;    // Class name for striped table.
-// External variables' defaults are used only if you import this module on its own, without the rest of the framework.
-$back-color:              white !default;           // [External variable - core] Background color for everything.
-$fore-color:              black !default;           // [External variable - core] Foreground color for everything.
-*/
-$table-mobile-breakpoint:     768px !default;
-$table-max-height: 400px !default;
-$table-caption-font-size: 1.5rem !default;
-$table-mobile-card-label: 'data-label' !default;
-$table-mobile-label-font-weight: 600 !default;
-
-$table-border-color: #aaa !default;
-$table-border-separator-color: #666 !default;
-
-$_include-horizontal-table: true !default;
-$table-horizontal-name: 'horizontal' !default;
-
+// The tables use the common table elements and syntax - <tfoot> is not supported.
+$table-mobile-breakpoint:     768px !default;       // Breakpoint for <table> mobile view.
+$table-max-height:            400px !default;       // Maximum height of <table> elements (non-horizontal).
+$table-caption-font-size:     1.5rem !default;      // Font size for <caption> elements.
+$table-mobile-card-label:  'data-label' !default;   // Attribute used to replace column headers in mobile view.
+$table-mobile-label-font-weight: 600 !default;      // Font weight for column header labels in mobile view.
+$table-border-color:           #aaa !default;       // Border color for <table> elements.
+$table-border-separator-color: #666 !default;       // Border color for the border between <thead> and <tbody>.
+$table-th-back-color:          #e6e6e6 !default;    // Background color for <th> elements.
+$table-th-fore-color:          #111 !default;       // Text color for <th> elements.
+$table-td-back-color:          #f8f8f8 !default;    // Background color for <td> elements.
+$table-td-fore-color:          #111 !default;       // Text color for <td> elements.
+$_include-horizontal-table:    true !default;       // [Hidden] Flag for horizontal tables (`true`/`false`).
+$table-horizontal-name: 'horizontal' !default;      // Class name for horizontal <table> elements.
+$_include-striped-table:       true !default;       // [Hidden] Flag for striped tables.
+$table-striped-name: 'striped' !default;            // Class name for striped <table> elements.
+$table-td-alt-back-color:      #eee !default;       // Alternative background color for <td> elements in striped tables.
+$_include-hoverable-table:     true !default;       // [Hidden] Flag for striped tables.
+$table-hoverable-name: 'hoverable' !default;        // Class name for hoverable <table> elements.
+$table-td-hover-back-color:    #90caf9 !default;    // Hover background color for <td> elements in hoverable tables.
 // CSS variable name definitions [exercise caution if modifying these]
-$table-border-color-var: '--table-border-color' !default;
+$table-border-color-var:           '--table-border-color' !default;
 $table-border-separator-color-var: '--table-border-separator-color' !default;
+$table-th-back-color-var:          '--table-head-back-color' !default;
+$table-th-fore-color-var:          '--table-head-fore-color' !default;
+$table-td-back-color-var:          '--table-body-back-color' !default;
+$table-td-fore-color-var:          '--table-body-fore-color' !default;
+$table-td-alt-back-color-var:      '--table-body-alt-back-color' !default;
+$table-td-hover-back-color-var:      '--table-body-hover-back-color' !default;
 // == Uncomment below code if this module is used on its own ==
 //
 // $universal-margin:        0.5rem !default;      // Universal margin for the most elements
@@ -57,8 +54,13 @@ $table-border-separator-color-var: '--table-border-separator-color' !default;
 :root {
   #{$table-border-color-var}: $table-border-color;
   #{$table-border-separator-color-var}: $table-border-separator-color;
+  #{$table-th-back-color-var}: $table-th-back-color;
+  #{$table-th-fore-color-var}: $table-th-fore-color;
+  #{$table-td-back-color-var}: $table-td-back-color;
+  #{$table-td-fore-color-var}: $table-td-fore-color;
+  #{$table-td-alt-back-color-var}: $table-td-alt-back-color;
 }
-// Desktop view.
+// Desktop view (scrollable vertical tables).
 table {
   border-collapse: separate;
   border-spacing: 0;
@@ -90,7 +92,7 @@ table {
   thead {
     z-index: 999;  // Fixes the visibility of the element.
     border-radius: var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}) 0 0;
-    border-bottom: $__1px solid var(#{$table-border-separator-color-var}); // var This
+    border-bottom: $__1px solid var(#{$table-border-separator-color-var});
     @if not($_include-horizontal-table) {
       position: sticky;
       top: 0;
@@ -98,7 +100,7 @@ table {
   }
   tbody {
     border-top: 0;
-    margin-top: calc(0 - var(#{$universal-margin-var})); // might be useless
+    margin-top: calc(0 - var(#{$universal-margin-var}));
     border-radius: 0 0 var(--universal-border-radius) var(--universal-border-radius);
   }
   tr {
@@ -119,11 +121,12 @@ table {
   }
   th {
     text-align: left;
-    background: #e6e6e6;        // use vars
-    color: #111;          // vars
+    background: var(#{$table-th-back-color-var});
+    color: var(#{$table-th-fore-color-var});
   }
   td {
-    background: #fafafa;     // use variables, this is a test (body)
+    background: var(#{$table-td-back-color-var});
+    color: var(#{$table-td-fore-color-var});
     border-top: $__1px solid var(#{$table-border-color-var});
   }
   @if not($_include-horizontal-table) {
@@ -132,7 +135,7 @@ table {
     }
   }
 }
-// Styling for horizntal tables
+// Styling for horizontal tables
 @if $_include-horizontal-table {
   table:not(.#{$table-horizontal-name}) {
     overflow: auto;
@@ -197,7 +200,7 @@ table {
       border-top: $__1px solid var(#{$table-border-color-var});
     }
     tbody tr:last-child td {
-      border-right: 1px solid #aaa;
+      border-right: $__1px solid var(#{$table-border-color-var});
       &:first-child{
         border-top-right-radius: 0.25rem;
       }
@@ -319,3 +322,48 @@ table {
     }
   }
 }
+// Striped tables.
+@if $_include-striped-table {
+  :root {
+    #{$table-td-alt-back-color-var} : $table-td-alt-back-color;
+  }
+  table.#{$table-striped-name} {
+    tr:nth-of-type(2n) > td {
+      background: var(#{$table-td-alt-back-color-var});
+    }
+  }
+  // Responsiveness for striped tables.
+  @media screen and (max-width: #{$table-mobile-breakpoint}) {
+    table.#{$table-striped-name} {
+      tr:nth-of-type(2n) {
+        background: var(#{$table-td-alt-back-color-var});
+      }
+    }
+  }
+}
+// Hoverable tables.
+@if $_include-striped-table {
+  :root {
+    #{$table-td-hover-back-color-var} : $table-td-hover-back-color;
+  }
+  table.#{$table-hoverable-name} {
+    tr {
+      &:hover, &:focus {
+        &, & > td {
+          background: var(#{$table-td-hover-back-color-var});
+        }
+      }
+    }
+  }
+  @media screen and (max-width: #{$table-mobile-breakpoint}) {
+    table.#{$table-hoverable-name} {
+      tr {
+        &:hover, &:focus {
+          &, & > td {
+            background: var(#{$table-td-hover-back-color-var});
+          }
+        }
+      }
+    }
+  }
+}