VWindow.css 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. .v-window {
  2. overflow: hidden;
  3. }
  4. .v-window__container {
  5. display: flex;
  6. flex-direction: column;
  7. height: inherit;
  8. position: relative;
  9. transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
  10. }
  11. .v-window__controls {
  12. position: absolute;
  13. left: 0;
  14. top: 0;
  15. width: 100%;
  16. height: 100%;
  17. display: flex;
  18. align-items: center;
  19. justify-content: space-between;
  20. padding: 0 16px;
  21. pointer-events: none;
  22. }
  23. .v-window__controls * {
  24. pointer-events: auto;
  25. }
  26. .v-window--show-arrows-on-hover {
  27. overflow: hidden;
  28. }
  29. .v-window--show-arrows-on-hover .v-window__left {
  30. transform: translateX(-200%);
  31. }
  32. .v-window--show-arrows-on-hover .v-window__right {
  33. transform: translateX(200%);
  34. }
  35. .v-window--show-arrows-on-hover:hover .v-window__left,
  36. .v-window--show-arrows-on-hover:hover .v-window__right {
  37. transform: translateX(0);
  38. }
  39. .v-window-x-transition-enter-active, .v-window-x-transition-leave-active, .v-window-x-reverse-transition-enter-active, .v-window-x-reverse-transition-leave-active, .v-window-y-transition-enter-active, .v-window-y-transition-leave-active, .v-window-y-reverse-transition-enter-active, .v-window-y-reverse-transition-leave-active {
  40. transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
  41. }
  42. .v-window-x-transition-leave-from, .v-window-x-transition-leave-to, .v-window-x-reverse-transition-leave-from, .v-window-x-reverse-transition-leave-to, .v-window-y-transition-leave-from, .v-window-y-transition-leave-to, .v-window-y-reverse-transition-leave-from, .v-window-y-reverse-transition-leave-to {
  43. position: absolute !important;
  44. top: 0;
  45. width: 100%;
  46. }
  47. .v-window-x-transition-enter-from {
  48. transform: translateX(100%);
  49. }
  50. .v-window-x-transition-leave-to {
  51. transform: translateX(-100%);
  52. }
  53. .v-window-x-reverse-transition-enter-from {
  54. transform: translateX(-100%);
  55. }
  56. .v-window-x-reverse-transition-leave-to {
  57. transform: translateX(100%);
  58. }
  59. .v-window-y-transition-enter-from {
  60. transform: translateY(100%);
  61. }
  62. .v-window-y-transition-leave-to {
  63. transform: translateY(-100%);
  64. }
  65. .v-window-y-reverse-transition-enter-from {
  66. transform: translateY(-100%);
  67. }
  68. .v-window-y-reverse-transition-leave-to {
  69. transform: translateY(100%);
  70. }