Alert pure css alert and warning box with close function

Class method on what
alert item in alerts; alert could live alone

Cases of use

states #



removable #



light #



alerts fixed click example to show fixed elements #


Setup #

classes #

          @alerts: alerts;
@alert: alert;
@alert-light: light;
@alert-trigger: alert-trigger;

core variables #

          @alert-states: success, info, error, warning;

variables #

          @alert-color-success: @color-success;
@alert-color-contrast-success: @color-success-contrast;
@alert-color-warning: @color-warning;
@alert-color-contrast-warning: #fff;
@alert-color-error: @color-danger;
@alert-color-contrast-error: @color-danger-contrast;
@alert-color-info: @color-info;
@alert-color-contrast-info: @color-info-contrast;

@alert-padding: 1.5rem 4.5rem 1.5rem 2rem; //for animation
@alert-light-border: 1px solid currentColor;


mixins #

          .alert-close() {

.alert-style() {

.alerts-style() {

.alerts-alert-style() {