Merge pull request #4560 from andriijas/2.1.1-wip-table-row-warning

.warning for table tr  and .info for .control-group
This commit is contained in:
Mark Otto 2012-08-23 09:47:44 -07:00
commit 5cbb826961
5 changed files with 92 additions and 4 deletions

View File

@ -1406,6 +1406,45 @@ input[type="checkbox"][readonly] {
border-color: #468847;
}
.control-group.info > label,
.control-group.info .help-block,
.control-group.info .help-inline {
color: #3a87ad;
}
.control-group.info .checkbox,
.control-group.info .radio,
.control-group.info input,
.control-group.info select,
.control-group.info textarea {
color: #3a87ad;
}
.control-group.info input,
.control-group.info select,
.control-group.info textarea {
border-color: #3a87ad;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.control-group.info input:focus,
.control-group.info select:focus,
.control-group.info textarea:focus {
border-color: #2d6987;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3;
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3;
}
.control-group.info .input-prepend .add-on,
.control-group.info .input-append .add-on {
color: #3a87ad;
background-color: #d9edf7;
border-color: #3a87ad;
}
input:focus:required:invalid,
textarea:focus:required:invalid,
select:focus:required:invalid {
@ -2038,6 +2077,10 @@ table .span24 {
background-color: #f2dede;
}
.table tbody tr.warning td {
background-color: #fcf8e3;
}
.table tbody tr.info td {
background-color: #d9edf7;
}

View File

@ -686,6 +686,12 @@ For example, <code><section></code> should be wrapped as inlin
</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>
</tr>
<tr>
<td>
<code>.info</code>
@ -717,12 +723,18 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
<td>02/04/2012</td>
<td>Declined</td>
</tr>
<tr class="info">
<tr class="warning">
<td>3</td>
<td>TB - Monthly</td>
<td>03/04/2012</td>
<td>Pending</td>
</tr>
<tr class="info">
<td>4</td>
<td>TB - Monthly</td>
<td>04/04/2012</td>
<td>Call in to confirm</td>
</tr>
</tbody>
</table>
</div>
@ -1355,7 +1367,7 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
</pre>
<h3>Validation states</h3>
<p>Bootstrap includes validation styles for error, warning, and success messages. To use, add the appropriate class to the surrounding <code>.control-group</code>.</p>
<p>Bootstrap includes validation styles for error, warning, info, and success messages. To use, add the appropriate class to the surrounding <code>.control-group</code>.</p>
<form class="bs-docs-example form-horizontal">
<div class="control-group warning">
@ -1372,6 +1384,13 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
<span class="help-inline">Please correct the error</span>
</div>
</div>
<div class="control-group info">
<label class="control-label" for="inputError">Input with info</label>
<div class="controls">
<input type="text" id="inputError">
<span class="help-inline">Username is taken</span>
</div>
</div>
<div class="control-group success">
<label class="control-label" for="inputSuccess">Input with success</label>
<div class="controls">

View File

@ -623,6 +623,12 @@
</td>
<td>{{_i}}Indicates a dangerous or potentially negative action.{{/i}}</td>
</tr>
<tr>
<td>
<code>.warning</code>
</td>
<td>{{_i}}Indicates a warning that might need attention.{{/i}}</td>
</tr>
<tr>
<td>
<code>.info</code>
@ -654,12 +660,18 @@
<td>02/04/2012</td>
<td>Declined</td>
</tr>
<tr class="info">
<tr class="warning">
<td>3</td>
<td>TB - Monthly</td>
<td>03/04/2012</td>
<td>Pending</td>
</tr>
<tr class="info">
<td>4</td>
<td>TB - Monthly</td>
<td>04/04/2012</td>
<td>Call in to confirm</td>
</tr>
</tbody>
</table>
</div>{{! /example }}
@ -1292,7 +1304,7 @@
</pre>
<h3>{{_i}}Validation states{{/i}}</h3>
<p>{{_i}}Bootstrap includes validation styles for error, warning, and success messages. To use, add the appropriate class to the surrounding <code>.control-group</code>.{{/i}}</p>
<p>{{_i}}Bootstrap includes validation styles for error, warning, info, and success messages. To use, add the appropriate class to the surrounding <code>.control-group</code>.{{/i}}</p>
<form class="bs-docs-example form-horizontal">
<div class="control-group warning">
@ -1309,6 +1321,13 @@
<span class="help-inline">{{_i}}Please correct the error{{/i}}</span>
</div>
</div>
<div class="control-group info">
<label class="control-label" for="inputError">{{_i}}Input with info{{/i}}</label>
<div class="controls">
<input type="text" id="inputError">
<span class="help-inline">{{_i}}Username is taken{{/i}}</span>
</div>
</div>
<div class="control-group success">
<label class="control-label" for="inputSuccess">{{_i}}Input with success{{/i}}</label>
<div class="controls">

View File

@ -349,6 +349,10 @@ input[type="checkbox"][readonly] {
.control-group.success {
.formFieldState(@successText, @successText, @successBackground);
}
// Success
.control-group.info {
.formFieldState(@infoText, @infoText, @infoBackground);
}
// HTML5 invalid states
// Shares styles with the .control-group.error above

View File

@ -219,6 +219,9 @@ table {
tbody tr.error td {
background-color: @errorBackground;
}
tbody tr.warning td {
background-color: @warningBackground;
}
tbody tr.info td {
background-color: @infoBackground;
}