index.less 1.8 KB

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