@google-translate-select/theme-chalk
Version:
🚀 The package offer theme-chalk for @google-translate-select!
75 lines (74 loc) • 2.56 kB
CSS
/* src/constants/index.scss */
.fade-in-linear-enter-active,
.fade-in-linear-leave-active {
transition: var(--google-translate-select-transition-fade-linear);
}
.fade-in-linear-enter-from,
.fade-in-linear-leave-to {
opacity: 0;
}
.google-translate-select-fade-in-linear-enter-active,
.google-translate-select-fade-in-linear-leave-active {
transition: var(--google-translate-select-transition-fade-linear);
}
.google-translate-select-fade-in-linear-enter-from,
.google-translate-select-fade-in-linear-leave-to {
opacity: 0;
}
.google-translate-select-fade-in-enter-active,
.google-translate-select-fade-in-leave-active {
transition: all var(--google-translate-select-transition-duration) cubic-bezier(.55, 0, .1, 1);
}
.google-translate-select-fade-in-enter-from,
.google-translate-select-fade-in-leave-active {
opacity: 0;
}
.google-translate-select-zoom-in-center-enter-active,
.google-translate-select-zoom-in-center-leave-active {
transition: all var(--google-translate-select-transition-duration) cubic-bezier(.55, 0, .1, 1);
}
.google-translate-select-zoom-in-center-enter-from,
.google-translate-select-zoom-in-center-leave-active {
opacity: 0;
transform: scaleX(0);
}
.google-translate-select-zoom-in-top-enter-active,
.google-translate-select-zoom-in-top-leave-active {
opacity: 1;
transition: var(--google-translate-select-transition-md-fade);
transform: scaleY(1);
transform-origin: center top;
}
.google-translate-select-zoom-in-top-enter-active[data-popper-placement^=top],
.google-translate-select-zoom-in-top-leave-active[data-popper-placement^=top] {
transform-origin: center bottom;
}
.google-translate-select-zoom-in-top-enter-from,
.google-translate-select-zoom-in-top-leave-active {
opacity: 0;
transform: scaleY(0);
}
.google-translate-select-zoom-in-bottom-enter-active,
.google-translate-select-zoom-in-bottom-leave-active {
opacity: 1;
transition: var(--google-translate-select-transition-md-fade);
transform: scaleY(1);
transform-origin: center bottom;
}
.google-translate-select-zoom-in-bottom-enter-from,
.google-translate-select-zoom-in-bottom-leave-active {
opacity: 0;
transform: scaleY(0);
}
.google-translate-select-zoom-in-left-enter-active,
.google-translate-select-zoom-in-left-leave-active {
opacity: 1;
transition: var(--google-translate-select-transition-md-fade);
transform: scale(1, 1);
transform-origin: top left;
}
.google-translate-select-zoom-in-left-enter-from,
.google-translate-select-zoom-in-left-leave-active {
opacity: 0;
transform: scale(.45, .45);
}