fixes twbs#9310: alerts aren't dismissable by default, now requires .…

…alert-dismissable if you need a close button
daz · Aug 12, 2013 · 6dbf588 · 6dbf588
1 parent aefed0a
commit 6dbf588
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 35 deletions.
diff --git a/_includes/nav-components.html b/_includes/nav-components.html
@@ -94,6 +94,7 @@
   <ul class="nav">
     <li><a href="#alerts-default">Default alert</a></li>
     <li><a href="#alerts-alternatives">Contextual alternatives</a></li>
+    <li><a href="#alerts-dismissable">Dismissable alerts</a></li>
     <li><a href="#alerts-links">Links in alerts</a></li>
   </ul>
 </li>

diff --git a/components.html b/components.html
@@ -1880,40 +1880,30 @@ <h1 id="alerts">Alerts</h1>
     </div>
     <p class="lead">Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. For inline dismissal, use the <a href="../javascript/#js-alerts">alerts jQuery plugin</a>.</p>
 
-    <h3 id="alerts-default">Default alert</h3>
+    <h2 id="alerts-default">Default alert</h2>
     <p>Wrap any text and an optional dismiss button in <code>.alert</code> for a basic warning alert message.</p>
 
-    <div class="bs-callout bs-callout-warning">
-      <h4>Ensure proper behavior across all devices</h4>
-      <p>Be sure to use the <code>&lt;button&gt;</code> element with the <code>data-dismiss="alert"</code> data attribute.</p>
-    </div>
-
     <div class="bs-example">
       <div class="alert">
-        <button type="button" class="close" data-dismiss="alert">&times;</button>
         <strong>Warning!</strong> Best check yo self, you're not looking too good.
       </div>
     </div>
 {% highlight html %}
 <div class="alert">
-  <button type="button" class="close" data-dismiss="alert">&times;</button>
   <strong>Warning!</strong> Best check yo self, you're not looking too good.
 </div>
 {% endhighlight %}
 
-    <h3 id="alerts-alternatives">Contextual alternatives</h3>
+    <h2 id="alerts-alternatives">Contextual alternatives</h2>
     <p>Add optional classes to change an alert's connotation.</p>
     <div class="bs-example">
       <div class="alert alert-danger">
-        <button type="button" class="close" data-dismiss="alert">&times;</button>
         <strong>Oh snap!</strong> Change a few things up and try submitting again.
       </div>
       <div class="alert alert-success">
-        <button type="button" class="close" data-dismiss="alert">&times;</button>
         <strong>Well done!</strong> You successfully read this important alert message.
       </div>
       <div class="alert alert-info">
-        <button type="button" class="close" data-dismiss="alert">&times;</button>
         <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
       </div>
     </div>
@@ -1923,19 +1913,36 @@ <h3 id="alerts-alternatives">Contextual alternatives</h3>
 <div class="alert alert-info">...</div>
 {% endhighlight %}
 
-    <h3 id="alerts-links">Links in alerts</h3>
+    <h2 id="alerts-dismissable">Dismissable alerts</h2>
+    <p>Build on any alert by adding an optional <code>.alert-dismissable</code> and close button.</p>
+    <div class="bs-example">
+      <div class="alert alert-dismissable">
+        <button type="button" class="close" data-dismiss="alert">&times;</button>
+        <strong>Warning!</strong> Best check yo self, you're not looking too good.
+      </div>
+    </div>
+{% highlight html %}
+<div class="alert alert-dismissable">
+  <button type="button" class="close" data-dismiss="alert">&times;</button>
+  <strong>Warning!</strong> Best check yo self, you're not looking too good.
+</div>
+{% endhighlight %}
+
+    <div class="bs-callout bs-callout-warning">
+      <h4>Ensure proper behavior across all devices</h4>
+      <p>Be sure to use the <code>&lt;button&gt;</code> element with the <code>data-dismiss="alert"</code> data attribute.</p>
+    </div>
+
+    <h2 id="alerts-links">Links in alerts</h2>
     <p>Use the <code>.alert-link</code> utility class to quickly provide matching colored links within any alert.</p>
     <div class="bs-example">
       <div class="alert alert-danger">
-        <button type="button" class="close" data-dismiss="alert">&times;</button>
         <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
       </div>
       <div class="alert alert-success">
-        <button type="button" class="close" data-dismiss="alert">&times;</button>
         <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
       </div>
       <div class="alert alert-info">
-        <button type="button" class="close" data-dismiss="alert">&times;</button>
         <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
       </div>
     </div>

diff --git a/dist/css/bootstrap.css b/dist/css/bootstrap.css
@@ -4117,7 +4117,7 @@ button.close {
 }
 
 .alert {
-  padding: 15px 35px 15px 15px;
+  padding: 15px;
   margin-bottom: 20px;
   color: #c09853;
   background-color: #fcf8e3;
@@ -4139,13 +4139,6 @@ button.close {
   color: #a47e3c;
 }
 
-.alert .close {
-  position: relative;
-  top: -2px;
-  right: -21px;
-  color: inherit;
-}
-
 .alert > p,
 .alert > ul {
   margin-bottom: 0;
@@ -4155,6 +4148,17 @@ button.close {
   margin-top: 5px;
 }
 
+.alert-dismissable {
+  padding-right: 35px;
+}
+
+.alert-dismissable .close {
+  position: relative;
+  top: -2px;
+  right: -21px;
+  color: inherit;
+}
+
 .alert-success {
   color: #468847;
   background-color: #dff0d8;

diff --git a/dist/css/bootstrap.min.css b/dist/css/bootstrap.min.css
diff --git a/less/alerts.less b/less/alerts.less
@@ -7,7 +7,7 @@
 // -------------------------
 
 .alert {
-  padding: @alert-padding (@alert-padding + 20) @alert-padding @alert-padding;
+  padding: @alert-padding;
   margin-bottom: @line-height-computed;
   color: @alert-text;
   background-color: @alert-bg;
@@ -30,14 +30,6 @@
     color: darken(@alert-text, 10%);
   }
 
-  // Adjust close link position
-  .close {
-    position: relative;
-    top: -2px;
-    right: -21px;
-    color: inherit;
-  }
-
   // Improve alignment and spacing of inner content
   > p,
   > ul {
@@ -48,8 +40,25 @@
   }
 }
 
+// Dismissable alerts
+//
+// Expand the right padding and account for the close button's positioning.
+
+.alert-dismissable {
+ padding-right: (@alert-padding + 20);
+
+  // Adjust close link position
+  .close {
+    position: relative;
+    top: -2px;
+    right: -21px;
+    color: inherit;
+  }
+}
+
 // Alternate styles
-// -------------------------
+//
+// Generate contextual modifier classes for colorizing the alert.
 
 .alert-success {
   .alert-variant(@alert-success-bg; @alert-success-border; @alert-success-text);