rewrite alert messages to use less code, combine the look of default and block messag...

diff --git a/bootstrap.css b/bootstrap.css
index ba51a7d455e04af7735a01596f74a596e78b712d..556112c52d0460d81469f71ef3059040bd930ea6 100644 (file)
--- 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: Fri Jan 13 10:05:29 PST 2012
+ * Date: Sat Jan 14 16:13:25 PST 2012
  */
 html, body {
   margin: 0;
@@ -410,7 +410,6 @@ ol {
 }
 li {
   line-height: 18px;
-  color: #555555;
 }
 ul.unstyled {
   margin-left: 0;
@@ -2374,28 +2373,15 @@ i {
   margin-bottom: 0;
 }
 .btn.danger,
-.alert-message.danger,
 .btn.danger:hover,
-.alert-message.danger:hover,
-.btn.error,
-.alert-message.error,
-.btn.error:hover,
-.alert-message.error:hover,
 .btn.success,
-.alert-message.success,
 .btn.success:hover,
-.alert-message.success:hover,
 .btn.info,
-.alert-message.info,
-.btn.info:hover,
-.alert-message.info:hover {
+.btn.info:hover {
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
   color: #ffffff;
 }
-.btn.danger,
-.alert-message.danger,
-.btn.error,
-.alert-message.error {
+.btn.danger {
   background-color: #c43c35;
   background-image: -khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));
   background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);
@@ -2409,7 +2395,7 @@ i {
   border-color: #c43c35 #c43c35 #882a25;
   border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
 }
-.btn.success, .alert-message.success {
+.btn.success {
   background-color: #57a957;
   background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));
   background-image: -moz-linear-gradient(top, #62c462, #57a957);
@@ -2423,7 +2409,7 @@ i {
   border-color: #57a957 #57a957 #3d773d;
   border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
 }
-.btn.info, .alert-message.info {
+.btn.info {
   background-color: #339bb9;
   background-image: -khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));
   background-image: -moz-linear-gradient(top, #5bc0de, #339bb9);
@@ -2638,95 +2624,60 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
   -moz-opacity: 0.75;
   opacity: 0.75;
 }
-.alert-message {
+.alert {
   position: relative;
-  padding: 7px 15px;
+  padding: 8px 35px 8px 14px;
   margin-bottom: 18px;
-  color: #333333;
   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
-  background-color: #eedc94;
-  background-image: -khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));
-  background-image: -moz-linear-gradient(top, #fceec1, #eedc94);
-  background-image: -ms-linear-gradient(top, #fceec1, #eedc94);
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));
-  background-image: -webkit-linear-gradient(top, #fceec1, #eedc94);
-  background-image: -o-linear-gradient(top, #fceec1, #eedc94);
-  background-image: linear-gradient(top, #fceec1, #eedc94);
-  background-repeat: repeat-x;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);
-  border-color: #eedc94 #eedc94 #e4c652;
-  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
-  border-width: 1px;
-  border-style: solid;
+  background-color: #fcf8e3;
+  border: 1px solid #f3edd2;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
-  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
-  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
 }
-.alert-message .close {
+.alert, .alert-heading {
+  color: #c09853;
+}
+.alert > .close {
   *margin-top: 3px;
   /* IE7 spacing */
 
+  margin-right: -21px;
 }
-.alert-message h5 {
-  line-height: 18px;
+.success-alert {
+  background-color: #dff0d8;
+  border-color: #cfe8c4;
 }
-.alert-message p {
-  margin-bottom: 0;
+.success-alert, .success-alert .alert-heading {
+  color: #468847;
 }
-.alert-message div {
-  margin-top: 5px;
-  margin-bottom: 2px;
-  line-height: 28px;
+.danger-alert, .error-alert {
+  background-color: #f2dede;
+  border-color: #e9c7c7;
 }
-.alert-message .btn {
-  -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
-  -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
-  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
+.danger-alert,
+.error-alert,
+.danger-alert .alert-heading,
+.error-alert .alert-heading {
+  color: #B94A48;
 }
-.alert-message.error, .alert-message.success, .alert-message.info {
-  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+.info-alert {
+  background-color: #d9edf7;
+  border-color: #bfe1f2;
 }
-.alert-message.block-message {
-  padding: 14px;
-  background-image: none;
-  background-color: #fdf5d9;
-  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
-  border-color: #fceec1;
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
+.info-alert, .info-alert .alert-heading {
+  color: #3a87ad;
 }
-.alert-message.block-message ul, .alert-message.block-message p {
-  margin-right: 30px;
+.block-alert {
+  padding-top: 14px;
+  padding-bottom: 14px;
 }
-.alert-message.block-message ul {
+.block-alert > p, .block-alert > ul {
   margin-bottom: 0;
 }
-.alert-message.block-message li {
-  color: #333333;
-}
-.alert-message.block-message .alert-actions {
+.block-alert p + p {
   margin-top: 5px;
 }
-.alert-message.block-message.error, .alert-message.block-message.success, .alert-message.block-message.info {
-  color: #333333;
-  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
-}
-.alert-message.block-message.error {
-  background-color: #fddfde;
-  border-color: #fbc7c6;
-}
-.alert-message.block-message.success {
-  background-color: #d1eed1;
-  border-color: #bfe7bf;
-}
-.alert-message.block-message.info {
-  background-color: #ddf4fb;
-  border-color: #c6edf9;
-}
 .thumbnails {
   margin-left: -20px;
   margin-bottom: 0;

diff --git a/bootstrap.min.css b/bootstrap.min.css
index 8f2f020d1bc49c600b7ec7c7f524f563bb2584cc..09d261081a9ea3e11d15b88810ae6ecec84c204b 100644 (file)
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -71,7 +71,7 @@ ul,ol{margin:0 0 9px 25px;}
 ul ul,ul ol,ol ol,ol ul{margin-bottom:0;}
 ul{list-style:disc;}
 ol{list-style:decimal;}
-li{line-height:18px;color:#555555;}
+li{line-height:18px;}
 ul.unstyled{margin-left:0;list-style:none;}
 dl{margin-bottom:18px;}dl dt,dl dd{line-height:18px;}
 dl dt{font-weight:bold;}
@@ -438,10 +438,10 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou
 .popover .inner{padding:3px;width:280px;overflow:hidden;background-color:#000000;background-color:rgba(0, 0, 0, 0.8);-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);}
 .popover .title{padding:9px 15px;line-height:1;background-color:#f5f5f5;border-bottom:1px solid #eee;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;}
 .popover .content{padding:14px;background-color:#ffffff;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.popover .content p,.popover .content ul,.popover .content ol{margin-bottom:0;}
-.btn.danger,.alert-message.danger,.btn.danger:hover,.alert-message.danger:hover,.btn.error,.alert-message.error,.btn.error:hover,.alert-message.error:hover,.btn.success,.alert-message.success,.btn.success:hover,.alert-message.success:hover,.btn.info,.alert-message.info,.btn.info:hover,.alert-message.info:hover{text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);color:#ffffff;}
-.btn.danger,.alert-message.danger,.btn.error,.alert-message.error{background-color:#c43c35;background-image:-khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));background-image:-moz-linear-gradient(top, #ee5f5b, #c43c35);background-image:-ms-linear-gradient(top, #ee5f5b, #c43c35);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35));background-image:-webkit-linear-gradient(top, #ee5f5b, #c43c35);background-image:-o-linear-gradient(top, #ee5f5b, #c43c35);background-image:linear-gradient(top, #ee5f5b, #c43c35);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);border-color:#c43c35 #c43c35 #882a25;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
-.btn.success,.alert-message.success{background-color:#57a957;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(top, #62c462, #57a957);background-image:-ms-linear-gradient(top, #62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(top, #62c462, #57a957);background-image:-o-linear-gradient(top, #62c462, #57a957);background-image:linear-gradient(top, #62c462, #57a957);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);border-color:#57a957 #57a957 #3d773d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
-.btn.info,.alert-message.info{background-color:#339bb9;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);border-color:#339bb9 #339bb9 #22697d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
+.btn.danger,.btn.danger:hover,.btn.success,.btn.success:hover,.btn.info,.btn.info:hover{text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);color:#ffffff;}
+.btn.danger{background-color:#c43c35;background-image:-khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));background-image:-moz-linear-gradient(top, #ee5f5b, #c43c35);background-image:-ms-linear-gradient(top, #ee5f5b, #c43c35);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35));background-image:-webkit-linear-gradient(top, #ee5f5b, #c43c35);background-image:-o-linear-gradient(top, #ee5f5b, #c43c35);background-image:linear-gradient(top, #ee5f5b, #c43c35);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);border-color:#c43c35 #c43c35 #882a25;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
+.btn.success{background-color:#57a957;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(top, #62c462, #57a957);background-image:-ms-linear-gradient(top, #62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(top, #62c462, #57a957);background-image:-o-linear-gradient(top, #62c462, #57a957);background-image:linear-gradient(top, #62c462, #57a957);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);border-color:#57a957 #57a957 #3d773d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
+.btn.info{background-color:#339bb9;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);border-color:#339bb9 #339bb9 #22697d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
 .btn{display:inline-block;padding:5px 10px 6px;font-size:13px;line-height:normal;color:#333;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);background-color:#e6e6e6;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));background-image:-webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);background-image:-ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-repeat:no-repeat;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);border:1px solid #ccc;border-bottom-color:#bbb;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);cursor:pointer;-webkit-transition:0.1s linear all;-moz-transition:0.1s linear all;-ms-transition:0.1s linear all;-o-transition:0.1s linear all;transition:0.1s linear all;}.btn:hover{color:#333333;text-decoration:none;background-position:0 -15px;}
 .btn:focus{outline:1px dotted #666;}
 .btn.primary{color:#ffffff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#0064cd;background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));background-image:-moz-linear-gradient(top, #049cdb, #0064cd);background-image:-ms-linear-gradient(top, #049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(top, #049cdb, #0064cd);background-image:-o-linear-gradient(top, #049cdb, #0064cd);background-image:linear-gradient(top, #049cdb, #0064cd);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);border-color:#0064cd #0064cd #003f81;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
@@ -467,20 +467,18 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
 .btn-group.open .dropdown-toggle{background-image:none;-webkit-box-shadow:inset 0 1px 6px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 6px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 6px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.05);}
 .btn .caret{margin-top:6px;margin-left:0;}
 .primary .caret,.danger .caret,.info .caret,.success .caret{border-top-color:#fff;filter:alpha(opacity=75);-moz-opacity:0.75;opacity:0.75;}
-.alert-message{position:relative;padding:7px 15px;margin-bottom:18px;color:#333333;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);background-color:#eedc94;background-image:-khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));background-image:-moz-linear-gradient(top, #fceec1, #eedc94);background-image:-ms-linear-gradient(top, #fceec1, #eedc94);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));background-image:-webkit-linear-gradient(top, #fceec1, #eedc94);background-image:-o-linear-gradient(top, #fceec1, #eedc94);background-image:linear-gradient(top, #fceec1, #eedc94);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);border-color:#eedc94 #eedc94 #e4c652;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);border-width:1px;border-style:solid;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);}.alert-message .close{*margin-top:3px;}
-.alert-message h5{line-height:18px;}
-.alert-message p{margin-bottom:0;}
-.alert-message div{margin-top:5px;margin-bottom:2px;line-height:28px;}
-.alert-message .btn{-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);}
-.alert-message.error,.alert-message.success,.alert-message.info{text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);}
-.alert-message.block-message{padding:14px;background-image:none;background-color:#fdf5d9;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);border-color:#fceec1;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}.alert-message.block-message ul,.alert-message.block-message p{margin-right:30px;}
-.alert-message.block-message ul{margin-bottom:0;}
-.alert-message.block-message li{color:#333333;}
-.alert-message.block-message .alert-actions{margin-top:5px;}
-.alert-message.block-message.error,.alert-message.block-message.success,.alert-message.block-message.info{color:#333333;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);}
-.alert-message.block-message.error{background-color:#fddfde;border-color:#fbc7c6;}
-.alert-message.block-message.success{background-color:#d1eed1;border-color:#bfe7bf;}
-.alert-message.block-message.info{background-color:#ddf4fb;border-color:#c6edf9;}
+.alert{position:relative;padding:8px 35px 8px 14px;margin-bottom:18px;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);background-color:#fcf8e3;border:1px solid #f3edd2;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
+.alert,.alert-heading{color:#c09853;}
+.alert>.close{*margin-top:3px;margin-right:-21px;}
+.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-alert{padding-top:14px;padding-bottom:14px;}
+.block-alert>p,.block-alert>ul{margin-bottom:0;}
+.block-alert p+p{margin-top:5px;}
 .thumbnails{margin-left:-20px;margin-bottom:0;list-style:none;zoom:1;}.thumbnails:before,.thumbnails:after{display:table;*display:inline;content:"";zoom:1;}
 .thumbnails:after{clear:both;}
 .thumbnails>li{float:left;margin:0 0 20px 20px;}

diff --git a/docs/components.html b/docs/components.html
index fa3dc5a20bc811ae8ac9c145a33ea8814fa72841..9fc987508f13959994754fbb560a5f55394d78d0 100644 (file)
--- a/docs/components.html
+++ b/docs/components.html
@@ -1058,101 +1058,90 @@
 ================================================== -->
 <section id="alerts">
   <div class="page-header">
-    <h1>Alerts &amp; Errors <small>Styles for success, warning, and error messages or alerts</small></h1>
+    <h1>Alerts <small>Styles for success, warning, and error messages</small></h1>
   </div>
-  <!-- Basic alert messages -->
+
+  <h2>Lightweight defaults</h2>
   <div class="row">
-    <div class="span3">
-      <h2>Basic alerts</h2>
-      <p><code>.alert-message</code></p>
-      <p>One-line messages for highlighting the failure, possible failure, or success of an action. Particularly useful for forms.</p>
-      <p><a class="btn js-btn" href="./javascript.html#alerts">Get the javascript &raquo;</a></p>
+    <div class="span4">
+      <h3>Rewritten base class</h3>
+      <p>With Bootstrap 2, we've simplified the base class: <code>.alert</code> instead of <code>.alert-message</code>. We've also reduced the minimum required markup&mdash;no <code>&lt;p&gt;</code> is required by default, just the outter <code>&lt;div&gt;</code>.</p>
+      <h3>Single alert message</h3>
+      <p>For a more durable component with less code, we've removed the differentiating look for block alerts, messages that com with more padding and typically more text. The class also has changed to <code>.block-alert</code>.</p>
+      <hr>
+      <h3>Goes great with javascript</h3>
+      <p>Bootstrap comes with a great jQuery plugin that supports alert messages, making dismissing them quick and easy.</p>
+      <p><a class="btn js-btn" href="./javascript.html#alerts">Get the plugin &raquo;</a></p>
     </div>
-    <div class="span9">
-      <div class="alert-message warning">
-        <a class="close">&times;</a>
-        <p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p>
-      </div>
-      <div class="alert-message error">
-        <a class="close">&times;</a>
-        <p><strong>Oh snap!</strong> Change this and that and try again.</p>
-      </div>
-      <div class="alert-message success">
+    <div class="span8">
+      <h3>Example alerts</h3>
+      <p>Wrap your message and an optional close icon in a div with simple class.</p>
+      <div class="alert">
         <a class="close">&times;</a>
-        <p><strong>Well done!</strong> You successfully read this alert message.</p>
+        <strong>Warning!</strong> Best check yo self, you’re not looking too good.
       </div>
-      <div class="alert-message info">
+<pre class="prettyprint linenums">
+&lt;div class="alert"&gt;
+  &lt;a class="close"&gt;&times;&lt;/a&gt;
+  &lt;strong&gt;Warning!&lt;/strong&gt; Best check yo self, you’re not looking too good.
+&lt;/div&gt;
+</pre>
+      <p>Easily extend the standard alert message with two optional classes: <code>.block-alert</code> for more padding and text controls and <code>.alert-heading</code> for a matching heading.</p>
+      <div class="alert block-alert">
         <a class="close">&times;</a>
-        <p><strong>Heads up!</strong> This is an alert that needs your attention, but it’s not a huge priority just yet.</p>
+        <h4 class="alert-heading">Warning!</h4>
+        <p>Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
       </div>
-
-      <h4>Example code</h4>
 <pre class="prettyprint linenums">
-&lt;div class="alert-message warning"&gt;
+&lt;div class="alert block-alert"&gt;
   &lt;a class="close"&gt;&times;&lt;/a&gt;
-  &lt;p&gt;&lt;strong&gt;Holy guacamole!&lt;/strong&gt; Best check yo self, you’re not looking too good.&lt;/p&gt;
+  &lt;h4 class="alert-heading"&gt;Warning!&lt;/h4&gt;
+  Best check yo self, you’re not...
 &lt;/div&gt;
 </pre>
     </div>
-  </div><!-- /row -->
-
-  <br>
+  </div>
 
-  <!-- Block messages -->
+  <h2>Contextual alternatives <small>Add optional classes to change an alert's connotation</small></h2>
   <div class="row">
-    <div class="span3">
-      <h2>Block messages</h2>
-      <p><code>&lt;div class="alert-message block-message"&gt;</code></p>
-      <p>For messages that require a bit of explanation, we have paragraph style alerts. These are perfect for bubbling up longer error messages, warning a user of a pending action, or just presenting information for more emphasis on the page.</p>
-      <p><a class="btn js-btn" href="./javascript.html#alerts">Get the javascript &raquo;</a></p>
-    </div>
-    <div class="span9">
-      <div class="alert-message block-message warning">
-        <a class="close">&times;</a>
-        <p><strong>Holy guacamole! This is a warning!</strong> Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
-        <div class="alert-actions">
-          <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
-        </div>
-      </div>
-      <div class="alert-message block-message error">
+    <div class="span4">
+      <h3>Error or danger</h3>
+      <div class="alert error-alert">
         <a class="close">&times;</a>
-        <p><strong>Oh snap! You got an error!</strong> Change this and that and try again.</p>
-        <ul>
-          <li>Duis mollis est non commodo luctus</li>
-          <li>Nisi erat porttitor ligula</li>
-          <li>Eget lacinia odio sem nec elit</li>
-        </ul>
-        <div class="alert-actions">
-          <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
-        </div>
+        <strong>Oh snap!</strong> Change a few things up and try submitting again.
       </div>
-      <div class="alert-message block-message success">
+<pre class="prettyprint linenums">
+&lt;div class="alert error-alert"&gt;
+  ...
+&lt;/div&gt;
+</pre>
+    </div>
+    <div class="span4">
+      <h3>Success</h3>
+      <div class="alert success-alert">
         <a class="close">&times;</a>
-        <p><strong>Well done!</strong> You successfully read this alert message. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum.</p>
-        <div class="alert-actions">
-          <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
-        </div>
+        <strong>Well done!</strong> You successfully read this important alert message.
       </div>
-      <div class="alert-message block-message info">
+<pre class="prettyprint linenums">
+&lt;div class="alert success-alert"&gt;
+  ...
+&lt;/div&gt;
+</pre>
+    </div>
+    <div class="span4">
+      <h3>Information</h3>
+      <div class="alert info-alert">
         <a class="close">&times;</a>
-        <p><strong>Heads up!</strong> This is an alert that needs your attention, but it’s not a huge priority just yet.</p>
-        <div class="alert-actions">
-          <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
-        </div>
+        <strong>Heads up!</strong> This alert needs your attention, but it’s not super important.
       </div>
-
-      <h4>Example code</h4>
 <pre class="prettyprint linenums">
-&lt;div class="alert-message block-message warning"&gt;
-  &lt;a class="close"&gt;&times;&lt;/a&gt;
-  &lt;p&gt;&lt;strong&gt;Holy guacamole! This is a warning!&lt;/strong&gt; Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.&lt;/p&gt;
-  &lt;div class="alert-actions"&gt;
-    &lt;a class="btn small" href="#"&gt;Take this action&lt;/a&gt; &lt;a class="btn small" href="#"&gt;Or do this&lt;/a>
-  &lt;/div&gt;
+&lt;div class="alert info-alert"&gt;
+  ...
 &lt;/div&gt;
 </pre>
     </div>
-  </div><!-- /row -->
+  </div>
+
 </section>
 
 

diff --git a/lib/alerts.less b/lib/alerts.less
index bb0bd5d99ed83e97e294220dd49519d53eaddb1e..d1cd8addd5781385ea7de1dabe756bd288652e4a 100644 (file)
--- 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 140d1112cefe96d8057d4a8f2d42d62ca92083c6..a7492f9fd0d24c9dfaad8b843106f160e1fb5e70 100644 (file)
--- 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 f7d5077cf50cbabd5e3bd202d02f5d984d6a9467..ab7409ce34c17bd42ce736ac0406f22fb5a731e6 100644 (file)
--- a/lib/type.less
+++ b/lib/type.less
@@ -90,7 +90,6 @@ ol {
 }
 li {
   line-height: @baseLineHeight;
-  color: @gray;
 }
 ul.unstyled {
   margin-left: 0;