83 lines
1.4 KiB
Sass
83 lines
1.4 KiB
Sass
@use './variables' as *
|
|
|
|
.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)
|
|
|
|
&-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%)
|