navigation.scss 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. @import '../../swiper-vars.scss';
  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. &:after {
  27. font-family: swiper-icons;
  28. font-size: var(--swiper-navigation-size);
  29. text-transform: none !important;
  30. letter-spacing: 0;
  31. text-transform: none;
  32. font-variant: initial;
  33. line-height: 1;
  34. }
  35. }
  36. .swiper-button-prev,
  37. .swiper-rtl .swiper-button-next {
  38. &:after {
  39. content: 'prev';
  40. }
  41. left: 10px;
  42. right: auto;
  43. }
  44. .swiper-button-next,
  45. .swiper-rtl .swiper-button-prev {
  46. &:after {
  47. content: 'next';
  48. }
  49. right: 10px;
  50. left: auto;
  51. }
  52. .swiper-button-lock {
  53. display: none;
  54. }