revamp alert message and error state color/text/bg to be variables

This commit is contained in:
Mark Otto
2012-01-24 16:54:35 -08:00
parent c2312220e4
commit 40e92221a6
8 changed files with 199 additions and 105 deletions

View File

@@ -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;
}

View File

@@ -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

View File

@@ -48,7 +48,7 @@
// Placeholder text
// -------------------------
.placeholder(@color: @placeHolderText) {
.placeholder(@color: @placeholderText) {
:-moz-placeholder {
color: @color;
}

View File

@@ -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;