From ada5bc9a23d852dee0a8968fd0bd98388e2ea180 Mon Sep 17 00:00:00 2001
From: gbaamonde <gusvodesign@gmail.com>
Date: Tue, 19 Mar 2019 16:47:43 -0300
Subject: [PATCH] feat: add classes to validate form.

animation to show the errors (optional)
---
 assets/scss/core/_base.scss | 80 ++++++++++++++++++++++++++++---------
 1 file changed, 61 insertions(+), 19 deletions(-)

diff --git a/assets/scss/core/_base.scss b/assets/scss/core/_base.scss
index fcbe3dd4..c8491f5e 100644
--- a/assets/scss/core/_base.scss
+++ b/assets/scss/core/_base.scss
@@ -29,9 +29,9 @@ label {
   border-color: $dp-color-lightgrey transparent transparent transparent;
   position: absolute;
   right: 15px;
-  top: 67%;
+  top: 2.5em;
   z-index: 10;
-  transform: translateY(-50%);
+  pointer-events: none;
 }
 
 select {
@@ -76,8 +76,8 @@ textarea {
     border: 1px solid $dp-color-yellow;
   }
 }
-/* validate */
-.required {
+/* validate form*/
+.field-group {
   position: relative;
   display: inline-block;
   text-align: left;
@@ -85,26 +85,68 @@ textarea {
   margin-bottom: 30px;
 }
 
-.error {
-  &:after {
-    left: 0;
-    top: 100%;
-    color: $dp-color-red;
-    content: attr(data-error);
-    font-size: $dp-font-size-small;
-    line-height: 20px;
-    padding: 0;
-    position: absolute;
-    text-transform: initial;
-    white-space: nowrap;
-    z-index: 1;
-  }
+.error-messages {
+  display: none;
+}
 
+.error {
   input,
   select,
   textarea {
     border: 1px solid $dp-color-red;
-    @include transition-all;
+  }
+
+  .error-messages {
+    display: inline-block;
+
+    p {
+      margin: 0;
+      color: $dp-color-red;
+      font-size: $dp-font-size-small;
+    }
+  }
+  /* animation to show the errors (optional) */
+  @keyframes bounceIn {
+    20%,
+    40%,
+    60%,
+    80%,
+    from,
+    to {
+      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    }
+
+    0% {
+      opacity: 0;
+      transform: scale3d(0.3, 0.3, 0.3);
+    }
+
+    20% {
+      transform: scale3d(1.1, 1.1, 1.1);
+    }
+
+    40% {
+      transform: scale3d(0.9, 0.9, 0.9);
+    }
+
+    60% {
+      opacity: 1;
+      transform: scale3d(1.03, 1.03, 1.03);
+    }
+
+    80% {
+      transform: scale3d(0.97, 0.97, 0.97);
+    }
+
+    to {
+      opacity: 1;
+      transform: scale3d(1, 1, 1);
+    }
+  }
+
+  .bounceIn {
+    animation-duration: 0.75s;
+    animation-name: bounceIn;
   }
 }