Chatwoot/app/javascript/dashboard/assets/scss/_animations.scss
Dwiferdio Seagal Putra c1d68cc8ae
feat: Show refresh prompt on network disconnect (#3165)
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
2021-10-12 11:57:36 +05:30

109 lines
2.3 KiB
SCSS

/* Enter and leave animations can use different */
/* durations and timing functions. */
.slide-fade-enter-active {
transition: all .3s $ease-in-cubic;
}
.slide-fade-leave-active {
transition: all .3s $ease-out-cubic;
}
.slide-fade-enter, .slide-fade-leave-to {
opacity: 0;
transform: translateX(10px);
}
.slide-fade-enter {
transform: translateX($space-micro);
}
.slide-fade-leave-to {
transform: translateX($space-medium);
}
.conversations-list-enter-active, .conversations-list-leave-active {
transition: all .25s $ease-out-cubic;
}
.conversations-list-enter, .conversations-list-leave-to /* .conversations-list-leave-active for <2.1.8 */ {
opacity: 0;
transform: translateX($space-medium);
}
.menu-list-enter-active, .menu-list-leave-active {
transition: all .2s $ease-out-cubic;
}
.menu-list-enter, .menu-list-leave-to /* .conversations-list-leave-active for <2.1.8 */ {
opacity: 0;
transform: translateX($space-medium);
}
.slide-up-enter-active {
transition: all .3s $ease-in-cubic;
}
.slide-up-leave-active {
transition: all .3s $ease-out-cubic;
}
.slide-up-enter, .slide-up-leave-to
/* .slide-fade-leave-active for <2.1.8 */ {
transform: translateY(-$space-medium);
opacity: 0;
}
.menu-slide-enter-active,
.menu-slide-leave-active {
transform: translateY(0);
transition: transform 0.25s $ease-in-cubic, opacity 0.15s $ease-in-cubic;
}
.menu-slide-enter, .menu-slide-leave-to
/* .slide-fade-leave-active for <2.1.8 */ {
transform: translateY($space-small);
opacity: 0;
}
.toast-fade-enter-active {
transition: all .3s $ease-in-sine;
}
.toast-fade-leave-active {
transition: all .1s $ease-out-sine;
}
.toast-fade-enter, .toast-fade-leave-to
/* .toast-fade-leave-active for <2.1.8 */ {
transform: translateY(-$space-small);
opacity: 0;
}
.modal-fade-enter-active {
transition: all .3s $ease-in-sine;
}
.modal-fade-leave-active {
transition: all .1s $ease-out-sine;
}
.modal-fade-enter, .modal-fade-leave-to
/* .slide-fade-leave-active for <2.1.8 */ {
opacity: 0;
}
.network-notification-fade-enter-active {
transition: all .1s $ease-in-sine;
}
.network-notification-fade-leave-active {
transition: all .1s $ease-out-sine;
}
.network-notification-fade-enter,
.network-notification-fade-leave-to {
transform: translateY(-$space-small);
opacity: 0;
}