angular-notification.css

/**
 * angular-notification v1.0
 *
 * Copyright (c) 2014 Yuthasak Tanruengsri yuthasak.tanruengsri@googlemail.com
 * https://github.com/ytanruengsri/angular-notification
 *
 * License: MIT
 */

.y-notication {
    position: fixed;
    display: block;
    width: 300px;
}

.y-notication.top-left {
    left: 20px;
    top: 20px;
}

.y-notication.top-center {
    left: 50%;
    margin-left: -150px;
    top: 20px;
}

.y-notication.top-right {
    right: 20px;
    top: 20px;
}

.y-notication.bottom-left {
    left: 20px;
    bottom: 20px;
}

.y-notication.bottom-center {
    left: 50%;
    margin-left: -150px;
    bottom: 20px;
}

.y-notication.bottom-right {
    right: 20px;
    bottom: 20px;
}

.y-notification-msg {
    opacity: 0;
    margin: 5px 0;
    padding: 8px 10px;


    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;

    -webkit-animation: fade-in .5s forwards ease-in-out;
    -moz-animation:    fade-in .5s forwards ease-in-out;
    animation:         fade-in .5s forwards ease-in-out;
}

.y-notification-msg:hover {
    cursor: pointer;
}

.y-notification-msg.success {
    color: #156A16;
    background-color: #65AB4B;
    border-color: #d6e9c6;
}

.y-notification-msg.error {
    color: #811614;
    background-color: #B74343;
    border-color: #811614;
}

.y-notification-msg.info {
    color: #0F5172;
    background-color: #5394B5;
    border-color: #166186;
}

.y-notification-msg.warn {
    color: #8a6d3b;
    background-color: #E6D78A;
    border-color: #faebcc;
}

.y-notification-title {
    font-weight: bold;
}

.y-notication > div.ng-leave {
    -webkit-animation: fade-out .5s forwards ease-in-out;
    -moz-animation:    fade-out .5s forwards ease-in-out;
    animation:         fade-out .5s forwards ease-in-out;
}

.y-notication > div.ng-leave {
    opacity: 1;
}

.y-notication > div.ng-leave.ng-leave-active {
    opacity: 0;
}

@-webkit-keyframes fade-in {
    0%   { opacity: 0; margin-top: -10px;}
    100% { opacity: 1; margin-top: 0;}
}
@-moz-keyframes fade-in {
    0%   { opacity: 0; margin-top: -10px;}
    100% { opacity: 1; margin-top: 0;}
}
@-o-keyframes fade-in {
    0%   { opacity: 0; margin-top: -10px;}
    100% { opacity: 1; margin-top: 0;}
}
@keyframes fade-in {
    0%   { opacity: 0; margin-top: -10px;}
    100% { opacity: 1; margin-top: 0;}
}

@-webkit-keyframes fade-out {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}
@-moz-keyframes fade-out {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}
@-o-keyframes fade-out {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes fade-out {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}


.y-notication {
    position: fixed;
    display: block;
    width: 300px;
}

.y-notication.top-left {
    left: 20px;
    top: 20px;
}

.y-notication.top-center {
    left: 50%;
    margin-left: -150px;
    top: 20px;
}

.y-notication.top-right {
    right: 20px;
    top: 20px;
}

.y-notication.bottom-left {
    left: 20px;
    bottom: 20px;
}

.y-notication.bottom-center {
    left: 50%;
    margin-left: -150px;
    bottom: 20px;
}

.y-notication.bottom-right {
    right: 20px;
    bottom: 20px;
}

.y-notification-msg {
    opacity: 0;
    margin: 5px 0;
    padding: 8px 10px;


    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;

    -webkit-animation: fade-in .5s forwards ease-in-out;
    -moz-animation:    fade-in .5s forwards ease-in-out;
    animation:         fade-in .5s forwards ease-in-out;
}

.y-notification-msg:hover {
    cursor: pointer;
}

.y-notification-msg.success {
    color: #156A16;
    background-color: #65AB4B;
    border-color: #d6e9c6;
}

.y-notification-msg.error {
    color: #811614;
    background-color: #B74343;
    border-color: #811614;
}

.y-notification-msg.info {
    color: #0F5172;
    background-color: #5394B5;
    border-color: #166186;
}

.y-notification-msg.warn {
    color: #8a6d3b;
    background-color: #E6D78A;
    border-color: #faebcc;
}

.y-notification-title {
    font-weight: bold;
}

.y-notication > div.ng-leave {
    -webkit-animation: fade-out .5s forwards ease-in-out;
    -moz-animation:    fade-out .5s forwards ease-in-out;
    animation:         fade-out .5s forwards ease-in-out;
}

.y-notication > div.ng-leave {
    opacity: 1;
}

.y-notication > div.ng-leave.ng-leave-active {
    opacity: 0;
}

@-webkit-keyframes fade-in {
    0%   { opacity: 0; margin-top: -10px;}
    100% { opacity: 1; margin-top: 0;}
}
@-moz-keyframes fade-in {
    0%   { opacity: 0; margin-top: -10px;}
    100% { opacity: 1; margin-top: 0;}
}
@-o-keyframes fade-in {
    0%   { opacity: 0; margin-top: -10px;}
    100% { opacity: 1; margin-top: 0;}
}
@keyframes fade-in {
    0%   { opacity: 0; margin-top: -10px;}
    100% { opacity: 1; margin-top: 0;}
}

@-webkit-keyframes fade-out {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}
@-moz-keyframes fade-out {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}
@-o-keyframes fade-out {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes fade-out {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}