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 Show whitespace changes
Inline Side-by-side
Showing with 172 additions and 253 deletions
bootstrap.css
View file @ f587e81b
......@@ -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;
......
bootstrap.min.css
View file @ f587e81b
This diff is collapsed.
docs/components.html
View file @ f587e81b
......@@ -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>
<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 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="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>
<strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
<pre class="prettyprint linenums">
&lt;div class="alert error-alert"&gt;
...
&lt;/div&gt;
</pre>
</div>
<div class="alert-message block-message success">
<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>
<strong>Well done!</strong> You successfully read this important alert message.
</div>
<pre class="prettyprint linenums">
&lt;div class="alert success-alert"&gt;
...
&lt;/div&gt;
</pre>
</div>
<div class="alert-message block-message info">
<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>
<strong>Heads up!</strong> This alert needs your attention, but it’s not super important.
</div>
</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>
......
lib/alerts.less
View file @ f587e81b
......@@ -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 {
// 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
// ----------------
.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;
}
&.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 {
// Block alerts
// ------------------------
.block-alert {
padding-top: 14px;
padding-bottom: 14px;
}
.block-alert > p,
.block-alert > ul {
margin-bottom: 0;
}
li {
color: @grayDark;
}
.alert-actions {
}
.block-alert p + p {
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%);
}
}
}
\ No newline at end of file
lib/buttons.less
View file @ f587e81b
......@@ -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
......
lib/type.less
View file @ f587e81b
......@@ -90,7 +90,6 @@ ol {
}
li {
line-height: @baseLineHeight;
color: @gray;
}
ul.unstyled {
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