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
src/Resources/public/css/animate.scss
History View file @a95b6ce
1 1 
deleted file mode 100644
... ... 
@@ -1,70 +0,0 @@
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 
-}
Browse code

Big fix for animations

Benjamin Roth authored on24/04/2020 19:38:44
Showing1 changed files
src/Resources/public/css/animate.scss
History View file @d4641dc
... ... 
@@ -29,7 +29,7 @@
29 29 
   }
30 30 
 }
31 31
32 
-.iss-animated {
32 
+.is-animated {
33 33 
   &:not(.rs-columns):not(.animate-children) {
34 34 
     > *:not(.rs-columns) {
35 35 
       .-in-view& {
... ... 
@@ -44,11 +44,11 @@
44 44 
   &:not(.rs-columns):not(.animate-children) {
45 45 
     > *.rs-columns {
46 46 
       > * {
47 
-        .-in-view& {
47 
+        &.-in-view {
48 48 
           @include animation-start;
49 49 
         }
50 50
51 
-        :not(.-in-view)& > * {
51 
+        &:not(.-in-view) {
52 52 
           @include animation-presets;
53 53 
         }
54 54 
       }
... ... 
@@ -58,11 +58,11 @@
58 58 
   &.rs-columns,
59 59 
   &.animate-children {
60 60 
     > * {
61 
-      .-in-view& {
61 
+      &.-in-view {
62 62 
         @include animation-start;
63 63 
       }
64 64
65 
-      :not(.-in-view)& {
65 
+      &:not(.-in-view) {
66 66 
         @include animation-presets;
67 67 
       }
68 68 
     }
Browse code

Test something

Benjamin Roth authored on24/04/2020 19:08:25
Showing1 changed files
src/Resources/public/css/animate.scss
History View file @333b093
... ... 
@@ -29,7 +29,7 @@
29 29 
   }
30 30 
 }
31 31
32 
-.is-animated {
32 
+.iss-animated {
33 33 
   &:not(.rs-columns):not(.animate-children) {
34 34 
     > *:not(.rs-columns) {
35 35 
       .-in-view& {
Browse code

Fix css for animations

Benjamin Roth authored on24/04/2020 16:55:44
Showing1 changed files
src/Resources/public/css/animate.scss
History View file @537ac29
... ... 
@@ -30,7 +30,7 @@
30 30 
 }
31 31
32 32 
 .is-animated {
33 
-  &:not(.rs-columns) {
33 
+  &:not(.rs-columns):not(.animate-children) {
34 34 
     > *:not(.rs-columns) {
35 35 
       .-in-view& {
36 36 
         @include animation-start;
... ... 
@@ -41,14 +41,14 @@
41 41 
     }
42 42 
   }
43 43
44 
-  &:not(.rs-columns) {
44 
+  &:not(.rs-columns):not(.animate-children) {
45 45 
     > *.rs-columns {
46 46 
       > * {
47 
-        &.-in-view > * {
47 
+        .-in-view& {
48 48 
           @include animation-start;
49 49 
         }
50 50
51 
-        &:not(.-in-view) > * {
51 
+        :not(.-in-view)& > * {
52 52 
           @include animation-presets;
53 53 
         }
54 54 
       }
... ... 
@@ -58,11 +58,11 @@
58 58 
   &.rs-columns,
59 59 
   &.animate-children {
60 60 
     > * {
61 
-      &.-in-view > * {
61 
+      .-in-view& {
62 62 
         @include animation-start;
63 63 
       }
64 64
65 
-      &:not(.-in-view) > * {
65 
+      :not(.-in-view)& {
66 66 
         @include animation-presets;
67 67 
       }
68 68 
     }
Browse code

Finally support animation of child elements

Benjamin Roth authored on24/04/2020 16:28:31
Showing1 changed files
src/Resources/public/css/animate.scss
History View file @a0dba15
... ... 
@@ -55,7 +55,8 @@
55 55 
     }
56 56 
   }
57 57
58 
-  &.rs-columns {
58 
+  &.rs-columns,
59 
+  &.animate-children {
59 60 
     > * {
60 61 
       &.-in-view > * {
61 62 
         @include animation-start;
Browse code

Implement animation toolset for content elements

Benjamin Roth authored on24/04/2020 15:18:05
Showing1 changed files
src/Resources/public/css/animate.scss
History View file @823e2fe
1 1 
new file mode 100644
... ... 
@@ -0,0 +1,69 @@
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) {
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) {
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 
+    > * {
60 
+      &.-in-view > * {
61 
+        @include animation-start;
62 
+      }
63 
+
64 
+      &:not(.-in-view) > * {
65 
+        @include animation-presets;
66 
+      }
67 
+    }
68 
+  }
69 
+}