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