pagination-element.css 6.4 KB

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