NxTIC/css/notif.scss

body > #notification-container{

    display: flex;
    position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;

    flex-direction: column;
    flex-wrap: nowrap;

    z-index: 200;
    pointer-events: none;


    .notification-element{
        display: block;
        position: relative;
            margin: .2em auto;
            padding: 0 1em;

        border-radius: 3px;
        border: 1px solid #ddd;
        border-bottom: 1px solid #bbb;
        box-shadow: inset 0 0 1em #eee;

        background-color: #fff;

        pointer-events: all;
        cursor: default;

        // ECARTEMENT DU BOTTOM POUR LE DERNIER
        &:last-child{
            margin-bottom: 1em;
        }


        // ANIMATION DE fadeIn + fadeOut
        transition: opacity .5s ease-in-out;
        opacity: 0;

        &.notification-visible{
            opacity: 1;
        }


        // ANIMATION DE @HOVER
        &:hover{
            box-shadow: inset 0 0 1em #eee, 0 0 20px #aaa;
        }



        // DIFFERENTS THEMES
        strong[class]{

            text-transform: uppercase;
            padding-left: 1.5em;

            &:before{
                content: '';
                display: inline-block;
                position: absolute;
                top: 1.2em;
                left: 1em;
                width: .9em;
                height: .9em;

                border-radius: 50% / 50%;
                box-shadow: inset -1px 1px 2px rgba(50, 50, 50, .5);

                background-color: red;
            }

            // WARNING
            &.warning:before{ background-color: #dd6a45; }
            // INFO
            &.info:before{ background-color: #2195da; }
            // SUCCESS
            &.success:before{ background-color: #5fca4a; }
            // ERROR
            &.error:before{ background-color: #d94747; }
        }


    }

}