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() {
}