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

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

.r-notification {
    width: 100%;
    height: 450px;
    position: absolute;
    top: 0;
    left: 0px;
    z-index: 2;
    transform: translate(-400px, 0);
    transition: all .3s ease-in-out;
    
    &.active {
        transform: translate(0, 0);  
    }
    
    .desc {
        padding: 20px;
    }

    button {
        display: block;
        width: 50px;
        height: 30px;
        margin: auto;
        margin-top: 4px;
        background-color: transparent;
        border: none;
        outline: none;

        &:hover {
            cursor: pointer;
        }
        
        .back {
            display: block;
            width: 40px;
            height: 4px;
            background-color: #ccc;
            position: relative; 
            border-radius: 4px;
            
            &:before {
                content: '';
                width: 0;
                height: 0;
                border-top: 7px solid transparent;
                border-right: 7px solid #ccc;
                border-bottom: 7px solid transparent;
                position: absolute;
                top: -5px;
                left: -5px;
            }
        }
    }
}