scrollbar-element.css 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. :host {
  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. touch-action: none;
  18. background: var(--swiper-scrollbar-bg-color, rgba(0, 0, 0, 0.1));
  19. }
  20. .swiper-scrollbar-disabled > .swiper-scrollbar,
  21. .swiper-scrollbar.swiper-scrollbar-disabled {
  22. display: none !important;
  23. }
  24. .swiper-horizontal > .swiper-scrollbar,
  25. .swiper-scrollbar.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 > .swiper-scrollbar,
  35. .swiper-scrollbar.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. .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. }