12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667 |
- @import './var.less';
- :root {
- --van-swipe-indicator-size: @swipe-indicator-size;
- --van-swipe-indicator-margin: @swipe-indicator-margin;
- --van-swipe-indicator-active-opacity: @swipe-indicator-active-opacity;
- --van-swipe-indicator-inactive-opacity: @swipe-indicator-inactive-opacity;
- --van-swipe-indicator-active-background-color: @swipe-indicator-active-background-color;
- --van-swipe-indicator-inactive-background-color: @swipe-indicator-inactive-background-color;
- }
- .van-swipe {
- position: relative;
- overflow: hidden;
- // https://github.com/vant-ui/vant/issues/9931
- transform: translateZ(0);
- cursor: grab;
- user-select: none;
- &__track {
- display: flex;
- height: 100%;
- &--vertical {
- flex-direction: column;
- }
- }
- &__indicators {
- position: absolute;
- bottom: var(--van-swipe-indicator-margin);
- left: 50%;
- display: flex;
- transform: translateX(-50%);
- &--vertical {
- top: 50%;
- bottom: auto;
- left: var(--van-swipe-indicator-margin);
- flex-direction: column;
- transform: translateY(-50%);
- .van-swipe__indicator:not(:last-child) {
- margin-bottom: var(--van-swipe-indicator-size);
- }
- }
- }
- &__indicator {
- width: var(--van-swipe-indicator-size);
- height: var(--van-swipe-indicator-size);
- background-color: var(--van-swipe-indicator-inactive-background-color);
- border-radius: 100%;
- opacity: var(--van-swipe-indicator-inactive-opacity);
- transition: opacity var(--van-animation-duration-fast),
- background-color var(--van-animation-duration-fast);
- &:not(:last-child) {
- margin-right: var(--van-swipe-indicator-size);
- }
- &--active {
- background-color: var(--van-swipe-indicator-active-background-color);
- opacity: var(--van-swipe-indicator-active-opacity);
- }
- }
- }
|