diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 4905ff7418..65e0c870fd 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -1728,6 +1728,18 @@ table {
border-top: 2px solid #dddddd;
}
+.table .success td {
+ background-color: #dff0d8;
+}
+
+.table .error td {
+ background-color: #f2dede;
+}
+
+.table .info td {
+ background-color: #d9edf7;
+}
+
.table-condensed th,
.table-condensed td {
padding: 4px 5px;
diff --git a/docs/base-css.html b/docs/base-css.html
index 46685b1129..a6b545c1d9 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -645,6 +645,85 @@ For example, <code>section</code> should be wrapped as inline.
+ Optional row classes
+ Use contextual classes to color table rows.
+
+
+
+
+
+
+
+ | Class |
+ Description |
+
+
+
+
+
+ .success
+ |
+ Indicates a successful or positive action. |
+
+
+
+ .error
+ |
+ Indicates a dangerous or potentially negative action. |
+
+
+
+ .info
+ |
+ Used as an alternative to the default styles. |
+
+
+
+
+
+
+
+ | # |
+ Product |
+ Payment Taken |
+ Status |
+
+
+
+
+ | 1 |
+ TB - Monthly |
+ 01/04/2012 |
+ Approved |
+
+
+ | 2 |
+ TB - Monthly |
+ 02/04/2012 |
+ Declined |
+
+
+ | 3 |
+ TB - Monthly |
+ 03/04/2012 |
+ Pending |
+
+
+
+
+<tr class="success">
+ <td>1</td>
+ <td>TB - Monthly</td>
+ <td>01/04/2012</td>
+ <td>Approved</td>
+</tr>
+
+
+
+
+
+
Supported table markup
List of supported table HTML elements and how they should be used.
diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index a630acfeda..c150521cc4 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -582,6 +582,87 @@
+ {{_i}}Optional row classes{{/i}}
+ {{_i}}Use contextual classes to color table rows.{{/i}}
+
+
+
+
+
+
+
+ | {{_i}}Class{{/i}} |
+ {{_i}}Description{{/i}} |
+
+
+
+
+
+ .success
+ |
+ {{_i}}Indicates a successful or positive action.{{/i}} |
+
+
+
+ .error
+ |
+ {{_i}}Indicates a dangerous or potentially negative action.{{/i}} |
+
+
+
+ .info
+ |
+ {{_i}}Used as an alternative to the default styles.{{/i}} |
+
+
+
+
+
+
+
+ | # |
+ {{_i}}Product{{/i}} |
+ {{_i}}Payment Taken{{/i}} |
+ {{_i}}Status{{/i}} |
+
+
+
+
+ | 1 |
+ TB - Monthly |
+ 01/04/2012 |
+ Approved |
+
+
+ | 2 |
+ TB - Monthly |
+ 02/04/2012 |
+ Declined |
+
+
+ | 3 |
+ TB - Monthly |
+ 03/04/2012 |
+ Pending |
+
+
+
+
+...
+ <tr class="success">
+ <td>1</td>
+ <td>TB - Monthly</td>
+ <td>01/04/2012</td>
+ <td>Approved</td>
+ </tr>
+...
+
+
+
+
+
+
{{_i}}Supported table markup{{/i}}
{{_i}}List of supported table HTML elements and how they should be used.{{/i}}
diff --git a/less/tables.less b/less/tables.less
index d0ab2f3c5b..10499a1dbe 100644
--- a/less/tables.less
+++ b/less/tables.less
@@ -48,6 +48,16 @@ table {
tbody + tbody {
border-top: 2px solid @tableBorder;
}
+
+ .success td {
+ background-color: @successBackground;
+ }
+ .error td {
+ background-color: @errorBackground;
+ }
+ .info td {
+ background-color: @infoBackground;
+ }
}