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.scss
History View file @cf51758
1 1 
deleted file mode 100644
... ... 
@@ -1,153 +0,0 @@
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: 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 
-/* 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 
-}
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.scss
History View file @6796b82
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: 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 
+/* 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 
+}