diff options
| author | Andres Galante <[email protected]> | 2017-08-24 22:11:36 -0300 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2017-09-30 23:32:39 -0700 |
| commit | f02f545e0eb4cc8fca282465ccdf54f29d0a1acc (patch) | |
| tree | c47b11f367083345f5def7cb7afb9bda7f304df6 | |
| parent | 4e2ed6890c778d3407dd8a5cd016164b2472d67a (diff) | |
| download | bootstrap-f02f545e0eb4cc8fca282465ccdf54f29d0a1acc.tar.xz bootstrap-f02f545e0eb4cc8fca282465ccdf54f29d0a1acc.zip | |
changes the order of the close btn on alerts to improve accecibility
| -rw-r--r-- | docs/4.0/components/alerts.md | 2 | ||||
| -rw-r--r-- | scss/_alert.scss | 7 |
2 files changed, 5 insertions, 4 deletions
diff --git a/docs/4.0/components/alerts.md b/docs/4.0/components/alerts.md index 90c146362..b8bb0c216 100644 --- a/docs/4.0/components/alerts.md +++ b/docs/4.0/components/alerts.md @@ -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">×</span> </button> - <strong>Holy guacamole!</strong> You should check in on some of those fields below. </div> {% endexample %} diff --git a/scss/_alert.scss b/scss/_alert.scss index 3dfd13f56..66fba24ea 100644 --- a/scss/_alert.scss +++ b/scss/_alert.scss @@ -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; } |