Add options to unstripe Tables

diff --git a/docs/pages/table.md b/docs/pages/table.md
index 06b0823814dd59653cdcc0c6cf7c5b459096d104..9a7f4a52e1fb31410f56d7c4bd80783fe35aebc9 100644 (file)
--- a/docs/pages/table.md
+++ b/docs/pages/table.md
@@ -85,6 +85,48 @@ Need to spiff up the table just a tad? Just add the class `.hover` to lightly da
 
 ---
 
+## Stripes
+
+By default, table rows are striped. There's an `.unstriped` class to remove the stripes. If you change `$table-is-striped` to `false` to remove stripes from all tables, use the `.striped` class to add stripes.
+
+```html
+<table class="unstriped">
+</table>
+```
+
+<table class="unstriped hover">
+  <thead>
+    <tr>
+      <th width="200">Table Header</th>
+      <th>Table Header</th>
+      <th width="150">Table Header</th>
+      <th width="150">Table Header</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Content Goes Here</td>
+      <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
+      <td>Content Goes Here</td>
+      <td>Content Goes Here</td>
+    </tr>
+    <tr>
+      <td>Content Goes Here</td>
+      <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
+      <td>Content Goes Here</td>
+      <td>Content Goes Here</td>
+    </tr>
+    <tr>
+      <td>Content Goes Here</td>
+      <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
+      <td>Content Goes Here</td>
+      <td>Content Goes Here</td>
+    </tr>
+  </tbody>
+</table>
+
+---
+
 ## Stacked Table
 
 To stack a table on small screens, add the class `.stack`.

diff --git a/scss/components/_table.scss b/scss/components/_table.scss
index 1ab735d8698d35dc5d880eccaf786c1af7db1c84..25f0e6efe744316f359da1144dc5deb5a514e7ba 100644 (file)
--- a/scss/components/_table.scss
+++ b/scss/components/_table.scss
@@ -36,6 +36,10 @@ $table-row-hover: darken($table-background, $table-hover-scale) !default;
 /// @type List
 $table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale) !default;
 
+/// If `true`, tables are striped by default and an .unstriped class is created. If `false`, a .striped class is created.
+/// @type Boolean
+$table-is-striped: true !default;
+
 /// Default background color for striped rows.
 /// @type Color
 $table-striped-background: smart-scale($table-background, $table-color-scale) !default;
@@ -60,7 +64,34 @@ $table-head-font-color: $body-font-color !default;
 /// @type Boolean
 $show-header-for-stacked: false !default;
 
-@mixin -zf-table-children-styles($stripe: $table-stripe) {
+@mixin -zf-table-stripe($stripe: $table-stripe) {
+  tr {
+    // If stripe is set to even, darken the even rows.
+    @if $stripe == even {
+      &:nth-child(even) {
+        background-color: $table-striped-background;
+        border-bottom: 0;
+      }
+    }
+
+    // If stripe is set to odd, darken the odd rows.
+    @else if $stripe == odd {
+      &:nth-child(odd) {
+        background-color: $table-striped-background;
+      }
+    }
+  }
+}
+
+@mixin -zf-table-unstripe() {
+  tr {
+    background-color: $table-background;
+    border-bottom: 0;
+    border-bottom: $table-border;
+  }
+}
+
+@mixin -zf-table-children-styles($stripe: $table-stripe, $is-striped: $table-is-striped) {
   thead,
   tbody,
   tfoot {
@@ -96,25 +127,34 @@ $show-header-for-stacked: false !default;
 
   // Table rows
   tbody {
-    tr {
-      // If stripe is set to even, darken the even rows.
-      @if $stripe == even {
-        &:nth-child(even) {
-          background-color: $table-striped-background;
-        }
-      }
-
-      // If stripe is set to odd, darken the odd rows.
-      @else if $stripe == odd {
-        &:nth-child(odd) {
-          background-color: $table-striped-background;
-        }
-      }
+     th,
+     td {
+       padding: $table-padding;
+     }
+   }
+
+   // If tables are striped
+   @if $is-striped == true {
+     tbody {
+       @include -zf-table-stripe($stripe);
+     }
+     &.unstriped {
+       tbody {
+         @include -zf-table-unstripe();
+         background-color: Blue;
+       }
     }
+  }
 
-    th,
-    td {
-      padding: $table-padding;
+  // If tables are not striped
+  @else if $is-striped == false {
+    tbody {
+      @include -zf-table-unstripe();
+    }
+    &.striped {
+      tbody {
+        @include -zf-table-stripe($stripe);
+      }
     }
   }
 }
@@ -149,21 +189,39 @@ $show-header-for-stacked: false !default;
 /// Slightly darkens the table rows on hover.
 @mixin table-hover {
   tr {
-    //Darkens the non-striped table rows on hover.
+    // Darkens the non-striped table rows on hover.
     &:hover {
       background-color: $table-row-hover;
     }
+  }
+
+  @if $table-is-striped == true {
+    // Darkens the even striped table rows.
+    @if($table-stripe == even) {
+      &:not(.unstriped) tr:nth-of-type(even):hover {
+        background-color: $table-row-stripe-hover;
+      }
+    }
+
+    // Darkens the odd striped table rows.
+    @elseif($table-stripe == odd) {
+      &:not(.unstriped) tr:nth-of-type(odd):hover {
+        background-color: $table-row-stripe-hover;
+      }
+    }
+  }
 
-    //Darkens the even striped table rows.
+  @else if $table-is-striped == false {
+    // Darkens the even striped table rows.
     @if($table-stripe == even) {
-      &:nth-of-type(even):hover {
+      &.striped tr:nth-of-type(even):hover {
         background-color: $table-row-stripe-hover;
       }
     }
 
-    //Darkens the odd striped table rows.
+    // Darkens the odd striped table rows.
     @elseif($table-stripe == odd) {
-      &:nth-of-type(odd):hover {
+      &.striped tr:nth-of-type(odd):hover {
         background-color: $table-row-stripe-hover;
       }
     }

diff --git a/scss/settings/_settings.scss b/scss/settings/_settings.scss
index 4f6efc808e6157983a2adcec92adc0e0d2806ea3..c0a353c95a20a5da772482d979d6dd6c61d018e7 100644 (file)
--- a/scss/settings/_settings.scss
+++ b/scss/settings/_settings.scss
@@ -500,6 +500,7 @@ $table-padding: rem-calc(8 10 10);
 $table-hover-scale: 2%;
 $table-row-hover: darken($table-background, $table-hover-scale);
 $table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale);
+$table-is-striped: true;
 $table-striped-background: smart-scale($table-background, $table-color-scale);
 $table-stripe: even;
 $table-head-background: smart-scale($table-background, $table-color-scale / 2);
@@ -565,4 +566,3 @@ $topbar-submenu-background: $topbar-background;
 $topbar-title-spacing: 1rem;
 $topbar-input-width: 200px;
 $topbar-unstack-breakpoint: medium;
-