navigation.scss 1.5 KB

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