scrollbar.less 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  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. background: var(--swiper-scrollbar-bg-color, rgba(0, 0, 0, 0.1));
  19. .swiper-scrollbar-disabled > &,
  20. &.swiper-scrollbar-disabled {
  21. display: none !important;
  22. }
  23. .swiper-horizontal > &,
  24. &.swiper-scrollbar-horizontal {
  25. position: absolute;
  26. left: var(--swiper-scrollbar-sides-offset, 1%);
  27. bottom: var(--swiper-scrollbar-bottom, 4px);
  28. top: var(--swiper-scrollbar-top, auto);
  29. z-index: 50;
  30. height: var(--swiper-scrollbar-size, 4px);
  31. width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
  32. }
  33. .swiper-vertical > &,
  34. &.swiper-scrollbar-vertical {
  35. position: absolute;
  36. left: var(--swiper-scrollbar-left, auto);
  37. right: var(--swiper-scrollbar-right, 4px);
  38. top: var(--swiper-scrollbar-sides-offset, 1%);
  39. z-index: 50;
  40. width: var(--swiper-scrollbar-size, 4px);
  41. height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
  42. }
  43. }
  44. .swiper-scrollbar-drag {
  45. height: 100%;
  46. width: 100%;
  47. position: relative;
  48. background: var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, 0.5));
  49. border-radius: var(--swiper-scrollbar-border-radius, 10px);
  50. left: 0;
  51. top: 0;
  52. }
  53. .swiper-scrollbar-cursor-drag {
  54. cursor: move;
  55. }
  56. .swiper-scrollbar-lock {
  57. display: none;
  58. }