Commit b4125748 authored by Gavin Cooper (work)'s avatar Gavin Cooper (work)
Browse files

added ability to give rows in tables status classes .success .error and .info.

parent fb290759
Showing with 201 additions and 1 deletion
+201 -1
...@@ -15,6 +15,7 @@ ...@@ -15,6 +15,7 @@
.clearfix:before, .clearfix:before,
.clearfix:after { .clearfix:after {
display: table; display: table;
line-height: 0;
content: ""; content: "";
} }
...@@ -94,6 +95,7 @@ ...@@ -94,6 +95,7 @@
.row:before, .row:before,
.row:after { .row:after {
display: table; display: table;
line-height: 0;
content: ""; content: "";
} }
.row:after { .row:after {
...@@ -187,6 +189,7 @@ ...@@ -187,6 +189,7 @@
.row-fluid:before, .row-fluid:before,
.row-fluid:after { .row-fluid:after {
display: table; display: table;
line-height: 0;
content: ""; content: "";
} }
.row-fluid:after { .row-fluid:after {
...@@ -434,6 +437,7 @@ ...@@ -434,6 +437,7 @@
.row:before, .row:before,
.row:after { .row:after {
display: table; display: table;
line-height: 0;
content: ""; content: "";
} }
.row:after { .row:after {
...@@ -527,6 +531,7 @@ ...@@ -527,6 +531,7 @@
.row-fluid:before, .row-fluid:before,
.row-fluid:after { .row-fluid:after {
display: table; display: table;
line-height: 0;
content: ""; content: "";
} }
.row-fluid:after { .row-fluid:after {
......
...@@ -130,6 +130,7 @@ textarea { ...@@ -130,6 +130,7 @@ textarea {
.clearfix:before, .clearfix:before,
.clearfix:after { .clearfix:after {
display: table; display: table;
line-height: 0;
content: ""; content: "";
} }
...@@ -181,6 +182,7 @@ a:hover { ...@@ -181,6 +182,7 @@ a:hover {
.row:before, .row:before,
.row:after { .row:after {
display: table; display: table;
line-height: 0;
content: ""; content: "";
} }
...@@ -303,6 +305,7 @@ a:hover { ...@@ -303,6 +305,7 @@ a:hover {
.row-fluid:before, .row-fluid:before,
.row-fluid:after { .row-fluid:after {
display: table; display: table;
line-height: 0;
content: ""; content: "";
} }
...@@ -515,6 +518,7 @@ a:hover { ...@@ -515,6 +518,7 @@ a:hover {
.container:before, .container:before,
.container:after { .container:after {
display: table; display: table;
line-height: 0;
content: ""; content: "";
} }
...@@ -531,6 +535,7 @@ a:hover { ...@@ -531,6 +535,7 @@ a:hover {
.container-fluid:before, .container-fluid:before,
.container-fluid:after { .container-fluid:after {
display: table; display: table;
line-height: 0;
content: ""; content: "";
} }
...@@ -1331,6 +1336,7 @@ select:focus:required:invalid:focus { ...@@ -1331,6 +1336,7 @@ select:focus:required:invalid:focus {
.form-actions:before, .form-actions:before,
.form-actions:after { .form-actions:after {
display: table; display: table;
line-height: 0;
content: ""; content: "";
} }
...@@ -1600,6 +1606,7 @@ legend + .control-group { ...@@ -1600,6 +1606,7 @@ legend + .control-group {
.form-horizontal .control-group:before, .form-horizontal .control-group:before,
.form-horizontal .control-group:after { .form-horizontal .control-group:after {
display: table; display: table;
line-height: 0;
content: ""; content: "";
} }
...@@ -1676,6 +1683,18 @@ table { ...@@ -1676,6 +1683,18 @@ table {
border-top: 2px solid #dddddd; 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 th,
.table-condensed td { .table-condensed td {
padding: 4px 5px; padding: 4px 5px;
...@@ -3468,6 +3487,7 @@ input[type="submit"].btn.btn-mini { ...@@ -3468,6 +3487,7 @@ input[type="submit"].btn.btn-mini {
.nav-tabs:after, .nav-tabs:after,
.nav-pills:after { .nav-pills:after {
display: table; display: table;
line-height: 0;
content: ""; content: "";
} }
...@@ -3641,6 +3661,7 @@ input[type="submit"].btn.btn-mini { ...@@ -3641,6 +3661,7 @@ input[type="submit"].btn.btn-mini {
.tabbable:before, .tabbable:before,
.tabbable:after { .tabbable:after {
display: table; display: table;
line-height: 0;
content: ""; content: "";
} }
...@@ -3845,6 +3866,7 @@ input[type="submit"].btn.btn-mini { ...@@ -3845,6 +3866,7 @@ input[type="submit"].btn.btn-mini {
.navbar-form:before, .navbar-form:before,
.navbar-form:after { .navbar-form:after {
display: table; display: table;
line-height: 0;
content: ""; content: "";
} }
...@@ -4373,6 +4395,7 @@ input[type="submit"].btn.btn-mini { ...@@ -4373,6 +4395,7 @@ input[type="submit"].btn.btn-mini {
.pager:before, .pager:before,
.pager:after { .pager:after {
display: table; display: table;
line-height: 0;
content: ""; content: "";
} }
...@@ -4522,6 +4545,7 @@ input[type="submit"].btn.btn-mini { ...@@ -4522,6 +4545,7 @@ input[type="submit"].btn.btn-mini {
.modal-footer:before, .modal-footer:before,
.modal-footer:after { .modal-footer:after {
display: table; display: table;
line-height: 0;
content: ""; content: "";
} }
...@@ -4814,6 +4838,7 @@ input[type="submit"].btn.btn-mini { ...@@ -4814,6 +4838,7 @@ input[type="submit"].btn.btn-mini {
.thumbnails:before, .thumbnails:before,
.thumbnails:after { .thumbnails:after {
display: table; display: table;
line-height: 0;
content: ""; content: "";
} }
......
This diff is collapsed.
...@@ -650,6 +650,85 @@ For example, <code>section</code> should be wrapped as inline. ...@@ -650,6 +650,85 @@ For example, <code>section</code> should be wrapped as inline.
<hr class="bs-docs-separator"> <hr class="bs-docs-separator">
<h2>Optional row classes</h2>
<p>Included with Bootstrap is the ability to colourize rows.</p>
<table class="table table-bordered table-striped">
<colgroup>
<col class="span1">
<col class="span7">
</colgroup>
<thead>
<tr>
<th>Class</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<code>.success</code>
</td>
<td>Indicates a successful or positive action.</td>
</tr>
<tr>
<td>
<code>.error</code>
</td>
<td>Indicates a dangerous or potentially negative action.</td>
</tr>
<tr>
<td>
<code>.info</code>
</td>
<td>Used as an alternative to the default styles.</td>
</tr>
</tbody>
</table>
<div class="bs-docs-example">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Product</th>
<th>Payment Taken</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>1</td>
<td>TB - Monthly</td>
<td>01/04/2012</td>
<td>Approved</td>
</tr>
<tr class="error">
<td>2</td>
<td>TB - Monthly</td>
<td>02/04/2012</td>
<td>Declined</td>
</tr>
<tr class="info">
<td>3</td>
<td>TB - Monthly</td>
<td>03/04/2012</td>
<td>Pending</td>
</tr>
</tbody>
</table>
</div>
<pre class="prettyprint linenums">
&lt;tr class="success"&gt;
&lt;td&gt;1&lt;/td&gt;
&lt;td&gt;TB - Monthly&lt;/td&gt;
&lt;td&gt;01/04/2012&lt;/td&gt;
&lt;td&gt;Approved&lt;/td&gt;
&lt;/tr&gt;
</pre>
<hr class="bs-docs-separator">
<h2>Supported table markup</h2> <h2>Supported table markup</h2>
<p>List of supported table HTML elements and how they should be used.</p> <p>List of supported table HTML elements and how they should be used.</p>
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
...@@ -740,6 +819,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline. ...@@ -740,6 +819,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
&lt;/table&gt; &lt;/table&gt;
</pre> </pre>
</section> </section>
......
...@@ -581,6 +581,85 @@ ...@@ -581,6 +581,85 @@
<hr class="bs-docs-separator"> <hr class="bs-docs-separator">
<h2>{{_i}}Optional row classes{{/i}}</h2>
<p>{{_i}}Included with Bootstrap is the ability to colourize rows.{{/i}}</p>
<table class="table table-bordered table-striped">
<colgroup>
<col class="span1">
<col class="span7">
</colgroup>
<thead>
<tr>
<th>{{_i}}Class{{/i}}</th>
<th>{{_i}}Description{{/i}}</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<code>.success</code>
</td>
<td>{{_i}}Indicates a successful or positive action.{{/i}}</td>
</tr>
<tr>
<td>
<code>.error</code>
</td>
<td>{{_i}}Indicates a dangerous or potentially negative action.{{/i}}</td>
</tr>
<tr>
<td>
<code>.info</code>
</td>
<td>{{_i}}Used as an alternative to the default styles.{{/i}}</td>
</tr>
</tbody>
</table>
<div class="bs-docs-example">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>{{_i}}Product{{/i}}</th>
<th>{{_i}}Payment Taken{{/i}}</th>
<th>{{_i}}Status{{/i}}</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>1</td>
<td>TB - Monthly</td>
<td>01/04/2012</td>
<td>Approved</td>
</tr>
<tr class="error">
<td>2</td>
<td>TB - Monthly</td>
<td>02/04/2012</td>
<td>Declined</td>
</tr>
<tr class="info">
<td>3</td>
<td>TB - Monthly</td>
<td>03/04/2012</td>
<td>Pending</td>
</tr>
</tbody>
</table>
</div>{{! /example }}
<pre class="prettyprint linenums">
&lt;tr class="success"&gt;
&lt;td&gt;1&lt;/td&gt;
&lt;td&gt;TB - Monthly&lt;/td&gt;
&lt;td&gt;01/04/2012&lt;/td&gt;
&lt;td&gt;Approved&lt;/td&gt;
&lt;/tr&gt;
</pre>
<hr class="bs-docs-separator">
<h2>{{_i}}Supported table markup{{/i}}</h2> <h2>{{_i}}Supported table markup{{/i}}</h2>
<p>{{_i}}List of supported table HTML elements and how they should be used.{{/i}}</p> <p>{{_i}}List of supported table HTML elements and how they should be used.{{/i}}</p>
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
...@@ -671,6 +750,7 @@ ...@@ -671,6 +750,7 @@
&lt;/table&gt; &lt;/table&gt;
</pre> </pre>
</section> </section>
......
...@@ -48,6 +48,16 @@ table { ...@@ -48,6 +48,16 @@ table {
tbody + tbody { tbody + tbody {
border-top: 2px solid @tableBorder; border-top: 2px solid @tableBorder;
} }
.success td {
background-color: @successBackground;
}
.error td {
background-color: @errorBackground;
}
.info td {
background-color: @infoBackground;
}
} }
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment