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,64 @@
1
+@import '../../swiper-vars.scss';
2
+
3
+:root {
4
+  --swiper-navigation-size: 44px;
5
+  /*
6
+  --swiper-navigation-color: var(--swiper-theme-color);
7
+  */
8
+}
9
+.swiper-button-prev,
10
+.swiper-button-next {
11
+  position: absolute;
12
+  top: 50%;
13
+  width: calc(var(--swiper-navigation-size) / 44 * 27);
14
+  height: var(--swiper-navigation-size);
15
+  margin-top: calc(-1 * var(--swiper-navigation-size) / 2);
16
+  z-index: 10;
17
+  cursor: pointer;
18
+  display: flex;
19
+  align-items: center;
20
+  justify-content: center;
21
+  color: var(--swiper-navigation-color, var(--swiper-theme-color));
22
+  &.swiper-button-disabled {
23
+    opacity: 0.35;
24
+    cursor: auto;
25
+    pointer-events: none;
26
+  }
27
+  &:after {
28
+    font-family: swiper-icons;
29
+    font-size: var(--swiper-navigation-size);
30
+    text-transform: none !important;
31
+    letter-spacing: 0;
32
+    text-transform: none;
33
+    font-variant: initial;
34
+    line-height: 1;
35
+  }
36
+}
37
+.swiper-button-prev,
38
+.swiper-container-rtl .swiper-button-next {
39
+  &:after {
40
+    content: 'prev';
41
+  }
42
+  left: 10px;
43
+  right: auto;
44
+}
45
+.swiper-button-next,
46
+.swiper-container-rtl .swiper-button-prev {
47
+  &:after {
48
+    content: 'next';
49
+  }
50
+  right: 10px;
51
+  left: auto;
52
+}
53
+
54
+@each $navColorName, $navColorValue in $colors {
55
+  .swiper-button-prev,
56
+  .swiper-button-next {
57
+    &.swiper-button-#{$navColorName} {
58
+      --swiper-navigation-color: #{$navColorValue};
59
+    }
60
+  }
61
+}
62
+.swiper-button-lock {
63
+  display: none;
64
+}