ng2-flashbox/components/flashbox/flashbox.component.css

Angular2 - FlashBox(ng2-flashbox) component

.show{
opacity: 1 !important;
}

.hide{
opacity: 0;
transition: .5s ease-in-out all;
}

.pozicija{
    position: fixed;
    top: 0px;
    right: 0px;
    max-width: 300px;    
}

.position_tr{
    position: fixed;
    top: 15px;
    right: 15px;
}

.position_tm{
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    top: 15px;    
}

.position_tl{
    position: fixed;
    top: 15px;
    left: 15px;
}

.position_cr{
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    right: 15px;
}

.position_cm{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 300px; 
}

.position_cl{
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    left: 15px;
}

.position_br{
    position: fixed;
    bottom: 15px;
    right: 15px;
}

.position_bm{
    position: fixed;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
}

.position_bl{
    position: fixed;
    bottom: 15px;
    left: 15px;
}

.type_common{
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    /*padding: .2em .6em .3em;*/
    padding-left:5px;
    padding-right: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
}

.type_default{
    background-color: #777;
}

.type_primary{
    background-color: #337ab7;

}

.type_success{
    background-color: #5cb85c;
}

.type_info{
    background-color: #5bc0de;
}

.type_warning{
    background-color: #f0ad4e;
}

.type_danger{
    background-color: #d9534f;
}

.boja_ok{
    border: 3px solid rgb(0,100,0);
    background-color: rgb(0,200,0);
}

.boja_notok{
    border: 3px solid rgb(100,0,0);
    background-color: rgb(200,0,0);
}