gradido/websrc/src/less/09-notification.less

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

  Notification

  Datei     :   notification.css
  Datum     :   2020-06-10
  Autor     :   Christine Slotty
  Copyright :   Gradido

   ============================================================*/
@media screen {
    .header-notify {
        display: flex;
        flex-wrap: wrap;
        padding-left: 0;
        margin-bottom: 0;
        list-style: none;
        z-index: 10;
    }

    @media @tablet-down {
        .header-notify {
            justify-content: flex-end;
            margin-right: 93px;
            margin-top: 8px;
        }

    }

    .notify {
        display: block;
        padding: .5rem .3rem;
        color: @notify;
        animation: blinkingNotifySymbol 1.2s infinite;
    }

    .notify-alert {
        color: @alert;
        animation: blinkingAlertSymbol 1.2s infinite;
    }

    @keyframes blinkingNotifySymbol {
        0% {
            color: @notify;
        }

        49% {
            color: @notify;
        }

        60% {
            color: @notify-blink;
        }

        99% {
            color: @notify-blink;
        }

        100% {
            color: @notify;
        }

    }

    @keyframes blinkingAlertSymbol {
        0% {
            color: @alert;
        }

        49% {
            color: @alert;
        }

        60% {
            color: @alert-blink;
        }

        99% {
            color: @alert-blink;
        }

        100% {
            color: @alert;
        }

    }

    /*
    .notification-indicator-primary {
        background: #047006;
    }

    .notification-indicator-warning {
        background: #f0825f
    }
       .notification-indicator-secondary {
            background: grey
        }

        .notification-indicator-secondary:before {
            content: "";
            background: rgba(128, 128, 128, .5)
        }

        .notification-indicator-success {
            background: #00e093
        }

        .notification-indicator-success:before {
            content: "";
            background: rgba(0, 224, 147, .5)
        }

        .notification-indicator-info {
            background: #6c61f6
        }

        .notification-indicator-info:before {
            content: "";
            background: rgba(108, 97, 246, .5)
        }


        .notification-indicator-danger {
            background: #ff5f66
        }

        .notification-indicator-danger:before {
            content: "";
            background: rgba(255, 95, 102, .5)
        }

        .notification-indicator-light {
            background: #dfdfdf
        }

        .notification-indicator-light:before {
            content: "";
            background: rgba(223, 223, 223, .5)
        }

        .notification-indicator-dark {
            background: #74767b
        }

        .notification-indicator-dark:before {
            content: "";
            background: rgba(116, 118, 123, .5)
        }

        .notification-indicator-white {
            background: #fff
        }

        .notification-indicator-white:before {
            content: "";
            background: rgba(255, 255, 255, .5)
        }
    */
}