index.less 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. @import '../style/var';
  2. .van-swipe {
  3. position: relative;
  4. overflow: hidden;
  5. cursor: grab;
  6. user-select: none;
  7. &__track {
  8. display: flex;
  9. height: 100%;
  10. &--vertical {
  11. flex-direction: column;
  12. }
  13. }
  14. &__indicators {
  15. position: absolute;
  16. bottom: @swipe-indicator-margin;
  17. left: 50%;
  18. display: flex;
  19. transform: translateX(-50%);
  20. &--vertical {
  21. top: 50%;
  22. bottom: auto;
  23. left: @swipe-indicator-margin;
  24. flex-direction: column;
  25. transform: translateY(-50%);
  26. .van-swipe__indicator:not(:last-child) {
  27. margin-bottom: @swipe-indicator-size;
  28. }
  29. }
  30. }
  31. &__indicator {
  32. width: @swipe-indicator-size;
  33. height: @swipe-indicator-size;
  34. background-color: @swipe-indicator-inactive-background-color;
  35. border-radius: 100%;
  36. opacity: @swipe-indicator-inactive-opacity;
  37. transition: opacity @animation-duration-fast,
  38. background-color @animation-duration-fast;
  39. &:not(:last-child) {
  40. margin-right: @swipe-indicator-size;
  41. }
  42. &--active {
  43. background-color: @swipe-indicator-active-background-color;
  44. opacity: @swipe-indicator-active-opacity;
  45. }
  46. }
  47. }