diff --git a/_includes/nav-components.html b/_includes/nav-components.html index a1105cddae..8a40b1f35b 100644 --- a/_includes/nav-components.html +++ b/_includes/nav-components.html @@ -93,8 +93,7 @@
  • Alerts diff --git a/components.html b/components.html index 7475fa1086..a780337724 100644 --- a/components.html +++ b/components.html @@ -2206,22 +2206,14 @@ body { padding-bottom: 70px; }

    Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. For inline dismissal, use the alerts jQuery plugin.

    -

    Default alert

    -

    Wrap any text and an optional dismiss button in .alert for a basic warning alert message.

    +

    Examples

    +

    Wrap any text and an optional dismiss button in .alert and one of the four contextual classes (e.g., .alert-success) for basic alert messages.

    -
    -
    - Warning! Best check yo self, you're not looking too good. -
    +
    +

    No default class

    +

    Alerts don't have default classes, only base and modifier classes. A default gray alert doesn't make too much sense, so you're required to specify a type via contextual class. Choose from success, info, warning, or danger.

    -{% highlight html %} -
    - Warning! Best check yo self, you're not looking too good. -
    -{% endhighlight %} -

    Contextual alternatives

    -

    Add optional classes to change an alert's connotation.

    Well done! You successfully read this important alert message. @@ -2229,6 +2221,9 @@ body { padding-bottom: 70px; }
    Heads up! This alert needs your attention, but it's not super important.
    +
    + Warning! Best check yo self, you're not looking too good. +
    Oh snap! Change a few things up and try submitting again.
    @@ -2236,6 +2231,7 @@ body { padding-bottom: 70px; } {% highlight html %}
    ...
    ...
    +
    ...
    ...
    {% endhighlight %} diff --git a/javascript.html b/javascript.html index 9e85c77420..40c04f58bb 100644 --- a/javascript.html +++ b/javascript.html @@ -1184,7 +1184,7 @@ $('#myPopover').on('hidden.bs.popover', function () {

    Example alerts

    Add dismiss functionality to all alert messages with this plugin.

    -
    +
    Holy guacamole! Best check yo self, you're not looking too good.
    diff --git a/less/alerts.less b/less/alerts.less index 3ba463dba0..be09d18d0a 100644 --- a/less/alerts.less +++ b/less/alerts.less @@ -9,9 +9,7 @@ .alert { padding: @alert-padding; margin-bottom: @line-height-computed; - color: @alert-text; - background-color: @alert-bg; - border: 1px solid @alert-border; + border: 1px solid transparent; border-radius: @alert-border-radius; // Headings for larger alerts @@ -20,14 +18,9 @@ // Specified for the h4 to prevent conflicts of changing @headingsColor color: inherit; } - // Match the hr to the border of the alert - hr { - border-top-color: darken(@alert-border, 5%); - } // Provide class for links that match alerts .alert-link { font-weight: @alert-link-font-weight; - color: darken(@alert-text, 10%); } // Improve alignment and spacing of inner content @@ -63,9 +56,12 @@ .alert-success { .alert-variant(@alert-success-bg; @alert-success-border; @alert-success-text); } -.alert-danger { - .alert-variant(@alert-danger-bg; @alert-danger-border; @alert-danger-text); -} .alert-info { .alert-variant(@alert-info-bg; @alert-info-border; @alert-info-text); } +.alert-warning { + .alert-variant(@alert-warning-bg; @alert-warning-border; @alert-warning-text); +} +.alert-danger { + .alert-variant(@alert-danger-bg; @alert-danger-border; @alert-danger-text); +} diff --git a/less/variables.less b/less/variables.less index 53aad251be..f2274b7f1e 100644 --- a/less/variables.less +++ b/less/variables.less @@ -439,22 +439,22 @@ @alert-border-radius: @border-radius-base; @alert-link-font-weight: bold; -@alert-bg: @state-warning-bg; -@alert-text: @state-warning-text; -@alert-border: @state-warning-border; - @alert-success-bg: @state-success-bg; @alert-success-text: @state-success-text; @alert-success-border: @state-success-border; -@alert-danger-bg: @state-danger-bg; -@alert-danger-text: @state-danger-text; -@alert-danger-border: @state-danger-border; - @alert-info-bg: @state-info-bg; @alert-info-text: @state-info-text; @alert-info-border: @state-info-border; +@alert-warning-bg: @state-warning-bg; +@alert-warning-text: @state-warning-text; +@alert-warning-border: @state-warning-border; + +@alert-danger-bg: @state-danger-bg; +@alert-danger-text: @state-danger-text; +@alert-danger-border: @state-danger-border; + // Progress bars // -------------------------