Skip to content

B
bootstrap
Commit f587e81b authored by Mark Otto's avatar Mark Otto
Browse files
Options

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

rewrite alert messages to use less code, combine the look of default and block messages, simplify docs
parent fc053ac8
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 172 additions and 253 deletions
bootstrap.css
View file @ f587e81b
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
* *
* Designed and built with all the love in the world @twitter by @mdo and @fat. * 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 { html, body {
margin: 0; margin: 0;
...@@ -410,7 +410,6 @@ ol { ...@@ -410,7 +410,6 @@ ol {
} }
li { li {
line-height: 18px; line-height: 18px;
color: #555555;
} }
ul.unstyled { ul.unstyled {
margin-left: 0; margin-left: 0;
...@@ -2374,28 +2373,15 @@ i { ...@@ -2374,28 +2373,15 @@ i {
margin-bottom: 0; margin-bottom: 0;
} }
.btn.danger, .btn.danger,
.alert-message.danger,
.btn.danger:hover, .btn.danger:hover,
.alert-message.danger:hover,
.btn.error,
.alert-message.error,
.btn.error:hover,
.alert-message.error:hover,
.btn.success, .btn.success,
.alert-message.success,
.btn.success:hover, .btn.success:hover,
.alert-message.success:hover,
.btn.info, .btn.info,
.alert-message.info, .btn.info:hover {
.btn.info:hover,
.alert-message.info:hover {
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
color: #ffffff; color: #ffffff;
} }
.btn.danger, .btn.danger {
.alert-message.danger,
.btn.error,
.alert-message.error {
background-color: #c43c35; background-color: #c43c35;
background-image: -khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35)); background-image: -khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));
background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35); background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);
...@@ -2409,7 +2395,7 @@ i { ...@@ -2409,7 +2395,7 @@ i {
border-color: #c43c35 #c43c35 #882a25; 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); 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-color: #57a957;
background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957)); background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));
background-image: -moz-linear-gradient(top, #62c462, #57a957); background-image: -moz-linear-gradient(top, #62c462, #57a957);
...@@ -2423,7 +2409,7 @@ i { ...@@ -2423,7 +2409,7 @@ i {
border-color: #57a957 #57a957 #3d773d; 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); 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-color: #339bb9;
background-image: -khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9)); background-image: -khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));
background-image: -moz-linear-gradient(top, #5bc0de, #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 { ...@@ -2638,95 +2624,60 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
-moz-opacity: 0.75; -moz-opacity: 0.75;
opacity: 0.75; opacity: 0.75;
} }
.alert-message { .alert {
position: relative; position: relative;
padding: 7px 15px; padding: 8px 35px 8px 14px;
margin-bottom: 18px; margin-bottom: 18px;
color: #333333;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
background-color: #eedc94; background-color: #fcf8e3;
background-image: -khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94)); border: 1px solid #f3edd2;
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; -webkit-border-radius: 4px;
-moz-border-radius: 4px; -moz-border-radius: 4px;
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; *margin-top: 3px;
/* IE7 spacing */ /* IE7 spacing */
margin-right: -21px;
} }
.alert-message h5 { .success-alert {
line-height: 18px; background-color: #dff0d8;
border-color: #cfe8c4;
} }
.alert-message p { .success-alert, .success-alert .alert-heading {
margin-bottom: 0; color: #468847;
} }
.alert-message div { .danger-alert, .error-alert {
margin-top: 5px; background-color: #f2dede;
margin-bottom: 2px; border-color: #e9c7c7;
line-height: 28px;
} }
.alert-message .btn { .danger-alert,
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); .error-alert,
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); .danger-alert .alert-heading,
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); .error-alert .alert-heading {
color: #B94A48;
} }
.alert-message.error, .alert-message.success, .alert-message.info { .info-alert {
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #d9edf7;
border-color: #bfe1f2;
} }
.alert-message.block-message { .info-alert, .info-alert .alert-heading {
padding: 14px; color: #3a87ad;
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 { .block-alert {
margin-right: 30px; padding-top: 14px;
padding-bottom: 14px;
} }
.alert-message.block-message ul { .block-alert > p, .block-alert > ul {
margin-bottom: 0; margin-bottom: 0;
} }
.alert-message.block-message li { .block-alert p + p {
color: #333333;
}
.alert-message.block-message .alert-actions {
margin-top: 5px; 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 { .thumbnails {
margin-left: -20px; margin-left: -20px;
margin-bottom: 0; margin-bottom: 0;
......
bootstrap.min.css
View file @ f587e81b
This diff is collapsed.
docs/components.html
View file @ f587e81b
...@@ -1058,101 +1058,90 @@ ...@@ -1058,101 +1058,90 @@
================================================== --> ================================================== -->
<section id="alerts"> <section id="alerts">
<div class="page-header"> <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> </div>
<!-- Basic alert messages -->
<h2>Lightweight defaults</h2>
<div class="row"> <div class="row">
<div class="span3"> <div class="span4">
<h2>Basic alerts</h2> <h3>Rewritten base class</h3>
<p><code>.alert-message</code></p> <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>
<p>One-line messages for highlighting the failure, possible failure, or success of an action. Particularly useful for forms.</p> <h3>Single alert message</h3>
<p><a class="btn js-btn" href="./javascript.html#alerts">Get the javascript &raquo;</a></p> <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>
<div class="span9"> <div class="span8">
<div class="alert-message warning"> <h3>Example alerts</h3>
<a class="close">&times;</a> <p>Wrap your message and an optional close icon in a div with simple class.</p>
<p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p> <div class="alert">
</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">
<a class="close">&times;</a> <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>
<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> <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> </div>
<h4>Example code</h4>
<pre class="prettyprint linenums"> <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;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; &lt;/div&gt;
</pre> </pre>
</div> </div>
</div><!-- /row --> </div>
<br>
<!-- Block messages --> <h2>Contextual alternatives <small>Add optional classes to change an alert's connotation</small></h2>
<div class="row"> <div class="row">
<div class="span3"> <div class="span4">
<h2>Block messages</h2> <h3>Error or danger</h3>
<p><code>&lt;div class="alert-message block-message"&gt;</code></p> <div class="alert error-alert">
<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">
<a class="close">&times;</a> <a class="close">&times;</a>
<p><strong>Oh snap! You got an error!</strong> Change this and that and try again.</p> <strong>Oh snap!</strong> Change a few things up and try submitting again.
<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>
</div> </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> <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> <strong>Well done!</strong> You successfully read this important alert message.
<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>
<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> <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> <strong>Heads up!</strong> This alert needs your attention, but it’s not super important.
<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>
<h4>Example code</h4>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="alert-message block-message warning"&gt; &lt;div class="alert info-alert"&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&gt; &lt;/div&gt;
</pre> </pre>
</div> </div>
</div><!-- /row --> </div>
</section> </section>
......
lib/alerts.less
View file @ f587e81b
...@@ -2,82 +2,68 @@ ...@@ -2,82 +2,68 @@
// ------------ // ------------
// Base alert styles // Base alert styles
.alert-message { .alert {
position: relative; position: relative;
padding: 7px 15px; padding: 8px 35px 8px 14px;
margin-bottom: @baseLineHeight; margin-bottom: @baseLineHeight;
color: @grayDark;
text-shadow: 0 1px 0 rgba(255,255,255,.5); text-shadow: 0 1px 0 rgba(255,255,255,.5);
.gradientBar(#fceec1, #eedc94); // warning by default background-color: #fcf8e3;
border-width: 1px; border: 1px solid #f3edd2;
border-style: solid;
.border-radius(4px); .border-radius(4px);
.box-shadow(inset 0 1px 0 rgba(255,255,255,.25)); }
.alert,
.alert-heading {
color: #c09853;
}
// Adjust close icon // Adjust close link position
.close { .alert > .close {
*margin-top: 3px; /* IE7 spacing */ *margin-top: 3px; /* IE7 spacing */
} margin-right: -21px;
}
// Remove extra margin from content // Alternate styles
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-alert {
&.success, background-color: #dff0d8;
&.info { border-color: #cfe8c4;
text-shadow: 0 -1px 0 rgba(0,0,0,.25); }
} .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; // Block alerts
background-image: none; // ------------------------
background-color: lighten(#fceec1, 5%); .block-alert {
.reset-filter(); // undo gradient for IE9 padding-top: 14px;
border-color: #fceec1; padding-bottom: 14px;
.box-shadow(none); }
ul, p { .block-alert > p,
margin-right: 30px; .block-alert > ul {
} margin-bottom: 0;
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-alert p + p {
margin-top: 5px;
}
\ No newline at end of file
lib/buttons.less
View file @ f587e81b
...@@ -2,13 +2,10 @@ ...@@ -2,13 +2,10 @@
// ------------- // -------------
// Shared colors for buttons and alerts // Shared colors for buttons and alerts
.btn, .btn {
.alert-message {
// Set text color // Set text color
&.danger, &.danger,
&.danger:hover, &.danger:hover,
&.error,
&.error:hover,
&.success, &.success,
&.success:hover, &.success:hover,
&.info, &.info,
...@@ -17,8 +14,7 @@ ...@@ -17,8 +14,7 @@
color: @white color: @white
} }
// Danger and error appear as red // Danger and error appear as red
&.danger, &.danger {
&.error {
.gradientBar(#ee5f5b, #c43c35); .gradientBar(#ee5f5b, #c43c35);
} }
// Success appears as green // Success appears as green
......
lib/type.less
View file @ f587e81b
...@@ -90,7 +90,6 @@ ol { ...@@ -90,7 +90,6 @@ ol {
} }
li { li {
line-height: @baseLineHeight; line-height: @baseLineHeight;
color: @gray;
} }
ul.unstyled { ul.unstyled {
margin-left: 0; margin-left: 0;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment