less-rails-semantic_ui 1.7.3.0 → 1.8.0.0

data/assets/stylesheets/semantic_ui/themes/default/modules/modal.variables

@@ -5,6 +5,7 @@
 @background: @white;
 @border: none;
 @width: 90%;
+@zIndex: 1001;
 @xOffset: -(@width / 2);
 @borderRadius: @defaultBorderRadius;
 @boxShadow: 0 1px 4px 1px rgba(0, 0, 0, 0.3);
@@ -24,8 +25,8 @@
 /* Header */
 @headerMargin: 0em;
 @headerVerticalPadding: 1.2rem;
-@headerHorizontalpadding: 2rem;
-@headerPadding: @headerVerticalPadding @headerHorizontalpadding;
+@headerHorizontalPadding: 2rem;
+@headerPadding: @headerVerticalPadding @headerHorizontalPadding;
 @headerBackground: @subtleGradient @white;
 @headerColor: @darkTextColor;
 @headerFontSize: 1.6em;

data/assets/stylesheets/semantic_ui/themes/default/modules/popup.variables

@@ -6,7 +6,7 @@
        Element
 --------------------*/
 
-@zIndex: 900;
+@zIndex: 1900;
 @background: @white;
 
 @maxWidth: 250px;
@@ -60,8 +60,8 @@
        Coupling
 --------------------*/
 
-/* (padding * @medium) */
-@nestedGridMargin: -0.7rem -0.875rem;
+/* Grid Inside Popup */
+@nestedGridMargin: -0.7rem -0.875rem; /* (padding * @medium) */
 @nestedGridWidth: ~"calc(100% + 1.75rem)";
 
 /*-------------------

data/assets/stylesheets/semantic_ui/themes/default/modules/transition.overrides

@@ -1,250 +1,216 @@
 /*******************************
-           Animations
+          Transitions
 *******************************/
 
+/*
+  Some transitions adapted from Animate CSS
+  https://github.com/daneden/animate.css
+
+  Additional transitions adapted from Glide
+  by Nick Pettit - https://github.com/nickpettit/glide
+*/
+
 /*--------------
-    Emphasis
+     Browse
 ---------------*/
 
