rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-28 10:24:19 +01:00
Code Issues Actions Packages Releases Activity

update alert component to use theme sass map and add a ton of options in the process

Browse Source
This commit is contained in:
Mark Otto 2017-06-25 18:22:51 -07:00
parent fc053ed096
commit 2392047a0c
3 changed files with 16 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,18 +11,10 @@ toc: true
Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the four **required** contextual classes (e.g., `.alert-success`). For inline dismissal, use the [alerts jQuery plugin](#dismissing).
{% example html %}
<div class="alert alert-success" role="alert">
<strong>Well done!</strong> You successfully read this important alert message.
</div>
<div class="alert alert-info" role="alert">
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>
<div class="alert alert-warning" role="alert">
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
<div class="alert alert-danger" role="alert">
<strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
{% for color in site.data.theme-colors %}
<div class="alert alert-{{ color.name }}" role="alert">
This is a {{ color.name }} alert—check it out!
</div>{% endfor %}
{% endexample %}
{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
@ -33,18 +25,10 @@ Alerts are available for any length of text, as well as an optional dismiss butt
Use the `.alert-link` utility class to quickly provide matching colored links within any alert.
{% example html %}
<div class="alert alert-success" role="alert">
<strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
</div>
<div class="alert alert-info" role="alert">
<strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
</div>
<div class="alert alert-warning" role="alert">
<strong>Warning!</strong> Better check yourself, you're <a href="#" class="alert-link">not looking too good</a>.
</div>
<div class="alert alert-danger" role="alert">
<strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
</div>
{% for color in site.data.theme-colors %}
<div class="alert alert-{{ color.name }}" role="alert">
This is a {{ color.name }} alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>{% endfor %}
{% endexample %}
### Additional content

15
scss/_alert.scss
View File

@ -41,15 +41,8 @@
//
// Generate contextual modifier classes for colorizing the alert.
.alert-success {
@include alert-variant($alert-success-bg, $alert-success-border-color, $alert-success-text);
}
.alert-info {
@include alert-variant($alert-info-bg, $alert-info-border-color, $alert-info-text);
}
.alert-warning {
@include alert-variant($alert-warning-bg, $alert-warning-border-color, $alert-warning-text);
}
.alert-danger {
@include alert-variant($alert-danger-bg, $alert-danger-border-color, $alert-danger-text);
@each $color, $value in $theme-colors {
.alert-#{$color} {
@include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
}
}

9
scss/mixins/_alert.scss
View File

@ -1,14 +1,13 @@
// Alerts
@mixin alert-variant($background, $border, $body-color) {
color: $body-color;
@mixin alert-variant($background, $border, $color) {
color: $color;
background-color: $background;
border-color: $border;
hr {
border-top-color: darken($border, 5%);
}
.alert-link {
color: darken($body-color, 10%);
color: darken($color, 10%);
}
}