eSales Media Git repositories
Browse code

Refactor and rewrite as contao bundle

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

swiper.js version 6.3.3

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