Fix #1236

.github/ISSUE_TEMPLATE.md

@@ -1,5 +1,8 @@
 <!-- PLEASE READ THE FOLLOWING INSTRUCTIONS -->
 
+<!-- Choose one of the following: -->
+This is about **Bulma | the Docs**.
+
 <!-- Is it about Bulma or about the Docs? -->
 <!-- Is it a bug/feature/question or do you need help? -->
 <!-- If it's a bug, is it a browser bug? -->

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,6 +1,12 @@
 <!-- PLEASE READ THE FOLLOWING INSTRUCTIONS -->
 <!-- DO NOT REBUILD THE CSS OUTPUT IN YOUR PR -->
 
+<!-- Choose one of the following: -->
+This is a **new feature | improvement | bugfix | documentation fix**.
+<!-- New feature? Update the CHANGELOG.md too, and eventually the Docs. -->
+<!-- Improvement? Explain how and why. -->
+<!-- Bugfix? Reference that issue as well. -->
+
 ### Proposed solution
 <!-- Which specific problem does this PR solve and how?  -->
 <!-- If it fixes a particular Issue, add "Fixes #ISSUE_NUMBER" in your title -->
@@ -9,14 +15,14 @@
 <!-- What are the drawbacks of this solution? Are there alternative ones? -->
 <!-- Think of performance, build time, usability, complexity, coupling…) -->
 
-
 ### Testing Done
 <!-- How have you confirmed this feature works? -->
+<!-- Please explain more than "Yes". -->
 
 <!-- BEFORE SUBMITTING YOUR PR, MAKE SURE TO FOLLOW THESE STEPS: -->
 <!-- 1. Pull the latest `master` branch -->
 <!-- 2. Run `npm install` to install all Bulma dependencies -->
 <!-- 3. Make sure your Sass code is compliant with the [Bulma Sass styleguide](https://github.com/jgthms/bulma/blob/master/.github/CONTRIBUTING.md#bulma-sass-styleguide) -->
-<!-- 4. If your PR fixes an issue, reference that issue -->
+<!-- 4. Make sure your PR only affects `.sass` or documentation files -->
-<!-- 5. If your PR has lots of commits, **rebase** first -->
+
-<!-- 6. Your PR should only affect `.sass` and documentation files -->
+<!-- Thanks! -->

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Bulma Changelog
 
+## 0.5.4
+
+### New features
+
+* #1236 `.table` hover effect is opt-in, by using the `.is-hoverable` modifier class
+
 ## 0.5.3
 
 ### New features

docs/css/bulma-docs.css

@@ -2591,6 +2591,26 @@ a.box:active {
   cursor: not-allowed;
 }
 
+.input::-moz-placeholder,
+.textarea::-moz-placeholder {
+  color: rgba(54, 54, 54, 0.3);
+}
+
+.input::-webkit-input-placeholder,
+.textarea::-webkit-input-placeholder {
+  color: rgba(54, 54, 54, 0.3);
+}
+
+.input:-moz-placeholder,
+.textarea:-moz-placeholder {
+  color: rgba(54, 54, 54, 0.3);
+}
+
+.input:-ms-input-placeholder,
+.textarea:-ms-input-placeholder {
+  color: rgba(54, 54, 54, 0.3);
+}
+
 .input:hover, .input.is-hovered,
 .textarea:hover,
 .textarea.is-hovered {
@@ -2931,6 +2951,22 @@ a.box:active {
   cursor: not-allowed;
 }
 
+.select select::-moz-placeholder {
+  color: rgba(54, 54, 54, 0.3);
+}
+
+.select select::-webkit-input-placeholder {
+  color: rgba(54, 54, 54, 0.3);
+}
+
+.select select:-moz-placeholder {
+  color: rgba(54, 54, 54, 0.3);
+}
+
+.select select:-ms-input-placeholder {
+  color: rgba(54, 54, 54, 0.3);
+}
+
 .select select:hover, .select select.is-hovered {
   border-color: #b5b5b5;
 }
@@ -4427,10 +4463,6 @@ a.box:active {
   text-align: left;
 }
 
-.table tr:hover {
-  background-color: #fafafa;
-}
-
 .table tr.is-selected {
   background-color: #00d1b2;
   color: #fff;
@@ -4478,6 +4510,14 @@ a.box:active {
   width: 100%;
 }
 
+.table.is-hoverable tbody tr:hover {
+  background-color: #fafafa;
+}
+
+.table.is-hoverable.is-striped tbody tr:not(.is-selected):hover {
+  background-color: whitesmoke;
+}
+
 .table.is-narrow td,
 .table.is-narrow th {
   padding: 0.25em 0.5em;
@@ -4487,10 +4527,6 @@ a.box:active {
   background-color: #fafafa;
 }
 
-.table.is-striped tbody tr:not(.is-selected):nth-child(even):hover {
-  background-color: whitesmoke;
-}
-
 .tags {
   -webkit-box-align: center;
       -ms-flex-align: center;

docs/documentation/elements/table.html

@@ -506,6 +506,47 @@ variables:
       </div>
     </div>
 
+    <div class="columns">
+      <div class="column">
+        <p>You can add a <strong>hover effect</strong> on each row</p>
+      </div>
+      <div class="column">
+        <code>table is-hoverable</code>
+      </div>
+      <div class="column is-half">
+        <table class="table is-hoverable">
+          <thead>
+            <tr>
+              <th>One</th>
+              <th>Two</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>Three</td>
+              <td>Four</td>
+            </tr>
+            <tr>
+              <td>Five</td>
+              <td>Six</td>
+            </tr>
+            <tr>
+              <td>Seven</td>
+              <td>Eight</td>
+            </tr>
+            <tr>
+              <td>Nine</td>
+              <td>Ten</td>
+            </tr>
+            <tr>
+              <td>Eleven</td>
+              <td>Twelve</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
     <div class="columns">
       <div class="column">
         <p>You can have a <strong>fullwidth</strong> table.</p>
@@ -555,7 +596,7 @@ variables:
         <code>table is-bordered is-striped is-narrow is-fullwidth</code>
       </div>
       <div class="column is-half">
-        <table class="table is-bordered is-striped is-narrow is-fullwidth">
+        <table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth">
           <thead>
             <tr>
               <th>One</th>

sass/elements/table.sass

@@ -45,8 +45,6 @@ $table-striped-row-even-hover-background-color: $white-ter !default
     color: $table-cell-heading-color
     text-align: left
   tr
-    &:hover
-      background-color: $table-row-hover-background-color
     &.is-selected
       background-color: $table-row-active-background-color
       color: $table-row-active-color
@@ -85,6 +83,16 @@ $table-striped-row-even-hover-background-color: $white-ter !default
           border-bottom-width: 1px
   &.is-fullwidth
     width: 100%
+  &.is-hoverable
+    tbody
+      tr
+        &:hover
+          background-color: $table-row-hover-background-color
+    &.is-striped
+      tbody
+        tr:not(.is-selected)
+          &:hover
+            background-color: $table-striped-row-even-hover-background-color
   &.is-narrow
     td,
     th
@@ -94,5 +102,3 @@ $table-striped-row-even-hover-background-color: $white-ter !default
       tr:not(.is-selected)
         &:nth-child(even)
           background-color: $table-striped-row-even-background-color
-          &:hover
-            background-color: $table-striped-row-even-hover-background-color