From 56bdfd015b83a76b7b8064f9e0a45d83e0a0f37b Mon Sep 17 00:00:00 2001
From: =?utf8?q?Vladim=C3=ADr=20Vondru=C5=A1?= <mosra@centrum.cz>
Date: Sat, 18 Nov 2017 18:12:06 +0100
Subject: [PATCH] css: ability to disable the hover effect on tables.

---
 css/m-components.css        |  2 +-
 doc/css/components-test.rst | 42 +++++++++++--------------------------
 doc/css/components.rst      | 14 ++++++-------
 3 files changed, 20 insertions(+), 38 deletions(-)

diff --git a/css/m-components.css b/css/m-components.css
index 3c743d2f..387c4544 100644
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -712,7 +712,7 @@ table.m-table {
 div.m-scroll > table.m-table:last-child {
   margin-bottom: 0.0625rem;
 }
-table.m-table tbody tr:hover {
+table.m-table:not(.m-flat) tbody tr:hover {
   background-color: var(--line-color);
 }
 table.m-table th, table.m-table td {
diff --git a/doc/css/components-test.rst b/doc/css/components-test.rst
index 60a90da2..c6ce4206 100644
--- a/doc/css/components-test.rst
+++ b/doc/css/components-test.rst
@@ -200,36 +200,18 @@ Tables
 
 .. raw:: html
 
-    <table class="m-table m-center-t">
-      <caption>Table caption</caption>
-      <thead>
-        <tr>
-          <th>#</th>
-          <th>Heading</th>
-          <th>Second<br/>heading</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <th scope="row">1</th>
-          <td>Cell</td>
-          <td>Second cell</td>
-        </tr>
-      </tbody>
-      <tbody>
-        <tr>
-          <th scope="row">2</th>
-          <td>2nd row cell</td>
-          <td>2nd row 2nd cell</td>
-        </tr>
-      </tbody>
-      <tfoot>
-        <tr>
-          <th>&Sigma;</th>
-          <td>Footer</td>
-          <td>Second<br/>footer</td>
-        </tr>
-      </tfoot>
+    <table class="m-table m-flat">
+      <caption>Flat table (w/o hover effect)</caption>
+      <tr>
+        <th scope="row">1</th>
+        <td>Cell</td>
+        <td>Second cell</td>
+      </tr>
+      <tr>
+        <th scope="row">2</th>
+        <td>2nd row cell</td>
+        <td>2nd row 2nd cell</td>
+      </tr>
     </table>
     <div class="m-scroll"><table class="m-table m-fullwidth">
       <caption>Full-width table</caption>
diff --git a/doc/css/components.rst b/doc/css/components.rst
index 13b2845d..458ced1c 100644
--- a/doc/css/components.rst
+++ b/doc/css/components.rst
@@ -412,9 +412,9 @@ of surrounding text.
 
 Use :css:`.m-table` to apply styling to a table. The table is centered by
 default; rows are separated by lines, with :html:`<thead>` and :html:`<tfoot>`
-being separated by a thicker line. Rows are highlighted on hover, :html:`<th>`
-is rendered in bold, all :html:`<th>` and :html:`<td>` are aligned to left
-while table :html:`<caption>` is centered. Example table:
+being separated by a thicker line. The :html:`<th>` element is rendered in
+bold, all :html:`<th>` and :html:`<td>` are aligned to left while table
+:html:`<caption>` is centered. Example table:
 
 .. code-figure::
 
@@ -469,8 +469,6 @@ while table :html:`<caption>` is centered. Example table:
               <td>Cell</td>
               <td>Second cell</td>
             </tr>
-          </tbody>
-          <tbody>
             <tr>
               <th scope="row">2</th>
               <td>2nd row cell</td>
@@ -486,8 +484,10 @@ while table :html:`<caption>` is centered. Example table:
           </tfoot>
         </table>
 
-Similarly to other components, you can color particular :html:`<tr>` or
-:html:`<td>` elements using the color classes from above:
+Rows are highlighted on hover, if you want to disable that, put :css:`.m-flat`
+CSS class on the :html:`<table>` element. Similarly to other components, you
+can color particular :html:`<tr>` or :html:`<td>` elements using the color
+classes from above:
 
 .. raw:: html
 
-- 
2.30.2