diff options
| -rw-r--r-- | docs/assets/css/bootstrap.css | 6 | ||||
| -rw-r--r-- | docs/css.html | 76 | ||||
| -rw-r--r-- | less/tables.less | 5 |
3 files changed, 63 insertions, 24 deletions
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index f74f5fb02..e79177efa 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -1249,6 +1249,12 @@ table th[class^="col-"] { float: none; } +.table > tbody > tr > td.active, +.table > tbody > tr > th.active, +.table > tbody > tr.active > td { + background-color: #f5f5f5; +} + .table > tbody > tr > td.success, .table > tbody > tr > th.success, .table > tbody > tr.success > td { diff --git a/docs/css.html b/docs/css.html index b401b6593..10f2ea1dd 100644 --- a/docs/css.html +++ b/docs/css.html @@ -1048,8 +1048,8 @@ For example, <code><section></code> should be wrapped as inline. - <h2 id="tables-row-classes">Optional row classes</h2> - <p>Use contextual classes to color table rows.</p> + <h2 id="tables-row-classes">Contextual table classes</h2> + <p>Use contextual classes to color table rows or individual cells.</p> <table class="table table-bordered table-striped"> <colgroup> <col class="col-lg-1"> @@ -1066,19 +1066,25 @@ For example, <code><section></code> should be wrapped as inline. <td> <code>.success</code> </td> - <td>Indicates a successful or positive action.</td> + <td>Indicates a successful or positive action</td> </tr> <tr> <td> <code>.danger</code> </td> - <td>Indicates a dangerous or potentially negative action.</td> + <td>Indicates a dangerous or potentially negative action</td> </tr> <tr> <td> <code>.warning</code> </td> - <td>Indicates a warning that might need attention.</td> + <td>Indicates a warning that might need attention</td> + </tr> + <tr> + <td> + <code>.active</code> + </td> + <td>Applies the hover color to a particular row or cell</td> </tr> </tbody> </table> @@ -1087,42 +1093,64 @@ For example, <code><section></code> should be wrapped as inline. <thead> <tr> <th>#</th> - <th>Product</th> - <th>Payment Taken</th> - <th>Status</th> + <th>Column heading</th> + <th>Column heading</th> + <th>Column heading</th> </tr> </thead> <tbody> <tr class="success"> <td>1</td> - <td>TB - Monthly</td> - <td>01/04/2012</td> - <td>Approved</td> + <td>Column content</td> + <td>Column content</td> + <td>Column content</td> </tr> - <tr class="danger"> + <tr> <td>2</td> - <td>TB - Monthly</td> - <td>02/04/2012</td> - <td>Declined</td> + <td>Column content</td> + <td>Column content</td> + <td>Column content</td> </tr> - <tr class="warning"> + <tr class="danger"> <td>3</td> - <td>TB - Monthly</td> - <td>03/04/2012</td> - <td>Pending</td> + <td>Column content</td> + <td>Column content</td> + <td>Column content</td> + </tr> + <tr> + <td>4</td> + <td>Column content</td> + <td>Column content</td> + <td>Column content</td> + </tr> + <tr class="warning"> + <td>5</td> + <td>Column content</td> + <td>Column content</td> + <td>Column content</td> + </tr> + <tr> + <td>6</td> + <td>Column content</td> + <td>Column content</td> + <td>Column content</td> + </tr> + <tr class="active"> + <td>7</td> + <td>Column content</td> + <td>Column content</td> + <td>Column content</td> </tr> </tbody> </table> </div><!-- /example --> {% highlight html %} -... <tr class="success"> <td>1</td> - <td>TB - Monthly</td> - <td>01/04/2012</td> - <td>Approved</td> + <td>Column content</td> + <td>Column content</td> + <td>Column content</td> </tr> -... {% endhighlight %} </div> diff --git a/less/tables.less b/less/tables.less index 3a546917c..b742897c1 100644 --- a/less/tables.less +++ b/less/tables.less @@ -219,6 +219,11 @@ table { // Exact selectors below required to override .table-striped .table > tbody > tr { + > td.active, + > th.active, + &.active > td { + background-color: @table-bg-hover; + } > td.success, > th.success, &.success > td { |