From ab286400d11e0567ca8f86409451d469a03da21f Mon Sep 17 00:00:00 2001
From: Jeremy Thomas <bbxdesign@gmail.com>
Date: Sat, 15 Apr 2017 17:08:30 +0100
Subject: [PATCH] Fix #442

---
 CHANGELOG.md                           |  1 +
 docs/css/bulma-docs.css                | 16 ++++++++++
 docs/documentation/elements/table.html | 41 +++++++++++++++++++++++++-
 sass/elements/table.sass               | 14 +++++++++
 4 files changed, 71 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index fa2c65c0..ca603141 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -25,6 +25,7 @@
 * Fix #634 is-grouped control
 * Fix #676 checkbox/radio wrapping
 * Feature #479 has-icons placement
+* Fix #442 selected table row
 
 ## 0.4.0
 
diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index cfd642c2..8698a778 100644
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -2973,6 +2973,22 @@ input[type="submit"].button {
   background-color: #fafafa;
 }
 
+.table tr.is-selected {
+  background-color: #00d1b2;
+  color: #fff;
+}
+
+.table tr.is-selected a,
+.table tr.is-selected strong {
+  color: currentColor;
+}
+
+.table tr.is-selected td,
+.table tr.is-selected th {
+  border-color: #fff;
+  color: currentColor;
+}
+
 .table thead td,
 .table thead th {
   border-width: 0 0 2px;
diff --git a/docs/documentation/elements/table.html b/docs/documentation/elements/table.html
index a599aa91..6735ed26 100644
--- a/docs/documentation/elements/table.html
+++ b/docs/documentation/elements/table.html
@@ -13,6 +13,45 @@ doc-subtab: table
 
     <hr>
 
+    <div class="content">
+      <p>You simply need to attach a single <code>.table</code> CSS class on a <code>&lt;table&gt;</code> with the following structure:</p>
+      <ul>
+        <li>
+          <code>table</code>
+          <ul>
+            <li>
+              <code>thead</code>
+            </li>
+            <li>
+              <code>tfoot</code>
+            </li>
+            <li>
+              <code>tbody</code>
+              <ul>
+                <li>
+                  <code>tr</code>
+                  <ul>
+                    <li>
+                      <code>th</code>
+                    </li>
+                    <li>
+                      <code>td</code>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </li>
+      </ul>
+      <p>
+        <span class="tag is-success">New!</span>
+        <span class="tag is-info">0.4.2</span>
+        <br>
+        You can set a table row as <strong>selected</strong> by appending the <code>is-selected</code> modifier on a <code>&lt;tr&gt;</code>
+      </p>
+    </div>
+
 {% capture table_example %}
 <table class="table">
   <thead>
@@ -86,7 +125,7 @@ doc-subtab: table
       <td>70</td>
       <td>Qualification for the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Group_stage" title="2016–17 UEFA Champions League">Champions League group stage</a></td>
     </tr>
-    <tr>
+    <tr class="is-selected">
       <th>4</th>
       <td><a href="https://en.wikipedia.org/wiki/Manchester_City_F.C." title="Manchester City F.C.">Manchester City</a></td>
       <td>38</td>
diff --git a/sass/elements/table.sass b/sass/elements/table.sass
index b50c152d..1cdb4c23 100644
--- a/sass/elements/table.sass
+++ b/sass/elements/table.sass
@@ -5,6 +5,10 @@ $table-border:                    $grey-lighter !default
 $table-head:                      $grey !default
 
 $table-row-hover-background:      $white-bis !default
+
+$table-row-active-background:     $primary !default
+$table-row-active:                $primary-invert !default
+
 $table-row-even-background:       $white-bis !default
 $table-row-even-hover-background: $white-ter !default
 
@@ -29,6 +33,16 @@ $table-row-even-hover-background: $white-ter !default
   tr
     &:hover
       background-color: $table-row-hover-background
+    &.is-selected
+      background-color: $table-row-active-background
+      color: $table-row-active
+      a,
+      strong
+        color: currentColor
+      td,
+      th
+        border-color: $table-row-active
+        color: currentColor
   thead
     td,
     th