From 8046fa036031a1f66aa4bf53a9e0c90bf9ffa9b3 Mon Sep 17 00:00:00 2001
From: Daniel <50356015+danny007in@users.noreply.github.com>
Date: Thu, 28 Jan 2021 01:07:47 +0530
Subject: [PATCH] animation added for preloader item

---
 build/scss/_animation-effects.scss |  14 ++++
 build/scss/_dropdown.scss          |  26 -------
 build/scss/_mixins.scss            |   1 +
 build/scss/_sidebar-mini.scss      |  20 -----
 build/scss/_variables.scss         |   2 +
 build/scss/mixins/_animations.scss | 119 +++++++++++++++++++++++++++++
 build/scss/parts/_core.scss        |   2 +
 7 files changed, 138 insertions(+), 46 deletions(-)
 create mode 100644 build/scss/_animation-effects.scss
 create mode 100644 build/scss/mixins/_animations.scss

diff --git a/build/scss/_animation-effects.scss b/build/scss/_animation-effects.scss
new file mode 100644
index 000000000..c896d3bdb
--- /dev/null
+++ b/build/scss/_animation-effects.scss
@@ -0,0 +1,14 @@
+//
+// Component: Animation
+//
+
+.animation {
+  &__shake {
+    animation: shake 1500ms;
+  }
+  &__wobble {
+    animation: wobble 1500ms;
+  }
+}
+
+//
diff --git a/build/scss/_dropdown.scss b/build/scss/_dropdown.scss
index d17b0dd38..1cd1f95fe 100644
--- a/build/scss/_dropdown.scss
+++ b/build/scss/_dropdown.scss
@@ -121,32 +121,6 @@
   backface-visibility: visible !important;
 }
 
-@keyframes flipInX {
-  0% {
-    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-    transition-timing-function: ease-in;
-    opacity: 0;
-  }
-
-  40% {
-    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-    transition-timing-function: ease-in;
-  }
-
-  60% {
-    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
-    opacity: 1;
-  }
-
-  80% {
-    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
-  }
-
-  100% {
-    transform: perspective(400px);
-  }
-}
-
 // Fix dropdown menu in navbars
 .navbar-custom-menu > .navbar-nav {
   > li {
diff --git a/build/scss/_mixins.scss b/build/scss/_mixins.scss
index 5beef917c..d6e8f5c52 100644
--- a/build/scss/_mixins.scss
+++ b/build/scss/_mixins.scss
@@ -2,6 +2,7 @@
 // General: Mixins
 //
 
+@import "mixins/animations";
 @import "mixins/cards";
 @import "mixins/sidebar";
 @import "mixins/navbar";
diff --git a/build/scss/_sidebar-mini.scss b/build/scss/_sidebar-mini.scss
index e25acdba8..40e531587 100644
--- a/build/scss/_sidebar-mini.scss
+++ b/build/scss/_sidebar-mini.scss
@@ -67,26 +67,6 @@
   }
 }
 
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes fadeOut {
-  from {
-    opacity: 1;
-  }
-
-  to {
-    opacity: 0;
-  }
-}
-
 .sidebar-mini,
 .sidebar-mini-md,
 .sidebar-mini-xs {
diff --git a/build/scss/_variables.scss b/build/scss/_variables.scss
index fd76e5f81..345b13f4d 100644
--- a/build/scss/_variables.scss
+++ b/build/scss/_variables.scss
@@ -50,6 +50,8 @@ $boxed-layout-max-width: 1250px !default;
 // Body background (Affects main content background only)
 $main-bg: #f4f6f9 !default;
 
+$dark-main-bg: lighten($dark, 7.5%) !important;
+
 // Content padding
 $content-padding-y: 0 !default;
 $content-padding-x: $navbar-padding-x !default;
diff --git a/build/scss/mixins/_animations.scss b/build/scss/mixins/_animations.scss
new file mode 100644
index 000000000..e8c67d813
--- /dev/null
+++ b/build/scss/mixins/_animations.scss
@@ -0,0 +1,119 @@
+//
+// Mixins: Animation
+//
+
+
+@keyframes flipInX {
+  0% {
+    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    transition-timing-function: ease-in;
+    opacity: 0;
+  }
+
+  40% {
+    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    transition-timing-function: ease-in;
+  }
+
+  60% {
+    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+    opacity: 1;
+  }
+
+  80% {
+    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+  }
+
+  100% {
+    transform: perspective(400px);
+  }
+}
+
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes shake {
+  0% {
+    transform: translate(2px, 1px) rotate(0deg);
+  }
+  10% {
+    transform: translate(-1px, -2px) rotate(-2deg);
+  }
+  20% {
+    transform: translate(-3px, 0) rotate(3deg);
+  }
+  30% {
+    transform: translate(0, 2px) rotate(0deg);
+  }
+  40% {
+    transform: translate(1px, -1px) rotate(1deg);
+  }
+  50% {
+    transform: translate(-1px, 2px) rotate(-1deg);
+  }
+  60% {
+    transform: translate(-3px, 1px) rotate(0deg);
+  }
+  70% {
+    transform: translate(2px, 1px) rotate(-2deg);
+  }
+  80% {
+    transform: translate(-1px, -1px) rotate(4deg);
+  }
+  90% {
+    transform: translate(2px, 2px) rotate(0deg);
+  }
+  100% {
+    transform: translate(1px, -2px) rotate(-1deg);
+  }
+}
+
+@keyframes wobble {
+  0% {
+    transform: none;
+  }
+
+  15% {
+    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
+  }
+
+  30% {
+    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
+  }
+
+  45% {
+    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
+  }
+
+  60% {
+    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
+  }
+
+  75% {
+    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
+  }
+
+  100% {
+    transform: none;
+  }
+}
+
+//
diff --git a/build/scss/parts/_core.scss b/build/scss/parts/_core.scss
index b1258dd2c..0dda2630a 100644
--- a/build/scss/parts/_core.scss
+++ b/build/scss/parts/_core.scss
@@ -2,6 +2,8 @@
 // Part: Core
 //
 
+@import "../animation-effects";
+@import "../preloader";
 @import "../layout";
 @import "../main-header";
 @import "../brand";