VWindow.sass 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. @use '../../styles/tools'
  2. @use './variables' as *
  3. @include tools.layer('components')
  4. .v-window
  5. overflow: hidden
  6. &__container
  7. display: flex
  8. flex-direction: column
  9. height: inherit
  10. position: relative
  11. transition: $window-transition
  12. &__controls
  13. position: absolute
  14. left: 0
  15. top: 0
  16. width: 100%
  17. height: 100%
  18. display: flex
  19. align-items: center
  20. justify-content: space-between
  21. padding: $window-controls-padding
  22. pointer-events: none
  23. > *
  24. pointer-events: auto
  25. &--show-arrows-on-hover
  26. overflow: hidden
  27. .v-window__left
  28. transform: translateX(-200%)
  29. .v-window__right
  30. transform: translateX(200%)
  31. &:hover
  32. .v-window__left,
  33. .v-window__right
  34. transform: translateX(0)
  35. @include tools.layer('transitions')
  36. .v-window
  37. &-x-transition,
  38. &-x-reverse-transition,
  39. &-y-transition,
  40. &-y-reverse-transition
  41. &-enter-active,
  42. &-leave-active
  43. transition: $window-transition
  44. &-leave-from,
  45. &-leave-to
  46. position: absolute !important
  47. top: 0
  48. width: 100%
  49. &-x-transition
  50. &-enter-from
  51. transform: translateX(100%)
  52. &-leave-to
  53. transform: translateX(-100%)
  54. &-x-reverse-transition
  55. &-enter-from
  56. transform: translateX(-100%)
  57. &-leave-to
  58. transform: translateX(100%)
  59. &-y-transition
  60. &-enter-from
  61. transform: translateY(100%)
  62. &-leave-to
  63. transform: translateY(-100%)
  64. &-y-reverse-transition
  65. &-enter-from
  66. transform: translateY(-100%)
  67. &-leave-to
  68. transform: translateY(100%)