added ability to give rows in tables status classes .success .error and .info.
This commit is contained in:
Gavin Cooper (work)
parent
fb29075926
commit
b4125748b0
|
|
@ -15,6 +15,7 @@
|
|||
.clearfix:before,
|
||||
.clearfix:after {
|
||||
display: table;
|
||||
line-height: 0;
|
||||
content: "";
|
||||
}
|
||||
|
||||
|
|
@ -94,6 +95,7 @@
|
|||
.row:before,
|
||||
.row:after {
|
||||
display: table;
|
||||
line-height: 0;
|
||||
content: "";
|
||||
}
|
||||
.row:after {
|
||||
|
|
@ -187,6 +189,7 @@
|
|||
.row-fluid:before,
|
||||
.row-fluid:after {
|
||||
display: table;
|
||||
line-height: 0;
|
||||
content: "";
|
||||
}
|
||||
.row-fluid:after {
|
||||
|
|
@ -434,6 +437,7 @@
|
|||
.row:before,
|
||||
.row:after {
|
||||
display: table;
|
||||
line-height: 0;
|
||||
content: "";
|
||||
}
|
||||
.row:after {
|
||||
|
|
@ -527,6 +531,7 @@
|
|||
.row-fluid:before,
|
||||
.row-fluid:after {
|
||||
display: table;
|
||||
line-height: 0;
|
||||
content: "";
|
||||
}
|
||||
.row-fluid:after {
|
||||
|
|
|
|||
|
|
@ -130,6 +130,7 @@ textarea {
|
|||
.clearfix:before,
|
||||
.clearfix:after {
|
||||
display: table;
|
||||
line-height: 0;
|
||||
content: "";
|
||||
}
|
||||
|
||||
|
|
@ -181,6 +182,7 @@ a:hover {
|
|||
.row:before,
|
||||
.row:after {
|
||||
display: table;
|
||||
line-height: 0;
|
||||
content: "";
|
||||
}
|
||||
|
||||
|
|
@ -303,6 +305,7 @@ a:hover {
|
|||
.row-fluid:before,
|
||||
.row-fluid:after {
|
||||
display: table;
|
||||
line-height: 0;
|
||||
content: "";
|
||||
}
|
||||
|
||||
|
|
@ -515,6 +518,7 @@ a:hover {
|
|||
.container:before,
|
||||
.container:after {
|
||||
display: table;
|
||||
line-height: 0;
|
||||
content: "";
|
||||
}
|
||||
|
||||
|
|
@ -531,6 +535,7 @@ a:hover {
|
|||
.container-fluid:before,
|
||||
.container-fluid:after {
|
||||
display: table;
|
||||
line-height: 0;
|
||||
content: "";
|
||||
}
|
||||
|
||||
|
|
@ -1331,6 +1336,7 @@ select:focus:required:invalid:focus {
|
|||
.form-actions:before,
|
||||
.form-actions:after {
|
||||
display: table;
|
||||
line-height: 0;
|
||||
content: "";
|
||||
}
|
||||
|
||||
|
|
@ -1600,6 +1606,7 @@ legend + .control-group {
|
|||
.form-horizontal .control-group:before,
|
||||
.form-horizontal .control-group:after {
|
||||
display: table;
|
||||
line-height: 0;
|
||||
content: "";
|
||||
}
|
||||
|
||||
|
|
@ -1676,6 +1683,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;
|
||||
|
|
@ -3468,6 +3487,7 @@ input[type="submit"].btn.btn-mini {
|
|||
.nav-tabs:after,
|
||||
.nav-pills:after {
|
||||
display: table;
|
||||
line-height: 0;
|
||||
content: "";
|
||||
}
|
||||
|
||||
|
|
@ -3641,6 +3661,7 @@ input[type="submit"].btn.btn-mini {
|
|||
.tabbable:before,
|
||||
.tabbable:after {
|
||||
display: table;
|
||||
line-height: 0;
|
||||
content: "";
|
||||
}
|
||||
|
||||
|
|
@ -3845,6 +3866,7 @@ input[type="submit"].btn.btn-mini {
|
|||
.navbar-form:before,
|
||||
.navbar-form:after {
|
||||
display: table;
|
||||
line-height: 0;
|
||||
content: "";
|
||||
}
|
||||
|
||||
|
|
@ -4373,6 +4395,7 @@ input[type="submit"].btn.btn-mini {
|
|||
.pager:before,
|
||||
.pager:after {
|
||||
display: table;
|
||||
line-height: 0;
|
||||
content: "";
|
||||
}
|
||||
|
||||
|
|
@ -4522,6 +4545,7 @@ input[type="submit"].btn.btn-mini {
|
|||
.modal-footer:before,
|
||||
.modal-footer:after {
|
||||
display: table;
|
||||
line-height: 0;
|
||||
content: "";
|
||||
}
|
||||
|
||||
|
|
@ -4814,6 +4838,7 @@ input[type="submit"].btn.btn-mini {
|
|||
.thumbnails:before,
|
||||
.thumbnails:after {
|
||||
display: table;
|
||||
line-height: 0;
|
||||
content: "";
|
||||
}
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -650,6 +650,85 @@ For example, <code>section</code> should be wrapped as inline.
|
|||
<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">
|
||||
<tr class="success">
|
||||
<td>1</td>
|
||||
<td>TB - Monthly</td>
|
||||
<td>01/04/2012</td>
|
||||
<td>Approved</td>
|
||||
</tr>
|
||||
</pre>
|
||||
|
||||
|
||||
<hr class="bs-docs-separator">
|
||||
|
||||
|
||||
<h2>Supported table markup</h2>
|
||||
<p>List of supported table HTML elements and how they should be used.</p>
|
||||
<table class="table table-bordered table-striped">
|
||||
|
|
@ -740,6 +819,7 @@ For example, <code>section</code> should be wrapped as inline.
|
|||
</table>
|
||||
</pre>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -581,6 +581,85 @@
|
|||
<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">
|
||||
<tr class="success">
|
||||
<td>1</td>
|
||||
<td>TB - Monthly</td>
|
||||
<td>01/04/2012</td>
|
||||
<td>Approved</td>
|
||||
</tr>
|
||||
</pre>
|
||||
|
||||
|
||||
<hr class="bs-docs-separator">
|
||||
|
||||
|
||||
<h2>{{_i}}Supported table markup{{/i}}</h2>
|
||||
<p>{{_i}}List of supported table HTML elements and how they should be used.{{/i}}</p>
|
||||
<table class="table table-bordered table-striped">
|
||||
|
|
@ -671,6 +750,7 @@
|
|||
</table>
|
||||
</pre>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue