From 40e92221a616bfe4e9500bcf2b72c86844f7f03f Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Tue, 24 Jan 2012 16:54:35 -0800 Subject: [PATCH] revamp alert message and error state color/text/bg to be variables --- bootstrap.css | 64 +++++++++++----------- bootstrap.min.css | 16 +++--- docs/less.html | 74 +++++++++++++++++-------- docs/templates/pages/less.mustache | 86 ++++++++++++++++++++++-------- lib/alerts.less | 24 ++++----- lib/forms.less | 12 ++--- lib/mixins.less | 2 +- lib/variables.less | 26 +++++++-- 8 files changed, 199 insertions(+), 105 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 5802262f06..d7594416b3 100644 --- a/bootstrap.css +++ b/bootstrap.css @@ -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; diff --git a/bootstrap.min.css b/bootstrap.min.css index f8b9ab3794..51d362fa86 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -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;} diff --git a/docs/less.html b/docs/less.html index 735bd0dc64..dfa0739a79 100644 --- a/docs/less.html +++ b/docs/less.html @@ -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"> - <table class="table table-bordered table-striped"> - <tbody> - <tr> - <td><code>@primaryButtonColor</code></td> - <td><code>@blue</code></td> - <td></td> - </tr> - </tbody> - </table> - </div> - </div> <!-- /row --> + + <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> + </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> + </section> diff --git a/docs/templates/pages/less.mustache b/docs/templates/pages/less.mustache index 8adc7874fc..141000c7ce 100644 --- a/docs/templates/pages/less.mustache +++ b/docs/templates/pages/less.mustache @@ -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"> - <table class="table table-bordered table-striped"> - <tbody> - <tr> - <td><code>@primaryButtonColor</code></td> - <td><code>@blue</code></td> - <td></td> - </tr> - </tbody> - </table> - </div> - </div> <!-- /row --> + + <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> + </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> + </section> diff --git a/lib/alerts.less b/lib/alerts.less index 53a43c6e4f..20e935fa95 100644 --- a/lib/alerts.less +++ b/lib/alerts.less @@ -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; } diff --git a/lib/forms.less b/lib/forms.less index 1f424abaae..2b24fb2f0e 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -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 diff --git a/lib/mixins.less b/lib/mixins.less index a54f6762fb..e64b80ad36 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -48,7 +48,7 @@ // Placeholder text // ------------------------- -.placeholder(@color: @placeHolderText) { +.placeholder(@color: @placeholderText) { :-moz-placeholder { color: @color; } diff --git a/lib/variables.less b/lib/variables.less index 674a358bf6..3c4f562ca4 100644 --- a/lib/variables.less +++ b/lib/variables.less @@ -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; +