notification-signal.less 1.9 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96
.nsc-container {
    position: relative !important;

    > .nsc-content {
        position: absolute;
        top: 0px;
        left: 0px;
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
        z-index: 100000;
        display: none;
        transition: width 0.3s ease-in-out;
    }

    > .nsc-content.active {
        display: block;
    }

    > .nsc-content.inactive {
        display: none;
    }

    > .nsc-content.loading {
        animation: breath 2s infinite ease-in-out;
        width: 0%;
        background: #c6ffdd;
        /* fallback for old browsers */
        background: -webkit-linear-gradient(to right, #f7797d, #fbd786, #c6ffdd) !important;
        /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(to right, #f7797d, #fbd786, #c6ffdd) !important;
        /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }

    > .nsc-content.error {
        animation: breath 0.5s infinite ease-in-out;
        background: var(--app-color-danger);
    }

    > .nsc-content.waring {
        animation: breath 0.5s infinite ease-in-out;
        background: var(--app-color-warning);
    }

    > .nsc-content.success {
        animation: breath 0.5s infinite ease-in-out;
        background: var(--app-color-success);
    }

    @keyframes breath {
        from {
            opacity: 0.5;
        }

        10% {
            opacity: 0.6;
        }

        20% {
            opacity: 0.7;
        }

        30% {
            opacity: 0.8;
        }

        40% {
            opacity: 0.9;
        }

        50% {
            opacity: 1;
        }

        60% {
            opacity: 0.9;
        }

        70% {
            opacity: 0.8;
        }

        80% {
            opacity: 0.7;
        }

        90% {
            opacity: 0.6;
        }

        to {
            opacity: 0.5;
        }
    }
}