Browse code

Refactor and rewrite as contao bundle

Benjamin Roth authored on04/11/2022 22:32:32
Showing1 changed files
1 1
new file mode 100644
... ...
@@ -0,0 +1,153 @@
1
+@import '../../swiper-vars.scss';
2
+
3
+:root {
4
+  /*
5
+  --swiper-pagination-color: var(--swiper-theme-color);
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
+/* Common Styles */
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
+/* Bullets */
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: 50%;
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
+/* Progress */
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
+}