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