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

diff --git a/docs/_includes/nav-components.html b/docs/_includes/nav-components.html
index 8c7728bc8faa3b187f27c9ff4e76bf8947eb6c87..4f49d68b26e6087b362292314c2785c1dd335598 100644 (file)
--- a/docs/_includes/nav-components.html
+++ b/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>

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 4542376d8b39826d2d1b0dccd2c3532ed003f931..04b72bd43115adca3b7fbb9d376380078eeac055 100644 (file)
--- a/docs/assets/css/bootstrap.css
+++ b/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;
 }
 

diff --git a/docs/components.html b/docs/components.html
index ea87a7e22d41400e6dac256fe2230d2cf2e5e724..20fdd70ddc5af1b57b6d5b67dee4e45e2517ca4a 100644 (file)
--- a/docs/components.html
+++ b/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>
 

diff --git a/docs/javascript.html b/docs/javascript.html
index 25ea6a9532eb6969d434431353151dfaf9f6b3fa..160c897efe0e6d527f57d621348e758273e27254 100644 (file)
--- a/docs/javascript.html
+++ b/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 -->

diff --git a/less/alerts.less b/less/alerts.less
index bb78462493199ced27c299cd4ea2f73e9a2d5002..24b79114372e2b0d76bd4ab2f9aa16f15cc10d63 100644 (file)
--- a/less/alerts.less
+++ b/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%);
   }
 }