1 files changed, 149 insertions, 0 deletions
diff --git a/src/style/scss/common/_animation.scss b/src/style/scss/common/_animation.scss
new file mode 100644
index 0000000..659bd3b
--- /dev/null
+++ b/src/style/scss/common/_animation.scss
@@ -0,0 +1,149 @@
+/***********************************************************************************
+ VERTICAL COLLAPSE-EXPEND TRANSITION ANIMATION PAIR.
+
+ We use the 'transition-vertical-collapse' for the collapse/idle block element,
+ and the 'transition-vertical-expand' to expend that element.
+
+ -important: The element that will be used for the animation should be
+ a block element, adn  have a content or width and height settings for it to work.
+*********************************************************************************/
+
+/**
+Enable to fold an expended block element
+@param $offsetY - The top position from which the drop down should fold
+ */
+@mixin keyframes-expand-animation($name, $maxHeight, $boxShadow:0 0 12px 0px rgba(0,0,0,.3), $margin:0){
+  @keyframes #{$name} {
+    0% {
+      opacity: 0;
+      max-height: 0;
+      overflow: hidden;
+      box-shadow: 0 0 0px 0px rgba(0,0,0,.3);
+      margin:0;
+    }
+    10% {
+      opacity: 1;
+      margin: $margin;
+    }
+    50% {
+      box-shadow: $boxShadow;
+    }
+    99%{
+      max-height:$maxHeight;
+
+      overflow: hidden;
+    }
+    100%{
+      opacity: 1;
+      max-height:$maxHeight;
+      overflow: auto;
+    }
+  }
+}
+
+/**
+Enable to expend a folded block element
+@param $maxHeight - most of the animation is done over the max-height property
+                    so we have to set the maximum height the expended element can expend to.
+ */
+@mixin keyframes-collapse-animation($name, $maxHeight, $boxShadow:0 0 12px 0px rgba(0,0,0,.3)){
+  @keyframes #{$name} {
+    0% {
+      opacity: 1;
+      max-height:$maxHeight;
+      box-shadow: $boxShadow;
+      overflow: hidden;
+    }
+    40%{
+      opacity: 1;
+    }
+    99%{
+      opacity: 0;
+      max-height: 0;
+      overflow: hidden;
+      box-shadow: 0 0 0px 0px rgba(0,0,0,.3);
+    }
+    100%{
+      opacity: 0;
+      max-height: 0;
+      overflow: auto;
+    }
+  }
+}
+
+/********************************************************************************
+  SIMPLE FADE-IN KEYFRAMES ANIMATION (Used in tooltip for example)
+
+  we use 'mixin-keyframes-fade-in-vertically' to create css @keyframes rule that
+  we later can use with animation property inside our prefered css rules:
+      .our_class {
+        ...
+          animation: keyframes-fade-in-vertically 1s ease-out;
+        ...
+      }
+*********************************************************************************/
+@mixin mixin-keyframes-fade-in-vertically($fromRelativeHeight, $keyframesName:keyframes-fade-in-vertically){
+  @keyframes #{$keyframesName} {
+    from {
+      transform: translateY($fromRelativeHeight);
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+}
+
+/********************************************************************************
+  SIMPLE FADE-OUT KEYFRAMES ANIMATION (Opposite of fade-in mixin above)
+*********************************************************************************/
+@mixin mixin-keyframes-fade-out-vertically($toRelativeHeight, $keyframesName:keyframes-fade-out-vertically){
+  @keyframes #{$keyframesName} {
+    from {
+      transform: translateY(0);
+      opacity: 1;
+    }
+    to {
+      transform: translateY($toRelativeHeight);
+      opacity: 0;
+    }
+  }
+}
+
+
+
+/********************************************************************************
+  RIPPLE ANIMATION (Used for ripple-click directive)
+*********************************************************************************/
+@keyframes ripple-animation {
+  from {
+    transform: scale(0,0);
+    opacity: 1;
+  }
+  to {
+    transform: scale(2,2);
+    opacity: 0;
+  }
+}
+
+.sdc-ripple-click__animated {
+  position:relative;
+}
+.sdc-ripple-click__animated::before{
+  display: inline-block;
+  position:absolute;
+  top: 0;
+  left: 0;
+  content: '';
+  animation: ripple-animation .3s ease-out; 
+  background-color: $blue;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  pointer-events: none;
+  opacity: 0;
+}
+
+
+