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

changes the order of the close btn on alerts to improve accecibility

This commit is contained in:
Andres Galante 2017-08-24 22:11:36 -03:00 committed by Mark Otto
parent 4e2ed6890c
commit f02f545e0e
2 changed files with 5 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/4.0/components/alerts.md
View File

@ -59,10 +59,10 @@ You can see this in action with a live demo:
{% example html %} {% example html %}
<div class="alert alert-warning alert-dismissible fade show" role="alert"> <div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
<button type="button" class="close" data-dismiss="alert" aria-label="Close"> <button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
</button> </button>
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
</div> </div>
{% endexample %} {% endexample %}

7
scss/_alert.scss
View File

@ -3,6 +3,7 @@
// //
.alert { .alert {
position: relative;
padding: $alert-padding-y $alert-padding-x; padding: $alert-padding-y $alert-padding-x;
margin-bottom: $alert-margin-bottom; margin-bottom: $alert-margin-bottom;
border: $alert-border-width solid transparent; border: $alert-border-width solid transparent;
@ -28,9 +29,9 @@
.alert-dismissible { .alert-dismissible {
// Adjust close link position // Adjust close link position
.close { .close {
position: relative; position: absolute;
top: -$alert-padding-y; top: 0;
right: -$alert-padding-x; right: 0;
padding: $alert-padding-y $alert-padding-x; padding: $alert-padding-y $alert-padding-x;
color: inherit; color: inherit;
} }