Files

• _alert-bars.scss
• README.md

Github Page (customers only): https://github.com/esr360/Kayzen/tree/master/assets/modules/elements/alert-bars

Module Overview

Examples

This is an alert bar.

<p class="alert-bar">This is an alert bar.</p>

Error Bar

This is an error alert bar.

<p class="alert-bar-error">This is an error alert bar.</p>

Help Bar

This is a help alert bar.

<p class="alert-bar-help">This is a help alert bar.</p>

Info Bar

This is an info alert bar.

<p class="alert-bar-info">This is an info alert bar.</p>

Success Bar

This is a success alert bar.

<p class="alert-bar-success">This is a success alert bar.</p>

Customizing

The colors for the alert bars are defined (and hence can be changed from) within the color-palette module.

The alert bars can be customized using the following options:

Read the Configuration page to learn more about a module's configuration.

Property Name	Default Value	Description
border-radius	0.25em	The radius of the alert bar's corners.
border-width	1px	The width of the alert bar's border.
padding	0.85em	The inner padding of the alert bar.
font-size	0.9em	The alert bar's font size.
font-weight	lighter	The alert bar's font weight.

To change one of the above values, pass your new value(s) to the alert-bars() mixin in your theme file (e.g. assets/themes/Kayzen/_kayzen.scss).

@include alert-bars((
    'border-radius' : 0,
    'border-width'  : 3px,
    'padding'       : 1em,
    'font-size'     : 1em,
    'font-weight'   : normal
));

This is a customized alert bar.

This is a customized alert bar.