web/static/scss/vue-toast.scss
.vue-toast-manager_container {
position: fixed;
width: 100%;
}
.vue-toast-manager_container.\--top {
top: 10px;
}
.vue-toast-manager_container.\--bottom {
bottom: 10px;
}
.vue-toast-manager_container.\--left {
left: 10px;
}
.vue-toast-manager_container.\--right {
right: 10px;
}
.vue-toast-manager_toasts {
position: relative;
}
.vue-toast_container {
position: absolute;
padding-bottom: 10px;
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transition: -webkit-transform .2s ease-out;
transition: -webkit-transform .2s ease-out;
transition: transform .2s ease-out;
transition: transform .2s ease-out, -webkit-transform .2s ease-out;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.vue-toast_container._default .vue-toast_message {
background-color: rgba(0,0,0, .9);
}
.vue-toast_container._undefined .vue-toast_message {
background-color: rgba(0,0,0, .9);
}
.vue-toast_container._info .vue-toast_message {
background-color: rgba(49,112,143, .9);
}
.vue-toast_container._success .vue-toast_message {
background-color: rgba(60,118,61, .9);
}
.vue-toast_container._warning .vue-toast_message {
background-color: rgba(138,109,59, .9);
}
.vue-toast_container._error .vue-toast_message {
background-color: rgba(169,68,66, .9);
}
.vue-toast-manager_container.\--top .vue-toast_container {
top: 0;
}
.vue-toast-manager_container.\--bottom .vue-toast_container {
bottom: 0;
}
.vue-toast-manager_container.\--left .vue-toast_container {
left: 0;
}
.vue-toast-manager_container.\--right .vue-toast_container {
right: 0;
}
.vue-toast_message {
padding: 15px 22px 15px 10px;
color: white;
font-family: arial, sans-serif;
}
.vue-toast_close-btn {
cursor: pointer;
position: absolute;
right: 5px;
top: 5px;
width: 14px;
height: 14px;
opacity: .7;
-webkit-transition: opacity .15s ease-in-out;
transition: opacity .15s ease-in-out;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.vue-toast_close-btn:hover {
opacity: .9;
}
.vue-toast_close-btn::before,
.vue-toast_close-btn::after {
content: '';
position: absolute;
top: 6px;
width: 14px;
height: 2px;
background-color: white;
}
.vue-toast_close-btn::before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.vue-toast_close-btn::after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.vue-toast-enter-active {
opacity: 0;
-webkit-transition: all .2s ease-out;
transition: all .2s ease-out;
}
.vue-toast-enter-to {
opacity: 1;
}
.vue-toast-leave-active {
opacity: 1;
-webkit-transition: all .1s ease-out;
transition: all .1s ease-out;
}
.vue-toast-leave-to {
opacity: 0;
}
/*# sourceMappingURL=vue-toast.css.map*/