react-notification-center/src/less/notifications.less

react-notification-center keep all your notification in a single place

.r-notifications {
    width: 100%;
    height: 450px;
    z-index: 1;
    overflow: hidden;
    position: relative;
    z-index: 0;
        
    ul.rn-ul {
        padding: 0;
    }   
        
    li.rn-item {
        width: 100%;
        padding: 10px 0;
        list-style: none;
        cursor: pointer;
        position: relative;
        border-bottom: 1px solid #f5f5f5;
        
        &:before {
            display: none;
            content: '';
            width: 5px;
            height: 5px;
            position: absolute;
            top: 50%;
            left: 8px;
            background-color: #666;
            border-radius: 50%;
        }
        
        &:hover {
            background-color: #fcfcfc;
            box-shadow: inset 0px 0px 2px #f2f2f2;
        }
        
        &.new {
            &:before {
                display: block;
            }
        }

        &:last-child {
            border: none;
        }
        
        .short-desc {
            width: 80%;
            margin: 5px auto;
            
            .notification-tag {
                color: white;
                border-radius: 16px;
                padding: 3px 7px;
                font-size: 11px;
                text-transform: uppercase;
                margin-right: 4px;
                line-height: 20px;

                &.info {
                    background-color: #58abc3;
                }

                &.success {
                    background-color: #60bb71;
                }

                &.warning {
                    background-color: #f7a336;
                }

                &.danger {
                    background-color: #db6a64;
                }
            }
            
            &:hover {
                .title {
                    text-decoration: underline;
                }
            }
            
            .date {
                display: block;
                font-size: 10px;
                color: #999;
                clear: both;
                margin-top: 5px;
            }
            
        }
    }
}