142 lines
2.9 KiB
Sass
142 lines
2.9 KiB
Sass
@use 'sass:selector'
|
|
@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%)
|
|
|
|
@at-root #{selector.append(':has(.v-window__controls--right)', &)}
|
|
.v-window__left
|
|
transform: translateX(200%)
|
|
|
|
.v-window__right
|
|
transform: translateX(200%)
|
|
|
|
@at-root #{selector.append(':has(.v-window__controls--left)', &)}
|
|
.v-window__right
|
|
transform: translateX(-200%)
|
|
|
|
&:hover
|
|
.v-window__left,
|
|
.v-window__right
|
|
transform: translateX(0)
|
|
|
|
&--vertical-arrows
|
|
.v-window__controls
|
|
flex-direction: column
|
|
justify-content: center
|
|
gap: $window-controls-vertical-gap
|
|
|
|
&--left
|
|
align-items: start
|
|
|
|
&--right
|
|
align-items: end
|
|
|
|
.v-window__left,
|
|
.v-window__right
|
|
.v-icon
|
|
transform: rotate(90deg)
|
|
|
|
&--crossfade > .v-window__container
|
|
isolation: isolate
|
|
|
|
> .v-window-item
|
|
mix-blend-mode: $window-crossfade-blend-mode
|
|
|
|
@include tools.layer('overrides')
|
|
.v-window-item
|
|
transition-duration: var(--v-window-transition-duration, revert-layer)
|
|
|
|
@include tools.layer('transitions')
|
|
.v-window
|
|
&-x-transition,
|
|
&-x-reverse-transition,
|
|
&-y-transition,
|
|
&-y-reverse-transition
|
|
&-enter-active,
|
|
&-leave-active
|
|
transition: $window-transition
|
|
|
|
@media (prefers-reduced-motion: reduce)
|
|
transition-duration: 0s
|
|
|
|
&-leave-from,
|
|
&-leave-to
|
|
position: absolute
|
|
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%)
|
|
|
|
.v-window
|
|
&-crossfade-transition
|
|
&-enter-active,
|
|
&-leave-active
|
|
transition: $window-transition
|
|
|
|
&-leave-from,
|
|
&-leave-to
|
|
position: absolute
|
|
top: 0
|
|
width: 100%
|
|
|
|
&-enter-from,
|
|
&-leave-to
|
|
opacity: 0
|