@hawk-ui/toast/dist/index.min.css

hawk-ui: Basic Toast Component

.hawk-toast{position:relative;padding:15px;background-color:#fff;border-radius:4px;box-shadow:-2px 2px 12px 0 rgba(0,0,0,.1);border-left:5px solid #6997db;overflow:auto}.hawk-toast__top-right{margin:10px 10px 0 0}.hawk-toast__top-right-animation{transition:transform .6s ease-in-out;animation:toast-in-right .7s}.hawk-toast__bottom-right{margin:0 10px 10px 0}.hawk-toast__bottom-right-animation{transition:transform .6s ease-in-out;animation:toast-in-right .7s}.hawk-toast__top-left{margin:10px 0 0 10px}.hawk-toast__top-left-animation{transition:transform .6s ease-in;animation:toast-in-left .7s}.hawk-toast__bottom-left{margin:0 0 10px 10px}.hawk-toast__bottom-left-animation{transition:transform .6s ease-in;animation:toast-in-left .7s}.hawk-toast__container{display:flex;justify-content:space-between;width:300px;font-size:13px}.hawk-toast__container-icon{font-size:18px;margin-right:10px}.hawk-toast__container-close{font-size:14px;font-weight:500;color:#555;cursor:pointer}.hawk-toast .fa-check-circle{color:#408c40}.hawk-toast .fa-times-circle{color:#e48481}.hawk-toast .fa-info-circle{color:#2dd2d2}.hawk-toast .fa-exclamation-triangle{color:#dbba57}.hawk-toast__content{display:flex}.hawk-toast__content .title{font-weight:500;text-transform:capitalize}.hawk-toast__content .message{text-transform:capitalize;font-size:13px}.hawk-toast__overflow{width:100%;height:100%;position:fixed;left:0;top:0;overflow:auto;z-index:-1;background:rgba(0,0,0,.8)}@keyframes toast-in-right{0%{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes toast-in-left{0%{transform:translateX(-100%)}to{transform:translateX(0)}}