Change up link alerts

* No more children selectors to set all links in alerts as a special color because buttons and more wrongly inherited color
* Adds .alert-link for easy styling in any alert

docs/_includes/nav-components.html

@@ -84,6 +84,7 @@
     <li><a href="#alerts-default">Default alert</a></li>
     <li><a href="#alerts-block">Block alerts</a></li>
     <li><a href="#alerts-alternatives">Contextual alternatives</a></li>
+    <li><a href="#alerts-links">Links in alerts</a></li>
   </ul>
 </li>
 <li>

docs/assets/css/bootstrap.css

@@ -4410,8 +4410,7 @@ button.close {
   border-top-color: #f8e5be;
 }
 
-.alert > a,
-.alert > p > a {
+.alert .alert-link {
   font-weight: 500;
   color: #a47e3c;
 }
@@ -4433,8 +4432,7 @@ button.close {
   border-top-color: #c9e2b3;
 }
 
-.alert-success > a,
-.alert-success > p > a {
+.alert-success .alert-link {
   color: #356635;
 }
 
@@ -4448,8 +4446,7 @@ button.close {
   border-top-color: #e6c1c7;
 }
 
-.alert-danger > a,
-.alert-danger > p > a {
+.alert-danger .alert-link {
   color: #953b39;
 }
 
@@ -4463,8 +4460,7 @@ button.close {
   border-top-color: #a6e1ec;
 }
 
-.alert-info > a,
-.alert-info > p > a {
+.alert-info .alert-link {
   color: #2d6987;
 }
 

docs/components.html

@@ -1905,6 +1905,34 @@ body { padding-bottom: 70px; }
 <div class="alert alert-danger">...</div>
 <div class="alert alert-success">...</div>
 <div class="alert alert-info">...</div>
+{% endhighlight %}
+
+    <h3 id="alerts-links">Links in alerts</h3>
+    <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>
+{% highlight html %}
+<div class="alert alert-danger">
+  <a href="#" class="alert-link">...</a>
+</div>
+<div class="alert alert-success">
+  <a href="#" class="alert-link">...</a>
+</div>
+<div class="alert alert-info">
+  <a href="#" class="alert-link">...</a>
+</div>
 {% endhighlight %}
   </div>
 

docs/javascript.html

@@ -1053,7 +1053,7 @@ $('#example').tooltip(options)
             <h4>Oh snap! You got an error!</h4>
             <p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
             <p>
-              <a class="btn btn-danger" href="#">Take this action</a> <a class="btn" href="#">Or do this</a>
+              <a class="btn btn-danger" href="#">Take this action</a> <a class="btn btn-default" href="#">Or do this</a>
             </p>
           </div>
         </div><!-- /example -->

less/alerts.less

@@ -24,9 +24,8 @@
   hr {
     border-top-color: darken(@alert-border, 5%);
   }
-  // Inherit color for immediate links and bolden them some
-  > a,
-  > p > a {
+  // Provide class for links that match alerts
+  .alert-link {
     font-weight: 500;
     color: darken(@alert-text, 10%);
   }
@@ -50,8 +49,7 @@
   hr {
     border-top-color: darken(@alert-success-border, 5%);
   }
-  > a,
-  > p > a {
+  .alert-link {
     color: darken(@alert-success-text, 10%);
   }
 }
@@ -62,8 +60,7 @@
   hr {
     border-top-color: darken(@alert-danger-border, 5%);
   }
-  > a,
-  > p > a {
+  .alert-link {
     color: darken(@alert-danger-text, 10%);
   }
 }
@@ -74,8 +71,7 @@
   hr {
     border-top-color: darken(@alert-info-border, 5%);
   }
-  > a,
-  > p > a {
+  .alert-link {
     color: darken(@alert-info-text, 10%);
   }
 }