-.flash.transition {
-  animation-name: flash;
-}
-.shake.transition {
-  animation-name: shake;
-}
-.bounce.transition {
-  animation-name: bounce;
-}
-.tada.transition {
-  animation-name: tada;
+.browse.transition.in {
+  animation-name: browseIn;
 }
-/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
-.pulse.transition {
-  animation-name: pulse;
+.browse.transition.out,
+.browse.transition.out.left {
+  animation-name: browseOutLeft;
 }
-
-/* Flash */
-@keyframes flash {
-  0%, 50%, 100% {
-    opacity: 1;
-  }
-  25%, 75% {
-    opacity: 0;
-  }
+.browse.transition.out.right {
+  animation-name: browseOutRight;
 }
 
-/* Shake */
-@keyframes shake {
-  0%, 100% {
-    transform: translateX(0);
-  }
-  10%, 30%, 50%, 70%, 90% {
-    transform: translateX(-10px);
-  }
-  20%, 40%, 60%, 80% {
-    transform: translateX(10px);
+/* In */
+@keyframes browseIn {
+  0% {
+    transform: scale(0.8) translateZ(0px);
+    z-index: -1;
   }
-}
-
-/* Bounce */
-@keyframes bounce {
-  0%, 20%, 50%, 80%, 100% {
-    transform: translateY(0);
+  10% {
+    transform: scale(0.8) translateZ(0px);
+    z-index: -1;
+    opacity: 0.7;
   }
-  40% {
-    transform: translateY(-30px);
+  80% {
+    transform: scale(1.05) translateZ(0px);
+    opacity: 1;
+    z-index: 999;
   }
-  60% {
-    transform: translateY(-15px);
+  100% {
+    transform: scale(1) translateZ(0px);
+    z-index: 999;
   }
 }
 
-/* Tada */
-@keyframes tada {
+/* Out */
+@keyframes browseOutLeft {
   0% {
-    transform: scale(1);
-  }
-  10%, 20% {
-    transform: scale(0.9) rotate(-3deg);
+    z-index: 999;
+    transform: translateX(0%) rotateY(0deg) rotateX(0deg);
   }
-  30%, 50%, 70%, 90% {
-    transform: scale(1.1) rotate(3deg);
+  50% {
+    z-index: -1;
+    transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
   }
-  40%, 60%, 80% {
-    transform: scale(1.1) rotate(-3deg);
+  80% {
+    opacity: 1;
   }
   100% {
-    transform: scale(1) rotate(0);
+    z-index: -1;
+    transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
+    opacity: 0;
   }
 }
-
-/* Pulse */
-@keyframes pulse {
+@keyframes browseOutRight {
   0% {
-    transform: scale(1);
-    opacity: 1;
+    z-index: 999;
+    transform: translateX(0%) rotateY(0deg) rotateX(0deg);
   }
   50% {
-    transform: scale(0.9);
-    opacity: 0.7;
+    z-index: 1;
+    transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
   }
-  100% {
-    transform: scale(1);
+  80% {
     opacity: 1;
   }
-
+  100% {
+    z-index: 1;
+    transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
+    opacity: 0;
+  }
 }
 
 
 /*--------------
-     Slide
+     Drop
 ---------------*/
 
-.slide.down.transition.in {
-  animation-name: slideIn;
-  transform-origin: 50% 0%;
-  -ms-transform-origin: 50% 0%;
-  -webkit-transform-origin: 50% 0%;
-}
-.slide.down.transition.out {
-  animation-name: slideOut;
-  transform-origin: 50% 0%;
+.drop.transition {
+  transform-origin: top center;
+  animation-duration: 0.5s;
+  animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1);
 }
-
-.slide.up.transition.in {
-  animation-name: slideIn;
-  transform-origin: 50% 100%;
+.drop.transition.in {
+  animation-name: dropIn;
 }
-.slide.up.transition.out {
-  animation-name: slideOut;
-  transform-origin: 50% 100%;
+.drop.transition.out {
+  animation-name: dropOut;
 }
 
-@keyframes slideIn {
+/* Drop */
+@keyframes dropIn {
   0% {
     opacity: 0;
-    transform: scaleY(0);
+    transform: scale(0);
   }
   100% {
     opacity: 1;
-    transform: scaleY(1);
+    transform: scale(1);
   }
 }
-@keyframes slideOut {
+@keyframes dropOut {
   0% {
     opacity: 1;
-    transform: scaleY(1);
+    transform: scale(1);
   }
   100% {
     opacity: 0;
-    transform: scaleY(0);
+    transform: scale(0);
   }
 }
 
-
-
 /*--------------
-     Flips
+      Fade
 ---------------*/
 
-.flip.transition.in,
-.flip.transition.out {
-  perspective: 2000px;
+.transition.fade.in {
+  animation-name: fadeIn;
 }
-.horizontal.flip.transition.in {
-  animation-name: horizontalFlipIn;
+.transition.fade.in.up {
+  animation-name: fadeInUp;
 }
-.horizontal.flip.transition.out {
-  animation-name: horizontalFlipOut;
+.transition.fade.in.down {
+  animation-name: fadeInDown;
 }
-.vertical.flip.transition.in {
-  animation-name: verticalFlipIn;
+.transition.fade.in.left {
+  animation-name: fadeInLeft;
 }
-.vertical.flip.transition.out {
-  animation-name: verticalFlipOut;
+.transition.fade.in.right {
+  animation-name: fadeInRight;
 }
 
-/* Horizontal */
-@keyframes horizontalFlipIn {
+.transition.fade.out {
+  animation-name: fadeOut;
+}
+.transition.fade.out.up {
+  animation-name: fadeOutUp;
+}
+.transition.fade.out.down {
+  animation-name: fadeOutDown;
+}
+.transition.fade.out.left {
+  animation-name: fadeOutLeft;
+}
+.transition.fade.out.right {
+  animation-name: fadeOutRight;
+}
+
+/* In */
+@keyframes fadeIn {
   0% {
-    transform: rotateY(-90deg);
     opacity: 0;
   }
   100% {
-    transform: rotateY(0deg);
     opacity: 1;
   }
 }
-/* Horizontal */
-@keyframes horizontalFlipOut {
+@keyframes fadeInUp {
   0% {
-    transform: rotateY(0deg);
-    opacity: 1;
+    opacity: 0;
+    transform: translateY(10%);
   }
   100% {
-    transform: rotateY(90deg);
-    opacity: 0;
+    opacity: 1;
+    transform: translateY(0%);
   }
 }
-
-/* Vertical */
-@keyframes verticalFlipIn {
+@keyframes fadeInDown {
   0% {
-    transform: rotateX(-90deg);
     opacity: 0;
+    transform: translateY(-10%);
   }
   100% {
-    transform: rotateX(0deg);
     opacity: 1;
+    transform: translateY(0%);
   }
 }
-@keyframes verticalFlipOut {
+@keyframes fadeInLeft {
   0% {
-    transform: rotateX(0deg);
-    opacity: 1;
+    opacity: 0;
+    transform: translateX(10%);
   }
   100% {
-    transform: rotateX(-90deg);
-    opacity: 0;
+    opacity: 1;
+    transform: translateX(0%);
   }
 }
-
-/*--------------
-      Fades
----------------*/
-
-.fade.transition.in {
-  animation-name: fadeIn;
-}
-.fade.transition.out {
-  animation-name: fadeOut;
-}
-
-.fade.up.transition.in {
-  animation-name: fadeUpIn;
-}
-.fade.up.transition.out {
-  animation-name: fadeUpOut;
-}
-
-.fade.down.transition.in {
-  animation-name: fadeDownIn;
-}
-.fade.down.transition.out {
-  animation-name: fadeDownOut;
-}
-
-
-/* Fade */
-@keyframes fadeIn {
+@keyframes fadeInRight {
   0% {
     opacity: 0;
+    transform: translateX(-10%);
   }
   100% {
     opacity: 1;
+    transform: translateX(0%);
   }
 }
 
+/* Out */
 @keyframes fadeOut {
   0% {
     opacity: 1;
@@ -253,49 +219,109 @@
     opacity: 0;
   }
 }
-
-/* Fade Up */
-@keyframes fadeUpIn {
+@keyframes fadeOutUp {
   0% {
+    opacity: 1;
+    transform: translateY(0%);
+  }
+  100% {
     opacity: 0;
     transform: translateY(10%);
   }
-  100% {
+}
+@keyframes fadeOutDown {
+  0% {
     opacity: 1;
     transform: translateY(0%);
   }
+  100% {
+    opacity: 0;
+    transform: translateY(-10%);
+  }
 }
-
-@keyframes fadeUpOut {
+@keyframes fadeOutLeft {
   0% {
     opacity: 1;
-    transform: translateY(0%);
+    transform: translateX(0%);
   }
   100% {
     opacity: 0;
-    transform: translateY(10%);
+    transform: translateX(10%);
+  }
+}
+@keyframes fadeOutRight {
+  0% {
+    opacity: 1;
+    transform: translateX(0%);
   }
+  100% {
+    opacity: 0;
+    transform: translateX(-10%);
+  }
+}
+
+/*--------------
+     Flips
+---------------*/
+
+.flip.transition.in,
+.flip.transition.out {
+  perspective: 2000px;
+}
+.horizontal.flip.transition.in {
+  animation-name: horizontalFlipIn;
+}
+.horizontal.flip.transition.out {
+  animation-name: horizontalFlipOut;
+}
+.vertical.flip.transition.in {
+  animation-name: verticalFlipIn;
+}
+.vertical.flip.transition.out {
+  animation-name: verticalFlipOut;
 }
 
-/* Fade Down */
-@keyframes fadeDownIn {
+/* In */
+@keyframes horizontalFlipIn {
   0% {
+    transform: perspective(2000px) rotateY(-90deg);
     opacity: 0;
-    transform: translateY(-10%);
   }
   100% {
+    transform: perspective(2000px) rotateY(0deg);
     opacity: 1;
-    transform: translateY(0%);
   }
 }
-@keyframes fadeDownOut {
+@keyframes verticalFlipIn {
   0% {
+    transform: perspective(2000px) rotateX(-90deg);
+    opacity: 0;
+  }
+  100% {
+    transform: perspective(2000px) rotateX(0deg);
+    opacity: 1;
+  }
+}
+
+/* Out */
+@keyframes horizontalFlipOut {
+  0% {
+    transform: perspective(2000px) rotateY(0deg);
     opacity: 1;
-    transform: translateY(0%);
   }
   100% {
+    transform: perspective(2000px) rotateY(90deg);
+    opacity: 0;
+  }
+}
+@keyframes verticalFlipOut {
+  0% {
+    transform: perspective(2000px) rotateX(0deg);
+    opacity: 1;
+  }
+  100% {
+    transform: perspective(2000px) rotateX(-90deg);
     opacity: 0;
-    transform: translateY(-10%);
   }
 }
 
@@ -310,7 +336,7 @@
   animation-name: scaleOut;
 }
 
-/* Scale */
+/* In */
 @keyframes scaleIn {
   0% {
     opacity: 0;
@@ -321,6 +347,8 @@
     transform: scale(1);
   }
 }
+
+/* Out */
 @keyframes scaleOut {
   0% {
     opacity: 1;
@@ -333,113 +361,553 @@
 }
 
 /*--------------
-     Drop
+      Fly
 ---------------*/
 
-.drop.transition {
+.transition.fly {
+  animation-duration: 0.6s;
+  transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+}
+.transition.fly.in {
+  animation-name: flyIn;
+}
+.transition.fly.in.up {
+  animation-name: flyInUp;
+}
+.transition.fly.in.down {
+  animation-name: flyInDown;
+}
+.transition.fly.in.right {
+  animation-name: flyInRight;
+}
+.transition.fly.in.left {
+  animation-name: flyInLeft;
+}
+.transition.fly.out {
+  animation-name: flyOut;
+}
+.transition.fly.out.up {
+  animation-name: flyOutUp;
+}
+.transition.fly.out.down {
+  animation-name: flyOutDown;
+}
+.transition.fly.out.right {
+  animation-name: flyOutRight;
+}
+.transition.fly.out.left {
+  animation-name: flyOutLeft;
+}
+
+/* In */
+@keyframes flyIn {
+  0% {
+    opacity: 0;
+    transform: scale3d(.3, .3, .3);
+  }
+  20% {
+    transform: scale3d(1.1, 1.1, 1.1);
+  }
+  40% {
+    transform: scale3d(.9, .9, .9);
+  }
+  60% {
+    opacity: 1;
+    transform: scale3d(1.03, 1.03, 1.03);
+  }
+  80% {
+    transform: scale3d(.97, .97, .97);
+  }
+  100% {
+    opacity: 1;
+    transform: scale3d(1, 1, 1);
+  }
+}
+@keyframes flyInUp {
+  0% {
+    opacity: 0;
+    transform: translate3d(0, 1500px, 0);
+  }
+  60% {
+    opacity: 1;
+    transform: translate3d(0, -20px, 0);
+  }
+  75% {
+    transform: translate3d(0, 10px, 0);
+  }
+  90% {
+    transform: translate3d(0, -5px, 0);
+  }
+  100% {
+    transform: translate3d(0, 0, 0);
+  }
+}
+@keyframes flyInDown {
+  0% {
+    opacity: 0;
+    transform: translate3d(0, -1500px, 0);
+  }
+  60% {
+    opacity: 1;
+    transform: translate3d(0, 25px, 0);
+  }
+  75% {
+    transform: translate3d(0, -10px, 0);
+  }
+  90% {
+    transform: translate3d(0, 5px, 0);
+  }
+  100% {
+    transform: none;
+  }
+}
+@keyframes flyInLeft {
+  0% {
+    opacity: 0;
+    transform: translate3d(1500px, 0, 0);
+  }
+  60% {
+    opacity: 1;
+    transform: translate3d(-25px, 0, 0);
+  }
+  75% {
+    transform: translate3d(10px, 0, 0);
+  }
+  90% {
+    transform: translate3d(-5px, 0, 0);
+  }
+  100% {
+    transform: none;
+  }
+}
+@keyframes flyInRight {
+  0% {
+    opacity: 0;
+    transform: translate3d(-1500px, 0, 0);
+  }
+  60% {
+    opacity: 1;
+    transform: translate3d(25px, 0, 0);
+  }
+  75% {
+    transform: translate3d(-10px, 0, 0);
+  }
+  90% {
+    transform: translate3d(5px, 0, 0);
+  }
+  100% {
+    transform: none;
+  }
+}
+
+/* Out */
+@keyframes flyOut {
+  20% {
+    transform: scale3d(.9, .9, .9);
+  }
+  50%, 55% {
+    opacity: 1;
+    transform: scale3d(1.1, 1.1, 1.1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale3d(.3, .3, .3);
+  }
+}
+@keyframes flyOutUp {
+  20% {
+    transform: translate3d(0, 10px, 0);
+  }
+  40%, 45% {
+    opacity: 1;
+    transform: translate3d(0, -20px, 0);
+  }
+  100% {
+    opacity: 0;
+    transform: translate3d(0, 2000px, 0);
+  }
+}
+@keyframes flyOutDown {
+  20% {
+    transform: translate3d(0, -10px, 0);
+  }
+  40%, 45% {
+    opacity: 1;
+    transform: translate3d(0, 20px, 0);
+  }
+  100% {
+    opacity: 0;
+    transform: translate3d(0, -2000px, 0);
+  }
+}
+@keyframes flyOutRight {
+  20% {
+    opacity: 1;
+    transform: translate3d(20px, 0, 0);
+  }
+  100% {
+    opacity: 0;
+    transform: translate3d(-2000px, 0, 0);
+  }
+}
+@keyframes flyOutLeft {
+  20% {
+    opacity: 1;
+    transform: translate3d(-20px, 0, 0);
+  }
+  100% {
+    opacity: 0;
+    transform: translate3d(2000px, 0, 0);
+  }
+}
+
+/*--------------
+     Slide
+---------------*/
+
+.transition.slide.in,
+.transition.slide.in.down {
+  animation-name: slideInY;
   transform-origin: top center;
-  animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1);
 }
-.drop.transition.in {
-  animation-name: dropIn;
+.transition.slide.in.up {
+  animation-name: slideInY;
+  transform-origin: bottom center;
 }
-.drop.transition.out {
-  animation-name: dropOut;
+.transition.slide.in.left {
+  animation-name: slideInX;
+  transform-origin: center right;
+}
+.transition.slide.in.right {
+  animation-name: slideInX;
+  transform-origin: center left;
 }
 
-/* Scale */
-@keyframes dropIn {
+.transition.slide.out,
+.transition.slide.out.down {
+  animation-name: slideOutY;
+  transform-origin: top center;
+}
+.transition.slide.out.up {
+  animation-name: slideOutY;
+  transform-origin: bottom center;
+}
+.transition.slide.out.left {
+  animation-name: slideOutX;
+  transform-origin: center right;
+}
+.transition.slide.out.right {
+  animation-name: slideOutX;
+  transform-origin: center left;
+}
+
+/* In */
+@keyframes slideInY {
   0% {
     opacity: 0;
-    transform: scale(0);
+    transform: scaleY(0);
   }
   100% {
     opacity: 1;
-    transform: scale(1);
+    transform: scaleY(1);
   }
 }
-@keyframes dropOut {
+@keyframes slideInX {
   0% {
+    opacity: 0;
+    transform: scaleX(0);
+  }
+  100% {
     opacity: 1;
-    transform: scale(1);
+    transform: scaleX(1);
+  }
+}
+
+/* Out */
+@keyframes slideOutY {
+  0% {
+    opacity: 1;
+    transform: scaleY(1);
   }
   100% {
     opacity: 0;
-    transform: scale(0);
+    transform: scaleY(0);
+  }
+}
+@keyframes slideOutX {
+  0% {
+    opacity: 1;
+    transform: scaleX(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scaleX(0);
   }
 }
 
+
 /*--------------
-     Browse
+     Swing
 ---------------*/
 
-.browse.transition.in {
-  animation-name: browseIn;
-  animation-timing-function: ease;
+.transition.swing {
+  perspective: 1000px;
+  animation-duration: 0.5s;
+  transition-timing-function: ease-in;
 }
-.browse.transition.out,
-.browse.transition.out.left {
-  animation-name: browseOutLeft;
-  animation-timing-function: ease;
+.transition.swing.in,
+.transition.swing.in.down {
+  transform-origin: top center;
+  animation-name: swingInX;
 }
-.browse.transition.out.right {
-  animation-name: browseOutRight;
-  animation-timing-function: ease;
+.transition.swing.in.up {
+  transform-origin:bottom center;
+  animation-name: swingInX;
+}
+.transition.swing.in.left {
+  transform-origin: center right;
+  animation-name: swingInY;
+}
+.transition.swing.in.right {
+  transform-origin: center left;
+  animation-name: swingInY;
 }
 
-@keyframes browseIn {
+.transition.swing.out.down,
+.transition.swing.out {
+  transform-origin: top center;
+  animation-name: swingOutDown;
+}
+.transition.swing.out.up {
+  transform-origin:bottom center;
+  animation-name: swingOutUp;
+}
+.transition.swing.out.left {
+  transform-origin: center right;
+  animation-name: swingOutLeft;
+}
+.transition.swing.out.right {
+  transform-origin: center left;
+  animation-name: swingOutRight;
+}
+
+/* In */
+@keyframes swingInX {
   0% {
-    transform: scale(0.8) translateZ(0px);
-    z-index: -1;
+    transform: perspective(1000px) rotateX(90deg);
+    opacity: 0;
   }
-  10% {
-    transform: scale(0.8) translateZ(0px);
-    z-index: -1;
-    opacity: 0.7;
+  40% {
+    transform: perspective(1000px) rotateX(-20deg);
+  }
+  60% {
+    transform: perspective(1000px) rotateX(10deg);
   }
   80% {
-    transform: scale(1.05) translateZ(0px);
+    transform: perspective(1000px) rotateX(-5deg);
     opacity: 1;
-    z-index: 999;
   }
   100% {
-    transform: scale(1) translateZ(0px);
-    z-index: 999;
+    transform: perspective(1000px) rotateX(0deg);
   }
 }
-@keyframes browseOutLeft {
+@keyframes swingInY {
   0% {
-    z-index: 999;
-    transform: translateX(0%) rotateY(0deg) rotateX(0deg);
+    transform: perspective(1000px) rotateY(-90deg);
+    opacity: 0;
   }
-  50% {
-    z-index: -1;
-    transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
+  40% {
+    transform: perspective(1000px) rotateY(20deg);
+  }
+  60% {
+    transform: perspective(1000px) rotateY(-10deg);
   }
   80% {
+    transform: perspective(1000px) rotateY(5deg);
     opacity: 1;
   }
   100% {
-    z-index: -1;
-    transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
+    transform: perspective(1000px) rotateY(0deg);
+  }
+}
+
+/* Out */
+@keyframes swingOutUp {
+  0% {
+    transform: perspective(1000px) rotateX(0deg);
+  }
+  30% {
+    transform: perspective(1000px) rotateX(-20deg);
+    opacity:1;
+  }
+  100% {
+    transform: perspective(1000px) rotateX(90deg);
     opacity: 0;
   }
 }
-@keyframes browseOutRight {
+@keyframes swingOutDown {
   0% {
-    z-index: 999;
-    transform: translateX(0%) rotateY(0deg) rotateX(0deg);
+    transform: perspective(1000px) rotateX(0deg);
+  }
+  30% {
+    transform: perspective(1000px) rotateX(20deg);
+    opacity:1;
+  }
+  100% {
+    transform: perspective(1000px) rotateX(-90deg);
+    opacity: 0;
+  }
+}
+@keyframes swingOutLeft {
+  0% {
+    transform: perspective(1000px) rotateY(0deg);
+  }
+  30% {
+    transform: perspective(1000px) rotateY(20deg);
+    opacity:1;
+  }
+  100% {
+    transform: perspective(1000px) rotateY(-90deg);
+    opacity: 0;
+  }
+}
+@keyframes swingOutRight {
+  0% {
+    transform: perspective(1000px) rotateY(0deg);
+  }
+  30% {
+    transform: perspective(1000px) rotateY(-20deg);
+    opacity:1;
+  }
+  100% {
+    transform: perspective(1000px) rotateY(90deg);
+    opacity: 0;
+  }
+}
+
+/*******************************
+       Static Animations
+*******************************/
+
+/*--------------
+    Emphasis
+---------------*/
+
+.flash.transition {
+  animation-name: flash;
+}
+.shake.transition {
+  animation-name: shake;
+}
+.bounce.transition {
+  animation-name: bounce;
+}
+.tada.transition {
+  animation-name: tada;
+}
+.pulse.transition {
+  animation-name: pulse;
+}
+.jiggle.transition {
+  animation-name: jiggle;
+}
+
+/* Flash */
+@keyframes flash {
+  0%, 50%, 100% {
+    opacity: 1;
+  }
+  25%, 75% {
+    opacity: 0;
+  }
+}
+
+/* Shake */
+@keyframes shake {
+  0%, 100% {
+    transform: translateX(0);
+  }
+  10%, 30%, 50%, 70%, 90% {
+    transform: translateX(-10px);
+  }
+  20%, 40%, 60%, 80% {
+    transform: translateX(10px);
+  }
+}
+
+/* Bounce */
+@keyframes bounce {
+  0%, 20%, 50%, 80%, 100% {
+    transform: translateY(0);
+  }
+  40% {
+    transform: translateY(-30px);
+  }
+  60% {
+    transform: translateY(-15px);
+  }
+}
+
+/* Tada */
+@keyframes tada {
+  0% {
+    transform: scale(1);
+  }
+  10%, 20% {
+    transform: scale(0.9) rotate(-3deg);
+  }
+  30%, 50%, 70%, 90% {
+    transform: scale(1.1) rotate(3deg);
+  }
+  40%, 60%, 80% {
+    transform: scale(1.1) rotate(-3deg);
+  }
+  100% {
+    transform: scale(1) rotate(0);
+  }
+}
+
+/* Pulse */
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+    opacity: 1;
   }
   50% {
-    z-index: 1;
-    transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
+    transform: scale(0.9);
+    opacity: 0.7;
   }
-  80% {
+  100% {
+    transform: scale(1);
     opacity: 1;
   }
+
+}
+
+/* Rubberband */
+@keyframes jiggle {
+  0% {
+    transform: scale3d(1, 1, 1);
+  }
+  30% {
+    transform: scale3d(1.25, 0.75, 1);
+  }
+  40% {
+    transform: scale3d(0.75, 1.25, 1);
+  }
+  50% {
+    transform: scale3d(1.15, 0.85, 1);
+  }
+  65% {
+    transform: scale3d(.95, 1.05, 1);
+  }
+  75% {
+    transform: scale3d(1.05, .95, 1);
+  }
   100% {
-    z-index: 1;
-    transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
-    opacity: 0;
+    transform: scale3d(1, 1, 1);
   }
-}
+}
+
+
+