87 lines
2.1 KiB
SCSS
87 lines
2.1 KiB
SCSS
|
|
/* Enter and leave animations can use different */
|
|
/* durations and timing functions. */
|
|
.slide-fade-enter-active {
|
|
@include transition(all .3s $ease-in-cubic);
|
|
}
|
|
.slide-fade-leave-active {
|
|
@include 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 {
|
|
@include 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 {
|
|
@include 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 {
|
|
@include transition(all .3s $ease-in-cubic);
|
|
}
|
|
|
|
.slide-up-leave-active {
|
|
@include 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 {
|
|
@include transition(all .15s $ease-in-cubic);
|
|
}
|
|
|
|
.menu-slide-enter, .menu-slide-leave-to
|
|
/* .slide-fade-leave-active for <2.1.8 */ {
|
|
@include transform(translateY($space-small));
|
|
opacity: 0;
|
|
}
|
|
|
|
|
|
.toast-fade-enter-active {
|
|
@include transition(all .3s $ease-in-sine);
|
|
}
|
|
.toast-fade-leave-active {
|
|
@include transition(all .1s $ease-out-sine);
|
|
}
|
|
.toast-fade-enter, .toast-fade-leave-to
|
|
/* .toast-fade-leave-active for <2.1.8 */ {
|
|
@include transform(translateY(-$space-small));
|
|
opacity: 0;
|
|
}
|
|
|
|
|
|
.modal-fade-enter-active {
|
|
@include transition(all .3s $ease-in-sine);
|
|
}
|
|
|
|
.modal-fade-leave-active {
|
|
@include transition(all .1s $ease-out-sine);
|
|
}
|
|
|
|
.modal-fade-enter, .modal-fade-leave-to
|
|
/* .slide-fade-leave-active for <2.1.8 */ {
|
|
opacity: 0;
|
|
}
|