navigation-element.css 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. :host {
  2. --swiper-navigation-size: 44px;
  3. /*
  4. --swiper-navigation-top-offset: 50%;
  5. --swiper-navigation-sides-offset: 10px;
  6. --swiper-navigation-color: var(--swiper-theme-color);
  7. */
  8. }
  9. .swiper-button-prev,
  10. .swiper-button-next {
  11. position: absolute;
  12. top: var(--swiper-navigation-top-offset, 50%);
  13. width: calc(var(--swiper-navigation-size) / 44 * 27);
  14. height: var(--swiper-navigation-size);
  15. margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
  16. z-index: 10;
  17. cursor: pointer;
  18. display: flex;
  19. align-items: center;
  20. justify-content: center;
  21. color: var(--swiper-navigation-color, var(--swiper-theme-color));
  22. }
  23. .swiper-button-prev.swiper-button-disabled,
  24. .swiper-button-next.swiper-button-disabled {
  25. opacity: 0.35;
  26. cursor: auto;
  27. pointer-events: none;
  28. }
  29. .swiper-button-prev.swiper-button-hidden,
  30. .swiper-button-next.swiper-button-hidden {
  31. opacity: 0;
  32. cursor: auto;
  33. pointer-events: none;
  34. }
  35. .swiper-navigation-disabled .swiper-button-prev,
  36. .swiper-navigation-disabled .swiper-button-next {
  37. display: none !important;
  38. }
  39. .swiper-button-prev svg,
  40. .swiper-button-next svg {
  41. width: 100%;
  42. height: 100%;
  43. object-fit: contain;
  44. transform-origin: center;
  45. }
  46. .swiper-rtl .swiper-button-prev svg,
  47. .swiper-rtl .swiper-button-next svg {
  48. transform: rotate(180deg);
  49. }
  50. .swiper-button-prev,
  51. .swiper-rtl .swiper-button-next {
  52. left: var(--swiper-navigation-sides-offset, 10px);
  53. right: auto;
  54. }
  55. .swiper-button-next,
  56. .swiper-rtl .swiper-button-prev {
  57. right: var(--swiper-navigation-sides-offset, 10px);
  58. left: auto;
  59. }
  60. .swiper-button-lock {
  61. display: none;
  62. }
  63. /* Navigation font start *//* Navigation font end */