fix(esl-animate): default print styles for esl-animate ootb animation

exadel-inc · Jul 1, 2023 · 3d4ea2a · 3d4ea2a
1 parent 9a2fc28
commit 3d4ea2a
Showing 1 changed file with 40 additions and 32 deletions.
diff --git a/src/modules/esl-animate/core/esl-animate-animations.less b/src/modules/esl-animate/core/esl-animate-animations.less
@@ -1,39 +1,47 @@
-.esl-animate-fade {
-  opacity: 0;
-  &.in {
-    opacity: 1;
-    transition: opacity 1.5s;
+@media screen {
+  .esl-animate-fade {
+    opacity: 0;
+
+    &.in {
+      opacity: 1;
+      transition: opacity 1.5s;
+    }
   }
-}
 
-.esl-animate-slide {
-  --esl-animation-offset-x: 0;
-  --esl-animation-offset-y: 0;
+  .esl-animate-slide {
+    --esl-animation-offset-x: 0;
+    --esl-animation-offset-y: 0;
 
-  opacity: 0;
-  transform: translate3d(var(--esl-animation-offset-x), var(--esl-animation-offset-y), 0);
 
-  &.in {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-    transition: transform 1s, opacity 1s;
-  }
-  &:not(.in) {
-    position: relative;
-    top: calc(~'-1 * var(--esl-animation-offset-y)');
-    left: calc(~'-1 * var(--esl-animation-offset-x)');
-  }
+    opacity: 0;
+    transform: translate3d(var(--esl-animation-offset-x), var(--esl-animation-offset-y), 0);
 
-  &.up {
-    --esl-animation-offset-y: 30px;
-  }
-  &.down {
-    --esl-animation-offset-y: -30px;
-  }
-  &.left {
-    --esl-animation-offset-x: 30px;
-  }
-  &.right {
-    --esl-animation-offset-x: -30px;
+    &.in {
+      opacity: 1;
+      transform: translate3d(0, 0, 0);
+      transition: transform 1s, opacity 1s;
+    }
+
+    &:not(.in) {
+      position: relative;
+      top: calc(~'-1 * var(--esl-animation-offset-y)');
+      left: calc(~'-1 * var(--esl-animation-offset-x)');
+    }
+
+    &.up {
+      --esl-animation-offset-y: 30px;
+    }
+
+    &.down {
+      --esl-animation-offset-y: -30px;
+    }
+
+    &.left {
+      --esl-animation-offset-x: 30px;
+    }
+
+    &.right {
+      --esl-animation-offset-x: -30px;
+    }
   }
 }