0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00

normalize the alert classes to match last night's flip for form and table classes

This commit is contained in:
Mark Otto 2012-01-15 11:30:24 -08:00
parent 1385540d0a
commit fe160261e4
4 changed files with 48 additions and 48 deletions

26
bootstrap.css vendored
View File

@ -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: Sun Jan 15 00:04:02 PST 2012 * Date: Sun Jan 15 11:29:00 PST 2012
*/ */
html, body { html, body {
margin: 0; margin: 0;
@ -2689,38 +2689,38 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
margin-right: -21px; margin-right: -21px;
} }
.success-alert { .alert-success {
background-color: #dff0d8; background-color: #dff0d8;
border-color: #cfe8c4; border-color: #cfe8c4;
} }
.success-alert, .success-alert .alert-heading { .alert-success, .alert-success .alert-heading {
color: #468847; color: #468847;
} }
.danger-alert, .error-alert { .alert-danger, .alert-error {
background-color: #f2dede; background-color: #f2dede;
border-color: #e9c7c7; border-color: #e9c7c7;
} }
.danger-alert, .alert-danger,
.error-alert, .alert-error,
.danger-alert .alert-heading, .alert-danger .alert-heading,
.error-alert .alert-heading { .alert-error .alert-heading {
color: #B94A48; color: #B94A48;
} }
.info-alert { .alert-info {
background-color: #d9edf7; background-color: #d9edf7;
border-color: #bfe1f2; border-color: #bfe1f2;
} }
.info-alert, .info-alert .alert-heading { .alert-info, .alert-info .alert-heading {
color: #3a87ad; color: #3a87ad;
} }
.block-alert { .alert-block {
padding-top: 14px; padding-top: 14px;
padding-bottom: 14px; padding-bottom: 14px;
} }
.block-alert > p, .block-alert > ul { .alert-block > p, .alert-block > ul {
margin-bottom: 0; margin-bottom: 0;
} }
.block-alert p + p { .alert-block p + p {
margin-top: 5px; margin-top: 5px;
} }
.thumbnails { .thumbnails {

18
bootstrap.min.css vendored
View File

@ -481,15 +481,15 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
.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{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,.alert-heading{color:#c09853;}
.alert>.close{*margin-top:3px;margin-right:-21px;} .alert>.close{*margin-top:3px;margin-right:-21px;}
.success-alert{background-color:#dff0d8;border-color:#cfe8c4;} .alert-success{background-color:#dff0d8;border-color:#cfe8c4;}
.success-alert,.success-alert .alert-heading{color:#468847;} .alert-success,.alert-success .alert-heading{color:#468847;}
.danger-alert,.error-alert{background-color:#f2dede;border-color:#e9c7c7;} .alert-danger,.alert-error{background-color:#f2dede;border-color:#e9c7c7;}
.danger-alert,.error-alert,.danger-alert .alert-heading,.error-alert .alert-heading{color:#B94A48;} .alert-danger,.alert-error,.alert-danger .alert-heading,.alert-error .alert-heading{color:#B94A48;}
.info-alert{background-color:#d9edf7;border-color:#bfe1f2;} .alert-info{background-color:#d9edf7;border-color:#bfe1f2;}
.info-alert,.info-alert .alert-heading{color:#3a87ad;} .alert-info,.alert-info .alert-heading{color:#3a87ad;}
.block-alert{padding-top:14px;padding-bottom:14px;} .alert-block{padding-top:14px;padding-bottom:14px;}
.block-alert>p,.block-alert>ul{margin-bottom:0;} .alert-block>p,.alert-block>ul{margin-bottom:0;}
.block-alert p+p{margin-top:5px;} .alert-block 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{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:after{clear:both;}
.thumbnails>li{float:left;margin:0 0 20px 20px;} .thumbnails>li{float:left;margin:0 0 20px 20px;}

View File

@ -1132,7 +1132,7 @@
<h3>Rewritten base class</h3> <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> <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> <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> <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>.alert-block</code>.</p>
<hr> <hr>
<h3>Goes great with javascript</h3> <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>Bootstrap comes with a great jQuery plugin that supports alert messages, making dismissing them quick and easy.</p>
@ -1151,14 +1151,14 @@
&lt;strong&gt;Warning!&lt;/strong&gt; Best check yo self, youre not looking too good. &lt;strong&gt;Warning!&lt;/strong&gt; Best check yo self, youre not looking too good.
&lt;/div&gt; &lt;/div&gt;
</pre> </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> <p>Easily extend the standard alert message with two optional classes: <code>.alert-block</code> for more padding and text controls and <code>.alert-heading</code> for a matching heading.</p>
<div class="alert block-alert"> <div class="alert alert-block">
<a class="close">&times;</a> <a class="close">&times;</a>
<h4 class="alert-heading">Warning!</h4> <h4 class="alert-heading">Warning!</h4>
<p>Best check yo self, youre not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p> <p>Best check yo self, youre not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
</div> </div>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="alert block-alert"&gt; &lt;div class="alert alert-block"&gt;
&lt;a class="close"&gt;&times;&lt;/a&gt; &lt;a class="close"&gt;&times;&lt;/a&gt;
&lt;h4 class="alert-heading"&gt;Warning!&lt;/h4&gt; &lt;h4 class="alert-heading"&gt;Warning!&lt;/h4&gt;
Best check yo self, youre not... Best check yo self, youre not...
@ -1171,36 +1171,36 @@
<div class="row"> <div class="row">
<div class="span4"> <div class="span4">
<h3>Error or danger</h3> <h3>Error or danger</h3>
<div class="alert error-alert"> <div class="alert alert-error">
<a class="close">&times;</a> <a class="close">&times;</a>
<strong>Oh snap!</strong> Change a few things up and try submitting again. <strong>Oh snap!</strong> Change a few things up and try submitting again.
</div> </div>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="alert error-alert"&gt; &lt;div class="alert alert-error"&gt;
... ...
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
</div> </div>
<div class="span4"> <div class="span4">
<h3>Success</h3> <h3>Success</h3>
<div class="alert success-alert"> <div class="alert alert-success">
<a class="close">&times;</a> <a class="close">&times;</a>
<strong>Well done!</strong> You successfully read this important alert message. <strong>Well done!</strong> You successfully read this important alert message.
</div> </div>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="alert success-alert"&gt; &lt;div class="alert alert-success"&gt;
... ...
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
</div> </div>
<div class="span4"> <div class="span4">
<h3>Information</h3> <h3>Information</h3>
<div class="alert info-alert"> <div class="alert alert-info">
<a class="close">&times;</a> <a class="close">&times;</a>
<strong>Heads up!</strong> This alert needs your attention, but its not super important. <strong>Heads up!</strong> This alert needs your attention, but its not super important.
</div> </div>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="alert info-alert"&gt; &lt;div class="alert alert-info"&gt;
... ...
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>

View File

@ -25,45 +25,45 @@
// Alternate styles // Alternate styles
// ---------------- // ----------------
.success-alert { .alert-success {
background-color: #dff0d8; background-color: #dff0d8;
border-color: #cfe8c4; border-color: #cfe8c4;
} }
.success-alert, .alert-success,
.success-alert .alert-heading { .alert-success .alert-heading {
color: #468847; color: #468847;
} }
.danger-alert, .alert-danger,
.error-alert { .alert-error {
background-color: #f2dede; background-color: #f2dede;
border-color: #e9c7c7; border-color: #e9c7c7;
} }
.danger-alert, .alert-danger,
.error-alert, .alert-error,
.danger-alert .alert-heading, .alert-danger .alert-heading,
.error-alert .alert-heading { .alert-error .alert-heading {
color: #B94A48; color: #B94A48;
} }
.info-alert { .alert-info {
background-color: #d9edf7; background-color: #d9edf7;
border-color: #bfe1f2; border-color: #bfe1f2;
} }
.info-alert, .alert-info,
.info-alert .alert-heading { .alert-info .alert-heading {
color: #3a87ad; color: #3a87ad;
} }
// Block alerts // Block alerts
// ------------------------ // ------------------------
.block-alert { .alert-block {
padding-top: 14px; padding-top: 14px;
padding-bottom: 14px; padding-bottom: 14px;
} }
.block-alert > p, .alert-block > p,
.block-alert > ul { .alert-block > ul {
margin-bottom: 0; margin-bottom: 0;
} }
.block-alert p + p { .alert-block p + p {
margin-top: 5px; margin-top: 5px;
} }