kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity

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
This commit is contained in:
Mark Otto 2013-05-16 20:53:59 -07:00
parent 0f4b4acce1
commit 9762f95bde
5 changed files with 39 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/_includes/nav-components.html
View File

@ -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>

12
docs/assets/css/bootstrap.css vendored
View File

@ -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;
}

28
docs/components.html
View File

@ -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>

2
docs/javascript.html
View File

@ -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 -->

14
less/alerts.less
View File

@ -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%);
}
}