D-Net

// Name:            Alert

// Description:     Component to create alert messages

//

// Component:       `uk-alert`

//

// Adopted:         `uk-alert-close`

//

// Modifiers:       `uk-alert-primary`

//                  `uk-alert-success`

//                  `uk-alert-warning`

//                  `uk-alert-danger`

//

// ========================================================================

// Variables

// ========================================================================

$alert-margin-vertical:                          $global-margin !default;

$alert-padding:                                  $global-small-gutter !default;

$alert-padding-right:                            $alert-padding + 14px !default;

$alert-background:                               $global-muted-background !default;

$alert-color:                                    $global-color !default;

$alert-close-top:                                $alert-padding + 5px !default;

$alert-close-right:                              $alert-padding !default;

$alert-primary-background:                       lighten(mix(white, $global-primary-background, 40%), 20%) !default;

$alert-primary-color:                            $global-primary-background !default;

$alert-success-background:                       lighten(mix(white, $global-success-background, 40%), 25%) !default;

$alert-success-color:                            $global-success-background !default;

$alert-warning-background:                       lighten(mix(white, $global-warning-background, 45%), 15%) !default;

$alert-warning-color:                            $global-warning-background !default;

$alert-danger-background:                        lighten(mix(white, $global-danger-background, 40%), 20%) !default;

$alert-danger-color:                             $global-danger-background !default;

/* ========================================================================

   Component: Alert

 ========================================================================== */

.uk-alert {

    position: relative;

    margin-bottom: $alert-margin-vertical;

    padding: $alert-padding $alert-padding-right $alert-padding $alert-padding;

    background: $alert-background;

    color: $alert-color;

    @if(mixin-exists(hook-alert)) {@include hook-alert();}

}

/* Add margin if adjacent element */

* + .uk-alert { margin-top: $alert-margin-vertical; }

/*

 * Remove margin from the last-child

 */

.uk-alert > :last-child { margin-bottom: 0; }

/* Close

 * Adopts `uk-close`

 ========================================================================== */

.uk-alert-close {

    position: absolute;

    top: $alert-close-top;

    right: $alert-close-right;

    @if(mixin-exists(hook-alert-close)) {@include hook-alert-close();}

}

/*

 * Remove margin from adjacent element

 */

.uk-alert-close:first-child + * { margin-top: 0; }

/*

 * Hover + Focus

 */

.uk-alert-close:hover,

.uk-alert-close:focus {

    @if(mixin-exists(hook-alert-close-hover)) {@include hook-alert-close-hover();}

}

/* Style modifiers

 ========================================================================== */

/*

 * Primary

 */

.uk-alert-primary {

    background: $alert-primary-background;

    color: $alert-primary-color;

    @if(mixin-exists(hook-alert-primary)) {@include hook-alert-primary();}

}

/*

 * Success

 */

.uk-alert-success {

    background: $alert-success-background;

    color: $alert-success-color;

    @if(mixin-exists(hook-alert-success)) {@include hook-alert-success();}

}

/*

 * Warning

 */

.uk-alert-warning {

    background: $alert-warning-background;

    color: $alert-warning-color;

    @if(mixin-exists(hook-alert-warning)) {@include hook-alert-warning();}

}

/*

 * Danger

 */

.uk-alert-danger {

    background: $alert-danger-background;

    color: $alert-danger-color;

    @if(mixin-exists(hook-alert-danger)) {@include hook-alert-danger();}

}

// Hooks

// ========================================================================

@if(mixin-exists(hook-alert-misc)) {@include hook-alert-misc();}

// @mixin hook-alert(){}

// @mixin hook-alert-close(){}

// @mixin hook-alert-close-hover(){}

// @mixin hook-alert-primary(){}

// @mixin hook-alert-success(){}

// @mixin hook-alert-warning(){}

// @mixin hook-alert-danger(){}

// @mixin hook-alert-misc(){}