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

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

@import './notification.less';
@import './notifications.less';

.react-notification-center {
    width: 24px;
    height: 24px;
    position: relative;
    z-index: 99999;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    
    *, *:before, *:after {
        box-sizing: border-box;
    }
    
    .r-notifications-icon {
        width: 10px;
        height: 10px;
        border: 1px solid white;
        border-radius: 50px;
        text-align: center;
        line-height: 20px;
        color: white;
        position: absolute;
        z-index: 0;
        font-size: 10px;
        cursor: pointer;
        background-color: #ccc;
        top: 6px;
        left: 6px;
        overflow: hidden;
        transition: all .2s ease-in-out;
        
        &.active {
            background-color: #ff5c5c;
            width: 22px;
            height: 22px;
            top: 1px;
            left: 1px;
        }
        
        &:hover {
            transform: scale(1.1);
        }
        
        &.pulse {
            animation-name: pulse_animation;
            animation-duration: 300ms;
            animation-iteration-count: 2;
            animation-timing-function: linear;
            
            -webkit-animation-name: webkit_pulse_animation;
            -webkit-animation-duration: 300ms;
            -webkit-animation-iteration-count: 2;
            -webkit-animation-timing-function: linear;
        }
    }
    
    .rn-header {
        width: 100%;
        height: 50px;
        background-color: #fcfcfc;
        border-bottom: 1px solid #f0f0f0;
        border-top-right-radius: 3px;
        border-top-left-radius: 3px;
        overflow: hidden;
        h4 {
            width: 100%;
            padding: 0px 20px;
            margin: 0;
            text-align: center;
            line-height: 50px;
            color: #333;
        }
    }
    
    .rn-content {
        width: 100%;
        height: 360px;
        background-color: white;
        overflow: hidden;
        overflow-y: auto;
        font-size: 14px;
        
        .no-rn {
            width: 100%;
            height: 100%;
            text-align: center;
            color: #999;
            line-height: 250px;
            overflow: hidden;
        }
    }
    
    .rn-footer {
        width: 100%;
        height: 40px;
        background-color: #fcfcfc;
        border-top: 1px solid #f0f0f0;
        border-bottom-right-radius: 3px;
        border-bottom-left-radius: 3px;
        overflow: hidden;
    }
    
    .rr-wrapper {
        box-shadow: 3px 3px 25px #dbdbdb;
        border-radius: 3px;
        width: 350px;
        height: 450px;
        position: absolute;
        z-index: 1;
        
        &.left {
            top: 40px;
            left: -25px;
        }
        
        &:before {
            content: '';
            width: 0;
            height: 0;
            border-right: 15px solid transparent;
            border-left: 15px solid transparent;
            border-bottom: 15px solid #fcfcfc;
            position: absolute;
            top: -15px;
            left: 21px;
        }
        
        .notification-holder {
            border-radius: 3px;
            width: 100%;
            height: 100%;
            position: absolute;
            overflow: hidden;
            border-radius: 3px;
        }
    }
    
    &.light-theme {
        .notification-box {
            background-color: white;
        }
        
        .notification-list {
            .header {
                border-bottom: 1px solid #f0f0f0;
                h4 {
                    color: #666;
                }
            }
            
            .contents {
                li.item {
                    border-bottom: 1px solid #f9f9f9;
                    .short-desc {
                        color: #444;
                    }
                }
            }
            
            .footer {
                border-top: 1px solid #f0f0f0;
            }   
        }
    }
}

@-webkit-keyframes webkit_pulse_animation {
	0% { -webkit-transform: scale(1); }
	50% { -webkit-transform: scale(1.2); }
	100% { -webkit-transform: scale(1); }
}

@keyframes pulse_animation {
	0% { transform: scale(1); }
	50% { transform: scale(1.2); }
	100% { transform: scale(1); }
}