navigation.scss 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  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. line-height: 1;
  32. }
  33. }
  34. .swiper-button-prev,
  35. .swiper-container-rtl .swiper-button-next {
  36. &:after {
  37. content: 'prev';
  38. }
  39. left: 10px;
  40. right: auto;
  41. }
  42. .swiper-button-next,
  43. .swiper-container-rtl .swiper-button-prev {
  44. &:after {
  45. content: 'next';
  46. }
  47. right: 10px;
  48. left: auto;
  49. }
  50. @each $navColorName, $navColorValue in $colors {
  51. .swiper-button-prev,
  52. .swiper-button-next {
  53. &.swiper-button-#{$navColorName} {
  54. --swiper-navigation-color: #{$navColorValue};
  55. }
  56. }
  57. }
  58. .swiper-button-lock {
  59. display: none;
  60. }