91 lines
3.2 KiB
CSS
91 lines
3.2 KiB
CSS
.bd-toasts {
|
|
position: fixed;
|
|
display: flex;
|
|
top: 0;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
pointer-events: none;
|
|
z-index: 4000;
|
|
}
|
|
|
|
@keyframes bd-toast-up {
|
|
from {
|
|
transform: translateY(0);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.bd-toast {
|
|
animation: bd-toast-up 300ms ease;
|
|
transform: translateY(-10px);
|
|
background: #36393f;
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
box-shadow: 0 0 0 1px rgba(32, 34, 37, 0.6), 0 2px 10px 0 rgba(0, 0, 0, 0.2);
|
|
font-weight: 500;
|
|
color: #fff;
|
|
font-size: 14px;
|
|
opacity: 1;
|
|
margin-top: 10px;
|
|
pointer-events: none;
|
|
user-select: none;
|
|
}
|
|
|
|
@keyframes bd-toast-down {
|
|
to {
|
|
transform: translateY(0);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.bd-toast.closing {
|
|
animation: bd-toast-down 200ms ease;
|
|
animation-fill-mode: forwards;
|
|
opacity: 1;
|
|
transform: translateY(-10px);
|
|
}
|
|
|
|
.bd-toast.icon {
|
|
padding-left: 30px;
|
|
background-size: 20px 20px;
|
|
background-repeat: no-repeat;
|
|
background-position: 6px 50%;
|
|
}
|
|
|
|
.bd-toast.toast-info {
|
|
background-color: #4a90e2;
|
|
}
|
|
|
|
.bd-toast.toast-info.icon {
|
|
background-image: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjRkZGRkZGIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPiAgICA8cGF0aCBkPSJNMTIgMkM2LjQ4IDIgMiA2LjQ4IDIgMTJzNC40OCAxMCAxMCAxMCAxMC00LjQ4IDEwLTEwUzE3LjUyIDIgMTIgMnptMSAxNWgtMnYtNmgydjZ6bTAtOGgtMlY3aDJ2MnoiLz48L3N2Zz4=");
|
|
}
|
|
|
|
.bd-toast.toast-success {
|
|
background-color: #43b581;
|
|
}
|
|
|
|
.bd-toast.toast-success.icon {
|
|
background-image: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjRkZGRkZGIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPiAgICA8cGF0aCBkPSJNMTIgMkM2LjQ4IDIgMiA2LjQ4IDIgMTJzNC40OCAxMCAxMCAxMCAxMC00LjQ4IDEwLTEwUzE3LjUyIDIgMTIgMnptLTIgMTVsLTUtNSAxLjQxLTEuNDFMMTAgMTQuMTdsNy41OS03LjU5TDE5IDhsLTkgOXoiLz48L3N2Zz4=");
|
|
}
|
|
|
|
.bd-toast.toast-danger,
|
|
.bd-toast.toast-error {
|
|
background-color: #f04747;
|
|
}
|
|
|
|
.bd-toast.toast-danger.icon,
|
|
.bd-toast.toast-error.icon {
|
|
background-image: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjRkZGRkZGIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTEyIDJDNi40NyAyIDIgNi40NyAyIDEyczQuNDcgMTAgMTAgMTAgMTAtNC40NyAxMC0xMFMxNy41MyAyIDEyIDJ6bTUgMTMuNTlMMTUuNTkgMTcgMTIgMTMuNDEgOC40MSAxNyA3IDE1LjU5IDEwLjU5IDEyIDcgOC40MSA4LjQxIDcgMTIgMTAuNTkgMTUuNTkgNyAxNyA4LjQxIDEzLjQxIDEyIDE3IDE1LjU5eiIvPiAgICA8cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+PC9zdmc+");
|
|
}
|
|
|
|
.bd-toast.toast-warning,
|
|
.bd-toast.toast-warn {
|
|
background-color: #ffa600;
|
|
color: white;
|
|
}
|
|
|
|
.bd-toast.toast-warning.icon,
|
|
.bd-toast.toast-warn.icon {
|
|
background-image: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjRkZGRkZGIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPiAgICA8cGF0aCBkPSJNMSAyMWgyMkwxMiAyIDEgMjF6bTEyLTNoLTJ2LTJoMnYyem0wLTRoLTJ2LTRoMnY0eiIvPjwvc3ZnPg==");
|
|
} |