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 @@
@grayDarker |
- #222 |
+ #222 |
@grayDark |
- #333 |
+ #333 |
@gray |
- #555 |
+ #555 |
@grayLight |
- #999 |
+ #999 |
@grayLighter |
- #eee |
+ #eee |
@white |
@@ -283,22 +283,54 @@
-
-
-
Visuals
-
-
-
-
-
- @primaryButtonColor |
- @blue |
- |
-
-
-
-
-
+
+ Components
+
+
+
+ Buttons |
+
+
+
+
+ @primaryButtonColor |
+ @blue |
+
+
+
+
+
+ Buttons |
+
+
+
+
+ @placeholderText |
+ @grayLight |
+
+
+
+
+
+ Navbars |
+
+
+
+
+ @navbarHeight |
+ 40px |
+
+
+ @navbarBackground |
+ @grayDarker |
+
+
+ @navbarBackgroundHighlight |
+ @grayDark |
+
+
+
+
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 @@
@grayDarker |
- #222 |
+ #222 |
@grayDark |
- #333 |
+ #333 |
@gray |
- #555 |
+ #555 |
@grayLight |
- #999 |
+ #999 |
@grayLighter |
- #eee |
+ #eee |
@white |
@@ -223,22 +223,66 @@
-
-
-
{{_i}}Visuals{{/i}}
-
-
-
-
-
- @primaryButtonColor |
- @blue |
- |
-
-
-
-
-
+
+ {{_i}}Components{{/i}}
+
+
+
+ {{_i}}Buttons{{/i}} |
+
+
+
+
+ @primaryButtonColor |
+ @blue |
+
+
+
+
+
+ {{_i}}Buttons{{/i}} |
+
+
+
+
+ @placeholderText |
+ @grayLight |
+
+
+
+
+
+ {{_i}}Navbars{{/i}} |
+
+
+
+
+ @navbarHeight |
+ 40px |
+
+
+ @navbarBackground |
+ @grayDarker |
+
+
+ @navbarBackgroundHighlight |
+ @grayDark |
+
+
+
+
+
+ {{_i}}Buttons{{/i}} |
+
+
+
+
+ @placeholderText |
+ @grayLight |
+
+
+
+
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;
+