react-notification-center
Version:
react-notification-center keep all your notification in a single place
1 lines • 5.76 kB
CSS
.r-notification{width:100%;height:450px;position:absolute;top:0;left:0;z-index:2;-webkit-transform:translate(-400px,0);transform:translate(-400px,0);transition:all .3s ease-in-out}.r-notification.active{-webkit-transform:translate(0,0);transform:translate(0,0)}.r-notification .desc{padding:20px}.r-notification button{display:block;width:50px;height:30px;margin:auto;margin-top:4px;background-color:transparent;border:none;outline:0}.r-notification button:hover{cursor:pointer}.r-notification button .back{display:block;width:40px;height:4px;background-color:#ccc;position:relative;border-radius:4px}.r-notification button .back: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}.r-notifications{width:100%;height:450px;z-index:1;overflow:hidden;position:relative;z-index:0}.r-notifications ul.rn-ul{padding:0}.r-notifications li.rn-item{width:100%;padding:10px 0;list-style:none;cursor:pointer;position:relative;border-bottom:1px solid #f5f5f5}.r-notifications li.rn-item:before{display:none;content:'';width:5px;height:5px;position:absolute;top:50%;left:8px;background-color:#666;border-radius:50%}.r-notifications li.rn-item:hover{background-color:#fcfcfc;box-shadow:inset 0 0 2px #f2f2f2}.r-notifications li.rn-item.new:before{display:block}.r-notifications li.rn-item:last-child{border:none}.r-notifications li.rn-item .short-desc{width:80%;margin:5px auto}.r-notifications li.rn-item .short-desc .notification-tag{color:#fff;border-radius:16px;padding:3px 7px;font-size:11px;text-transform:uppercase;margin-right:4px;line-height:20px}.r-notifications li.rn-item .short-desc .notification-tag.info{background-color:#58abc3}.r-notifications li.rn-item .short-desc .notification-tag.success{background-color:#60bb71}.r-notifications li.rn-item .short-desc .notification-tag.warning{background-color:#f7a336}.r-notifications li.rn-item .short-desc .notification-tag.danger{background-color:#db6a64}.r-notifications li.rn-item .short-desc:hover .title{text-decoration:underline}.r-notifications li.rn-item .short-desc .date{display:block;font-size:10px;color:#999;clear:both;margin-top:5px}.react-notification-center{width:24px;height:24px;position:relative;z-index:99999;font-family:"Lucida Sans Unicode","Lucida Grande",sans-serif}.react-notification-center *,.react-notification-center :after,.react-notification-center :before{box-sizing:border-box}.react-notification-center .r-notifications-icon{width:10px;height:10px;border:1px solid #fff;border-radius:50px;text-align:center;line-height:20px;color:#fff;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}.react-notification-center .r-notifications-icon.active{background-color:#ff5c5c;width:22px;height:22px;top:1px;left:1px}.react-notification-center .r-notifications-icon:hover{-webkit-transform:scale(1.1);transform:scale(1.1)}.react-notification-center .r-notifications-icon.pulse{-webkit-animation-name:pulse_animation;animation-name:pulse_animation;animation-duration:.3s;animation-iteration-count:2;animation-timing-function:linear;-webkit-animation-name:webkit_pulse_animation;-webkit-animation-duration:.3s;-webkit-animation-iteration-count:2;-webkit-animation-timing-function:linear}.react-notification-center .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}.react-notification-center .rn-header h4{width:100%;padding:0 20px;margin:0;text-align:center;line-height:50px;color:#333}.react-notification-center .rn-content{width:100%;height:360px;background-color:#fff;overflow:hidden;overflow-y:auto;font-size:14px}.react-notification-center .rn-content .no-rn{width:100%;height:100%;text-align:center;color:#999;line-height:250px;overflow:hidden}.react-notification-center .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}.react-notification-center .rr-wrapper{box-shadow:3px 3px 25px #dbdbdb;border-radius:3px;width:350px;height:450px;position:absolute;z-index:1}.react-notification-center .rr-wrapper.left{top:40px;left:-25px}.react-notification-center .rr-wrapper: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}.react-notification-center .rr-wrapper .notification-holder{width:100%;height:100%;position:absolute;overflow:hidden;border-radius:3px}.react-notification-center.light-theme .notification-box{background-color:#fff}.react-notification-center.light-theme .notification-list .header{border-bottom:1px solid #f0f0f0}.react-notification-center.light-theme .notification-list .header h4{color:#666}.react-notification-center.light-theme .notification-list .contents li.item{border-bottom:1px solid #f9f9f9}.react-notification-center.light-theme .notification-list .contents li.item .short-desc{color:#444}.react-notification-center.light-theme .notification-list .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)}}@-webkit-keyframes pulse_animation{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.2);transform:scale(1.2)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes pulse_animation{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.2);transform:scale(1.2)}100%{-webkit-transform:scale(1);transform:scale(1)}}