navigation.less 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. :root {
  2. --swiper-navigation-size: 44px;
  3. /*
  4. --swiper-navigation-color: var(--swiper-theme-color);
  5. */
  6. }
  7. .swiper-button-prev, .swiper-button-next {
  8. position: absolute;
  9. top: 50%;
  10. width: calc(var(--swiper-navigation-size) / 44 * 27);
  11. height: var(--swiper-navigation-size);
  12. margin-top: calc(-1 * var(--swiper-navigation-size) / 2);
  13. z-index: 10;
  14. cursor: pointer;
  15. display: flex;
  16. align-items: center;
  17. justify-content: center;
  18. color: var(--swiper-navigation-color, var(--swiper-theme-color));
  19. &.swiper-button-disabled {
  20. opacity: 0.35;
  21. cursor: auto;
  22. pointer-events: none;
  23. }
  24. &:after {
  25. font-family: swiper-icons;
  26. font-size: var(--swiper-navigation-size);
  27. text-transform: none !important;
  28. letter-spacing: 0;
  29. text-transform: none;
  30. font-variant: initial;
  31. }
  32. }
  33. .swiper-button-prev,
  34. .swiper-container-rtl .swiper-button-next {
  35. &:after {
  36. content: 'prev';
  37. }
  38. left: 10px;
  39. right: auto;
  40. }
  41. .swiper-button-next,
  42. .swiper-container-rtl .swiper-button-prev {
  43. &:after {
  44. content: 'next';
  45. }
  46. right: 10px;
  47. left: auto;
  48. }
  49. .navigation-color-loop({
  50. .swiper-button-prev,
  51. .swiper-button-next {
  52. &.swiper-button-@{navColorName} {
  53. --swiper-navigation-color: @navColorValue;
  54. }
  55. }
  56. });
  57. .swiper-button-lock {
  58. display: none;
  59. }