1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586 |
- @use '../../styles/tools'
- @use './variables' as *
- @include tools.layer('components')
- .v-window
- overflow: hidden
- &__container
- display: flex
- flex-direction: column
- height: inherit
- position: relative
- transition: $window-transition
- &__controls
- position: absolute
- left: 0
- top: 0
- width: 100%
- height: 100%
- display: flex
- align-items: center
- justify-content: space-between
- padding: $window-controls-padding
- pointer-events: none
- > *
- pointer-events: auto
- &--show-arrows-on-hover
- overflow: hidden
- .v-window__left
- transform: translateX(-200%)
- .v-window__right
- transform: translateX(200%)
- &:hover
- .v-window__left,
- .v-window__right
- transform: translateX(0)
- @include tools.layer('transitions')
- .v-window
- &-x-transition,
- &-x-reverse-transition,
- &-y-transition,
- &-y-reverse-transition
- &-enter-active,
- &-leave-active
- transition: $window-transition
- &-leave-from,
- &-leave-to
- position: absolute !important
- top: 0
- width: 100%
- &-x-transition
- &-enter-from
- transform: translateX(100%)
- &-leave-to
- transform: translateX(-100%)
- &-x-reverse-transition
- &-enter-from
- transform: translateX(-100%)
- &-leave-to
- transform: translateX(100%)
- &-y-transition
- &-enter-from
- transform: translateY(100%)
- &-leave-to
- transform: translateY(-100%)
- &-y-reverse-transition
- &-enter-from
- transform: translateY(-100%)
- &-leave-to
- transform: translateY(100%)
|