angular-notification-icons
Version:
angular directive to add notification popups to any element
95 lines (94 loc) • 1.74 kB
CSS
.angular-notifications-container {
position: relative;
display: table-cell;
width: 100%;
}
.angular-notifications-icon.overlay {
position: absolute;
z-index: 1;
}
.angular-notifications-icon {
right: -10px;
top: -10px;
border-radius: 50%;
text-align: center;
padding-left: 5px;
padding-right: 5px;
padding-top: 3px;
min-width: 25px;
height: 25px;
line-height: 1.15;
background: red;
color: white;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default;
}
.angular-notifications-icon.wide-icon {
border-radius: 30% / 50%;
background-clip: padding-box;
}
.angular-notifications-icon.fade {
animation: notification-fade-in 0.5s;
}
.angular-notifications-icon.bounce {
animation: notification-bounce 0.5s;
}
.angular-notifications-icon.grow {
animation: notification-grow 0.5s;
}
.angular-notifications-icon.shake {
animation: notification-shake 0.5s;
}
@keyframes notification-fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes notification-bounce {
30% {
transform: perspective(1px) translate(0, -8px);
}
60% {
transform: perspective(1px) translate(0, 0);
}
80% {
transform: perspective(1px) translate(0, -5px);
}
to {
transform: perspective(1px) translate(0, 0);
}
}
@keyframes notification-grow {
30% {
transform: scale(1.2);
}
60% {
transform: scale(0.8);
}
to {
transform: scale(1);
}
}
@keyframes notification-shake {
20% {
transform: rotate(20deg);
}
40% {
transform: rotate(-20deg);
}
60% {
transform: rotate(10deg);
}
80% {
transform: rotate(-10deg);
}
to {
transform: rotate(0);
}
}