rewrite alert messages to use less code, combine the look of default and block messages, simplify docs

3 files changed, 58 insertions, 77 deletions

diff --git a/lib/alerts.less b/lib/alerts.less
index bb0bd5d99..d1cd8addd 100644
--- a/lib/alerts.less
+++ b/lib/alerts.less
@@ -2,82 +2,68 @@
 // ------------
 
 // Base alert styles
-.alert-message {
+.alert {
   position: relative;
-  padding: 7px 15px;
+  padding: 8px 35px 8px 14px;
   margin-bottom: @baseLineHeight;
-  color: @grayDark;
   text-shadow: 0 1px 0 rgba(255,255,255,.5);
-  .gradientBar(#fceec1, #eedc94); // warning by default
-  border-width: 1px;
-  border-style: solid;
+  background-color: #fcf8e3;
+  border: 1px solid #f3edd2;
   .border-radius(4px);
-  .box-shadow(inset 0 1px 0 rgba(255,255,255,.25));
+}
+.alert,
+.alert-heading {
+  color: #c09853;
+}
 
-  // Adjust close icon
-  .close {
-    *margin-top: 3px; /* IE7 spacing */
-  }
+// Adjust close link position
+.alert > .close {
+  *margin-top: 3px; /* IE7 spacing */
+  margin-right: -21px;
+}
 
-  // Remove extra margin from content
-  h5 {
-    line-height: @baseLineHeight;
-  }
-  p {
-    margin-bottom: 0;
-  }
-  div {
-    margin-top: 5px;
-    margin-bottom: 2px;
-    line-height: 28px;
-  }
-  .btn {
-    // Provide actions with buttons
-    .box-shadow(0 1px 0 rgba(255,255,255,.25));
-  }
+// Alternate styles
+// ----------------
 
-  &.error,
-  &.success,
-  &.info {
-    text-shadow: 0 -1px 0 rgba(0,0,0,.25);
-  }
+.success-alert {
+  background-color: #dff0d8;
+  border-color: #cfe8c4;  
+}
+.success-alert,
+.success-alert .alert-heading {
+  color: #468847;
+}
+.danger-alert,
+.error-alert {
+  background-color: #f2dede;
+  border-color: #e9c7c7;
+}
+.danger-alert,
+.error-alert,
+.danger-alert .alert-heading,
+.error-alert .alert-heading {
+  color: #B94A48;
+}
+.info-alert {
+  background-color: #d9edf7;
+  border-color: #bfe1f2;
+}
+.info-alert,
+.info-alert .alert-heading {
+  color: #3a87ad;
+}
 
-  &.block-message {
-    padding: 14px;
-    background-image: none;
-    background-color: lighten(#fceec1, 5%);
-    .reset-filter(); // undo gradient for IE9
-    border-color: #fceec1;
-    .box-shadow(none);
-    ul, p {
-      margin-right: 30px;
-    }
-    ul {
-      margin-bottom: 0;
-    }
-    li {
-      color: @grayDark;
-    }
-    .alert-actions {
-      margin-top: 5px;
-    }
-    &.error,
-    &.success,
-    &.info {
-      color: @grayDark;
-      text-shadow: 0 1px 0 rgba(255,255,255,.5);
-    }
-    &.error {
-      background-color: lighten(#f56a66, 25%);
-      border-color: lighten(#f56a66, 20%);
-    }
-    &.success {
-      background-color: lighten(#62c462, 30%);
-      border-color: lighten(#62c462, 25%);
-    }
-    &.info {
-      background-color: lighten(#6bd0ee, 25%);
-      border-color: lighten(#6bd0ee, 20%);
-    }
-  }
+
+// Block alerts
+// ------------------------
+.block-alert {
+  padding-top: 14px;
+  padding-bottom: 14px;
+}
+.block-alert > p,
+.block-alert > ul {
+  margin-bottom: 0;
 }
+.block-alert p + p {
+  margin-top: 5px;
+}
\ No newline at end of file
diff --git a/lib/buttons.less b/lib/buttons.less
index 140d1112c..a7492f9fd 100644
--- a/lib/buttons.less
+++ b/lib/buttons.less
@@ -2,13 +2,10 @@
 // -------------
 
 // Shared colors for buttons and alerts
-.btn,
-.alert-message {
+.btn {
   // Set text color
   &.danger,
   &.danger:hover,
-  &.error,
-  &.error:hover,
   &.success,
   &.success:hover,
   &.info,
@@ -17,8 +14,7 @@
     color: @white
   }
   // Danger and error appear as red
-  &.danger,
-  &.error {
+  &.danger {
     .gradientBar(#ee5f5b, #c43c35);
   }
   // Success appears as green
diff --git a/lib/type.less b/lib/type.less
index f7d5077cf..ab7409ce3 100644
--- a/lib/type.less
+++ b/lib/type.less
@@ -90,7 +90,6 @@ ol {
 }
 li {
   line-height: @baseLineHeight;
-  color: @gray;
 }
 ul.unstyled {
   margin-left: 0;