From f587e81b7d72e47b16bf808c721c3dfe45ae1062 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 14 Jan 2012 16:18:15 -0800 Subject: [PATCH] rewrite alert messages to use less code, combine the look of default and block messages, simplify docs --- bootstrap.css | 135 +++++++++++++-------------------------- bootstrap.min.css | 36 +++++------ docs/components.html | 149 ++++++++++++++++++++----------------------- lib/alerts.less | 134 +++++++++++++++++--------------------- lib/buttons.less | 8 +-- lib/type.less | 1 - 6 files changed, 191 insertions(+), 272 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index ba51a7d455..556112c52d 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: 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,94 +2624,59 @@ 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 { +.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; } -.alert-message div { +.block-alert p + p { 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; } .thumbnails { margin-left: -20px; diff --git a/bootstrap.min.css b/bootstrap.min.css index 8f2f020d1b..09d261081a 100644 --- 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 fa3dc5a20b..9fc987508f 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1058,101 +1058,90 @@ ================================================== -->
-

Alerts & Errors Styles for success, warning, and error messages or alerts

+

Alerts Styles for success, warning, and error messages

- -
-
-

Basic alerts

-

.alert-message

-

One-line messages for highlighting the failure, possible failure, or success of an action. Particularly useful for forms.

-

Get the javascript »

-
-
-
- × -

Holy guacamole! Best check yo self, you’re not looking too good.

-
-
- × -

Oh snap! Change this and that and try again.

-
-
- × -

Well done! You successfully read this alert message.

-
-
- × -

Heads up! This is an alert that needs your attention, but it’s not a huge priority just yet.

-
-

Example code

+

Lightweight defaults

+
+
+

Rewritten base class

+

With Bootstrap 2, we've simplified the base class: .alert instead of .alert-message. We've also reduced the minimum required markup—no <p> is required by default, just the outter <div>.

+

Single alert message

+

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 .block-alert.

+
+

Goes great with javascript

+

Bootstrap comes with a great jQuery plugin that supports alert messages, making dismissing them quick and easy.

+

Get the plugin »

+
+
+

Example alerts

+

Wrap your message and an optional close icon in a div with simple class.

+
+ × + Warning! Best check yo self, you’re not looking too good. + 
-<div class="alert-message warning">
+<div class="alert">
   <a class="close">×</a>
-  <p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p>
+  <strong>Warning!</strong> Best check yo self, you’re not looking too good.
+</div>
+
+

Easily extend the standard alert message with two optional classes: .block-alert for more padding and text controls and .alert-heading for a matching heading.

+
+ × +

Warning!

+

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.

+
+
+<div class="alert block-alert">
+  <a class="close">×</a>
+  <h4 class="alert-heading">Warning!</h4>
+  Best check yo self, you’re not...
 </div>
-
+
-
- - +

Contextual alternatives Add optional classes to change an alert's connotation

-
-

Block messages

-

<div class="alert-message block-message">

-

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.

-

Get the javascript »

-
-
-
+
+

Error or danger

+
× -

Holy guacamole! This is a warning! 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.

-
- Take this action Or do this -
+ Oh snap! Change a few things up and try submitting again.
-
- × -

Oh snap! You got an error! Change this and that and try again.

-
    -
  • Duis mollis est non commodo luctus
    • -
  • Nisi erat porttitor ligula
    • -
  • Eget lacinia odio sem nec elit
    • -
-
- Take this action Or do this -
-
-
- × -

Well done! You successfully read this alert message. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum.

-
- Take this action Or do this -
-
-
- × -

Heads up! This is an alert that needs your attention, but it’s not a huge priority just yet.

-
- Take this action Or do this -
-
- -

Example code

-<div class="alert-message block-message warning">
-  <a class="close">×</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 class="alert error-alert">
+  ...
 </div>
-
+
+

Success

+
+ × + Well done! You successfully read this important alert message. +
+
+<div class="alert success-alert">
+  ...
+</div>
+
+
+
+

Information

+
+ × + Heads up! This alert needs your attention, but it’s not super important. +
+
+<div class="alert info-alert">
+  ...
+</div>
+
+
+
+
diff --git a/lib/alerts.less b/lib/alerts.less index bb0bd5d99e..d1cd8addd5 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)); - - // Adjust close icon - .close { - *margin-top: 3px; /* IE7 spacing */ - } - - // 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)); - } - - &.error, - &.success, - &.info { - text-shadow: 0 -1px 0 rgba(0,0,0,.25); - } - - &.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%); - } - } } +.alert, +.alert-heading { + color: #c09853; +} + +// Adjust close link position +.alert > .close { + *margin-top: 3px; /* IE7 spacing */ + margin-right: -21px; +} + +// Alternate styles +// ---------------- + +.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 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 140d1112ce..a7492f9fd0 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 f7d5077cf5..ab7409ce34 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;