flash-message-toast.scss

.flashMessageOverlay {
    &.centerAlign .flashMessageWrapper {
        padding-left: 25%;
        padding-right: 25%;
        @media (max-width: 992px) {
            padding-left: 5%;
            padding-right: 5%;
        }
    }
    &.rightAlign .flashMessageWrapper {
        right: 5%;
        left: inherit;
        width: 50%;
        @media (max-width: 992px) {
            width: 90%;
        }
    }
    &.leftAlign .flashMessageWrapper {
        left: 5%;
        right: inherit;
        width: 50%;
        @media (max-width: 992px) {
            width: 90%;
        }
    }
    &.topAlign .flashMessageWrapper {
        top: 10%;
    }
    &.bottomAlign .flashMessageWrapper {
        bottom: 10%;
    }
    .flashMessageWrapper {
        box-sizing: border-box;
        min-width: 10rem;
        width: 100%;
        max-height: 80%;
        text-align: center;
        color: #fff;
        opacity: .95;
        position: fixed;
        z-index: 9999;
        top: inherit;
        left: inherit;
        .flashMessage {
            font-size: 1rem;
            box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
            border-radius: 2px;
            padding: 1rem .5rem;
            position: relative;
            &.hasCloseButton {
                padding: 1rem 2rem 1rem .5rem;
            }
            .flashMessageClose {
                width: 1rem;
                height: 1rem;
                position: absolute;
                top: .5rem;
                right: .5rem;
                cursor: pointer;
                background-image: url(close.png);
                background-repeat: no-repeat;
                background-size: contain;
            }
            .flashMessageClose:hover {
                cursor: pointer;
                opacity: .8;
            }
        }
        .flashMessage.flashMessageToast {
            background-color: #323232;
        }
        .flashMessage.flashMessageSuccess {
            background-color: #00be9d;
        }
        .flashMessage.flashMessageError {
            background-color: #f35f62;
        }
        .flashMessage.flashMessageWarning {
            background-color: #f7c32c;
        }
    }
    &.flashMessageSlideDownToShow .flashMessageWrapper {
        animation: flashMessageSlideDownToShow .5s ease-out;
    }
    &.flashMessageSlideUpToHide .flashMessageWrapper {
        animation: flashMessageSlideUpToHide .5s ease-in;
        opacity: 0;
    }
    &.flashMessageSlideUpToShow .flashMessageWrapper {
        animation: flashMessageSlideUpToShow .5s ease-out;
    }
    &.flashMessageSlideDownToHide .flashMessageWrapper {
        animation: flashMessageSlideDownToHide .5s ease-in;
        opacity: 0;
    }
    &.flashMessageSlideLeftToShow .flashMessageWrapper {
        animation: flashMessageSlideLeftToShow .5s ease-out;
    }
    &.flashMessageSlideRightToHide .flashMessageWrapper {
        animation: flashMessageSlideRightToHide .5s ease-in;
        opacity: 0;
    }
    &.flashMessageSlideRightToShow .flashMessageWrapper {
        animation: flashMessageSlideRightToShow .5s ease-out;
    }
    &.flashMessageSlideLeftToHide .flashMessageWrapper {
        animation: flashMessageSlideLeftToHide .5s ease-in;
        opacity: 0;
    }
    @keyframes flashMessageSlideDownToShow {
        0% {
            top: -100%;
            opacity: 0;
        }
        60% {
            top: 18%;
            opacity: 1;
        }
        100% {
            top: 10%;
        }
    }
    @keyframes flashMessageSlideUpToHide {
        0% {
            top: 10%;
            opacity: 1;
        }
        40% {
            top: 13%;
        }
        100% {
            top: -100%;
            opacity: 0;
        }
    }
    @keyframes flashMessageSlideUpToShow {
        0% {
            bottom: -100%;
            opacity: 0;
        }
        70% {
            bottom: 18%;
            opacity: 1;
        }
        100% {
            bottom: 10%;
        }
    }
    @keyframes flashMessageSlideDownToHide {
        0% {
            bottom: 10%;
            opacity: 1;
        }
        30% {
            bottom: 13%;
        }
        100% {
            bottom: -100%;
            opacity: 0;
        }
    }
    @keyframes flashMessageSlideLeftToShow {
        0% {
            right: -100%;
            opacity: 0;
        }
        70% {
            right: calc(5% + 3rem);
            opacity: .8;
        }
        100% {
            right: 5%;
            opacity: 1;
        }
    }
    @keyframes flashMessageSlideRightToHide {
        0% {
            right: 5%;
            opacity: 1;
        }
        30% {
            right: calc(5% + 3rem);
            opacity: .8;
        }
        100% {
            right: -100%;
            opacity: 0;
        }
    }
    @keyframes flashMessageSlideRightToShow {
        0% {
            left: -100%;
            opacity: 0;
        }
        70% {
            left: calc(5% + 3rem);
            opacity: .8;
        }
        100% {
            left: 5%;
            opacity: 1;
        }
    }
    @keyframes flashMessageSlideLeftToHide {
        0% {
            left: 5%;
            opacity: 1;
        }
        30% {
            left: calc(5% + 3rem);
            opacity: .8;
        }
        100% {
            left: -100%;
            opacity: 0;
        }
    }
}