Practice/_src/admin/scss/plugins/ax5ui/_ax5toast.scss

//============== toast
$ax5toast-z-index: 2000;
// 0:left,top / 1:right,top / 2:right,bottom / 3:left,bottom
$ax5toast-container-width: auto !default;
$ax5toast-container-padding: 10px !default;
$ax5toast-box-model: border-box  !default;
$ax5toast-border: 1px solid rgb(255/2, 255/2, 255/2) !default;
$ax5toast-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.175) !default;
$ax5toast-body-padding: 6px !default;
$ax5toast-border-radius: 8px !default;
$ax5toast-opacity: 0.9 !default;
$ax5toast-box-margin: 5px 0px 5px 0px !default;
$ax5toast-icon-size: 24px;
$ax5toast-easing: $ease-in-out-quint;
$ax5toast-easing-time: 0.3s;

//** Border color for elements within toast
$ax5toast-default-text: #282828 !default;
$ax5toast-default-bg: #fff !default;
$ax5toast-default-color: $body-color !default;

$ax5toast-primary-text: $brand-primary !default;
$ax5toast-primary-bg: #fff !default;
$ax5toast-primary-color: $brand-primary !default;

$ax5toast-success-text: $brand-success !default;
$ax5toast-success-bg: #fff !default;
$ax5toast-success-color: $brand-success !default;

$ax5toast-info-text: $brand-info !default;
$ax5toast-info-bg: #fff !default;
$ax5toast-info-color: $brand-info !default;

$ax5toast-warning-text: #fff  !default;
$ax5toast-warning-bg: $brand-warning !default;
$ax5toast-warning-color: $brand-warning !default;

$ax5toast-danger-text: #fff !default;
$ax5toast-danger-bg: $brand-warning !default;
$ax5toast-danger-color: $brand-danger !default;

@mixin ax-toast() {
    box-sizing: $ax5toast-box-model;
    border: $ax5toast-border;
    opacity: $ax5toast-opacity;

    @include ax-border-radius($ax5toast-border-radius);
    box-shadow: $ax5toast-box-shadow;
    position: relative;
    margin: $ax5toast-box-margin;
}

@mixin ax-toast-section() {
    display: table;
    padding: $ax5toast-body-padding;
    .ax-toast-icon {
        display: table-cell;
        padding: $ax5toast-body-padding;
        text-align: left;
        font-size: $ax5toast-icon-size;
        width: $ax5toast-icon-size;
        vertical-align: middle;
    }
    .ax-toast-body {
        display: table-cell;
        padding: $ax5toast-body-padding;
        text-align: left;
        vertical-align: middle;
    }
    .ax-toast-buttons {
        display: table-cell;
        padding: $ax5toast-body-padding;
        text-align: right;
        vertical-align: middle;
        button {
            &:not(:last-child) {
                margin-right: 3px;
            }
        }
    }
    .ax-toast-close {
        display: table-cell;
        padding: $ax5toast-body-padding;
        text-align: right;
        vertical-align: top;
        text-decoration: none;
        cursor: pointer;
    }
}

@mixin toast-variant($text-color, $bg-color, $color) {
    background: $bg-color;
    color: $text-color;
    .ax-toast-icon {
        color: $color;
    }
    .ax-toast-close {
        color: $text-color;
    }
}

@include keyframes(ax-toast-bottom) {
    from {
        @include transform(translateY(-100px) scale(0.7));
    }
    to {
        //@include opacity($mask-bg-opacity);
        @include transform(translateY(0px) scale(1))
    }
}

@include keyframes(ax-toast-top) {
    from {
        @include transform(translateY(100px) scale(0.7));
    }
    to {
        //@include opacity($mask-bg-opacity);
        @include transform(translateY(0px) scale(1))
    }
}

@include keyframes(ax-toast-removed-bottom) {
    from {
        @include transform(translateY(0px));
        opacity: 1.0;
    }
    to {
        @include transform(translateY(10px) scale(0.7));
        opacity: 0.0;
    }
}

@include keyframes(ax-toast-removed-top) {
    from {
        @include transform(translateY(0px));
        opacity: 1.0;
    }
    to {
        @include transform(translateY(-10px) scale(0.7));
        opacity: 0.0;
    }
}

@include keyframes(ax-toast-destroy) {
    from {
        @include transform(scale(1));
        opacity: 1.0;
    }
    to {
        @include transform(scale(1.5));
        opacity: 0.0;
    }
}

// mixins --------------------------------------------- end

.ax5-ui-toast-container {
    z-index: $ax5toast-z-index;
    position: fixed;
    width: $ax5toast-container-width;
    padding: $ax5toast-container-padding;

    box-sizing: border-box;
    *,
    *:before,
    *:after {
        box-sizing: border-box;
    }

    .ax5-ui-toast {
        @include ax-toast();
        @include ax-toast-section();
        @include transition(all $ax5toast-easing-time ease-in-out);

        @include toast-variant($ax5toast-default-text, $ax5toast-default-bg, $ax5toast-default-color);

        &.primary {
            @include toast-variant($ax5toast-primary-text, $ax5toast-primary-bg, $ax5toast-primary-color);
        }
        &.success {
            @include toast-variant($ax5toast-success-text, $ax5toast-success-bg, $ax5toast-success-color);
        }
        &.info {
            @include toast-variant($ax5toast-info-text, $ax5toast-info-bg, $ax5toast-info-color);
        }
        &.warning {
            @include toast-variant($ax5toast-warning-text, $ax5toast-warning-bg, $ax5toast-warning-color);
        }
        &.danger {
            @include toast-variant($ax5toast-danger-text, $ax5toast-danger-bg, $ax5toast-danger-color);
        }
    }

    &.bottom-left {
        left: 0;
        bottom: 0;

        .ax5-ui-toast {
            @include animation(ax-toast-top $ax5toast-easing-time $ax5toast-easing);
            &.removed {
                @include animation(ax-toast-removed-bottom $ax5toast-easing-time ease forwards);
            }
            &.destroy {
                @include animation(ax-toast-destroy $ax5toast-easing-time ease forwards);
            }
        }
    }
    &.bottom-right {
        right: 0;
        bottom: 0;

        .ax5-ui-toast {
            @include animation(ax-toast-top $ax5toast-easing-time $ax5toast-easing);
            &.removed {
                @include animation(ax-toast-removed-bottom $ax5toast-easing-time ease forwards);
            }
            &.destroy {
                @include animation(ax-toast-destroy $ax5toast-easing-time ease forwards);
            }
        }

    }

    &.top-left {
        left: 0;
        top: 0;

        .ax5-ui-toast {
            @include animation(ax-toast-bottom $ax5toast-easing-time $ax5toast-easing);

            &.removed {
                @include animation(ax-toast-removed-top $ax5toast-easing-time ease forwards);
            }
            &.destroy {
                @include animation(ax-toast-destroy $ax5toast-easing-time ease forwards);
            }
        }
    }

    &.top-right {
        right: 0;
        top: 0;

        .ax5-ui-toast {
            @include animation(ax-toast-bottom $ax5toast-easing-time $ax5toast-easing);
            &.removed {
                @include animation(ax-toast-removed-top $ax5toast-easing-time ease forwards);
            }
            &.destroy {
                @include animation(ax-toast-destroy $ax5toast-easing-time ease forwards);
            }
        }
    }

}