Skip to content

B
bootstrap
Commit 5cbb8269 authored by Mark Otto's avatar Mark Otto
Browse files
Options

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

.warning for table tr  and .info for .control-group
parents be64955e a9764c34
Show whitespace changes
Inline Side-by-side
Showing with 92 additions and 4 deletions
docs/assets/css/bootstrap.css
View file @ 5cbb8269
...@@ -1406,6 +1406,45 @@ input[type="checkbox"][readonly] { ...@@ -1406,6 +1406,45 @@ input[type="checkbox"][readonly] {
border-color: #468847; 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, input:focus:required:invalid,
textarea:focus:required:invalid, textarea:focus:required:invalid,
select:focus:required:invalid { select:focus:required:invalid {
...@@ -2038,6 +2077,10 @@ table .span24 { ...@@ -2038,6 +2077,10 @@ table .span24 {
background-color: #f2dede; background-color: #f2dede;
} }
.table tbody tr.warning td {
background-color: #fcf8e3;
}
.table tbody tr.info td { .table tbody tr.info td {
background-color: #d9edf7; background-color: #d9edf7;
} }
......
docs/base-css.html
View file @ 5cbb8269
...@@ -686,6 +686,12 @@ For example, <code><section></code> should be wrapped as inlin ...@@ -686,6 +686,12 @@ For example, <code><section></code> should be wrapped as inlin
</td> </td>
<td>Indicates a dangerous or potentially negative action.</td> <td>Indicates a dangerous or potentially negative action.</td>
</tr> </tr>
<tr>
<td>
<code>.warning</code>
</td>
<td>Indicates a warning that might need attention.</td>
</tr>
<tr> <tr>
<td> <td>
<code>.info</code> <code>.info</code>
...@@ -717,12 +723,18 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin ...@@ -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>02/04/2012</td>
<td>Declined</td> <td>Declined</td>
</tr> </tr>
<tr class="info"> <tr class="warning">
<td>3</td> <td>3</td>
<td>TB - Monthly</td> <td>TB - Monthly</td>
<td>03/04/2012</td> <td>03/04/2012</td>
<td>Pending</td> <td>Pending</td>
</tr> </tr>
<tr class="info">
<td>4</td>
<td>TB - Monthly</td>
<td>04/04/2012</td>
<td>Call in to confirm</td>
</tr>
</tbody> </tbody>
</table> </table>
</div> </div>
...@@ -1355,7 +1367,7 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin ...@@ -1355,7 +1367,7 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
</pre> </pre>
<h3>Validation states</h3> <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"> <form class="bs-docs-example form-horizontal">
<div class="control-group warning"> <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 ...@@ -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> <span class="help-inline">Please correct the error</span>
</div> </div>
</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"> <div class="control-group success">
<label class="control-label" for="inputSuccess">Input with success</label> <label class="control-label" for="inputSuccess">Input with success</label>
<div class="controls"> <div class="controls">
......
docs/templates/pages/base-css.mustache
View file @ 5cbb8269
...@@ -623,6 +623,12 @@ ...@@ -623,6 +623,12 @@
</td> </td>
<td>{{_i}}Indicates a dangerous or potentially negative action.{{/i}}</td> <td>{{_i}}Indicates a dangerous or potentially negative action.{{/i}}</td>
</tr> </tr>
<tr>
<td>
<code>.warning</code>
</td>
<td>{{_i}}Indicates a warning that might need attention.{{/i}}</td>
</tr>
<tr> <tr>
<td> <td>
<code>.info</code> <code>.info</code>
...@@ -654,12 +660,18 @@ ...@@ -654,12 +660,18 @@
<td>02/04/2012</td> <td>02/04/2012</td>
<td>Declined</td> <td>Declined</td>
</tr> </tr>
<tr class="info"> <tr class="warning">
<td>3</td> <td>3</td>
<td>TB - Monthly</td> <td>TB - Monthly</td>
<td>03/04/2012</td> <td>03/04/2012</td>
<td>Pending</td> <td>Pending</td>
</tr> </tr>
<tr class="info">
<td>4</td>
<td>TB - Monthly</td>
<td>04/04/2012</td>
<td>Call in to confirm</td>
</tr>
</tbody> </tbody>
</table> </table>
</div>{{! /example }} </div>{{! /example }}
...@@ -1292,7 +1304,7 @@ ...@@ -1292,7 +1304,7 @@
</pre> </pre>
<h3>{{_i}}Validation states{{/i}}</h3> <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"> <form class="bs-docs-example form-horizontal">
<div class="control-group warning"> <div class="control-group warning">
...@@ -1309,6 +1321,13 @@ ...@@ -1309,6 +1321,13 @@
<span class="help-inline">{{_i}}Please correct the error{{/i}}</span> <span class="help-inline">{{_i}}Please correct the error{{/i}}</span>
</div> </div>
</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"> <div class="control-group success">
<label class="control-label" for="inputSuccess">{{_i}}Input with success{{/i}}</label> <label class="control-label" for="inputSuccess">{{_i}}Input with success{{/i}}</label>
<div class="controls"> <div class="controls">
......
less/forms.less
View file @ 5cbb8269
...@@ -349,6 +349,10 @@ input[type="checkbox"][readonly] { ...@@ -349,6 +349,10 @@ input[type="checkbox"][readonly] {
.control-group.success { .control-group.success {
.formFieldState(@successText, @successText, @successBackground); .formFieldState(@successText, @successText, @successBackground);
} }
// Success
.control-group.info {
.formFieldState(@infoText, @infoText, @infoBackground);
}
// HTML5 invalid states // HTML5 invalid states
// Shares styles with the .control-group.error above // Shares styles with the .control-group.error above
......
less/tables.less
View file @ 5cbb8269
...@@ -219,6 +219,9 @@ table { ...@@ -219,6 +219,9 @@ table {
tbody tr.error td { tbody tr.error td {
background-color: @errorBackground; background-color: @errorBackground;
} }
tbody tr.warning td {
background-color: @warningBackground;
}
tbody tr.info td { tbody tr.info td {
background-color: @infoBackground; background-color: @infoBackground;
} }
......
Markdown is supported
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