navigation.less 1.3 KB

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