color: #953b39;
}
-.text-info {
- color: #3a87ad;
-}
-
-a.text-info:hover {
- color: #2d6987;
-}
-
.text-success {
color: #468847;
}
border-color: #468847;
}
-.control-group.info .control-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);
- 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;
- 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:invalid,
textarea:focus:invalid,
select:focus:invalid {
<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
- <p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
</div>
<pre class="prettyprint linenums">
<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
-<p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
</pre>
<span class="help-inline">Please correct the error</span>
</div>
</div>
- <div class="control-group info">
- <label class="control-label" for="inputInfo">Input with info</label>
- <div class="controls">
- <input type="text" id="inputInfo">
- <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">
<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
- <p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
</div>
<pre class="prettyprint linenums">
<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
-<p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
</pre>
<span class="help-inline">Please correct the error</span>
</div>
</div>
- <div class="control-group info">
- <label class="control-label" for="inputInfo">Input with info</label>
- <div class="controls">
- <input type="text" id="inputInfo">
- <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">
.control-group.success {
.formFieldState(@state-success-text, @state-success-text, @state-success-background);
}
-// Success
-.control-group.info {
- .formFieldState(@state-info-text, @state-info-text, @state-info-background);
-}
// HTML5 invalid states
// Shares styles with the .control-group.error above
.text-error { color: @state-error-text; }
a.text-error:hover { color: darken(@state-error-text, 10%); }
-.text-info { color: @state-info-text; }
-a.text-info:hover { color: darken(@state-info-text, 10%); }
-
.text-success { color: @state-success-text; }
a.text-success:hover { color: darken(@state-success-text, 10%); }