rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +01:00
Code Issues Actions Packages Releases Activity

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

Browse Source
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 %}
<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">
<span aria-hidden="true">&times;</span>
</button>
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
</div>
{% endexample %}

7
scss/_alert.scss
View File

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