-
Notifications
You must be signed in to change notification settings - Fork 56
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Alerts with dark background #1012
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
OK for the documentation and the normal example with a .bg-dark
.
Some fixes need to be applied (no need to display it in the documentation):
- Additional content doesn't work with a
.bg-dark
: the links are displayed in black. - Dismissing doesn't work with a
.bg-dark
: close button is displayed in black (when hovering as well); it is maybe linked to the close button implementation with a dark background
Done |
2c5778c
to
366ae87
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
With the merge of the dark texts PR, IMO the only content of this PR should be:
### Dark background
Alerts come with dark variants just by adding a `.bg-dark`.
{{< example class="bg-dark" >}}
<div class="alert alert-success bg-dark" role="alert">
<span class="alert-icon"><span class="visually-hidden">Success</span></span>
<p>Success notification text goes here.</p>
</div>
<div class="alert alert-success bg-dark" role="alert">
<span class="alert-icon"><span class="visually-hidden">Success</span></span>
<div>
<h4 class="alert-heading">Success notification text with <a href="#">a link</a> goes here.</h4>
<p>Description text with <a href="#">a link</a> goes here.</p>
</div>
</div>
<div class="alert alert-warning bg-dark alert-dismissible fade show" role="alert">
<span class="alert-icon"><span class="visually-hidden">Warning</span></span>
<p>Warning notification text goes here.</p>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert"><span class="visually-hidden">Close</span></button>
</div>
{{< /example >}}
4e2cb73
to
4357dd9
Compare
4357dd9
to
52c3f48
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Minor fix ? Sounds great to me !
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sounds good to me. @louismaximepiton anything to add or can I merge?
Linked to #917