@varlet/ui/es/swipe/swipe.css

A Vue3 component library based on Material Design 2 and 3, supporting mobile and desktop.

:root { --swipe-indicator-color: #fff; --swipe-indicators-offset: 10px; --swipe-indicator-offset: 4px; --swipe-navigation-z-index: 9; --swipe-navigation-button-width: 36px; --swipe-navigation-button-height: 36px; --swipe-navigation-button-border-radius: 50%; --swipe-navigation-icon-size: 20px; --swipe-navigation-prev-left: 8px; --swipe-navigation-next-right: 8px; --swipe-navigation-prev-top: 8px; --swipe-navigation-next-bottom: 8px;}.var-swipe { position: relative; overflow: hidden; user-select: none; width: 100%;}.var-swipe__track { width: 100%; height: 100%; display: flex; transition-property: transform;}.var-swipe__navigation { position: absolute; top: 50%; z-index: var(--swipe-navigation-z-index);}.var-swipe__navigation-prev { left: 0; transform: translate(var(--swipe-navigation-prev-left), -50%);}.var-swipe__navigation-prev-button[var-swipe-cover] { width: var(--swipe-navigation-button-width); height: var(--swipe-navigation-button-height); border-radius: var(--swipe-navigation-button-border-radius);}.var-swipe__navigation-prev-button-icon[var-swipe-cover] { font-size: var(--swipe-navigation-icon-size);}.var-swipe__navigation-next { right: 0; transform: translate(calc(-1 * var(--swipe-navigation-next-right)), -50%);}.var-swipe__navigation-next-button[var-swipe-cover] { width: var(--swipe-navigation-button-width); height: var(--swipe-navigation-button-height); border-radius: var(--swipe-navigation-button-border-radius);}.var-swipe__navigation-next-button-icon[var-swipe-cover] { font-size: var(--swipe-navigation-icon-size);}.var-swipe__indicators { position: absolute; display: flex; bottom: var(--swipe-indicators-offset); left: 50%; transform: translateX(-50%);}.var-swipe__indicator { width: 8px; height: 8px; border-radius: 50%; background: var(--swipe-indicator-color); opacity: 0.3; margin: 0 var(--swipe-indicator-offset); transition: opacity 0.3s;}.var-swipe--vertical { flex-direction: column;}.var-swipe--indicators-vertical { flex-direction: column; left: var(--swipe-indicators-offset); bottom: 50%; transform: translateY(50%);}.var-swipe--indicator-active { opacity: 1;}.var-swipe--indicator-vertical { margin: var(--swipe-indicator-offset) 0;}.var-swipe--navigation-vertical-prev { top: 0; left: 50%; right: unset; transform: translate(-50%, var(--swipe-navigation-prev-top));}.var-swipe--navigation-vertical-next { bottom: 0; left: 50%; right: unset; top: unset; transform: translate(-50%, calc(-1 * var(--swipe-navigation-next-bottom)));}.var-swipe--navigation-prev-animation-enter-active,.var-swipe--navigation-prev-animation-leave-active { transition: transform 0.25s cubic-bezier(0.25, 0.8, 0.5, 1);}.var-swipe--navigation-prev-animation-enter-from,.var-swipe--navigation-prev-animation-leave-to { transform: translate(-100%, -50%);}.var-swipe--navigation-next-animation-enter-active,.var-swipe--navigation-next-animation-leave-active { transition: transform 0.25s cubic-bezier(0.25, 0.8, 0.5, 1);}.var-swipe--navigation-next-animation-enter-from,.var-swipe--navigation-next-animation-leave-to { transform: translate(100%, -50%);}.var-swipe--navigation-vertical-prev-animation-enter-active,.var-swipe--navigation-vertical-prev-animation-leave-active { transition: transform 0.25s cubic-bezier(0.25, 0.8, 0.5, 1);}.var-swipe--navigation-vertical-prev-animation-enter-from,.var-swipe--navigation-vertical-prev-animation-leave-to { transform: translate(-50%, -100%);}.var-swipe--navigation-vertical-next-animation-enter-active,.var-swipe--navigation-vertical-next-animation-leave-active { transition: transform 0.25s cubic-bezier(0.25, 0.8, 0.5, 1);}.var-swipe--navigation-vertical-next-animation-enter-from,.var-swipe--navigation-vertical-next-animation-leave-to { transform: translate(-50%, 100%);}