mirror of
https://github.com/twbs/bootstrap.git
synced 2022-11-09 12:25:43 -05:00
revamp alert message and error state color/text/bg to be variables
This commit is contained in:
Mark Otto
parent
c2312220e4
commit
40e92221a6
8 changed files with 199 additions and 105 deletions
64
bootstrap.css
vendored
64
bootstrap.css
vendored
|
|
@ -6,7 +6,7 @@
|
|||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Designed and built with all the love in the world @twitter by @mdo and @fat.
|
||||
* Date: Tue Jan 24 16:18:56 PST 2012
|
||||
* Date: Tue Jan 24 16:50:16 PST 2012
|
||||
*/
|
||||
article,
|
||||
aside,
|
||||
|
|
@ -701,58 +701,58 @@ textarea[readonly] {
|
|||
border-color: #ddd;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.control-group.error > label, .control-group.error .help-block, .control-group.error .help-inline {
|
||||
color: #b94a48;
|
||||
}
|
||||
.control-group.error input, .control-group.error textarea {
|
||||
color: #b94a48;
|
||||
border-color: #ee5f5b;
|
||||
}
|
||||
.control-group.error input:focus, .control-group.error textarea:focus {
|
||||
border-color: #e9322d;
|
||||
-webkit-box-shadow: 0 0 6px #f8b9b7;
|
||||
-moz-box-shadow: 0 0 6px #f8b9b7;
|
||||
box-shadow: 0 0 6px #f8b9b7;
|
||||
}
|
||||
.control-group.error .input-prepend .add-on, .control-group.error .input-append .add-on {
|
||||
color: #b94a48;
|
||||
background-color: #fce6e6;
|
||||
border-color: #b94a48;
|
||||
}
|
||||
.control-group.warning > label, .control-group.warning .help-block, .control-group.warning .help-inline {
|
||||
color: #c09853;
|
||||
}
|
||||
.control-group.warning input, .control-group.warning textarea {
|
||||
color: #c09853;
|
||||
border-color: #ccae64;
|
||||
border-color: #f3edd2;
|
||||
}
|
||||
.control-group.warning input:focus, .control-group.warning textarea:focus {
|
||||
border-color: #be9a3f;
|
||||
-webkit-box-shadow: 0 0 6px #e5d6b1;
|
||||
-moz-box-shadow: 0 0 6px #e5d6b1;
|
||||
box-shadow: 0 0 6px #e5d6b1;
|
||||
border-color: #e8ddaa;
|
||||
-webkit-box-shadow: 0 0 6px #ffffff;
|
||||
-moz-box-shadow: 0 0 6px #ffffff;
|
||||
box-shadow: 0 0 6px #ffffff;
|
||||
}
|
||||
.control-group.warning .input-prepend .add-on, .control-group.warning .input-append .add-on {
|
||||
color: #c09853;
|
||||
background-color: #d2b877;
|
||||
background-color: #fcf8e3;
|
||||
border-color: #c09853;
|
||||
}
|
||||
.control-group.error > label, .control-group.error .help-block, .control-group.error .help-inline {
|
||||
color: #b94a48;
|
||||
}
|
||||
.control-group.error input, .control-group.error textarea {
|
||||
color: #b94a48;
|
||||
border-color: #e9c7c7;
|
||||
}
|
||||
.control-group.error input:focus, .control-group.error textarea:focus {
|
||||
border-color: #dba2a2;
|
||||
-webkit-box-shadow: 0 0 6px #ffffff;
|
||||
-moz-box-shadow: 0 0 6px #ffffff;
|
||||
box-shadow: 0 0 6px #ffffff;
|
||||
}
|
||||
.control-group.error .input-prepend .add-on, .control-group.error .input-append .add-on {
|
||||
color: #b94a48;
|
||||
background-color: #f2dede;
|
||||
border-color: #b94a48;
|
||||
}
|
||||
.control-group.success > label, .control-group.success .help-block, .control-group.success .help-inline {
|
||||
color: #468847;
|
||||
}
|
||||
.control-group.success input, .control-group.success textarea {
|
||||
color: #468847;
|
||||
border-color: #57a957;
|
||||
border-color: #cfe8c4;
|
||||
}
|
||||
.control-group.success input:focus, .control-group.success textarea:focus {
|
||||
border-color: #458845;
|
||||
-webkit-box-shadow: 0 0 6px #9acc9a;
|
||||
-moz-box-shadow: 0 0 6px #9acc9a;
|
||||
box-shadow: 0 0 6px #9acc9a;
|
||||
border-color: #b1da9f;
|
||||
-webkit-box-shadow: 0 0 6px #ffffff;
|
||||
-moz-box-shadow: 0 0 6px #ffffff;
|
||||
box-shadow: 0 0 6px #ffffff;
|
||||
}
|
||||
.control-group.success .input-prepend .add-on, .control-group.success .input-append .add-on {
|
||||
color: #468847;
|
||||
background-color: #bcddbc;
|
||||
background-color: #dff0d8;
|
||||
border-color: #468847;
|
||||
}
|
||||
input:focus:required:invalid, textarea:focus:required:invalid, select:focus:required:invalid {
|
||||
|
|
@ -2648,7 +2648,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
|
|||
.alert-error,
|
||||
.alert-danger .alert-heading,
|
||||
.alert-error .alert-heading {
|
||||
color: #B94A48;
|
||||
color: #b94a48;
|
||||
}
|
||||
.alert-info {
|
||||
background-color: #d9edf7;
|
||||
|
|
|
|||
16
bootstrap.min.css
vendored
16
bootstrap.min.css
vendored
|
|
@ -142,15 +142,15 @@ select.span10{width:790px;}
|
|||
select.span11{width:870px;}
|
||||
select.span12{width:950px;}
|
||||
input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{background-color:#f5f5f5;border-color:#ddd;cursor:not-allowed;}
|
||||
.control-group.error>label,.control-group.error .help-block,.control-group.error .help-inline{color:#b94a48;}
|
||||
.control-group.error input,.control-group.error textarea{color:#b94a48;border-color:#ee5f5b;}.control-group.error input:focus,.control-group.error textarea:focus{border-color:#e9322d;-webkit-box-shadow:0 0 6px #f8b9b7;-moz-box-shadow:0 0 6px #f8b9b7;box-shadow:0 0 6px #f8b9b7;}
|
||||
.control-group.error .input-prepend .add-on,.control-group.error .input-append .add-on{color:#b94a48;background-color:#fce6e6;border-color:#b94a48;}
|
||||
.control-group.warning>label,.control-group.warning .help-block,.control-group.warning .help-inline{color:#c09853;}
|
||||
.control-group.warning input,.control-group.warning textarea{color:#c09853;border-color:#ccae64;}.control-group.warning input:focus,.control-group.warning textarea:focus{border-color:#be9a3f;-webkit-box-shadow:0 0 6px #e5d6b1;-moz-box-shadow:0 0 6px #e5d6b1;box-shadow:0 0 6px #e5d6b1;}
|
||||
.control-group.warning .input-prepend .add-on,.control-group.warning .input-append .add-on{color:#c09853;background-color:#d2b877;border-color:#c09853;}
|
||||
.control-group.warning input,.control-group.warning textarea{color:#c09853;border-color:#f3edd2;}.control-group.warning input:focus,.control-group.warning textarea:focus{border-color:#e8ddaa;-webkit-box-shadow:0 0 6px #ffffff;-moz-box-shadow:0 0 6px #ffffff;box-shadow:0 0 6px #ffffff;}
|
||||
.control-group.warning .input-prepend .add-on,.control-group.warning .input-append .add-on{color:#c09853;background-color:#fcf8e3;border-color:#c09853;}
|
||||
.control-group.error>label,.control-group.error .help-block,.control-group.error .help-inline{color:#b94a48;}
|
||||
.control-group.error input,.control-group.error textarea{color:#b94a48;border-color:#e9c7c7;}.control-group.error input:focus,.control-group.error textarea:focus{border-color:#dba2a2;-webkit-box-shadow:0 0 6px #ffffff;-moz-box-shadow:0 0 6px #ffffff;box-shadow:0 0 6px #ffffff;}
|
||||
.control-group.error .input-prepend .add-on,.control-group.error .input-append .add-on{color:#b94a48;background-color:#f2dede;border-color:#b94a48;}
|
||||
.control-group.success>label,.control-group.success .help-block,.control-group.success .help-inline{color:#468847;}
|
||||
.control-group.success input,.control-group.success textarea{color:#468847;border-color:#57a957;}.control-group.success input:focus,.control-group.success textarea:focus{border-color:#458845;-webkit-box-shadow:0 0 6px #9acc9a;-moz-box-shadow:0 0 6px #9acc9a;box-shadow:0 0 6px #9acc9a;}
|
||||
.control-group.success .input-prepend .add-on,.control-group.success .input-append .add-on{color:#468847;background-color:#bcddbc;border-color:#468847;}
|
||||
.control-group.success input,.control-group.success textarea{color:#468847;border-color:#cfe8c4;}.control-group.success input:focus,.control-group.success textarea:focus{border-color:#b1da9f;-webkit-box-shadow:0 0 6px #ffffff;-moz-box-shadow:0 0 6px #ffffff;box-shadow:0 0 6px #ffffff;}
|
||||
.control-group.success .input-prepend .add-on,.control-group.success .input-append .add-on{color:#468847;background-color:#dff0d8;border-color:#468847;}
|
||||
input:focus:required:invalid,textarea:focus:required:invalid,select:focus:required:invalid{color:#b94a48;border-color:#ee5f5b;}input:focus:required:invalid:focus,textarea:focus:required:invalid:focus,select:focus:required:invalid:focus{border-color:#e9322d;-webkit-box-shadow:0 0 6px #f8b9b7;-moz-box-shadow:0 0 6px #f8b9b7;box-shadow:0 0 6px #f8b9b7;}
|
||||
.form-actions{padding:17px 20px 18px;margin-top:18px;margin-bottom:18px;background-color:#f5f5f5;border-top:1px solid #ddd;}
|
||||
.uneditable-input{display:block;background-color:#ffffff;border-color:#eee;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);cursor:not-allowed;}
|
||||
|
|
@ -486,7 +486,7 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
|
|||
.alert-success{background-color:#dff0d8;border-color:#cfe8c4;}
|
||||
.alert-success,.alert-success .alert-heading{color:#468847;}
|
||||
.alert-danger,.alert-error{background-color:#f2dede;border-color:#e9c7c7;}
|
||||
.alert-danger,.alert-error,.alert-danger .alert-heading,.alert-error .alert-heading{color:#B94A48;}
|
||||
.alert-danger,.alert-error,.alert-danger .alert-heading,.alert-error .alert-heading{color:#b94a48;}
|
||||
.alert-info{background-color:#d9edf7;border-color:#bfe1f2;}
|
||||
.alert-info,.alert-info .alert-heading{color:#3a87ad;}
|
||||
.alert-block{padding-top:14px;padding-bottom:14px;}
|
||||
|
|
|
|||
|
|
@ -159,23 +159,23 @@
|
|||
</tr>
|
||||
<tr>
|
||||
<td><code>@grayDarker</code></td>
|
||||
<td><code>#222</code></td>
|
||||
<td>#222</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@grayDark</code></td>
|
||||
<td><code>#333</code></td>
|
||||
<td>#333</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@gray</code></td>
|
||||
<td><code>#555</code></td>
|
||||
<td>#555</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@grayLight</code></td>
|
||||
<td><code>#999</code></td>
|
||||
<td>#999</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@grayLighter</code></td>
|
||||
<td><code>#eee</code></td>
|
||||
<td>#eee</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@white</code></td>
|
||||
|
|
@ -283,22 +283,54 @@
|
|||
</table>
|
||||
</div>
|
||||
</div> <!-- /row -->
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<h3>Visuals</h3>
|
||||
</div>
|
||||
<div class="span9">
|
||||
|
||||
<h3>Components</h3>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="2" class="span3">Buttons</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>@primaryButtonColor</code></td>
|
||||
<td><code>@blue</code></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="2" class="span3">Buttons</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>@placeholderText</code></td>
|
||||
<td><code>@grayLight</code></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="2" class="span3">Navbars</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>@navbarHeight</code></td>
|
||||
<td>40px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@navbarBackground</code></td>
|
||||
<td><code>@grayDarker</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@navbarBackgroundHighlight</code></td>
|
||||
<td><code>@grayDark</code></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div> <!-- /row -->
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
|
|
|||
70
docs/templates/pages/less.mustache
vendored
70
docs/templates/pages/less.mustache
vendored
|
|
@ -99,23 +99,23 @@
|
|||
</tr>
|
||||
<tr>
|
||||
<td><code>@grayDarker</code></td>
|
||||
<td><code>#222</code></td>
|
||||
<td>#222</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@grayDark</code></td>
|
||||
<td><code>#333</code></td>
|
||||
<td>#333</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@gray</code></td>
|
||||
<td><code>#555</code></td>
|
||||
<td>#555</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@grayLight</code></td>
|
||||
<td><code>#999</code></td>
|
||||
<td>#999</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@grayLighter</code></td>
|
||||
<td><code>#eee</code></td>
|
||||
<td>#eee</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@white</code></td>
|
||||
|
|
@ -223,22 +223,66 @@
|
|||
</table>
|
||||
</div>
|
||||
</div> <!-- /row -->
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<h3>{{_i}}Visuals{{/i}}</h3>
|
||||
</div>
|
||||
<div class="span9">
|
||||
|
||||
<h3>{{_i}}Components{{/i}}</h3>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="2">{{_i}}Buttons{{/i}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>@primaryButtonColor</code></td>
|
||||
<td><code>@blue</code></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="2">{{_i}}Buttons{{/i}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>@placeholderText</code></td>
|
||||
<td><code>@grayLight</code></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="2">{{_i}}Navbars{{/i}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>@navbarHeight</code></td>
|
||||
<td>40px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@navbarBackground</code></td>
|
||||
<td><code>@grayDarker</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@navbarBackgroundHighlight</code></td>
|
||||
<td><code>@grayDark</code></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="2">{{_i}}Buttons{{/i}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>@placeholderText</code></td>
|
||||
<td><code>@grayLight</code></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div> <!-- /row -->
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -6,13 +6,13 @@
|
|||
padding: 8px 35px 8px 14px;
|
||||
margin-bottom: @baseLineHeight;
|
||||
text-shadow: 0 1px 0 rgba(255,255,255,.5);
|
||||
background-color: #fcf8e3;
|
||||
border: 1px solid #f3edd2;
|
||||
background-color: @warningBackground;
|
||||
border: 1px solid @warningBorder;
|
||||
.border-radius(4px);
|
||||
}
|
||||
.alert,
|
||||
.alert-heading {
|
||||
color: #c09853;
|
||||
color: @warningText;
|
||||
}
|
||||
|
||||
// Adjust close link position
|
||||
|
|
@ -26,31 +26,31 @@
|
|||
// ----------------
|
||||
|
||||
.alert-success {
|
||||
background-color: #dff0d8;
|
||||
border-color: #cfe8c4;
|
||||
background-color: @successBackground;
|
||||
border-color: @successBorder;
|
||||
}
|
||||
.alert-success,
|
||||
.alert-success .alert-heading {
|
||||
color: #468847;
|
||||
color: @successText;
|
||||
}
|
||||
.alert-danger,
|
||||
.alert-error {
|
||||
background-color: #f2dede;
|
||||
border-color: #e9c7c7;
|
||||
background-color: @errorBackground;
|
||||
border-color: @errorBorder;
|
||||
}
|
||||
.alert-danger,
|
||||
.alert-error,
|
||||
.alert-danger .alert-heading,
|
||||
.alert-error .alert-heading {
|
||||
color: #B94A48;
|
||||
color: @errorText;
|
||||
}
|
||||
.alert-info {
|
||||
background-color: #d9edf7;
|
||||
border-color: #bfe1f2;
|
||||
background-color: @infoBackground;
|
||||
border-color: @infoBorder;
|
||||
}
|
||||
.alert-info,
|
||||
.alert-info .alert-heading {
|
||||
color: #3a87ad;
|
||||
color: @infoText;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -295,17 +295,17 @@ textarea[readonly] {
|
|||
border-color: @textColor;
|
||||
}
|
||||
}
|
||||
// Error
|
||||
.control-group.error {
|
||||
.formFieldState(#b94a48, #ee5f5b, lighten(#ee5f5b, 30%));
|
||||
}
|
||||
// Warning
|
||||
.control-group.warning {
|
||||
.formFieldState(#c09853, #ccae64, lighten(#CCAE64, 5%));
|
||||
.formFieldState(@warningText, @warningBorder, @warningBackground);
|
||||
}
|
||||
// Error
|
||||
.control-group.error {
|
||||
.formFieldState(@errorText, @errorBorder, @errorBackground);
|
||||
}
|
||||
// Success
|
||||
.control-group.success {
|
||||
.formFieldState(#468847, #57a957, lighten(#57a957, 30%));
|
||||
.formFieldState(@successText, @successBorder, @successBackground);
|
||||
}
|
||||
|
||||
// HTML5 invalid states
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@
|
|||
|
||||
// Placeholder text
|
||||
// -------------------------
|
||||
.placeholder(@color: @placeHolderText) {
|
||||
.placeholder(@color: @placeholderText) {
|
||||
:-moz-placeholder {
|
||||
color: @color;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -52,11 +52,9 @@
|
|||
// COMPONENT VARIABLES
|
||||
// --------------------------------------------------
|
||||
|
||||
// Input placeholder text color
|
||||
@placeHolderText: @grayLight;
|
||||
|
||||
// Z-index master list
|
||||
// Used for a bird's eye view of components dependent on the z-axis
|
||||
// Try to avoid customizing these :)
|
||||
@zindexDropdown: 1000;
|
||||
@zindexPopover: 1010;
|
||||
@zindexTooltip: 1020;
|
||||
|
|
@ -64,9 +62,29 @@
|
|||
@zindexModalBackdrop: 1040;
|
||||
@zindexModal: 1050;
|
||||
|
||||
// Input placeholder text color
|
||||
@placeholderText: @grayLight;
|
||||
|
||||
// Navbar
|
||||
@navBarHeight: 40px;
|
||||
@navbarHeight: 40px;
|
||||
@navbarBackground: @grayDarker;
|
||||
@navbarBackgroundHighlight: @grayDark;
|
||||
|
||||
// Form states and alerts
|
||||
@warningText: #c09853;
|
||||
@warningBackground: #fcf8e3;
|
||||
@warningBorder: #f3edd2;
|
||||
|
||||
@errorText: #b94a48;
|
||||
@errorBackground: #f2dede;
|
||||
@errorBorder: #e9c7c7;
|
||||
|
||||
@successText: #468847;
|
||||
@successBackground: #dff0d8;
|
||||
@successBorder: #cfe8c4;
|
||||
|
||||
@infoText: #3a87ad;
|
||||
@infoBackground: #d9edf7;
|
||||
@infoBorder: #bfe1f2;
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue