pagination.scss 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188
  1. @use '../swiper-vars.scss' as vars;
  2. @at-root {
  3. :root {
  4. /*
  5. --swiper-pagination-color: var(--swiper-theme-color);
  6. --swiper-pagination-left: auto;
  7. --swiper-pagination-right: 8px;
  8. --swiper-pagination-bottom: 8px;
  9. --swiper-pagination-top: auto;
  10. --swiper-pagination-fraction-color: inherit;
  11. --swiper-pagination-progressbar-bg-color: rgba(0,0,0,0.25);
  12. --swiper-pagination-progressbar-size: 4px;
  13. --swiper-pagination-bullet-size: 8px;
  14. --swiper-pagination-bullet-width: 8px;
  15. --swiper-pagination-bullet-height: 8px;
  16. --swiper-pagination-bullet-border-radius: 50%;
  17. --swiper-pagination-bullet-inactive-color: #000;
  18. --swiper-pagination-bullet-inactive-opacity: 0.2;
  19. --swiper-pagination-bullet-opacity: 1;
  20. --swiper-pagination-bullet-horizontal-gap: 4px;
  21. --swiper-pagination-bullet-vertical-gap: 6px;
  22. */
  23. }
  24. }
  25. .swiper-pagination {
  26. position: absolute;
  27. text-align: center;
  28. transition: 300ms opacity;
  29. transform: translate3d(0, 0, 0);
  30. z-index: 10;
  31. &.swiper-pagination-hidden {
  32. opacity: 0;
  33. }
  34. .swiper-pagination-disabled > &,
  35. &.swiper-pagination-disabled {
  36. display: none !important;
  37. }
  38. }
  39. /* Common Styles */
  40. .swiper-pagination-fraction,
  41. .swiper-pagination-custom,
  42. .swiper-horizontal > .swiper-pagination-bullets,
  43. .swiper-pagination-bullets.swiper-pagination-horizontal {
  44. bottom: var(--swiper-pagination-bottom, 8px);
  45. top: var(--swiper-pagination-top, auto);
  46. left: 0;
  47. width: 100%;
  48. }
  49. /* Bullets */
  50. .swiper-pagination-bullets-dynamic {
  51. overflow: hidden;
  52. font-size: 0;
  53. .swiper-pagination-bullet {
  54. transform: scale(0.33);
  55. position: relative;
  56. }
  57. .swiper-pagination-bullet-active {
  58. transform: scale(1);
  59. }
  60. .swiper-pagination-bullet-active-main {
  61. transform: scale(1);
  62. }
  63. .swiper-pagination-bullet-active-prev {
  64. transform: scale(0.66);
  65. }
  66. .swiper-pagination-bullet-active-prev-prev {
  67. transform: scale(0.33);
  68. }
  69. .swiper-pagination-bullet-active-next {
  70. transform: scale(0.66);
  71. }
  72. .swiper-pagination-bullet-active-next-next {
  73. transform: scale(0.33);
  74. }
  75. }
  76. .swiper-pagination-bullet {
  77. width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
  78. height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
  79. display: inline-block;
  80. border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
  81. background: var(--swiper-pagination-bullet-inactive-color, #000);
  82. opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
  83. @at-root button#{&} {
  84. border: none;
  85. margin: 0;
  86. padding: 0;
  87. box-shadow: none;
  88. appearance: none;
  89. }
  90. .swiper-pagination-clickable & {
  91. cursor: pointer;
  92. }
  93. &:only-child {
  94. display: none !important;
  95. }
  96. }
  97. .swiper-pagination-bullet-active {
  98. opacity: var(--swiper-pagination-bullet-opacity, 1);
  99. background: var(--swiper-pagination-color, var(--swiper-theme-color));
  100. }
  101. .swiper-vertical > .swiper-pagination-bullets,
  102. .swiper-pagination-vertical.swiper-pagination-bullets {
  103. right: var(--swiper-pagination-right, 8px);
  104. left: var(--swiper-pagination-left, auto);
  105. top: 50%;
  106. transform: translate3d(0px, -50%, 0);
  107. .swiper-pagination-bullet {
  108. margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
  109. display: block;
  110. }
  111. &.swiper-pagination-bullets-dynamic {
  112. top: 50%;
  113. transform: translateY(-50%);
  114. width: 8px;
  115. .swiper-pagination-bullet {
  116. display: inline-block;
  117. transition:
  118. 200ms transform,
  119. 200ms top;
  120. }
  121. }
  122. }
  123. .swiper-horizontal > .swiper-pagination-bullets,
  124. .swiper-pagination-horizontal.swiper-pagination-bullets {
  125. .swiper-pagination-bullet {
  126. margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
  127. }
  128. &.swiper-pagination-bullets-dynamic {
  129. left: 50%;
  130. transform: translateX(-50%);
  131. white-space: nowrap;
  132. .swiper-pagination-bullet {
  133. transition:
  134. 200ms transform,
  135. 200ms left;
  136. }
  137. }
  138. }
  139. .swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  140. transition:
  141. 200ms transform,
  142. 200ms right;
  143. }
  144. /* Fraction */
  145. .swiper-pagination-fraction {
  146. color: var(--swiper-pagination-fraction-color, inherit);
  147. }
  148. /* Progress */
  149. .swiper-pagination-progressbar {
  150. background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25));
  151. position: absolute;
  152. .swiper-pagination-progressbar-fill {
  153. background: var(--swiper-pagination-color, var(--swiper-theme-color));
  154. position: absolute;
  155. left: 0;
  156. top: 0;
  157. width: 100%;
  158. height: 100%;
  159. transform: scale(0);
  160. transform-origin: left top;
  161. }
  162. .swiper-rtl & .swiper-pagination-progressbar-fill {
  163. transform-origin: right top;
  164. }
  165. .swiper-horizontal > &,
  166. &.swiper-pagination-horizontal,
  167. .swiper-vertical > &.swiper-pagination-progressbar-opposite,
  168. &.swiper-pagination-vertical.swiper-pagination-progressbar-opposite {
  169. width: 100%;
  170. height: var(--swiper-pagination-progressbar-size, 4px);
  171. left: 0;
  172. top: 0;
  173. }
  174. .swiper-vertical > &,
  175. &.swiper-pagination-vertical,
  176. .swiper-horizontal > &.swiper-pagination-progressbar-opposite,
  177. &.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite {
  178. width: var(--swiper-pagination-progressbar-size, 4px);
  179. height: 100%;
  180. left: 0;
  181. top: 0;
  182. }
  183. }
  184. .swiper-pagination-lock {
  185. display: none;
  186. }