Fix #442

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
 

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;

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>

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