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%)
|