pagination.scss 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  1. @import '../../swiper-vars.scss';
  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: 200ms transform, 200ms top;
  118. }
  119. }
  120. }
  121. .swiper-horizontal > .swiper-pagination-bullets,
  122. .swiper-pagination-horizontal.swiper-pagination-bullets {
  123. .swiper-pagination-bullet {
  124. margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
  125. }
  126. &.swiper-pagination-bullets-dynamic {
  127. left: 50%;
  128. transform: translateX(-50%);
  129. white-space: nowrap;
  130. .swiper-pagination-bullet {
  131. transition: 200ms transform, 200ms left;
  132. }
  133. }
  134. }
  135. .swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
  136. :host(.swiper-horizontal.swiper-rtl) .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  137. transition: 200ms transform, 200ms right;
  138. }
  139. /* Fraction */
  140. .swiper-pagination-fraction {
  141. color: var(--swiper-pagination-fraction-color, inherit);
  142. }
  143. /* Progress */
  144. .swiper-pagination-progressbar {
  145. background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25));
  146. position: absolute;
  147. .swiper-pagination-progressbar-fill {
  148. background: var(--swiper-pagination-color, var(--swiper-theme-color));
  149. position: absolute;
  150. left: 0;
  151. top: 0;
  152. width: 100%;
  153. height: 100%;
  154. transform: scale(0);
  155. transform-origin: left top;
  156. }
  157. /*ADD_HOST*/
  158. .swiper-rtl & .swiper-pagination-progressbar-fill {
  159. transform-origin: right top;
  160. }
  161. .swiper-horizontal > &,
  162. &.swiper-pagination-horizontal,
  163. .swiper-vertical > &.swiper-pagination-progressbar-opposite,
  164. &.swiper-pagination-vertical.swiper-pagination-progressbar-opposite {
  165. width: 100%;
  166. height: var(--swiper-pagination-progressbar-size, 4px);
  167. left: 0;
  168. top: 0;
  169. }
  170. .swiper-vertical > &,
  171. &.swiper-pagination-vertical,
  172. .swiper-horizontal > &.swiper-pagination-progressbar-opposite,
  173. &.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite {
  174. width: var(--swiper-pagination-progressbar-size, 4px);
  175. height: 100%;
  176. left: 0;
  177. top: 0;
  178. }
  179. }
  180. .swiper-pagination-lock {
  181. display: none;
  182. }