Fix #442

diff --git a/CHANGELOG.md b/CHANGELOG.md
index fa2c65c0607ba84fc75f8f8f44b5b12049132772..ca6031413577fb748a73970619dd9a3f71464ed7 100644 (file)
--- 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 cfd642c21865d4c3339c1e21a7e26427f5c424f6..8698a7784e23874e0f8941e0456e1c9a86fc29d2 100644 (file)
--- 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 a599aa91fbc73061cadabd1baf8c50b4fce4b174..6735ed26151c88197cbb57dc4e54848237559d83 100644 (file)
--- 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 b50c152d2aa40b1ee03930931d2c02f3b0b502c8..1cdb4c23a8953e0da19ab1f9c88bfe219ff03a67 100644 (file)
--- 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