feat(styled-components): fix little jump on validation icon appearance

Author: Ian Wensink

src/BaseInput/styled/validation-icon.js

@@ -6,15 +6,21 @@ export default styled.span`
   height: calc(${p => p.theme.spacingUnit} / 1.5);
   margin-left: calc(${p => p.theme.spacingUnit} / 1.5);
 
+  &::after {
+    content: '';
+    display: block;
+    width: 60%;
+    height: 100%;
+    border-bottom: 2px solid ${p => p.theme.successColor};
+    border-right: 2px solid ${p => p.theme.successColor};
+    transform: rotate(45deg) translateY(-4px);
+    transform: rotate(45deg) translateY(-4px);
+    opacity: 0;
+  }
+
   ${p => p.success && `
     &::after {
-      content: '';
-      display: block;
-      width: 60%;
-      height: 100%;
-      border-bottom: 2px solid ${p.theme.successColor};
-      border-right: 2px solid ${p.theme.successColor};
-      transform: rotate(45deg) translateY(-4px);
+      opacity: 1;
     }
   `}
 `;