scrollbar.less 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. :root {
  2. /*
  3. --swiper-scrollbar-border-radius: 10px;
  4. --swiper-scrollbar-top: auto;
  5. --swiper-scrollbar-bottom: 4px;
  6. --swiper-scrollbar-left: auto;
  7. --swiper-scrollbar-right: 4px;
  8. --swiper-scrollbar-sides-offset: 1%;
  9. --swiper-scrollbar-bg-color: rgba(0, 0, 0, 0.1);
  10. --swiper-scrollbar-drag-bg-color: rgba(0, 0, 0, 0.5);
  11. --swiper-scrollbar-size: 4px;
  12. */
  13. }
  14. .swiper-scrollbar {
  15. border-radius: var(--swiper-scrollbar-border-radius, 10px);
  16. position: relative;
  17. -ms-touch-action: none;
  18. touch-action: none;
  19. background: var(--swiper-scrollbar-bg-color, rgba(0, 0, 0, 0.1));
  20. .swiper-scrollbar-disabled > &,
  21. &.swiper-scrollbar-disabled {
  22. display: none !important;
  23. }
  24. .swiper-horizontal > &,
  25. &.swiper-scrollbar-horizontal {
  26. position: absolute;
  27. left: var(--swiper-scrollbar-sides-offset, 1%);
  28. bottom: var(--swiper-scrollbar-bottom, 4px);
  29. top: var(--swiper-scrollbar-top, auto);
  30. z-index: 50;
  31. height: var(--swiper-scrollbar-size, 4px);
  32. width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
  33. }
  34. .swiper-vertical > &,
  35. &.swiper-scrollbar-vertical {
  36. position: absolute;
  37. left: var(--swiper-scrollbar-left, auto);
  38. right: var(--swiper-scrollbar-right, 4px);
  39. top: var(--swiper-scrollbar-sides-offset, 1%);
  40. z-index: 50;
  41. width: var(--swiper-scrollbar-size, 4px);
  42. height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
  43. }
  44. }
  45. .swiper-scrollbar-drag {
  46. height: 100%;
  47. width: 100%;
  48. position: relative;
  49. background: var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, 0.5));
  50. border-radius: var(--swiper-scrollbar-border-radius, 10px);
  51. left: 0;
  52. top: 0;
  53. }
  54. .swiper-scrollbar-cursor-drag {
  55. cursor: move;
  56. }
  57. .swiper-scrollbar-lock {
  58. display: none;
  59. }