eSales Media Git repositories
Browse code

Modernize and adjust code to Contao 5

Benjamin Roth authored on26/10/2023 15:21:49
Showing1 changed files
public/css/animate.scss
History View file @a95b6ce
1 1 
new file mode 100644
... ... 
@@ -0,0 +1,70 @@
1 
+@import "helper";
2 
+
3 
+@mixin animation-start {
4 
+  @include transition(opacity 0.6s linear, transform 0.6s ease-out);
5 
+
6 
+  .-fade& {
7 
+    opacity: 1;
8 
+  }
9 
+  .-move& {
10 
+    @include transform(translate(0, 0));
11 
+  }
12 
+}
13 
+
14 
+@mixin animation-presets {
15 
+  .-fade& {
16 
+    opacity: 0;
17 
+  }
18 
+  .-move& {
19 
+    @include transform(translate(50px, 0));
20 
+  }
21 
+  .-move-right& {
22 
+    @include transform(translate(-50px, 0));
23 
+  }
24 
+  .-move-top& {
25 
+    @include transform(translate(0, 50px));
26 
+  }
27 
+  .-move-bottom& {
28 
+    @include transform(translate(0, -50px));
29 
+  }
30 
+}
31 
+
32 
+.is-animated {
33 
+  &:not(.rs-columns):not(.animate-children) {
34 
+    > *:not(.rs-columns) {
35 
+      .-in-view& {
36 
+        @include animation-start;
37 
+      }
38 
+      :not(.-in-view)& {
39 
+        @include animation-presets;
40 
+      }
41 
+    }
42 
+  }
43 
+
44 
+  &:not(.rs-columns):not(.animate-children) {
45 
+    > *.rs-columns {
46 
+      > * {
47 
+        &.-in-view {
48 
+          @include animation-start;
49 
+        }
50 
+
51 
+        &:not(.-in-view) {
52 
+          @include animation-presets;
53 
+        }
54 
+      }
55 
+    }
56 
+  }
57 
+
58 
+  &.rs-columns,
59 
+  &.animate-children {
60 
+    > * {
61 
+      &.-in-view {
62 
+        @include animation-start;
63 
+      }
64 
+
65 
+      &:not(.-in-view) {
66 
+        @include animation-presets;
67 
+      }
68 
+    }
69 
+  }
70 
+}